@extends('layout.master')

@push('styles')
    {{-- DataTables CSS --}}
    <link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
@endpush

@section('content')
    <!--begin::Toolbar-->
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Master Data Jadwal</h1>
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <li class="breadcrumb-item text-muted"><a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">Home</a></li>
                    <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                    <li class="breadcrumb-item text-muted">Master Data</li>
                    <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                    <li class="breadcrumb-item text-muted">Jadwal</li>
                </ul>
            </div>
        </div>
    </div>
    <!--end::Toolbar-->

    <!--begin::Content-->
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-fluid">
            <!--begin::Card untuk Filter-->
            <div class="card mb-7">
                {{-- Form Filter tetap sama --}}
                <div class="card-header">
                    <h3 class="card-title">Filter Data Jadwal</h3>
                </div>
                <div class="card-body">
                    <form id="filter-form">
                        <div class="row g-4">
                            <div class="col-md-4">
                                <label for="movie_id" class="form-label">Film</label>
                                <select name="movie_id" id="movie_id" class="form-select form-select-solid" data-control="select2" data-placeholder="Semua Film" data-allow-clear="true">
                                    <option></option>
                                    @foreach($movies as $movie)
                                        <option value="{{ $movie->mtix_movie_id }}" {{ $request->movie_id == $movie->mtix_movie_id ? 'selected' : '' }}>{{ $movie->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="city_id" class="form-label">Kota</label>
                                <select name="city_id" id="city_id" class="form-select form-select-solid" data-control="select2" data-placeholder="Semua Kota" data-allow-clear="true">
                                    <option></option>
                                    @foreach($cities as $city)
                                        <option value="{{ $city->city_mtix_id }}" {{ $request->city_id == $city->city_mtix_id ? 'selected' : '' }}>{{ $city->city_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="theater_id" class="form-label">Bioskop</label>
                                <select name="theater_id" id="theater_id" class="form-select form-select-solid" data-control="select2" data-placeholder="Pilih Kota Terlebih Dahulu" data-allow-clear="true">
                                    <option></option>
                                    @foreach($theaters as $theater)
                                        <option value="{{ $theater->mtix_cinema_id }}" {{ $request->theater_id == $theater->mtix_cinema_id ? 'selected' : '' }}>{{ $theater->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary me-3">Filter</button>
                                <button type="reset" id="reset-filter" class="btn btn-light">Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--end::Card untuk Filter-->

            <!--begin::Card untuk Tabel Data-->
            <div class="card">
                <div class="card-header border-0 pt-6">
                    <div class="card-title">
                        <div class="d-flex align-items-center position-relative my-1">
                            {!! getSvgIcon('duotune/general/gen021.svg', 'svg-icon-1 position-absolute ms-6') !!}
                            <input type="text" data-kt-table-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="Cari data" />
                        </div>
                    </div>
                    <!--begin::Card toolbar-->
                    <div class="card-toolbar">
                        <!--begin::Toolbar-->
                        <div class="d-flex justify-content-end" data-kt-table-toolbar="base">
                            <!--begin::Export-->
                            <button type="button" class="btn btn-light-primary me-3" data-bs-toggle="modal" data-bs-target="#kt_export_modal">
                                {!! getSvgIcon('duotune/arrows/arr078.svg', 'svg-icon-2') !!}
                                Export
                            </button>
                            <!--end::Export-->
                        </div>
                        <!--end::Toolbar-->
                    </div>
                    <!--end::Card toolbar-->
                </div>
                <div class="card-body py-4">
                    <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_schedules_table">
                        <thead>
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                <th class="min-w-200px">Film</th>
                                <th class="min-w-200px">Bioskop</th>
                                <th class="min-w-100px">Tanggal</th>
                                <th class="min-w-70px">Jam</th>
                                <th class="min-w-70px">Studio</th>
                                <th class="min-w-100px">Tipe</th>
                                <th class="min-w-100px text-end">Harga</th>
                            </tr>
                        </thead>
                        <tbody class="text-gray-600 fw-semibold">
                        </tbody>
                    </table>
                </div>
            </div>
            <!--end::Card untuk Tabel Data-->
        </div>
    </div>

    <!--begin::Modal - Export Options-->
    <div class="modal fade" id="kt_export_modal" 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">Export Jadwal</h2>
                    <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                        {!! getSvgIcon('duotune/arrows/arr061.svg', 'svg-icon-1') !!}
                    </div>
                </div>
                <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                    <div class="fv-row mb-10">
                        <label class="form-label fs-6 fw-semibold">Pilih Format Export:</label>
                        <select class="form-select form-select-solid fw-bold" data-kt-select2="true" data-placeholder="Pilih format" data-hide-search="true" data-kt-export-select="format">
                            <option></option>
                            <option value="copy">Copy to clipboard</option>
                            <option value="excel">Excel</option>
                            <option value="csv">CSV</option>
                            <option value="pdf">PDF</option>
                        </select>
                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-light me-3" data-bs-dismiss="modal">Batal</button>
                        <button type="button" class="btn btn-primary" data-kt-export-submit="true">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->

@endsection

@push('scripts')
    {{-- DataTables JS --}}
    <script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <script>
        "use strict";
        var KTSchedulesList = function () {
            var table, datatable, exportModal;
            var initDatatable = function () {
                datatable = $(table).DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('admin.api.schedules.data') }}",
                        data: function (d) {
                            d.movie_id = $('#movie_id').val();
                            d.city_id = $('#city_id').val();
                            d.theater_id = $('#theater_id').val();
                        }
                    },
                    columns: [
                        { data: 'movie' },
                        { data: 'theater' },
                        { data: 'show_date' },
                        { data: 'show_time' },
                        { data: 'studio_id' },
                        { data: 'movie_type_name' },
                        { data: 'ticket_price', className: 'text-end' },
                    ],
                    order: [[2, 'desc'], [3, 'asc']],
                    // Hapus opsi 'dom' untuk menggunakan default Metronic
                    buttons: [
                        { extend: 'copy' },
                        { extend: 'excel' },
                        { extend: 'csv' },
                        { extend: 'pdf' }
                    ],
                });
                $('#filter-form').on('submit', function(e) { e.preventDefault(); datatable.draw(); });
                $('#reset-filter').on('click', function() {
                    $('#filter-form')[0].reset();
                    $('#movie_id, #city_id, #theater_id').val(null).trigger('change');
                    datatable.draw();
                });

                // Tambahkan event listener untuk search bar kustom
                const filterSearch = document.querySelector('[data-kt-table-filter="search"]');
                filterSearch.addEventListener('keyup', function (e) {
                    datatable.search(e.target.value).draw();
                });
            }

            var handleExport = function () {
                const exportSubmitButton = exportModal.querySelector('[data-kt-export-submit="true"]');
                exportSubmitButton.addEventListener('click', function (e) {
                    e.preventDefault();
                    const exportFormat = exportModal.querySelector('[data-kt-export-select="format"]').value;
                    if (!exportFormat) {
                        Swal.fire({ text: "Silakan pilih format export.", icon: "warning", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn btn-primary" } });
                        return;
                    }
                    datatable.button('.buttons-' + exportFormat).trigger();
                    const modalInstance = bootstrap.Modal.getInstance(exportModal);
                    modalInstance.hide();
                });
            }

            var initDynamicTheaters = function() {
                const citySelect = $('#city_id');
                const theaterSelect = $('#theater_id');
                const selectedTheaterId = '{{ $request->theater_id ?? '' }}';
                citySelect.on('change', function() {
                    const cityId = this.value;
                    theaterSelect.empty().append('<option></option>').trigger('change');
                    theaterSelect.attr('data-placeholder', cityId ? 'Memuat...' : 'Pilih Kota Dulu');
                    if (cityId) {
                        $.ajax({
                            url: `{{ route('admin.api.theaters.by_city') }}?city_id=${cityId}`,
                            type: 'GET',
                            success: function(data) {
                                theaterSelect.attr('data-placeholder', 'Semua Bioskop');
                                data.forEach(function(theater) {
                                    const option = new Option(theater.name, theater.mtix_cinema_id, false, false);
                                    theaterSelect.append(option);
                                });
                                if (selectedTheaterId && data.some(t => t.mtix_cinema_id == selectedTheaterId)) {
                                     theaterSelect.val(selectedTheaterId).trigger('change');
                                }
                            }
                        });
                    }
                });
            }
            return { 
                init: function () { 
                    table = document.querySelector('#kt_schedules_table'); 
                    exportModal = document.querySelector('#kt_export_modal');
                    if (!table) { return; } 
                    initDatatable(); 
                    initDynamicTheaters();
                    handleExport();
                } 
            };
        }();
        KTUtil.onDOMContentLoaded(function () { KTSchedulesList.init(); });
    </script>
@endpush