@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 Saya</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::Section Title-->
            <h3 class="fs-2 fw-bold mb-8 text-center">Movie Performance Monitoring</h3>
            <!--end::Section Title-->

            <!--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="dayTypePerformanceChart"></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-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>Tanggal</th><th>Jam</th><th>Bioskop</th><th>Studio</th><th class="text-end">Penonton</th><th>Harga</th><th class="text-center">Aksi</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>
    </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-->
@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 () {
            const formatNumber = (num) => new Intl.NumberFormat('id-ID').format(num);

            // Inisialisasi Flatpickr untuk date range
            $("#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",
            });

            // 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)
            const dayTypeData = @json($dayTypePerformance);
            new Chart(document.getElementById('dayTypePerformanceChart').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 } } }
            });

            // 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: Geographic Performance (Leaflet)
            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 => {
                        if (!res.ok) throw new Error(`API fetch failed: ${res.statusText}`);
                        return res.json();
                    }),
                    fetch('{{ asset('geojson/indonesia-prov.json') }}').then(res => {
                        if (!res.ok) throw new Error(`GeoJSON fetch failed: ${res.statusText}`);
                        return 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();
            
            // Pagination Logic
            const setupPagination = (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;
                    };
                    
                    const createEllipsis = () => {
                        const li = document.createElement('li');
                        li.className = 'page-item disabled';
                        const a = document.createElement('a');
                        a.href = '#';
                        a.className = 'page-link';
                        a.innerText = '...';
                        li.appendChild(a);
                        return li;
                    }

                    ul.appendChild(createPageItem(currentPage - 1, 'Previous', currentPage === 1));

                    const window = 2;
                    let pagesToShow = [];
                    
                    for (let i = 1; i <= pageCount; i++) {
                        if (i === 1 || i === pageCount || (i >= currentPage - window && i <= currentPage + window)) {
                            pagesToShow.push(i);
                        }
                    }
                    
                    let lastPage = 0;
                    pagesToShow.forEach(p => {
                        if (lastPage !== 0 && lastPage + 1 !== p) {
                            ul.appendChild(createEllipsis());
                        }
                        ul.appendChild(createPageItem(p, null, false, p === currentPage));
                        lastPage = p;
                    });

                    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>`;
            };

            // Render Functions for Pagination
            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>`;
            const renderScheduleRow = (schedule) => {
                const showDate = new Date(schedule.show_date).toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' });
                return `<tr>
                    <td>${showDate}</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 class="text-end"><b>${formatNumber(schedule.occupied_seats)}</b> / ${formatNumber(schedule.total_seats)}</td>
                    <td>Rp ${formatNumber(schedule.ticket_price)}</td>
                    <td class="text-center"><button class="btn btn-sm btn-light-primary view-velocity-btn" data-schedule-id="${schedule.id}" data-schedule-info="${schedule.theater.name} (${showDate} - ${schedule.show_time.substring(0, 5)})">Lihat Laju</button></td>
                </tr>`;
            };

            // Initialize Pagination
            setupPagination(@json($cityPerformance), document.getElementById('city-performance-tbody'), document.getElementById('city-pagination-controls'), 5, renderCityRow);
            setupPagination(@json($schedules), document.getElementById('schedule-tbody'), document.getElementById('schedule-pagination-controls'), 10, renderScheduleRow);

            // Modal & Sales Velocity Chart Logic
            const velocityModal = new bootstrap.Modal(document.getElementById('velocityModal'));
            let salesVelocityChart = null;
            document.getElementById('schedule-tbody').addEventListener('click', async (e) => {
                if (e.target.classList.contains('view-velocity-btn')) {
                    const btn = e.target;
                    document.getElementById('velocityModalTitle').innerText = `Laju Penjualan: ${btn.dataset.scheduleInfo}`;
                    velocityModal.show();
                    const ctx = document.getElementById('salesVelocityChart').getContext('2d');
                    if (salesVelocityChart) salesVelocityChart.destroy();
                    
                    try {
                        const response = await fetch(`/producer/api/schedules/${btn.dataset.scheduleId}/velocity`);
                        const chartData = await response.json();
                        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);
                    }
                }
            });
        });
    </script>
@endpush