@extends('backend.app')

@section('title', 'List of Events')

@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <style>
        .dataTables_filter { display: none !important; }
        /* Seat map forced colors for dark-mode compatibility */
        .seat-grid-badge {
            border: none;
            border-radius: 4px;
            width: 30px;
            height: 30px;
            font-size: 10px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: opacity .15s;
        }
        .seat-grid-badge:hover:not([disabled]) { opacity: .8; }
        .seat-grid-badge[disabled] { cursor: not-allowed; opacity: .7; }
        .seat-row-wrap {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            margin-bottom: 8px;
            flex-wrap: nowrap;
        }
        .seat-row-label {
            font-weight: 700;
            font-size: 12px;
            min-width: 28px;
            width: auto;
            color: #333 !important;
            background: #e9ecef !important;
            border-radius: 4px;
            padding: 2px 6px;
            text-align: center;
            line-height: 26px;
            flex-shrink: 0;
        }
        /* Dark mode row label override */
        [data-bs-theme="dark"] .seat-row-label,
        .dark-mode .seat-row-label {
            color: #fff !important;
            background: #3f4254 !important;
        }
        .seat-row-seats { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; }
        .seat-map-wrap {
            max-height: 320px;
            overflow: auto;
            background: #f5f8fa;
            border: 1px solid #e4e6ef;
            border-radius: 8px;
            padding: 12px;
        }
        /* Dark mode seat map background */
        [data-bs-theme="dark"] .seat-map-wrap,
        .dark-mode .seat-map-wrap {
            background: #1e1e2d !important;
            border-color: #323248 !important;
        }
        /* Row delete button */
        .btn-delete-row {
            width: 22px; height: 22px;
            min-width: 22px;
            padding: 0;
            font-size: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        /* Responsive modal body scroll */
        @media (max-width: 576px) {
            .modal-body { padding: 12px !important; }
            .seat-row-label { font-size: 10px; min-width: 22px; width: auto; padding: 2px 4px; }
            .seat-grid-badge { width: 24px; height: 24px; font-size: 9px; }
        }
        /* Interactive status badge link styling */
        .update-status-btn {
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            border: 1px dashed transparent;
            display: inline-block;
        }
        .update-status-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
            border-color: currentColor;
            opacity: 0.85;
        }
        /* Seat status colors custom styling */
        .seat-status-available {
            background-color: #50cd89 !important;
            color: #ffffff !important;
        }
        .seat-status-held {
            background-color: #ffc700 !important;
            color: #181c32 !important;
        }
        .seat-status-booked {
            background-color: #7239ea !important;
            color: #ffffff !important;
        }
        .seat-status-pre-sold,
        .seat-status-pre_sold {
            background-color: #181c32 !important;
            color: #ffffff !important;
        }
        [data-bs-theme="dark"] .seat-status-pre-sold,
        [data-bs-theme="dark"] .seat-status-pre_sold,
        .dark-mode .seat-status-pre-sold,
        .dark-mode .seat-status-pre_sold {
            background-color: #474761 !important;
            color: #ffffff !important;
        }
        .seat-status-blocked {
            background-color: #f1416c !important;
            color: #ffffff !important;
        }
        .legend-color-box {
            width: 14px;
            height: 14px;
            display: inline-block;
            vertical-align: middle;
            border-radius: 3px;
            margin-right: 4px;
        }
        /* Event list header alignment and padding */
        #kt_table_events thead tr th {
            text-align: left !important;
            padding-left: 1.25rem !important;
        }
        #kt_table_events thead tr th:last-child {
            text-align: center !important;
            padding-right: 1.25rem !important;
        }

        /* Event list row cell padding and rounded corners */
        #kt_table_events tbody tr td {
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
        }
        #kt_table_events tbody tr td:first-child {
            padding-left: 1.25rem !important;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        #kt_table_events tbody tr td:last-child {
            padding-right: 1.25rem !important;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        /* Reset dropdown menu styling to protect it from row colors and stacking context issues */
        #kt_table_events tbody tr td .menu-sub-dropdown {
            background-color: #ffffff !important;
            z-index: 105 !important;
        }
        [data-bs-theme="dark"] #kt_table_events tbody tr td .menu-sub-dropdown,
        .dark-mode #kt_table_events tbody tr td .menu-sub-dropdown {
            background-color: #1e1e2d !important;
        }
        #kt_table_events tbody tr td .menu-link {
            color: #5e6278 !important;
        }
        #kt_table_events tbody tr td .menu-link:hover {
            background-color: #f5f8fa !important;
            color: #009ef7 !important;
        }
        [data-bs-theme="dark"] #kt_table_events tbody tr td .menu-link:hover,
        .dark-mode #kt_table_events tbody tr td .menu-link:hover {
            background-color: #212e36 !important;
            color: #009ef7 !important;
        }
        #kt_table_events tbody tr td .menu-link.text-danger {
            color: #f1416c !important;
        }
        #kt_table_events tbody tr td .menu-link.text-danger:hover {
            background-color: #fff5f8 !important;
            color: #d9214e !important;
        }
        [data-bs-theme="dark"] #kt_table_events tbody tr td .menu-link.text-danger:hover,
        .dark-mode #kt_table_events tbody tr td .menu-link.text-danger:hover {
            background-color: #3a242c !important;
            color: #f1416c !important;
        }

        /* Light mode row status colors */
        #kt_table_events tbody tr.event-row-passed td {
            background-color: #e9ecef !important;
            color: #7e8299 !important;
        }
        #kt_table_events tbody tr.event-row-draft td {
            background-color: #deebff !important;
            color: #0b5ed7 !important;
        }
        #kt_table_events tbody tr.event-row-published td {
            background-color: #d1e7dd !important;
            color: #0f5132 !important;
        }
        #kt_table_events tbody tr.event-row-cancelled td {
            background-color: #f8d7da !important;
            color: #842029 !important;
        }

        /* Dark mode row status colors */
        [data-bs-theme="dark"] #kt_table_events tbody tr.event-row-passed td,
        .dark-mode #kt_table_events tbody tr.event-row-passed td {
            background-color: #2b2b40 !important;
            color: #7e8299 !important;
        }
        [data-bs-theme="dark"] #kt_table_events tbody tr.event-row-draft td,
        .dark-mode #kt_table_events tbody tr.event-row-draft td {
            background-color: #213346 !important;
            color: #70b9eb !important;
        }
        [data-bs-theme="dark"] #kt_table_events tbody tr.event-row-published td,
        .dark-mode #kt_table_events tbody tr.event-row-published td {
            background-color: #1e3a2f !important;
            color: #50cd89 !important;
        }
        [data-bs-theme="dark"] #kt_table_events tbody tr.event-row-cancelled td,
        .dark-mode #kt_table_events tbody tr.event-row-cancelled td {
            background-color: #3b202c !important;
            color: #f1416c !important;
        }
    </style>
