@extends('layouts.master')

@section('styles')
    <style>
        .occ-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: .8rem;
            height: 100%;
            padding: .9rem 1rem;
            overflow: hidden;
            border: 1px solid #e9ecef;
            border-left: 4px solid var(--accent, #0d6efd);
            border-radius: 12px;
            background: linear-gradient(135deg, #ffffff 0%, var(--soft, #f8f9fa) 100%);
        }
        .occ-card::after {
            content: "";
            position: absolute;
            top: -28px;
            right: -28px;
            width: 92px;
            height: 92px;
            border-radius: 50%;
            background: var(--soft, #f8f9fa);
            opacity: .9;
        }
        .occ-card .occ-icon {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: none;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: var(--accent, #0d6efd);
            color: #fff;
            font-size: 1.35rem;
        }
        .occ-card .occ-body { position: relative; z-index: 1; min-width: 0; }
        .occ-card .occ-value { color: var(--accent, #0d6efd); font-size: 1.05rem; line-height: 1.2; }
        .occ-card .occ-sub { display: block; margin-top: .15rem; font-size: .75rem; }
        .occ-card--primary { --accent: #0d6efd; --soft: #e7f1ff; }
        .occ-card--danger { --accent: #dc3545; --soft: #fdecee; }
        .occ-card--warning { --accent: #fd7e14; --soft: #fff1e6; }
        .occ-card--success { --accent: #198754; --soft: #e8f5ee; }
        .occ-chart-wrap { position: relative; height: 360px; }
        .occ-table td, .occ-table th { vertical-align: middle; }
        .occ-scroll { max-height: 540px; overflow-y: auto; }
        .occ-scroll thead th { position: sticky; top: 0; z-index: 2; background: #fff; }
    </style>
@endsection

@section('content')
    <div class="container-fluid page-body-wrapper">
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-md-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Okupansi Area Parkir</h4>
                                <small class="text-muted d-block mb-3">Menentukan jam area cenderung penuh dan cenderung kosong berdasarkan arus keluar-masuk pintu yang terhubung ke area.</small>
                                <form id="filter-okupansi" action="javascript:void(0)">
                                    <div class="row align-items-end g-2">
                                        <div class="col-md-3">
                                            <label class="form-label" for="okupansi-area">Area Parkir</label>
                                            <select class="form-select form-select-sm" id="okupansi-area">
                                                <option value="all" selected>Semua Area</option>
                                                @foreach($area as $a)
                                                    <option value="{{ $a->id_lokasi }}">{{ $a->nama_lokasi }} ({{ $a->id_lokasi }})</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label" for="okupansi-awal">Periode Awal</label>
                                            <input type="date" class="form-control form-control-sm" id="okupansi-awal">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label" for="okupansi-akhir">Periode Akhir</label>
                                            <input type="date" class="form-control form-control-sm" id="okupansi-akhir">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="submit" class="btn btn-sm btn-primary" id="btn-proses-okupansi">Proses</button>
                                        </div>
                                    </div>
                                </form>
                                <div class="alert alert-light border small mt-3 mb-3">
                                    <i class="mdi mdi-information-outline"></i>
                                    Simulasi dimulai dari 0 lot terisi pada pukul 00:00 setiap hari. Pintu <strong>Masuk (jenis 0)</strong> mengurangi sisa lot sehingga okupansi naik, pintu <strong>Keluar (jenis 1)</strong> menambah sisa lot sehingga okupansi turun, dan nilai dibatasi 0 sampai kapasitas area. Transaksi berstatus arsip/void tidak dihitung.
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-md-3">
                                        <div class="occ-card occ-card--primary">
                                            <div class="occ-icon"><i class="mdi mdi-parking"></i></div>
                                            <div class="occ-body">
                                                <small class="text-muted">Area Dianalisis</small>
                                                <div class="fw-bold occ-value" id="occ-jumlah-area">-</div>
                                                <small class="text-muted occ-sub" id="occ-area-terpadat"></small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="occ-card occ-card--danger">
                                            <div class="occ-icon"><i class="mdi mdi-alert-octagon-outline"></i></div>
                                            <div class="occ-body">
                                                <small class="text-muted">Area Pernah Penuh</small>
                                                <div class="fw-bold occ-value" id="occ-area-penuh">-</div>
                                                <small class="text-muted occ-sub">Mencapai kapasitas lot</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="occ-card occ-card--warning">
                                            <div class="occ-icon"><i class="mdi mdi-clock-fast"></i></div>
                                            <div class="occ-body">
                                                <small class="text-muted">Jam Paling Padat</small>
                                                <div class="fw-bold occ-value" id="occ-jam-padat">-</div>
                                                <small class="text-muted occ-sub" id="occ-jam-padat-sub"></small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="occ-card occ-card--success">
                                            <div class="occ-icon"><i class="mdi mdi-weather-night"></i></div>
                                            <div class="occ-body">
                                                <small class="text-muted">Jam Paling Lengang</small>
                                                <div class="fw-bold occ-value" id="occ-jam-lengang">-</div>
                                                <small class="text-muted occ-sub" id="occ-jam-lengang-sub"></small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="occ-chart-wrap mb-4">
                                    <canvas id="chart-okupansi"></canvas>
                                </div>
                                <h5 class="card-title mb-2">Ringkasan per Area</h5>
                                <div class="table-responsive mb-4">
                                    <table class="table table-bordered table-striped occ-table">
                                        <thead>
                                            <tr>
                                                <th>Area</th>
                                                <th class="text-end">Kapasitas</th>
                                                <th class="text-end">Rata-rata Okupansi</th>
                                                <th>Jam Paling Padat</th>
                                                <th>Jam Paling Lengang</th>
                                                <th>Paling Sering Penuh</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody id="body-ringkasan-okupansi">
                                            <tr><td colspan="7" class="text-center text-muted">Pilih filter lalu klik Proses.</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                                <h5 class="card-title mb-2">Rincian per Jam</h5>
                                <div class="table-responsive occ-scroll">
                                    <table class="table table-sm table-bordered table-striped occ-table">
                                        <thead>
                                            <tr>
                                                <th>Area</th>
                                                <th>Jam</th>
                                                <th class="text-end">Rata-rata Lot</th>
                                                <th class="text-end">Okupansi</th>
                                                <th class="text-end">Masuk</th>
                                                <th class="text-end">Keluar</th>
                                                <th class="text-end">Hari Penuh</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody id="body-detail-okupansi">
                                            <tr><td colspan="8" class="text-center text-muted">Belum ada data.</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="{{ asset('vendor/sweetalert2/dist/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('vendors/chart.js/Chart.min.js') }}"></script>
    <script>
        $(function () {
            const dataUrl = '{{ route('okupansi.area.data', [], false) }}';
            let chart = null;

            function localDate(offset) {
                const d = new Date();
                d.setDate(d.getDate() + offset);
                return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
            }

            $('#okupansi-akhir').val(localDate(0));
            $('#okupansi-awal').val(localDate(-6));

            function fmtN(value, decimals) {
                return Number(value || 0).toLocaleString('id-ID', {
                    minimumFractionDigits: decimals || 0,
                    maximumFractionDigits: decimals || 0
                });
            }

            function esc(value) {
                if (value === null || value === undefined) return '';
                return String(value)
                    .replace(/&/g, '&amp;')
                    .replace(/"/g, '&quot;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;');
            }

            function statusBadge(status) {
                const map = {
                    'Penuh': 'bg-danger',
                    'Hampir penuh': 'bg-warning text-dark',
                    'Ramai': 'bg-primary',
                    'Lengang': 'bg-success',
                    'Kosong': 'bg-secondary',
                    'Kapasitas belum diisi': 'bg-light text-dark border'
                };
                return '<span class="badge ' + (map[status] || 'bg-light text-dark border') + '">' + esc(status) + '</span>';
            }

            function renderChart(rows) {
                const canvas = document.getElementById('chart-okupansi');
                if (chart) chart.destroy();
                if (!rows.length) return;

                const labels = rows[0].jam.map(h => h.label);
                const colors = ['#0d6efd', '#dc3545', '#198754', '#fd7e14', '#6f42c1', '#20c997', '#0dcaf0', '#ffc107', '#6c757d'];
                const datasets = rows.map(function (area, index) {
                    return {
                        label: area.nama_lokasi,
                        data: area.jam.map(h => h.persen),
                        capacity: area.kapasitas,
                        borderColor: colors[index % colors.length],
                        backgroundColor: colors[index % colors.length],
                        fill: false,
                        tension: 0.25,
                        borderWidth: 2,
                        pointRadius: 2,
                        pointHoverRadius: 4
                    };
                });

                chart = new Chart(canvas, {
                    type: 'line',
                    data: { labels: labels, datasets: datasets },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        legend: { display: true },
                        scales: {
                            y: {
                                beginAtZero: true,
                                max: 110,
                                ticks: { callback: value => value + '%' }
                            }
                        },
                        tooltips: {
                            callbacks: {
                                label: function (item, data) {
                                    const area = rows[item.datasetIndex];
                                    const hour = area.jam[item.index];
                                    return ' ' + data.datasets[item.datasetIndex].label + ': '
                                        + fmtN(hour.persen, 1) + '% (' + fmtN(hour.rata, 1) + '/' + fmtN(area.kapasitas) + ' lot)';
                                }
                            }
                        }
                    }
                });
            }

            function renderSummary(rows) {
                if (!rows.length) {
                    $('#body-ringkasan-okupansi').html('<tr><td colspan="7" class="text-center">Data tidak ditemukan.</td></tr>');
                    return;
                }

                let html = '';
                rows.forEach(function (area) {
                    const full = area.jam_penuh
                        ? esc(area.jam_penuh.label) + '<small class="d-block text-muted">' + fmtN(area.jam_penuh.hari_penuh) + '/' + fmtN(area.jam_penuh.hari_dianalisis) + ' hari</small>'
                        : '<span class="text-muted">Belum pernah</span>';
                    html += '<tr>'
                        + '<td><strong>' + esc(area.nama_lokasi) + '</strong><small class="d-block text-muted">' + esc(area.id_lokasi) + '</small></td>'
                        + '<td class="text-end">' + fmtN(area.kapasitas) + ' lot</td>'
                        + '<td class="text-end">' + fmtN(area.rata_okupansi, 1) + ' lot<small class="d-block text-muted">' + fmtN(area.rata_persen, 1) + '%</small></td>'
                        + '<td><strong>' + esc(area.puncak.label) + '</strong><small class="d-block text-muted">' + fmtN(area.puncak.rata, 1) + ' lot (' + fmtN(area.puncak.persen, 1) + '%)</small></td>'
                        + '<td><strong>' + esc(area.kosong.label) + '</strong><small class="d-block text-muted">' + fmtN(area.kosong.rata, 1) + ' lot (' + fmtN(area.kosong.persen, 1) + '%)</small></td>'
                        + '<td>' + full + '</td>'
                        + '<td>' + statusBadge(area.status) + '</td>'
                        + '</tr>';
                });
                $('#body-ringkasan-okupansi').html(html);
            }

            function renderDetail(rows) {
                if (!rows.length) {
                    $('#body-detail-okupansi').html('<tr><td colspan="8" class="text-center">Data tidak ditemukan.</td></tr>');
                    return;
                }

                let html = '';
                rows.forEach(function (area) {
                    area.jam.forEach(function (hour) {
                        html += '<tr>'
                            + '<td><strong>' + esc(area.nama_lokasi) + '</strong></td>'
                            + '<td>' + esc(hour.label) + '</td>'
                            + '<td class="text-end">' + fmtN(hour.rata, 1) + '</td>'
                            + '<td class="text-end">' + fmtN(hour.persen, 1) + '%</td>'
                            + '<td class="text-end">' + fmtN(hour.masuk) + '</td>'
                            + '<td class="text-end">' + fmtN(hour.keluar) + '</td>'
                            + '<td class="text-end">' + fmtN(hour.hari_penuh) + '/' + fmtN(hour.hari_dianalisis) + '</td>'
                            + '<td>' + statusBadge(hour.status) + '</td>'
                            + '</tr>';
                    });
                });
                $('#body-detail-okupansi').html(html);
            }

            function renderCards(summary) {
                const topArea = summary.area_terpadat;
                $('#occ-jumlah-area').text(fmtN(summary.jumlah_area) + ' area');
                $('#occ-area-terpadat').text(topArea ? 'Terpadat: ' + topArea.nama_lokasi + ' (' + fmtN(topArea.puncak.persen, 1) + '%)' : '-');
                $('#occ-area-penuh').text(fmtN(summary.area_pernah_penuh) + ' area');
                $('#occ-jam-padat').text(summary.jam_padat ? summary.jam_padat.label : '-');
                $('#occ-jam-padat-sub').text(summary.jam_padat ? 'Rata-rata ' + fmtN(summary.jam_padat.rata, 1) + ' lot terisi' : '-');
                $('#occ-jam-lengang').text(summary.jam_lengang ? summary.jam_lengang.label : '-');
                $('#occ-jam-lengang-sub').text(summary.jam_lengang ? 'Rata-rata ' + fmtN(summary.jam_lengang.rata, 1) + ' lot terisi' : '-');
            }

            $('#filter-okupansi').on('submit', function (event) {
                event.preventDefault();
                const btn = $('#btn-proses-okupansi');
                const btnHtml = btn.html();
                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Memproses...');
                $('#body-ringkasan-okupansi').html('<tr><td colspan="7" class="text-center py-4"><span class="spinner-border spinner-border-sm me-2"></span>Menghitung okupansi...</td></tr>');
                $('#body-detail-okupansi').html('<tr><td colspan="8" class="text-center py-4"><span class="spinner-border spinner-border-sm me-2"></span>Memuat rincian...</td></tr>');

                $.ajax({
                    url: dataUrl,
                    type: 'GET',
                    data: {
                        area: $('#okupansi-area').val(),
                        tgl_awal: $('#okupansi-awal').val(),
                        tgl_akhir: $('#okupansi-akhir').val()
                    },
                    success: function (response) {
                        const rows = response.data || [];
                        renderCards(response.ringkasan || {});
                        renderChart(rows);
                        renderSummary(rows);
                        renderDetail(rows);
                    },
                    error: function (xhr) {
                        let message = 'Gagal menghitung okupansi area.';
                        if (xhr.responseJSON?.message) message = xhr.responseJSON.message;
                        else if (xhr.status === 422 && xhr.responseJSON?.errors) message = Object.values(xhr.responseJSON.errors).flat().join(' ');
                        if (chart) {
                            chart.destroy();
                            chart = null;
                        }
                        $('#body-ringkasan-okupansi').html('<tr><td colspan="7" class="text-center text-danger">' + esc(message) + '</td></tr>');
                        $('#body-detail-okupansi').html('<tr><td colspan="8" class="text-center text-danger">' + esc(message) + '</td></tr>');
                        Swal.fire({ icon: 'error', title: 'Gagal memuat', text: message });
                    },
                    complete: function () {
                        btn.prop('disabled', false).html(btnHtml);
                    }
                });
            });

            $('#filter-okupansi').submit();
        });
    </script>
@endsection