@extends('layout.master')

@push('styles')
    {{-- Leaflet CSS untuk peta --}}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
@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 flex-wrap">
            <!--begin::Page title-->
            <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">Producer Dashboard</h1>
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <li class="breadcrumb-item text-muted">Home</li>
                    <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                    <li class="breadcrumb-item text-muted">Dashboard</li>
                </ul>
            </div>
            <!--end::Page title-->
        </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">
                <div class="card-header"><h3 class="card-title">Dashboard Data Filter</h3></div>
                <div class="card-body">
                    <form id="filter-form" method="GET" action="{{ route('producer.dashboard') }}">
                        <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_filter_producer" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Pilih Film">
									<option value="all" @if(!$selectedMovieId || $selectedMovieId == 'all') selected @endif>Semua Film</option>
									@foreach($producerMovies as $movie)
										<option value="{{ $movie->mtix_movie_id }}" @if($movie->mtix_movie_id == $selectedMovieId) selected @endif>{{ $movie->title }}</option>
									@endforeach
								</select>
                            </div>
                            <div class="col-md-4">
                                <label for="start_date" class="form-label">Tanggal Mulai</label>
                                <input type="text" name="start_date" id="start_date" class="form-control form-control-solid" placeholder="Pilih tanggal mulai" value="{{ $startDate }}">
                            </div>
                            <div class="col-md-4">
                                <label for="end_date" class="form-label">Tanggal Selesai</label>
                                <input type="text" name="end_date" id="end_date" class="form-control form-control-solid" placeholder="Pilih tanggal selesai" value="{{ $endDate }}">
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary me-3">Filter</button>
                                <a href="{{ route('producer.dashboard') }}" class="btn btn-light">Reset</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--end::Card untuk Filter-->

            <!--begin::KPI Row-->
            <div class="row g-5 g-xl-8 mb-8">
                <div class="col-xl-4">
                    <div class="card bg-light-primary card-xl-stretch">
                        <div class="card-body d-flex align-items-center">
                            <span class="fs-4x text-primary me-5">{!! getSvgIcon('duotune/communication/com013.svg', 'svg-icon-4x') !!}</span>
                            <div>
                                <div class="fs-1 fw-bold">{{ number_format($summary->total_viewers ?? 0) }}</div>
                                <div class="text-gray-600 fw-semibold">Total Penonton</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4">
                    <div class="card bg-light-success card-xl-stretch">
                        <div class="card-body d-flex align-items-center">
                            <span class="fs-4x text-success me-5">{!! getSvgIcon('duotune/finance/fin002.svg', 'svg-icon-4x') !!}</span>
                            <div>
                                <div class="fs-1 fw-bold">Rp {{ number_format($summary->total_revenue ?? 0, 0, ',', '.') }}</div>
                                <div class="text-gray-600 fw-semibold">Estimasi Omzet</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4">
                    <div class="card bg-light-warning card-xl-stretch">
                        <div class="card-body d-flex align-items-center">
                            <span class="fs-4x text-warning me-5">{!! getSvgIcon('duotune/general/gen028.svg', 'svg-icon-4x') !!}</span>
                            <div>
                                <div class="fs-1 fw-bold">{{ number_format($averageOccupancy, 2, ',', '.') }}%</div>
                                <div class="text-gray-600 fw-semibold">Rata-rata Okupansi</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::KPI Row-->

            <!--begin::Time Performance Charts Row-->
            <div class="row g-5 g-xl-8 mb-8">
                <div class="col-xl-6">
                    <div class="card card-flush h-md-100">
                        <div class="card-header pt-5"><h3 class="card-title">Weekday vs Weekend</h3></div>
                        <div class="card-body"><div class="h-300px"><canvas id="weekdayWeekendChart"></canvas></div></div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="card card-flush h-md-100">
                        <div class="card-header pt-5"><h3 class="card-title">Prime Time vs Non-Prime</h3></div>
                        <div class="card-body"><div class="h-300px"><canvas id="timePerformanceChart"></canvas></div></div>
                    </div>
                </div>
            </div>
            <!--end::Time Performance Charts Row-->

            <!--begin::Top 10 Tables Row-->
            <div class="row g-5 g-xl-8 mb-8">
                <div class="col-xl-6">
                    <div class="card card-flush h-md-100">
                        <div class="card-header pt-5"><h3 class="card-title">Top 10 Cities</h3></div>
                        <div class="card-body pt-0">
                            <div class="table-responsive">
                                <table class="table align-middle table-row-dashed fs-6 gy-5">
                                    <thead><tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0"><th>#</th><th>Kota</th><th class="text-end">Penonton</th></tr></thead>
                                    <tbody class="fw-semibold text-gray-600">
                                        @forelse($topCities as $index => $city)
                                            <tr><td>{{ $index + 1 }}</td><td>{{ $city->city_name }}</td><td class="text-end">{{ number_format($city->total_viewers) }}</td></tr>
                                        @empty
                                            <tr><td colspan="3" class="text-center p-5">Data tidak ditemukan.</td></tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="card card-flush h-md-100">
                        <div class="card-header pt-5"><h3 class="card-title">Top 10 Theaters</h3></div>
                        <div class="card-body pt-0">
                            <div class="table-responsive">
                                <table class="table align-middle table-row-dashed fs-6 gy-5">
                                    <thead><tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0"><th>#</th><th>Bioskop</th><th class="text-end">Penonton</th></tr></thead>
                                    <tbody class="fw-semibold text-gray-600">
                                        @forelse($topTheaters as $index => $theater)
                                            <tr><td>{{ $index + 1 }}</td><td>{{ $theater->theater_name }} <span class="text-muted fs-7">({{ $theater->city_name }})</span></td><td class="text-end">{{ number_format($theater->total_viewers) }}</td></tr>
                                        @empty
                                            <tr><td colspan="3" class="text-center p-5">Data tidak ditemukan.</td></tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Top 10 Tables Row-->

            <!--begin::Daily Performance and City List Row-->
            <div class="row g-5 g-xl-8 mb-8">
                <div class="col-xl-7">
                    <div class="card card-flush h-md-100">
                        <div class="card-header pt-5"><h3 class="card-title">Performa Harian</h3></div>
                        <div class="card-body"><div class="h-400px"><canvas id="dailyPerformanceChart"></canvas></div></div>
                    </div>
                </div>
                <div class="col-xl-5">
                     <div class="card card-flush h-md-100">
                        <div class="card-header pt-5"><h3 class="card-title">Performa per Kota</h3></div>
                        <div class="card-body pt-0">
                            <div class="table-responsive">
                                <table class="table align-middle table-row-dashed fs-6 gy-5">
                                    <thead><tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0"><th>Kota</th><th class="text-end">Penonton</th><th class="text-end">Okupansi</th></tr></thead>
                                    <tbody id="city-performance-tbody" class="fw-semibold text-gray-600"></tbody>
                                </table>
                            </div>
                            <div id="city-pagination-controls" class="mt-4 d-flex justify-content-end"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Daily Performance and City List Row-->

            <!--begin::Schedule List Card-->
            <div class="card card-flush mb-8">
                <div class="card-header pt-5"><h3 class="card-title">Laju Penjualan per Jadwal</h3></div>
                <div class="card-body pt-5">
                    <div class="row g-4 mb-5" id="schedule-filters">
                        <div class="col-md-3">
                            <label for="schedule_filter_city_producer" class="form-label">Kota</label>
                            <select id="schedule_filter_city_producer" class="form-select form-select-solid" data-control="select2" data-placeholder="Pilih Kota" data-allow-clear="true">
                                <option></option>
                                @foreach($cities as $city)
                                    <option value="{{ $city->city_mtix_id }}">{{ $city->city_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="schedule_filter_theater_producer" class="form-label">Bioskop</label>
                            <select id="schedule_filter_theater_producer" class="form-select form-select-solid" data-control="select2" data-placeholder="Pilih Bioskop" data-allow-clear="true" disabled>
                                <option></option>
                            </select>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table align-middle table-row-dashed fs-6 gy-5">
                            <thead><tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0"><th>Tanggal</th><th>Movie</th><th>Jam</th><th>Bioskop</th><th>Studio</th><th>Type</th><th class="text-end">Penonton</th><th>Harga</th></tr></thead>
                            <tbody id="schedule-tbody" class="fw-semibold text-gray-600">
                                {{-- Konten akan diisi oleh AJAX --}}
                            </tbody>
                        </table>
                    </div>
                    <div id="schedule-pagination-controls" class="mt-4 d-flex justify-content-end"></div>
                </div>
            </div>
            <!--end::Schedule List Card-->

            <!--begin::Map Card-->
            <div class="card card-flush">
                <div class="card-header pt-5"><h3 class="card-title">Peta Performa Geografis</h3></div>
                <div class="card-body"><div id="map" style="height: 500px;" class="rounded"></div></div>
            </div>
            <!--end::Map Card-->

        </div>
		{{-- KONTEN BARU: Analisis Tren Penurunan Jadwal --}}
            <div class="separator separator-dashed my-8"></div>
            <h3 class="fs-2 fw-bold mb-8 text-center">Analisis Tren Penurunan Jadwal</h3>
            <div class="row g-5 g-xl-8 mb-8">
                <div class="col-xl-12">
                    <div class="card card-flush h-md-100">
                        <div class="card-header pt-5"><h3 class="card-title" id="schedule_trend_title">{{ $scheduleTrendTitle }}</h3></div>
                        <div class="card-body">
                            <div class="h-300px"><canvas id="scheduleTrendChart"></canvas></div>
                            <div class="table-responsive table-trend-container">
                                <table class="table table-row-bordered table-row-dashed gy-4 align-middle">
                                    <thead class="fs-7 text-gray-400 text-uppercase"><tr><th>Tanggal</th><th class="text-end">Jml Jadwal</th><th class="text-end">Perubahan</th><th>Catatan Jadwal Hilang</th></tr></thead>
                                    <tbody class="fs-6">
                                        @forelse($scheduleTrends->reverse() as $trend)
                                            <tr>
                                                <td>{{ \Carbon\Carbon::parse($trend->report_date)->format('d M Y') }}</td>
                                                <td class="text-end fw-bold">{{ number_format($trend->total_schedule_count) }}</td>
                                                <td class="text-end"><span class="badge badge-light-{{ $trend->schedule_change_count >= 0 ? 'success' : 'danger' }}">{{ $trend->schedule_change_count > 0 ? '+' : '' }}{{ number_format($trend->schedule_change_count) }}</span></td>
                                                <td>
                                                    @if($selectedMovieId !== 'all' && $trend->dropped_schedules_note)
                                                        <button class="btn btn-light-warning btn-sm btn-note view-note-btn" data-note-title="Jadwal Hilang pada {{ \Carbon\Carbon::parse($trend->report_date)->format('d M Y') }}" data-note-content="{{ $trend->dropped_schedules_note }}">Lihat Catatan</button>
                                                    @else - @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr><td colspan="4" class="text-center text-muted p-5">Data tren tidak ditemukan.</td></tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                     <div class="card card-flush h-md-100">
                        <div class="card-header pt-5"><h3 class="card-title">Analisis Tren Jadwal per Kota</h3></div>
                        <div class="card-body">
                            <div class="mb-5"><label for="city_trend_filter" class="form-label">Pilih Kota untuk dianalisis:</label><select id="city_trend_filter" class="form-select form-select-solid" data-control="select2" data-placeholder="Pilih Kota..." data-allow-clear="true"><option></option>@foreach($cities as $city)<option value="{{ $city->city_mtix_id }}">{{ $city->city_name }}</option>@endforeach</select></div>
                            <div id="city_trend_result_container" class="d-none">
                                <div class="h-300px"><canvas id="cityScheduleTrendChart"></canvas></div>
                                <div class="table-responsive table-trend-container">
                                    <table class="table table-row-bordered table-row-dashed gy-4 align-middle">
                                        <thead class="fs-7 text-gray-400 text-uppercase"><tr><th>Tanggal</th><th class="text-end">Jml Jadwal</th><th class="text-end">Perubahan</th><th>Catatan Jadwal Hilang</th></tr></thead>
                                        <tbody id="city_trend_table_body" class="fs-6"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="city_trend_placeholder" class="text-center text-muted p-10"><i class="ki-duotone ki-information fs-3x mb-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i><p>Silakan pilih kota dari daftar di atas untuk melihat detail trennya.</p></div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- AKHIR KONTEN BARU --}}
    </div>
    <!--end::Content-->

    <!--begin::Modal - Sales Velocity-->
    <div class="modal fade" tabindex="-1" id="velocityModal">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="velocityModalTitle">Laju Penjualan Tiket</h3>
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close"><span class="svg-icon svg-icon-1">{!! getSvgIcon('duotune/arrows/arr061.svg') !!}</span></div>
                </div>
                <div class="modal-body">
                    <div style="height: 400px;"><canvas id="salesVelocityChart"></canvas></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->
	
	<div class="modal fade" tabindex="-1" id="noteViewerModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="noteViewerModalTitle">Catatan Jadwal</h3>
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                        <span class="svg-icon svg-icon-1">{!! getSvgIcon('duotune/arrows/arr061.svg') !!}</span>
                    </div>
                </div>
                <div class="modal-body">
                    {{-- Gunakan <pre> agar format newline dari \n bisa ditampilkan --}}
                    <pre id="noteViewerModalContent" style="white-space: pre-wrap; word-wrap: break-word; font-family: inherit;"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- Chart.js & Leaflet.js from CDN --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // --- BAGIAN SETUP AWAL ---
            $("#start_date").flatpickr({ altInput: true, altFormat: "d F Y", dateFormat: "Y-m-d" });
            $("#end_date").flatpickr({ altInput: true, altFormat: "d F Y", dateFormat: "Y-m-d" });
            const formatNumber = (num) => new Intl.NumberFormat('id-ID').format(num);
			const noteViewerModalElement = document.getElementById('noteViewerModal');
            const noteViewerModal = noteViewerModalElement ? new bootstrap.Modal(noteViewerModalElement) : null;
            document.body.addEventListener('click', function(event) {
                const btn = event.target.closest('.view-note-btn');
                if (btn) {
                    document.getElementById('noteViewerModalTitle').textContent = btn.dataset.noteTitle;
                    document.getElementById('noteViewerModalContent').textContent = btn.dataset.noteContent.replace(/; /g, '\n');
                    noteViewerModal.show();
                }
            });

            // --- BAGIAN LOGIKA TREN JADWAL (BARU) ---
            let scheduleTrendChartInstance = null;
            let cityTrendChartInstance = null;
            const scheduleTrendCanvas = document.getElementById('scheduleTrendChart')?.getContext('2d');
            const cityChartCanvas = document.getElementById('cityScheduleTrendChart')?.getContext('2d');
            const cityFilter = $('#city_trend_filter');

            const renderTrendTable = (tbody, data, titlePrefix, isAggregated = false) => {
                tbody.innerHTML = '';
                if (data.length > 0) {
                    data.slice().reverse().forEach(trend => {
                        const changeCount = trend.schedule_change_count;
                        let noteButton = '-';
                        if (!isAggregated && trend.dropped_schedules_note) {
                            noteButton = `<button class="btn btn-light-warning btn-sm btn-note view-note-btn" data-note-title="${titlePrefix} (${new Date(trend.report_date).toLocaleDateString('id-ID')})" data-note-content="${trend.dropped_schedules_note}">Lihat Catatan</button>`;
                        }
                        const rowHtml = `<tr><td>${new Date(trend.report_date).toLocaleDateString('id-ID', {day:'numeric', month:'short', year:'numeric'})}</td><td class="text-end fw-bold">${formatNumber(trend.total_schedule_count || trend.schedule_count)}</td><td class="text-end"><span class="badge badge-light-${changeCount >= 0 ? 'success' : 'danger'}">${changeCount > 0 ? '+' : ''}${formatNumber(changeCount)}</span></td><td>${noteButton}</td></tr>`;
                        tbody.insertAdjacentHTML('beforeend', rowHtml);
                    });
                } else {
                    tbody.innerHTML = `<tr><td colspan="4" class="text-center text-muted p-5">Data tidak ditemukan.</td></tr>`;
                }
            };

            const renderTrendChart = (chartInstance, canvas, data, label, color = 'rgba(75, 192, 192, 1)', bgColor = 'rgba(75, 192, 192, 0.1)') => {
                if (chartInstance) chartInstance.destroy();
                if (!canvas) return null;
                const labels = data.map(d => new Date(d.report_date).toLocaleDateString('id-ID', {day: 'numeric', month: 'short'}));
                const counts = data.map(d => d.total_schedule_count || d.schedule_count);
                return new Chart(canvas, {
                    type: 'line', data: { labels: labels, datasets: [{ label: label, data: counts, borderColor: color, backgroundColor: bgColor, fill: true, tension: 0.2 }] },
                    options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: false } } }
                });
            };

            const initialTrendData = @json($scheduleTrends);
            scheduleTrendChartInstance = renderTrendChart(scheduleTrendChartInstance, scheduleTrendCanvas, initialTrendData, 'Jumlah Jadwal');

            cityFilter.on('change', async function() {
                const cityId = $(this).val();
                const selectedMovieId = document.getElementById('movie_id_filter_producer').value;
                const cityResultContainer = document.getElementById('city_trend_result_container');
                const cityPlaceholder = document.getElementById('city_trend_placeholder');
                const cityTableBody = document.getElementById('city_trend_table_body');

                if (!cityId) {
                    cityResultContainer.classList.add('d-none');
                    cityPlaceholder.classList.remove('d-none');
                    return;
                }

                cityPlaceholder.classList.add('d-none');
                cityResultContainer.classList.remove('d-none');
                cityTableBody.innerHTML = `<tr><td colspan="4" class="text-center p-5"><span class="spinner-border spinner-border-sm"></span> Memuat data...</td></tr>`;

                const startDate = document.getElementById('start_date').value;
                const endDate = document.getElementById('end_date').value;
                const url = `{{ route('producer.api.trends.city') }}?movie_id=${selectedMovieId}&city_id=${cityId}&start_date=${startDate}&end_date=${endDate}`;

                try {
                    const response = await fetch(url);
                    if (!response.ok) throw new Error('Gagal mengambil data');
                    const cityData = await response.json();
                    const cityName = cityFilter.find('option:selected').text();
                    cityTrendChartInstance = renderTrendChart(cityTrendChartInstance, cityChartCanvas, cityData, `Jadwal di ${cityName}`, 'rgba(255, 159, 64, 1)', 'rgba(255, 159, 64, 0.1)');
                    renderTrendTable(cityTableBody, cityData, `Jadwal Hilang di ${cityName}`, selectedMovieId === 'all');
                } catch (error) {
                    console.error("Error fetching city trend data:", error);
                    cityTableBody.innerHTML = `<tr><td colspan="4" class="text-center text-danger p-5">Gagal memuat data.</td></tr>`;
                }
            });
            
            $('#movie_id_filter_producer').on('change', function() { cityFilter.val(null).trigger('change'); });

            // --- PERBAIKAN GRAFIK ---
            // Chart: Daily Performance (Line)
            new Chart(document.getElementById('dailyPerformanceChart').getContext('2d'), {
                type: 'line',
                data: {
                    labels: @json($dailyLabels),
                    datasets: [{
                        label: 'Total Penonton Harian',
                        data: @json($dailyViewers),
                        borderColor: 'rgba(75, 192, 192, 1)',
                        tension: 0.1,
                        fill: true,
                        backgroundColor: 'rgba(75, 192, 192, 0.1)'
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
            });

            // Chart: Day Type Performance (Bar) - menargetkan ID canvas yang benar
            const dayTypeData = @json($dayTypePerformance);
            new Chart(document.getElementById('weekdayWeekendChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: dayTypeData.map(d => d.day_type),
                    datasets: [{
                        label: 'Total Penonton',
                        data: dayTypeData.map(d => d.total_viewers),
                        backgroundColor: ['rgba(54, 162, 235, 0.5)', 'rgba(255, 99, 132, 0.5)']
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
            });
            // --- AKHIR PERBAIKAN GRAFIK ---

            // Chart: Time Performance (Bar)
            const timeData = @json($timePerformance);
            new Chart(document.getElementById('timePerformanceChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: timeData.map(d => d.time_category),
                    datasets: [{
                        label: 'Total Penonton',
                        data: timeData.map(d => d.total_viewers),
                        backgroundColor: ['rgba(255, 206, 86, 0.5)', 'rgba(153, 102, 255, 0.5)']
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
            });

            // Map initialization (no changes)
            const map = L.map('map').setView([-2.5, 118], 5);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);
            let geojsonLayer;
            function updateProducerMap() {
                const selectedMovieId = document.getElementById('movie_id_filter_producer').value;
                const startDate = document.getElementById('start_date').value;
                const endDate = document.getElementById('end_date').value;
                const url = `{{ route('producer.performance.geo') }}?movie_id=${selectedMovieId}&start_date=${startDate}&end_date=${endDate}`;
                Promise.all([ fetch(url).then(res => res.json()), fetch('{{ asset('geojson/indonesia-prov.json') }}').then(res => res.json()) ]).then(([performanceData, geojson]) => { if (geojsonLayer) map.removeLayer(geojsonLayer); const maxViewers = Math.max(...performanceData.map(p => p.viewers), 0); const getColor = (d) => d > maxViewers * 0.8 ? '#800026' : d > maxViewers * 0.6 ? '#BD0026' : d > maxViewers * 0.4 ? '#E31A1C' : d > maxViewers * 0.2 ? '#FC4E2A' : d > 0 ? '#FEB24C' : '#FFEDA0'; geojson.features.forEach(feat => { const geoProvinceName = (feat.properties.provinsi || feat.properties.state || feat.properties.Propinsi || '').toLowerCase(); const provData = performanceData.find(p => p.province.toLowerCase() === geoProvinceName); feat.properties.audience = provData ? provData.viewers : 0; }); geojsonLayer = L.geoJson(geojson, { style: (feature) => ({ fillColor: getColor(feature.properties.audience), weight: 2, opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.7 }), onEachFeature: (feature, layer) => { const provinceName = feature.properties.provinsi || feature.properties.state || feature.properties.Propinsi; layer.bindPopup(`<strong>${provinceName}</strong><br/>Penonton: ${formatNumber(feature.properties.audience)}`); } }).addTo(map); }).catch(error => console.error('Error updating map:', error));
            }
            updateProducerMap();
            
            // City pagination (no changes)
            const setupCityPagination = (items, tableBodyEl, paginationEl, rowsPerPage, renderRowFunction) => { if (!tableBodyEl || !paginationEl || !items) return; let currentPage = 1; const pageCount = items.length > 0 ? Math.ceil(items.length / rowsPerPage) : 0; const displayPage = (page) => { currentPage = page; tableBodyEl.innerHTML = ''; const paginatedItems = items.slice((page - 1) * rowsPerPage, page * rowsPerPage); paginatedItems.forEach(item => tableBodyEl.innerHTML += renderRowFunction(item)); renderButtons(); }; const renderButtons = () => { paginationEl.innerHTML = ''; if (pageCount <= 1) return; const ul = document.createElement('ul'); ul.className = 'pagination'; const createPageItem = (page, text = null, isDisabled = false, isActive = false) => { const li = document.createElement('li'); li.className = `page-item ${isDisabled ? 'disabled' : ''} ${isActive ? 'active' : ''}`; if (text === 'Previous') li.classList.add('previous'); if (text === 'Next') li.classList.add('next'); const a = document.createElement('a'); a.href = '#'; a.className = 'page-link'; a.innerHTML = text || page; if (!isDisabled) a.addEventListener('click', (e) => { e.preventDefault(); displayPage(page); }); li.appendChild(a); return li; }; ul.appendChild(createPageItem(currentPage - 1, 'Previous', currentPage === 1)); ul.appendChild(createPageItem(currentPage + 1, 'Next', currentPage === pageCount)); paginationEl.appendChild(ul); }; if (items.length > 0) displayPage(1); else tableBodyEl.innerHTML = `<tr><td colspan="100%" class="text-center p-5">Tidak ada data.</td></tr>`; };
            const renderCityRow = (city) => `<tr><td>${city.city_name}</td><td class="text-end">${formatNumber(city.total_viewers)}</td><td class="text-end">${parseFloat(city.occupancy).toFixed(2).replace('.', ',')}%</td></tr>`;
            setupCityPagination(@json($cityPerformance), document.getElementById('city-performance-tbody'), document.getElementById('city-pagination-controls'), 5, renderCityRow);

            // --- AJAX LOGIC FOR SCHEDULES TABLE (REVISED AND FIXED) ---
            const scheduleTableBody = document.getElementById('schedule-tbody');
            const schedulePaginationControls = document.getElementById('schedule-pagination-controls');
            const scheduleFilterCity = $('#schedule_filter_city_producer');
            const scheduleFilterTheater = $('#schedule_filter_theater_producer');

            const renderScheduleRow = (schedule) => {
                const showDate = new Date(schedule.show_date).toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' });
                const scheduleInfo = `${schedule.movie.title} - ${showDate} ${schedule.show_time.substring(0, 5)}`;
                return `<tr>
                    <td>${showDate}</td>
					<td>${schedule.movie.title}</td>
                    <td>${schedule.show_time.substring(0, 5)}</td>
                    <td>${schedule.theater.name}<span class="d-block text-muted fs-7">${schedule.theater.city_name}</span></td>
                    <td>${schedule.studio_id}</td>
                    <td>${schedule.movie_type_name}</td>
                    <td class="text-end"><b>${formatNumber(schedule.occupied_seats)}</b> / ${formatNumber(schedule.total_seats)}</td>
                    <td>Rp ${formatNumber(schedule.ticket_price)}</td>
                </tr>`;
            };

            const loadSchedules = async (url) => {
                scheduleTableBody.innerHTML = `<tr><td colspan="9" class="text-center p-5"><span class="spinner-border spinner-border-sm align-middle ms-2"></span> Loading...</td></tr>`;
                schedulePaginationControls.innerHTML = '';

                try {
                    const response = await fetch(url);
                    if (!response.ok) throw new Error('Network response was not ok');
                    const result = await response.json();

                    scheduleTableBody.innerHTML = '';
                    if (result.data && result.data.length > 0) {
                        result.data.forEach(schedule => scheduleTableBody.insertAdjacentHTML('beforeend', renderScheduleRow(schedule)));
                    } else {
                        scheduleTableBody.innerHTML = `<tr><td colspan="9" class="text-center p-5">Tidak ada data jadwal ditemukan.</td></tr>`;
                    }

                    if (result.links && result.links.length > 3) {
                        const paginationList = document.createElement('ul');
                        paginationList.className = 'pagination';
                        result.links.forEach(link => {
                            const pageItem = document.createElement('li');
                            pageItem.className = `page-item ${link.active ? 'active' : ''} ${!link.url ? 'disabled' : ''}`;
                            const pageLink = document.createElement('a');
                            pageLink.href = link.url || '#';
                            pageLink.className = 'page-link';
                            pageLink.innerHTML = link.label;
                            
                            if (link.url) {
                                pageLink.addEventListener('click', (e) => {
                                    e.preventDefault();
                                    loadSchedules(link.url);
                                });
                            }
                            pageItem.appendChild(pageLink);
                            paginationList.appendChild(pageItem);
                        });
                        schedulePaginationControls.appendChild(paginationList);
                    }

                } catch (error) {
                    console.error('Failed to load schedules:', error);
                    scheduleTableBody.innerHTML = `<tr><td colspan="9" class="text-center text-danger p-5">Gagal memuat data. Silakan coba lagi.</td></tr>`;
                }
            };
            
            const triggerScheduleLoad = () => {
                const baseUrl = '{{ route("producer.api.schedules") }}';
                const params = new URLSearchParams();

                params.set('movie_id', document.getElementById('movie_id_filter_producer').value);
                params.set('start_date', document.getElementById('start_date').value);
                params.set('end_date', document.getElementById('end_date').value);

                if (scheduleFilterCity.val()) params.set('city_id', scheduleFilterCity.val());
                if (scheduleFilterTheater.val()) params.set('theater_id', scheduleFilterTheater.val());

                loadSchedules(`${baseUrl}?${params.toString()}`);
            };

            scheduleFilterCity.on('change', function () {
                const cityId = $(this).val();
                scheduleFilterTheater.empty().append('<option></option>').val(null).prop('disabled', true);

                if (cityId) {
                    $.ajax({
                        url: '{{ route("producer.api.theaters.by_city") }}',
                        data: { city_id: cityId },
                        success: function (theaters) {
                            const options = theaters.map(theater => new Option(theater.name, theater.mtix_cinema_id, false, false));
                            scheduleFilterTheater.append(options).prop('disabled', false);
                        },
                        error: function() { console.error('Failed to load theaters.'); },
                        complete: function() { triggerScheduleLoad(); }
                    });
                } else {
                    triggerScheduleLoad();
                }
            });

            scheduleFilterTheater.on('change', function() { triggerScheduleLoad(); });
            
            // Panggil pemuatan data saat halaman pertama kali dimuat
            triggerScheduleLoad();
            
            // Modal logic
            const velocityModal = new bootstrap.Modal(document.getElementById('velocityModal'));
            let salesVelocityChart = null;
            scheduleTableBody.addEventListener('click', async (e) => {
                const btn = e.target.closest('.view-velocity-btn');
                if (btn) {
                    document.getElementById('velocityModalTitle').innerText = `Laju Penjualan: ${btn.dataset.scheduleInfo}`;
                    velocityModal.show();
                    
                    const ctx = document.getElementById('salesVelocityChart').getContext('2d');
                    if (salesVelocityChart) {
                        salesVelocityChart.destroy();
                    }
                    
                    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                    
                    try {
                        const response = await fetch(`{{ url('/producer/api/schedules') }}/${btn.dataset.scheduleId}/velocity`);
                        if (!response.ok) throw new Error('Failed to fetch velocity data');
                        
                        const chartData = await response.json();
                        
                        if(chartData.labels.length === 0) {
                             ctx.font = "16px Arial";
                             ctx.textAlign = "center";
                             ctx.fillText("Data laju penjualan tidak ditemukan.", ctx.canvas.width/2, ctx.canvas.height/2);
                             return;
                        }

                        salesVelocityChart = new Chart(ctx, {
                            type: 'line',
                            data: {
                                labels: chartData.labels,
                                datasets: [{
                                    label: 'Okupansi (%)',
                                    data: chartData.data,
                                    borderColor: '#50CD89',
                                    tension: 0.1,
                                    fill: true,
                                    backgroundColor: 'rgba(80, 205, 137, 0.1)'
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        max: 100,
                                        ticks: {
                                            callback: (value) => value + '%'
                                        }
                                    }
                                }
                            }
                        });
                    } catch (error) {
                        console.error('Error fetching velocity data:', error);
                        ctx.font = "16px Arial";
                        ctx.textAlign = "center";
                        ctx.fillText("Gagal memuat data.", ctx.canvas.width/2, ctx.canvas.height/2);
                    }
                }
            });
        });
    </script>
@endpush