@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=""/>
	<style>
		.btn-note { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
		.table-trend-container { margin-top: 1.5rem; }
	</style>
@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">
			<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">Admin 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>
		</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('admin.dashboard') }}">
						<div class="row g-4">
							<div class="col-md-4">
								<label for="movie_id_filter_admin" class="form-label">Film</label>
								<select name="movie_id" id="movie_id_filter_admin" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Pilih Film">
								<option value="all" @if($selectedMovieId == 'all') selected @endif>Semua Film Aktif</option>
								@foreach($allMovies 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">Terapkan Filter</button>
								<a href="{{ route('admin.dashboard') }}" class="btn btn-light">Reset</a>
							</div>
						</div>
					</form>
				</div>
			</div>
			<!--end::Card untuk Filter-->
			<!--begin::API Status Monitoring-->
			<div class="card card-flush mb-5 mb-xl-8">
				<div class="card-header pt-5">
					<h3 class="card-title align-items-start flex-column"><span class="card-label fw-bold text-dark">API Status Monitoring</span><span class="text-gray-400 mt-1 fw-semibold fs-6">Status endpoint scraper</span></h3>
				</div>
				<div class="card-body py-5">
					<div class="row g-5">
						@forelse ($apiStatuses as $status)
						<div class="col-md-6 col-xl-4">
							<div class="card bg-light-{{ $status->status === 'online' ? 'success' : 'danger' }} h-100">
								<div class="card-body d-flex justify-content-between align-items-center">
									<div class="me-5">
										<p class="fs-6 fw-bold text-gray-800 mb-1">{{ $status->endpoint_name }}</p>
										<p class="text-gray-600 fs-7 mb-0" title="{{ $status->last_checked_at ? $status->last_checked_at->format('d M Y, H:i:s') : 'N/A' }}">Last Check: {{ $status->last_checked_at ? $status->last_checked_at->diffForHumans() : 'Never' }}</p>
										@if($status->status === 'offline' && $status->details)
										<p class="text-danger fs-8 mt-1" title="{{ Str::limit($status->details, 30) }}">Error: {{ Str::limit($status->details, 30) }}</p>
										@endif
									</div>
									<span class="badge badge-{{ $status->status === 'online' ? 'success' : 'danger' }} fs-7 fw-bold">{{ ucfirst($status->status) }}</span>
								</div>
							</div>
						</div>
						@empty
						<div class="col-12">
							<div class="alert alert-secondary text-center">No API status data available.</div>
						</div>
						@endforelse
					</div>
				</div>
			</div>
			<!--end::API Status Monitoring-->
			<div class="separator separator-dashed my-8"></div>
			<h3 class="fs-2 fw-bold mb-8 text-center">Movie Performance Monitoring</h3>
			<!--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" class="form-label">Kota</label>
							<select id="schedule_filter_city" 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->mtix_id }}">{{ $city->name }}</option>
								@endforeach
							</select>
						</div>
						<div class="col-md-3">
							<label for="schedule_filter_theater" class="form-label">Bioskop</label>
							<select id="schedule_filter_theater" 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"></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 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 id="schedule_trend_table_body" 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->mtix_id }}">{{ $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>
		</div>
	</div>
	<!--end::Content-->
	<!-- Modal - Note Viewer (BARU) -->
	<div class="modal fade" tabindex="-1" id="noteViewerModal">
		<div class="modal-dialog modal-lg modal-dialog-scrollable">
			<div class="modal-content">
				<div class="modal-header">
					<h3 class="modal-title" id="noteViewerModalTitle">Detail Catatan</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">
					<p id="noteViewerModalContent" style="white-space: pre-wrap; word-break: break-word;"></p>
				</div>
				<div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button></div>
			</div>
		</div>
	</div>
	<!-- Modal - Sales Velocity (LAMA) -->
	<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>
@endsection

@push('scripts')
    <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 (GABUNGAN LAMA & BARU) ---
            $("#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 noteViewerModal = new bootstrap.Modal(document.getElementById('noteViewerModal'));
            const velocityModal = new bootstrap.Modal(document.getElementById('velocityModal'));
            let salesVelocityChart = null;

            document.body.addEventListener('click', function(event) {
                const noteBtn = event.target.closest('.view-note-btn');
                if (noteBtn) {
                    document.getElementById('noteViewerModalTitle').textContent = noteBtn.dataset.noteTitle;
                    document.getElementById('noteViewerModalContent').textContent = noteBtn.dataset.noteContent.replace(/; /g, '\n');
                    noteViewerModal.show();
                }

                const velocityBtn = event.target.closest('.view-velocity-btn');
                if (velocityBtn) {
                    handleVelocityClick(velocityBtn);
                }
            });

            // --- 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_admin').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('admin.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_admin').on('change', function() { cityFilter.val(null).trigger('change'); });

            // --- BAGIAN LOGIKA DARI KODE LAMA (DIINTEGRASIKAN) ---
            const dailyPerformanceCanvas = document.getElementById('dailyPerformanceChart');
			if (dailyPerformanceCanvas) {
				// 1. Ambil seluruh data performa sebagai objek JSON
				const performanceData = @json($dailyPerformance);
				console.log(performanceData);
				// 2. Gunakan .map() untuk membuat label dan data, sama seperti grafik lain
				const dailyLabels = performanceData.map(d => new Date(d.show_date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short' }));
				const dailyViewers = performanceData.map(d => d.total_viewers);

				// 3. Inisialisasi grafik dengan data yang sudah diproses di JS
				new Chart(dailyPerformanceCanvas.getContext('2d'), {
					type: 'line',
					data: {
						labels: dailyLabels, // Gunakan variabel JS
						datasets: [{
							label: 'Total Penonton Harian',
							data: dailyViewers, // Gunakan variabel JS
							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
							}
						}
					}
				});
			}

            const weekdayWeekendCanvas = document.getElementById('weekdayWeekendChart');
			if (weekdayWeekendCanvas) {
				const dayTypeData = @json($dayTypePerformance);
				new Chart(weekdayWeekendCanvas.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
							}
						}
					}
				});
			}
			const timePerformanceCanvas = document.getElementById('timePerformanceChart');
			if (timePerformanceCanvas) {
				const timeData = @json($timePerformance);
				new Chart(timePerformanceCanvas.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
							}
						}
					}
				});
			}

            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 updateAdminMap() { const selectedMovieId = document.getElementById('movie_id_filter_admin').value; const startDate = document.getElementById('start_date').value; const endDate = document.getElementById('end_date').value; const url = `{{ route('admin.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)); }
            updateAdminMap();
            
            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);

            const scheduleTableBody = document.getElementById('schedule-tbody');
			const schedulePaginationControls = document.getElementById('schedule-pagination-controls');
			const scheduleFilterCity = $('#schedule_filter_city');
			const scheduleFilterTheater = $('#schedule_filter_theater');
			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("admin.api.dashboard.schedules") }}';
				const params = new URLSearchParams();
				params.set('movie_id', document.getElementById('movie_id_filter_admin').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("admin.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();
			});
			triggerScheduleLoad();
            
            const handleVelocityClick = async (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('/admin/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