@extends('layout')
@section('content')
    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">Add Event</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li>
                        <a href="{{ route('admin.dashboard') }}">Dashboard</a>
                    </li>
                    <li>
                        <a href="{{ route('events.index') }}">Events</a>
                    </li>
                    <li>
                        <a href="#">Add Event</a>
                    </li>
                </ul>
            </div>
            <div class="dashboard_main-actions">
                <div class="status_select-content">
                    <select class="form-control"name="status" form="eventForm">
                        @foreach ($statuses as $status)
                            @if ($status !== 'All')
                                <option value="{{ $status }}"
                                    {{ strtolower(old('status')) == strtolower($status) ? 'selected' : '' }}>
                                    {{ $status }}
                                </option>
                            @endif
                        @endforeach
                    </select>
                    <span class="select-preview"></span>
                </div>
            </div>
        </div>








        <div class="dashboard_main-body">
            <form id="eventForm" action="{{ route('events.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="accordion-list">
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Basic Information
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-grid">
                                    <div class="form-group float-label">
                                        <label class="form-label">
                                            Event Name
                                        </label>
                                        <input type="text" name='title' class="form-control" placeholder="Event Name"
                                            value="{{ old('title') }}" required />

                                        @error('title')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control" name="provider_id" required>
                                            <option hidden value="">Select Vendor</option>
                                            @foreach ($vendors as $vendor)
                                                <option value="{{ $vendor->id }}"
                                                    {{ old('provider_id') == $vendor->id ? 'selected' : '' }}>
                                                    {{ $vendor->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('provider_id')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control" name='type'>
                                            <option hidden value="">Event Type</option>
                                            @foreach ($types as $type)
                                                <option value="{{ $type }}"
                                                    {{ old('type') == $type ? 'selected' : '' }}>
                                                    {{ $type }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            It describes how the event is being held.
                                        </span>
                                        @error('type')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control" name='category'>
                                            <option hidden value="">Event Category</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category }}"
                                                    {{ old('category') == $category ? 'selected' : '' }}>
                                                    {{ $category }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            It describes what the event is about.
                                        </span>
                                        @error('category')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="form-group float-label full-w">
                                        <label class="form-label">
                                            Description
                                        </label>
                                        <textarea class="form-control" placeholder="Description" name='description'>{{ old('description') }}</textarea>
                                    </div>
                                    <div class="form-group full-w" id="imageUpload">
                                        <div class="file-uploader">
                                            <label class="file-upload-label">
                                                <input type="file" accept="image/*" name="image" />
                                                <div class="file-placeholder">
                                                    <span class="icon">
                                                        <img src="{{ asset('assets/images/icons/upload.svg') }}"
                                                            alt="icon" class="svg" />
                                                    </span>
                                                    <span class="text">
                                                        <u>Upload Cover Image</u> or drag and drop
                                                    </span>
                                                    <span class="hint">
                                                        SVG, PNG, JPG or GIF (max. 3MB)
                                                    </span>
                                                </div>
                                                <div class="file-preview"></div>
                                            </label>
                                            @error('image')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Dates & Location
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-grid">
                                    <div class="form-group date-input">
                                        <label class="form-label">
                                            Start Date
                                        </label>
                                        <div class="iconed-input">
                                            <i class="icon">
                                                <img src="{{ asset('assets/images/icons/calendar.svg') }}" alt="icon"
                                                    class="svg" />
                                            </i>
                                            <input name='start_date' type="date" class="form-control"
                                                placeholder="Start Date" value="{{ old('start_date') }}" required />
                                            @error('start_date')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group date-input">
                                        <label class="form-label">
                                            End Date
                                        </label>
                                        <div class="iconed-input">
                                            <i class="icon">
                                                <img src="{{ asset('assets/images/icons/calendar.svg') }}" alt="icon"
                                                    class="svg" />
                                            </i>
                                            <input name='end_date' type="date" class="form-control"
                                                placeholder="End Date" value="{{ old('end_date') }}" required />
                                            @error('end_date')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group date-input">
                                        <label class="form-label">
                                            Start Time
                                        </label>
                                        <div class="iconed-input">
                                            <i class="icon">
                                                <img src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                                    class="svg" />
                                            </i>
                                            <input name='start_time' type="time" class="form-control"
                                                placeholder="Start Time" value="{{ old('start_time') }}" required />
                                            @error('start_time')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group date-input">
                                        <label class="form-label">
                                            End Time
                                        </label>
                                        <div class="iconed-input">
                                            <i class="icon">
                                                <img src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                                    class="svg" />
                                            </i>
                                            <input name='end_time' type="time" class="form-control"
                                                placeholder="End Time" value="{{ old('end_time') }}" required />
                                            @error('end_time')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group float-label">
                                        <label class="form-label">
                                            Venue
                                        </label>
                                        <input name='venue' type="text" class="form-control" placeholder="Venue"
                                            value="{{ old('venue') }}" />
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            It describes how the event is being held.
                                        </span>
                                        @error('venue')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="form-group float-label">
                                        <label class="form-label">
                                            Location
                                        </label>
                                        <div class="location-content">
                                            <input name='location' type="text" class="form-control"
                                                placeholder="Location" id="locationInput" value="{{ old('location') }}"
                                                readonly required />
                                            <input name='lat' type="hidden" class="form-control" placeholder="Lat"
                                                id="lat" value="{{ old('lat') }}" readonly required />
                                            <input name='lon' type="hidden" class="form-control" placeholder="Lon"
                                                id="lon" value="{{ old('lon') }}" readonly required />
                                            <button type="button" class="form-icon open-modal" id="openModal">
                                                <img loading="lazy" src="{{ asset('assets/images/icons/location.svg') }}"
                                                    alt="icon" class="svg" />
                                            </button>
                                            <div class="modalContent" id="overlay">
                                                <div class="modal">
                                                    <div class="modal-map">
                                                        <div id="map"></div>
                                                        <button id="locationBtn" class="btn btn-danger" type="button">
                                                            <i>
                                                                <img src="{{ asset('assets/images/icons/location.svg') }}"
                                                                    alt="icon" class="svg" />
                                                            </i>
                                                            Current Location
                                                        </button>
                                                    </div>
                                                    <div class="form-buttons modal-buttons">
                                                        <button type="button" class="btn btn-primary" id="addLocation">
                                                            Add location
                                                        </button>
                                                        <button type="button" class="btn btn-reset" id="closeModal">
                                                            Cancel
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            Exactly Location
                                        </span>
                                        @error('location')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Tickets Information
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="repeater-fields">
                                    <div class="form-group">
                                        <select class="form-control ticket-type" placeholder="Select Tickets Type">
                                            <option value="" hidden selected>Select Tickets Type</option>
                                            @foreach ($tickets as $ticket)
                                                <option value="{{ $ticket->id }}">{{ $ticket->name }}</option>
                                            @endforeach
                                        </select>
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            Select from default types or customize the Type
                                        </span>
                                    </div>
                                    <div class="form-group float-label">
                                        <label class="form-label">Price</label>
                                        <input type="number" class="form-control ticket-price" placeholder="Price" />
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            Edit to Customize the default price
                                        </span>
                                    </div>
                                    <div class="form-group float-label">
                                        <label class="form-label">Quantity</label>
                                        <input type="number" class="form-control ticket-qty" placeholder="Quantity" />
                                    </div>
                                    <button type="button" id="add-ticket" class="form-icon">
                                        <img src="{{ asset('assets/images/icons/plus.svg') }}" alt="icon"
                                            class="svg" />
                                    </button>
                                </div>
                                @php
                                    $oldTickets = [];

                                    foreach (old() as $key => $value) {
                                        if (preg_match('/^ticket_(\d+)_(type|price|qty)$/', $key, $matches)) {
                                            $id = $matches[1];
                                            $field = $matches[2];
                                            $oldTickets[$id][$field] = $value;
                                        }
                                    }
                                @endphp
                                <table class="repeater-table table">
                                    <thead>
                                        <tr>
                                            <th>Ticket Type</th>
                                            <th>Price</th>
                                            <th>Quantity</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if (!empty($oldTickets))
                                            @foreach ($oldTickets as $ticketId => $ticket)
                                                <tr data-ticket-id="{{ $ticketId }}">
                                                    <td>
                                                        @php
                                                            $ticketName =
                                                                collect($tickets)->firstWhere('id', $ticket['type'])
                                                                    ->name ?? '';
                                                        @endphp
                                                        {{ $ticketName }}
                                                        <input type="hidden" name="ticket_{{ $ticketId }}_type"
                                                            value="{{ $ticket['type'] }}">
                                                    </td>
                                                    <td>
                                                        {{ $ticket['price'] }}
                                                        <input type="hidden" name="ticket_{{ $ticketId }}_price"
                                                            value="{{ $ticket['price'] }}">
                                                    </td>
                                                    <td>
                                                        {{ $ticket['qty'] }}
                                                        <input type="hidden" name="ticket_{{ $ticketId }}_qty"
                                                            value="{{ $ticket['qty'] }}">
                                                    </td>
                                                    <td>
                                                        <button type="button" class="delete-row">
                                                            <img src="{{ asset('assets/images/icons/trash.svg') }}"
                                                                alt="icon" class="svg" />
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Question Related To Event
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-grid">
                                    <div class="form-group full-w" id="questionSelect">
                                        <select class="form-control select-questions" placeholder="Select Questions">
                                            <option value="" hidden selected>Select Questions</option>
                                            @foreach ($questions as $question)
                                                <option value="{{ $question->id }}">{{ $question->question }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @php
                                        $oldQuestions = collect(old())
                                            ->filter(fn($v, $k) => Str::startsWith($k, 'question_'))
                                            ->values()
                                            ->map(
                                                fn($id) => [
                                                    'id' => $id,
                                                    'question' => optional($questions->firstWhere('id', $id))->question,
                                                ],
                                            )
                                            ->filter(fn($q) => !is_null($q['question']))
                                            ->toArray();
                                    @endphp
                                    <div class="tag-container full-w" id="tagContainer">
                                        @foreach ($oldQuestions ?? [] as $question)
                                            <input type="hidden" name="question_{{ $question['id'] }}"
                                                value="{{ $question['id'] }}" data-text="{{ $question['question'] }}">
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Event Setting
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-grid">
                                    <div class="form-group date-input">
                                        <label class="form-label">Registeration Deadline</label>
                                        <div class="iconed-input">
                                            <i class="icon">
                                                <img src="{{ asset('assets/images/icons/calendar.svg') }}" alt="icon"
                                                    class="svg" />
                                            </i>
                                            <input name='registeration_deadline' type="date" class="form-control"
                                                placeholder="Registeration Deadline"
                                                value="{{ old('registeration_deadline') }}" required />
                                        </div>
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            Registration closes on this date or once capacity is reached, whichever comes
                                            first
                                        </span>
                                        @error('registeration_deadline')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="form-group float-label">
                                        <label class="form-label">Maximum Capacity</label>
                                        <input name='max_capacity' type="number" class="form-control"
                                            placeholder="Maximum Capacity" value="{{ old('max_capacity') }}" required />
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            It describes how the event is being held.
                                        </span>
                                        @error('max_capacity')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="form-switchers">
                                        <div class="switcher">
                                            <label>
                                                <input type="checkbox" name='visable'
                                                    {{ old('visable') ? 'checked' : '' }} />
                                                <span class="slider"></span>
                                                <span class="text">Make this event visible to everyone.</span>
                                            </label>
                                        </div>
                                        <div class="switcher">
                                            <label>
                                                <input type="checkbox" name='waitlist'
                                                    {{ old('waitlist') ? 'checked' : '' }} />
                                                <span class="slider"></span>
                                                <span class="text">Enable waitlist when event is full</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Terms and Conditions
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-checkboxs">
                                    <div class="form-checkbox">
                                        <label>
                                            <input type="checkbox" name='terms' required />
                                            <span class="mark">
                                                <i class="fas fa-check"></i>
                                            </span>
                                            <span class="text">
                                                I agree to the
                                                <a href="#!">I have read and agree to the</a>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-buttons">
                    <button type="submit" name="action" value="publish" class="btn btn-primary">Create Vendor</button>
                    <button type="submit" name="action" value="draft" class="btn btn-secondary">Save as
                        Draft</button>
                    <a href="{{ route('events.index') }}" class="btn btn-reset">Cancel</a>
                </div>
            </form>
        </div>
    </div>







    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"
        integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous">
    </script>
    <script src="{{ asset('assets/js/svg.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script>
        const openModal = document.getElementById("openModal");
        const closeModal = document.getElementById("closeModal");
        const modalContent = document.getElementById("overlay");

        openModal.addEventListener("click", () => {
            modalContent.classList.add("active");
        });

        closeModal.addEventListener("click", () => {
            modalContent.classList.remove("active");
        });

        modalContent.addEventListener("click", (e) => {
            if (e.target === modalContent) {
                modalContent.classList.remove("active");
            }
        });
    </script>

    <script src="{{ asset('assets/js/map.js') }}"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWnEgtFGwE3ilBsQW4JA6fmep0HlpAky4&callback=initMap&libraries=places"
        async defer></script>

    <script>
        const selectEl = document.querySelector(
            ".status_select-content select"
        );
        const previewEl = document.querySelector(
            ".status_select-content .select-preview"
        );

        function updatePreview() {
            const value = selectEl.value;
            const lowerClass = value.toLowerCase();

            previewEl.className = "select-preview";

            if (lowerClass === "active") {
                previewEl.classList.add("active_status");
            } else {
                previewEl.classList.add(lowerClass);
            }

            previewEl.textContent = value;
        }

        updatePreview();

        selectEl.addEventListener("change", updatePreview);
    </script>

    {{-- Include JustValidate --}}
    <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const validation = new JustValidate("#eventForm", {
                validateBeforeSubmitting: true,
                focusInvalidField: true,
                errorFieldCssClass: "is-invalid",
                errorLabelStyle: {
                    color: "#fe3b29",
                    paddingTop: "4px",
                    fontSize: "12px",
                },
            });

            // Event Name
            validation.addField('[name="title"]', [{
                    rule: "required",
                    errorMessage: "Event name is required."
                },
                {
                    rule: "minLength",
                    value: 3,
                    errorMessage: "Event name must be at least 3 characters."
                },
                {
                    rule: "maxLength",
                    value: 255,
                    errorMessage: "Event name cannot exceed 255 characters."
                },
            ]);

            // Vendor
            validation.addField('[name="provider_id"]', [{
                rule: "required",
                errorMessage: "Please select a vendor."
            }, ]);

            // Event Type
            validation.addField('[name="type"]', [{
                rule: "required",
                errorMessage: "Please select an event type."
            }, ]);

            // Category
            validation.addField('[name="category"]', [{
                rule: "required",
                errorMessage: "Please select an event category."
            }, ]);

            // Start Date
            validation.addField('[name="start_date"]', [{
                rule: "required",
                errorMessage: "Start date is required."
            }, ]);

            // End Date
            validation.addField('[name="end_date"]', [{
                    rule: "required",
                    errorMessage: "End date is required."
                },
                {
                    validator: (value, fields) => {
                        const start = document.querySelector('[name="start_date"]').value;
                        if (!start || !value) return true;
                        return new Date(value) >= new Date(start);
                    },
                    errorMessage: "End date must be the same or later than the start date.",
                },
            ]);

            // Registration Deadline
            validation.addField('[name="registeration_deadline"]', [{
                    rule: "required",
                    errorMessage: "Registration deadline is required."
                },
                {
                    validator: (value, fields) => {
                        const start = document.querySelector('[name="start_date"]').value;
                        if (!start || !value) return true;
                        return new Date(value) <= new Date(start);
                    },
                    errorMessage: "Registration deadline must be on or before the start date.",
                },
            ]);

            // Start Time
            validation.addField('[name="start_time"]', [{
                rule: "required",
                errorMessage: "Start time is required."
            }, ]);

            // End Time
            validation.addField('[name="end_time"]', [{
                rule: "required",
                errorMessage: "End time is required."
            }]);

            // Max Capacity
            validation.addField('[name="max_capacity"]', [{
                    rule: "required",
                    errorMessage: "Maximum capacity is required."
                },
                {
                    rule: "number",
                    errorMessage: "Maximum capacity must be a valid number.",
                },
                {
                    validator: (value) => parseInt(value) >= 1,
                    errorMessage: "Maximum capacity must be at least 1.",
                },
            ]);

            // Cover Image
            validation.addField('[name="image"]', [{
                    rule: "maxFilesCount",
                    value: 1,
                    errorMessage: "Only one cover image can be uploaded.",
                },
                {
                    rule: "files",
                    value: {
                        files: {
                            extensions: ["jpeg", "jpg", "png", "gif", "webp", "svg"],
                            maxSize: 3000000, // 3 MB
                            minSize: 10000, // 10 KB
                            types: [
                                "image/jpeg",
                                "image/jpg",
                                "image/png",
                                "image/gif",
                                "image/webp",
                                "image/svg+xml",
                            ],
                        },
                    },
                    errorMessage: "Accepted formats: JPG, PNG, GIF, WEBP, or SVG (10 KB – 3 MB).",
                },
            ], {
                errorsContainer: document.getElementById("imageUpload"),
            });

            // Terms
            validation.addField('[name="terms"]', [{
                rule: "required",
                errorMessage: "You must agree to the terms and conditions."
            }, ], {
                errorsContainer: document.querySelector(".form-checkboxs"),
            });

            // Location
            const locationError = "Location is required.";
            validation
                .addField('[name="location"]', [{
                    rule: "required",
                    errorMessage: locationError
                }, ])
                .addField('[name="lat"]', [{
                        rule: "required",
                        errorMessage: locationError
                    },
                    {
                        rule: "number",
                        errorMessage: "Please select a valid location on the map."
                    },
                ])
                .addField('[name="lon"]', [{
                        rule: "required",
                        errorMessage: locationError
                    },
                    {
                        rule: "number",
                        errorMessage: "Please select a valid location on the map."
                    },
                ]);

            // Auto Revalidate on Date/Time Change
            ["start_date", "start_time"].forEach((name) => {
                document.querySelector(`[name='${name}']`).addEventListener("change", () => {
                    validation.revalidateField("[name='end_date']");
                    validation.revalidateField("[name='end_time']");
                });
            });

            // Expand accordion section if invalid
            validation.onFail((fields) => {
                expandInvalidFields(fields);
            });

            const form = document.getElementById("eventForm");
            form.addEventListener("input", () => {
                const invalidFields = document.querySelectorAll(".is-invalid");
                invalidFields.forEach((elem) => {
                    const parent = elem.closest(".accordion-body");
                    if (parent) parent.style.maxHeight = parent.scrollHeight + "px";
                });
            });
            form.addEventListener("change", () => {
                const invalidFields = document.querySelectorAll(".is-invalid");
                invalidFields.forEach((elem) => {
                    const parent = elem.closest(".accordion-body");
                    if (parent) parent.style.maxHeight = parent.scrollHeight + "px";
                });
            });
            function expandInvalidFields(fields) {
                Object.values(fields).forEach(({
                    elem
                }) => {
                    const parent = elem.closest(".accordion-body");
                    if (parent) parent.style.maxHeight = parent.scrollHeight + "px";
                });
            }
            // On success → submit the form
            validation.onSuccess((event) => {
                event.target.submit();
            });
        });
    </script>

@endsection