@endpush

@section('content')
    <div class="content fs-6 d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Toolbar-->
        <div class="toolbar" id="kt_toolbar">
            <div class="container-fluid d-flex flex-stack flex-wrap flex-sm-nowrap">
                <div class="d-flex flex-column align-items-start justify-content-center flex-wrap me-2">
                    <h1 class="text-dark fw-bold my-1 fs-2">List of Events</h1>
                    <ul class="breadcrumb fw-semibold fs-base my-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <li class="breadcrumb-item text-dark">Events</li>
                    </ul>
                </div>
            </div>
        </div>
        <!--end::Toolbar-->

        <!--begin::Post-->
        <div class="post fs-6 d-flex flex-column-fluid" id="kt_post">
            <div class="container-xxl">
                <div class="card">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-6">
                        <div class="card-title">
                            <div class="d-flex align-items-center position-relative my-1">
                                <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5">
                                    <span class="path1"></span><span class="path2"></span>
                                </i>
                                <input type="text" data-kt-event-table-filter="search"
                                    class="form-control form-control-solid w-250px ps-13" placeholder="Search events">
                            </div>
                        </div>
                        <div class="card-toolbar">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#kt_modal_add_event">
                                <i class="ki-duotone ki-plus fs-2"></i> Add Event
                            </button>
                        </div>
                    </div>
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_events">
                                <thead>
                                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                        <th>Sl.</th>
                                        <th>Banner</th>
                                        <th>Title</th>
                                        <th>Event Date</th>
                                        <th>City</th>
                                        <th>Status</th>
                                        <th class="text-center min-w-100px">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="text-gray-600 fw-semibold">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--end::Card body-->
                </div>
            </div>
        </div>
        <!--end::Post-->
    </div>

    <!-- Add Event Modal -->
    <div class="modal fade" id="kt_modal_add_event" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="fw-bold">Add Event</h2>
                    <button type="button" class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                    </button>
                </div>
                <div class="modal-body px-5 my-7">
                    <form id="kt_modal_add_event_form" method="POST" enctype="multipart/form-data" class="form">
                        @csrf
                        <div class="d-flex flex-column scroll-y px-5 px-lg-10" style="max-height: 400px; overflow-y: auto;">
                            <div class="fv-row mb-7">
                                <label class="required fw-semibold fs-6 mb-2">Title</label>
                                <input class="form-control form-control-solid" type="text" name="title" required placeholder="Enter event title">
                            </div>
                            {{-- <div class="fv-row mb-7">
                                <label class="fw-semibold fs-6 mb-2">Slug (optional)</label>
                                <input class="form-control form-control-solid" type="text" name="slug" placeholder="Will be auto-generated if blank">
                            </div> --}}
                            <div class="fv-row mb-7">
                                <label class="fw-semibold fs-6 mb-2">Banner Image</label>
                                <input class="form-control form-control-solid" type="file" name="banner_image" accept="image/*">
                            </div>
                            <div class="fv-row mb-7">
                                <label class="fw-semibold fs-6 mb-2">Description</label>
                                <textarea class="form-control form-control-solid" name="description" rows="3" placeholder="Enter long description"></textarea>
                            </div>
                            <div class="row">
                                <div class="col-md-6 fv-row mb-7">
                                    <label class="required fw-semibold fs-6 mb-2">Event Date</label>
                                    <input class="form-control form-control-solid" type="date" name="event_date" required min="{{ date('Y-m-d') }}">
                                </div>
                                <div class="col-md-6 fv-row mb-7">
                                    <label class="required fw-semibold fs-6 mb-2">Start Time</label>
                                    <input class="form-control form-control-solid" type="time" name="start_time" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 fv-row mb-7">
                                    <label class="fw-semibold fs-6 mb-2">Door Open Time</label>
                                    <input class="form-control form-control-solid" type="time" name="door_open_time">
                                </div>
                                <div class="col-md-6 fv-row mb-7">
                                    <label class="fw-semibold fs-6 mb-2">City</label>
                                    <input class="form-control form-control-solid" type="text" name="city" placeholder="City name">
                                </div>
                            </div>
                            <div class="fv-row mb-7">
                                <label class="fw-semibold fs-6 mb-2">Address</label>
                                <input class="form-control form-control-solid" type="text" name="address" placeholder="Venue Address">
                            </div>
                        </div>
                        <div class="text-center pt-10">
                            <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Discard</button>
                            <button type="submit" class="btn btn-primary">
                                <span class="indicator-label">Submit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Event Modal -->
    <div class="modal fade" id="kt_modal_edit_event" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="fw-bold">Edit Event</h2>
                    <button type="button" class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                    </button>
                </div>
                <div class="modal-body px-5 my-7">
                    <form id="kt_modal_edit_event_form" method="POST" enctype="multipart/form-data" class="form">
                        @csrf
                        <div class="d-flex flex-column scroll-y px-5 px-lg-10" style="max-height: 420px; overflow-y: auto;">
                            <div class="fv-row mb-7">
                                <label class="required fw-semibold fs-6 mb-2">Title</label>
                                <input class="form-control form-control-solid" type="text" name="title" id="edit_title" required>
                            </div>
                            {{-- <div class="fv-row mb-7">
                                <label class="fw-semibold fs-6 mb-2">Slug</label>
                                <input class="form-control form-control-solid" type="text" name="slug" id="edit_slug">
                            </div> --}}
                            <div class="fv-row mb-7">
                                <label class="fw-semibold fs-6 mb-2">Banner Image <small class="text-muted">(leave blank to keep existing)</small></label>
                                <input class="form-control form-control-solid" type="file" name="banner_image" accept="image/*">
                            </div>
                            <div class="fv-row mb-7">
                                <label class="fw-semibold fs-6 mb-2">Description</label>
                                <textarea class="form-control form-control-solid" name="description" id="edit_description" rows="3"></textarea>
                            </div>
                            <div class="row">
                                <div class="col-md-6 fv-row mb-7">
                                    <label class="required fw-semibold fs-6 mb-2">Event Date</label>
                                    <input class="form-control form-control-solid" type="date" name="event_date" id="edit_event_date" required>
                                </div>
                                <div class="col-md-6 fv-row mb-7">
                                    <label class="required fw-semibold fs-6 mb-2">Start Time</label>
                                    <input class="form-control form-control-solid" type="time" name="start_time" id="edit_start_time" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 fv-row mb-7">
                                    <label class="fw-semibold fs-6 mb-2">Door Open Time</label>
                                    <input class="form-control form-control-solid" type="time" name="door_open_time" id="edit_door_open_time">
                                </div>
                                <div class="col-md-6 fv-row mb-7">
                                    <label class="fw-semibold fs-6 mb-2">City</label>
                                    <input class="form-control form-control-solid" type="text" name="city" id="edit_city" placeholder="City name">
                                </div>
                            </div>
                            <div class="fv-row mb-7">
                                <label class="fw-semibold fs-6 mb-2">Address</label>
                                <input class="form-control form-control-solid" type="text" name="address" id="edit_address" placeholder="Venue Address">
                            </div>
                        </div>
                        <div class="text-center pt-10">
                            <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Discard</button>
                            <button type="submit" class="btn btn-primary">
                                <span class="indicator-label">Save Changes</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Manage Gallery Modal -->
    <div class="modal fade" id="kt_modal_manage_gallery" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="fw-bold">Manage Event Gallery</h2>
                    <button type="button" class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                    </button>
                </div>
                <div class="modal-body px-5 my-7">
                    <form id="kt_modal_upload_gallery_form" method="POST" enctype="multipart/form-data" class="form mb-8">
                        @csrf
                        <div class="fv-row mb-5">
                            <label class="required fw-semibold fs-6 mb-2">Upload Images (select one or multiple)</label>
                            <input class="form-control form-control-solid" type="file" name="images[]" multiple required accept="image/*">
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm">Upload to Gallery</button>
                    </form>

                    <h4 class="fw-bold mb-4">Current Gallery Images</h4>
                    <div id="event_gallery_container" class="row g-3" style="max-height: 300px; overflow-y: auto;">
                        <!-- Populate dynamically -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Manage Seats Modal (Single Form — simplified) -->
    <div class="modal fade" id="kt_modal_manage_seats" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h2 class="fw-bold mb-0">Manage Event Seats</h2>
                        <div id="seats_event_status_badge" class="mt-1"></div>
                    </div>
                    <button type="button" class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                    </button>
                </div>
                <div class="modal-body px-7 py-6">

                    {{-- Draft-only notice --}}
                    <div id="seats_draft_notice" class="alert alert-warning d-none mb-5" role="alert">
                        <strong>Read-only.</strong> Seat generation is disabled for <em>published</em> or <em>cancelled</em> events.
                        To make changes, set the event back to <strong>Draft</strong> from the list.
                    </div>

                    {{-- Pricing Settings Card --}}
                    <form id="kt_update_pricing_form" class="form mb-6" novalidate>
                        @csrf
                        <div class="card card-bordered">
                            <div class="card-header min-h-50px">
                                <h3 class="card-title fs-6 fw-bold text-gray-700">Pricing Settings</h3>
                            </div>
                            <div class="card-body pt-4">
                                <div class="row g-4 align-items-end">
                                    <div class="col-md-5 fv-row">
                                        <label class="required fw-semibold fs-6 mb-1">Seat Price</label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" class="form-control form-control-solid" name="price" id="gen_price" step="0.01" min="0" required placeholder="0.00">
                                        </div>
                                    </div>
                                    <div class="col-md-4 fv-row">
                                        <label class="fw-semibold fs-6 mb-1">Service Charge (%)</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control form-control-solid" name="service_charge_pct" id="gen_svc" step="0.01" min="0" max="100" value="0" placeholder="0.00">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                    <div class="col-md-3 fv-row">
                                        <button type="submit" class="btn btn-success w-100" id="btn_update_pricing">
                                            <span class="indicator-label">Save Price</span>
                                            <span class="indicator-progress">Saving... <span class="spinner-border spinner-border-sm align-middle ms-1"></span></span>
                                        </button>
                                    </div>
                                </div>
                                <div id="pricing_preview" class="text-muted fs-7 mt-2"></div>
                            </div>
                        </div>
                    </form>

                    {{-- Seat Layout Generation Card --}}
                    <form id="kt_generate_seats_form" class="form mb-6" novalidate>
                        @csrf
                        <div class="card card-bordered">
                            <div class="card-header min-h-50px">
                                <h3 class="card-title fs-6 fw-bold text-gray-700">Seat Layout Generation</h3>
                            </div>
                            <div class="card-body pt-4">
                                <div class="row g-4 align-items-end">
                                    <div class="col-md-5 fv-row">
                                        <label class="required fw-semibold fs-6 mb-1">Row Labels <small class="text-muted fw-normal">(comma-separated, e.g. A,B,C)</small></label>
                                        <input type="text" class="form-control form-control-solid" name="rows" id="gen_rows" required placeholder="A,B,C">
                                    </div>
                                    <div class="col-md-4 fv-row">
                                        <label class="required fw-semibold fs-6 mb-1">Columns Per Row</label>
                                        <input type="number" class="form-control form-control-solid" name="columns" id="gen_cols" required min="1" max="40" placeholder="10">
                                    </div>
                                    <div class="col-md-3 fv-row">
                                        <button type="submit" class="btn btn-primary w-100" id="btn_generate_seats">
                                            <span class="indicator-label">Generate</span>
                                            <span class="indicator-progress">Working... <span class="spinner-border spinner-border-sm align-middle ms-1"></span></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    {{-- Seat Map --}}
                    <div>
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h4 class="fw-bold fs-6 mb-0">Seat Map</h4>
                            <div class="d-flex gap-3 fs-8 flex-wrap">
                                <div><span class="legend-color-box seat-status-available"></span> Available</div>
                                <div><span class="legend-color-box seat-status-held"></span> Held</div>
                                <div><span class="legend-color-box seat-status-booked"></span> Booked</div>
                                <div><span class="legend-color-box seat-status-pre-sold"></span> Pre-Sold</div>
                                <div><span class="legend-color-box seat-status-blocked"></span> Blocked</div>
                            </div>
                        </div>
                        <div id="seat_map_grid_container" style="max-height: 320px; overflow: auto; background: #f5f8fa; border: 1px solid #e4e6ef; border-radius: 8px;" class="p-4 text-center">
                            <div class="text-muted py-5">No seats generated yet. Fill in the form above and click Generate.</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Seat Status Toggle Modal -->
    <div class="modal fade" id="kt_modal_edit_seat_status" tabindex="-1" aria-hidden="true" style="z-index: 1060;">
        <div class="modal-dialog modal-dialog-centered mw-350px">
            <div class="modal-content">
                <div class="modal-header py-3">
                    <h4 class="fw-bold mb-0">Seat <span id="selected_seat_label"></span></h4>
                    <button type="button" class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                        <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
                    </button>
                </div>
                <div class="modal-body py-5">
                    <form id="kt_update_seat_status_form">
                        @csrf
                        @method('PUT')
                        <div class="mb-5">
                            <label class="form-label fs-6 fw-semibold">Change Status</label>
                            <select class="form-select form-select-solid" name="status" id="seat_status_select">
                                <option value="available">✅ Available</option>
                                <option value="booked">🎫 Booked</option>
                                <option value="pre_sold">🔒 Pre-Sold (Offline)</option>
                                <option value="blocked">🚫 Blocked</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm w-100">Update Seat Status</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('script')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function() {
            // Initialize DataTables
            const table = $('#kt_table_events').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.events.index') }}",
                    type: "GET",
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'banner', name: 'banner', orderable: false, searchable: false},
                    {data: 'title', name: 'title'},
                    {data: 'event_date_formatted', name: 'event_date'},
                    {data: 'city', name: 'city'},
                    {data: 'status', name: 'status'},
                    {data: 'actions', name: 'actions', orderable: false, searchable: false}
                ],
                drawCallback: function() {
                    if (typeof KTMenu !== 'undefined') {
                        KTMenu.createInstances();
                    }
                }
            });

            // Search filter
            $('input[data-kt-event-table-filter="search"]').on('keyup', function() {
                table.search(this.value).draw();
            });

            // Handle Add form submission via AJAX
            $('#kt_modal_add_event_form').on('submit', function(e) {
                e.preventDefault();
                const formData = new FormData(this);

                $.ajax({
                    url: "{{ route('admin.events.store') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        Swal.fire('Success!', response.message || 'Event added successfully.', 'success');
                        $('#kt_modal_add_event').modal('hide');
                        $('#kt_modal_add_event_form')[0].reset();
                        table.ajax.reload();
                    },
                    error: function(xhr) {
                        let message = xhr.responseJSON?.message || 'Failed to add event.';
                        if (xhr.responseJSON?.errors) {
                            const errors = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                            message = `Validation failed:<br>${errors}`;
                        }
                        Swal.fire({
                            title: 'Error!',
                            html: message,
                            icon: 'error'
                        });
                    }
                });
            });

            // Edit button click
            $(document).on('click', '.edit-event-btn', function(e) {
                e.preventDefault();
                const eventId = $(this).data('id');
                const editUrl = "{{ route('admin.events.edit', ['event' => '__id__']) }}".replace('__id__', eventId);

                $.ajax({
                    url: editUrl,
                    type: "GET",
                    success: function(response) {
                        // Update form action url
                        $('#kt_modal_edit_event_form').attr('action', "{{ route('admin.events.update', ['event' => '__id__']) }}".replace('__id__', eventId));
                        
                        // Populate form inputs
                        $('#edit_title').val(response.event.title);
                        $('#edit_slug').val(response.event.slug);
                        $('#edit_description').val(response.event.description);
                        $('#edit_event_date').val(response.event.event_date);
                        $('#edit_start_time').val(response.event.start_time);
                        $('#edit_door_open_time').val(response.event.door_open_time);
                        $('#edit_city').val(response.event.city);
                        $('#edit_address').val(response.event.address);
                        $('#edit_status').val(response.event.status);

                        $('#kt_modal_edit_event').modal('show');
                    },
                    error: function(xhr) {
                        Swal.fire('Error!', 'Failed to fetch event data.', 'error');
                    }
                });
            });

            // Handle Edit form submission via AJAX
            $('#kt_modal_edit_event_form').on('submit', function(e) {
                e.preventDefault();
                const formData = new FormData(this);

                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        Swal.fire('Success!', response.message || 'Event updated successfully.', 'success');
                        $('#kt_modal_edit_event').modal('hide');
                        table.ajax.reload();
                    },
                    error: function(xhr) {
                        let message = xhr.responseJSON?.message || 'Failed to update event.';
                        if (xhr.responseJSON?.errors) {
                            const errors = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                            message = `Validation failed:<br>${errors}`;
                        }
                        Swal.fire({
                            title: 'Error!',
                            html: message,
                            icon: 'error'
                        });
                    }
                });
            });

            // Handle Delete button click
            $(document).on('click', '.delete-event-btn', function(e) {
                e.preventDefault();
                const eventId = $(this).data('id');

                Swal.fire({
                    title: 'Are you sure?',
                    text: "All seats and bookings related to this event will remain, but the event will be deleted.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const deleteUrl = "{{ route('admin.events.destroy', ['event' => '__id__']) }}".replace('__id__', eventId);
                        
                        $.ajax({
                            url: deleteUrl,
                            type: "DELETE",
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                Swal.fire('Deleted!', response.message || 'Event deleted successfully.', 'success');
                                table.ajax.reload();
                            },
                            error: function(xhr) {
                                Swal.fire('Error!', xhr.responseJSON?.message || 'Something went wrong.', 'error');
                            }
                        });
                    }
                });
            });

            // ─── GALLERY MANAGEMENT ────────────────────────────────────────────────

            let currentGalleryEventId = null;

            function loadGallery(eventId) {
                const editUrl = "{{ route('admin.events.edit', ['event' => '__id__']) }}".replace('__id__', eventId);
                $.ajax({
                    url: editUrl,
                    type: "GET",
                    success: function(response) {
                        const container = $('#event_gallery_container');
                        container.empty();
                        if (!response.event.gallery || response.event.gallery.length === 0) {
                            container.append('<div class="col-12 text-center text-muted py-4">No gallery images uploaded yet.</div>');
                            return;
                        }
                        response.event.gallery.forEach(function(img) {
                            container.append(`
                                <div class="col-md-4 col-sm-6 text-center" id="gallery_item_${img.id}">
                                    <div class="border rounded p-2 bg-light">
                                        <img src="${img.image_url}" class="img-fluid rounded mb-2" style="height:100px;width:100%;object-fit:cover;">
                                        <button class="btn btn-danger btn-xs py-1 px-2 w-100 delete-gallery-img-btn" data-id="${img.id}">Delete</button>
                                    </div>
                                </div>
                            `);
                        });
                    },
                    error: function() { Swal.fire('Error!', 'Failed to load gallery images.', 'error'); }
                });
            }

            $(document).on('click', '.manage-gallery-btn', function(e) {
                e.preventDefault();
                currentGalleryEventId = $(this).data('id');
                $('#kt_modal_upload_gallery_form').attr('action', "{{ route('admin.events.gallery', ['event' => '__id__']) }}".replace('__id__', currentGalleryEventId));
                loadGallery(currentGalleryEventId);
                $('#kt_modal_manage_gallery').modal('show');
            });

            $('#kt_modal_upload_gallery_form').on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    url: $(this).attr('action'), type: "POST",
                    data: new FormData(this), processData: false, contentType: false,
                    success: function() {
                        Swal.fire('Uploaded!', 'Images uploaded successfully.', 'success');
                        $('#kt_modal_upload_gallery_form')[0].reset();
                        loadGallery(currentGalleryEventId);
                    },
                    error: function(xhr) { Swal.fire('Error!', xhr.responseJSON?.message || 'Upload failed.', 'error'); }
                });
            });

            $(document).on('click', '.delete-gallery-img-btn', function(e) {
                e.preventDefault();
                const imgId = $(this).data('id');
                Swal.fire({ title: 'Delete this image?', icon: 'warning', showCancelButton: true, confirmButtonColor: '#d33', confirmButtonText: 'Delete' })
                    .then((result) => {
                        if (!result.isConfirmed) return;
                        $.ajax({
                            url: "{{ route('admin.events.gallery.destroy', ['gallery' => '__id__']) }}".replace('__id__', imgId),
                            type: "DELETE", data: { _token: '{{ csrf_token() }}' },
                            success: function() { Swal.fire('Deleted!', 'Image removed.', 'success'); loadGallery(currentGalleryEventId); },
                            error: function(xhr) { Swal.fire('Error!', xhr.responseJSON?.message || 'Failed.', 'error'); }
                        });
                    });
            });


            // ─── SEAT MANAGEMENT ──────────────────────────────────────────────────────

            let currentSeatEventId = null;
            let currentSelectedSeatId = null;

            // Live pricing preview
            function updatePricingPreview() {
                const price = parseFloat($('#gen_price').val()) || 0;
                const svc   = parseFloat($('#gen_svc').val()) || 0;
                const total = price + (price * svc / 100);
                $('#pricing_preview').html(
                    `<strong>Total per seat:</strong><br>$${total.toFixed(2)}<br><small>(incl. ${svc}% svc charge)</small>`
                );
            }
            $('#gen_price, #gen_svc').on('input', updatePricingPreview);

            function loadSeatMap(eventId) {
                const seatsUrl = "{{ route('admin.events.seats', ['event' => '__id__']) }}".replace('__id__', eventId);
                $.ajax({
                    url: seatsUrl, type: "GET",
                    success: function(response) {
                        const d = response.data;

                        // Show event status badge
                        const statusMap = { draft: 'badge-light-secondary', published: 'badge-light-success', cancelled: 'badge-light-danger' };
                        const statusLabel = d.event_status ? d.event_status.charAt(0).toUpperCase() + d.event_status.slice(1) : 'Draft';
                        const statusCls   = statusMap[d.event_status] || 'badge-light-secondary';
                        $('#seats_event_status_badge').html(`<span class="badge ${statusCls}">${statusLabel}</span>`);

                        // Lock form if not draft
                        const isDraft = d.event_status === 'draft';
                        if (isDraft) {
                            $('#seats_draft_notice').addClass('d-none');
                            $('#kt_generate_seats_form input, #kt_generate_seats_form button').prop('disabled', false);
                            $('#kt_update_pricing_form input, #kt_update_pricing_form button').prop('disabled', false);
                        } else {
                            $('#seats_draft_notice').removeClass('d-none');
                            $('#kt_generate_seats_form input, #kt_generate_seats_form button').prop('disabled', true);
                            $('#kt_update_pricing_form input, #kt_update_pricing_form button').prop('disabled', true);
                        }

                        // Pre-fill pricing if category exists
                        if (d.pricing) {
                            $('#gen_price').val(d.pricing.price);
                            $('#gen_svc').val(d.pricing.service_charge_pct);
                            updatePricingPreview();
                        } else {
                            $('#gen_price').val('');
                            $('#gen_svc').val('');
                            $('#pricing_preview').html('');
                        }

                        // Render seat map
                        const grid = $('#seat_map_grid_container');
                        grid.empty();

                        if (!d.seats || d.seats.length === 0) {
                            grid.html('<div class="text-muted py-5">No seats generated yet. Fill in the form above and click Generate.</div>');
                            return;
                        }

                        // Wrapper style class for responsive container
                        grid.addClass('seat-map-wrap');

                        // Group by row
                        const rowsMap = {};
                        d.seats.forEach(s => { (rowsMap[s.row] = rowsMap[s.row] || []).push(s); });
                        Object.keys(rowsMap).sort().forEach(rowLabel => {
                            const rowSeats = rowsMap[rowLabel].sort((a, b) => a.column - b.column);
                            let html = `<div class="seat-row-wrap">
                                <div class="seat-row-label">${rowLabel}</div>
                                <div class="seat-row-seats">`;
                            rowSeats.forEach(seat => {
                                html += `<button type="button" class="seat-grid-badge seat-status-${seat.status}"
                                    style="cursor:pointer;"
                                    data-id="${seat.id}" data-number="${seat.seat_number}" data-status="${seat.status}">${seat.column}</button>`;
                            });
                            html += `</div>`;
                            
                            // Show delete row button if in Draft mode
                            if (isDraft) {
                                html += `<button type="button" class="btn btn-danger btn-xs btn-delete-row ms-2" data-row="${rowLabel}" title="Delete entire row ${rowLabel}">&times;</button>`;
                            }
                            
                            html += `</div>`;
                            grid.append(html);
                        });
                    },
                    error: function() { Swal.fire('Error!', 'Failed to load seat data.', 'error'); }
                });
            }

            // Delete entire row
            $(document).on('click', '.btn-delete-row', function(e) {
                e.preventDefault();
                const rowLabel = $(this).data('row');
                
                Swal.fire({
                    title: `Delete Row ${rowLabel}?`,
                    text: "Available and blocked seats in this row will be deleted. Booked/held seats are protected.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete row'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    
                    const deleteRowUrl = "{{ route('admin.seats.delete-row', ['event' => '__id__', 'row' => '__row__']) }}"
                        .replace('__id__', currentSeatEventId)
                        .replace('__row__', rowLabel);
                        
                    $.ajax({
                        url: deleteRowUrl,
                        type: "DELETE",
                        data: { _token: '{{ csrf_token() }}' },
                        success: function(response) {
                            Swal.fire('Deleted!', response.message || 'Seats deleted.', 'success');
                            loadSeatMap(currentSeatEventId);
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', xhr.responseJSON?.message || 'Failed to delete row.', 'error');
                        }
                    });
                });
            });

            $(document).on('click', '.manage-seats-btn', function(e) {
                e.preventDefault();
                currentSeatEventId = $(this).data('id');
                // Reset fields before loading new map
                $('#gen_price').val('');
                $('#gen_svc').val('');
                $('#gen_rows').val('');
                $('#gen_cols').val('');
                $('#pricing_preview').html('');
                loadSeatMap(currentSeatEventId);
                $('#kt_modal_manage_seats').modal('show');
            });

            // Update pricing
            $('#kt_update_pricing_form').on('submit', function(e) {
                e.preventDefault();
                const btn = $('#btn_update_pricing');
                btn.attr('data-kt-indicator', 'on');

                const formData = {
                    _token:              '{{ csrf_token() }}',
                    price:               $('#gen_price').val(),
                    service_charge_pct:  $('#gen_svc').val(),
                };

                $.ajax({
                    url:  "{{ route('admin.seats.update-pricing', ['event' => '__id__']) }}".replace('__id__', currentSeatEventId),
                    type: "POST",
                    data: formData,
                    success: function(response) {
                        Swal.fire('Updated!', response.message || 'Pricing updated successfully.', 'success');
                        loadSeatMap(currentSeatEventId);
                    },
                    error: function(xhr) {
                        let message = xhr.responseJSON?.message || 'Failed to update pricing.';
                        if (xhr.responseJSON?.errors) {
                            const errors = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                            message = `Validation failed:<br>${errors}`;
                        }
                        Swal.fire({ title: 'Error!', html: message, icon: 'error' });
                    },
                    complete: function() { btn.removeAttr('data-kt-indicator'); }
                });
            });

            // Generate / update seats
            $('#kt_generate_seats_form').on('submit', function(e) {
                e.preventDefault();
                const btn = $('#btn_generate_seats');
                btn.attr('data-kt-indicator', 'on');

                const formData = {
                    _token:              '{{ csrf_token() }}',
                    rows:                $('#gen_rows').val(),
                    columns:             $('#gen_cols').val(),
                    price:               $('#gen_price').val(),
                    service_charge_pct:  $('#gen_svc').val(),
                };

                $.ajax({
                    url:  "{{ route('admin.seats.generate', ['event' => '__id__']) }}".replace('__id__', currentSeatEventId),
                    type: "POST",
                    data: formData,
                    success: function(response) {
                        const d = response.data;
                        Swal.fire('Done!', response.message || `${d.created} created, ${d.removed} removed, ${d.skipped} unchanged.`, 'success');
                        loadSeatMap(currentSeatEventId);
                    },
                    error: function(xhr) {
                        let message = xhr.responseJSON?.message || 'Failed to generate seats.';
                        if (xhr.responseJSON?.errors) {
                            const errors = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                            message = `Validation failed:<br>${errors}`;
                        }
                        Swal.fire({ title: 'Error!', html: message, icon: 'error' });
                    },
                    complete: function() { btn.removeAttr('data-kt-indicator'); }
                });
            });

            // Click seat to update status
            $(document).on('click', '.seat-grid-badge', function(e) {
                e.preventDefault();
                currentSelectedSeatId = $(this).data('id');
                $('#selected_seat_label').text($(this).data('number'));
                $('#seat_status_select').val($(this).data('status'));
                $('#kt_modal_edit_seat_status').modal('show');
            });

            $('#kt_update_seat_status_form').on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    url:  "{{ route('admin.seats.update', ['seat' => '__id__']) }}".replace('__id__', currentSelectedSeatId),
                    type: "POST",
                    data: $(this).serialize(),
                    success: function() {
                        Swal.fire('Updated!', 'Seat status changed.', 'success');
                        $('#kt_modal_edit_seat_status').modal('hide');
                        loadSeatMap(currentSeatEventId);
                    },
                    error: function(xhr) { Swal.fire('Error!', xhr.responseJSON?.message || 'Failed to update.', 'error'); }
                });
            });


            // ─── DIRECT INLINE STATUS UPDATE ───────────────────────────────────────────

            $(document).on('click', '.inline-status-option', function(e) {
                e.preventDefault();
                const eventId = $(this).data('id');
                const selectedStatus = $(this).data('value');

                $.ajax({
                    url:  "{{ route('admin.events.update-status', ['event' => '__id__']) }}".replace('__id__', eventId),
                    type: "POST",
                    data: { _token: '{{ csrf_token() }}', _method: 'PATCH', status: selectedStatus },
                    success: function(response) {
                        const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
                        Swal.fire({
                            title: 'Status Updated!',
                            text: 'Event status changed successfully.',
                            icon: 'success',
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 2000,
                            background: isDark ? '#1e1e2d' : '#ffffff',
                            color: isDark ? '#ffffff' : '#3f4254'
                        });
                        table.ajax.reload(null, false);
                    },
                    error: function(xhr) {
                        const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
                        Swal.fire({
                            title: 'Error!',
                            text: xhr.responseJSON?.message || 'Failed to update status.',
                            icon: 'error',
                            background: isDark ? '#1e1e2d' : '#ffffff',
                            color: isDark ? '#ffffff' : '#3f4254'
                        });
                        table.ajax.reload(null, false);
                    }
                });
            });
        });
    </script>
@endpush