@extends('layouts.master')

@section('styles')
    <style>
        .stat-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%);
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .stat-card::after {
            content: "";
            position: absolute;
            top: -28px;
            right: -28px;
            width: 92px;
            height: 92px;
            border-radius: 50%;
            background: var(--soft, #f8f9fa);
            opacity: .9;
        }
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
        }
        .stat-card .stat-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;
            box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
        }
        .stat-card .stat-body { position: relative; z-index: 1; min-width: 0; }
        .stat-card .stat-body small { display: block; margin-bottom: .15rem; }
        .stat-card .stat-value { color: var(--accent, #0d6efd); font-size: 1.05rem; line-height: 1.2; }
        .stat-card .stat-sub { display: block; margin-top: .15rem; font-size: .75rem; }
        .stat-card--primary { --accent: #0d6efd; --soft: #e7f1ff; }
        .stat-card--success { --accent: #198754; --soft: #e8f5ee; }
        .stat-card--warning { --accent: #fd7e14; --soft: #fff1e6; }
    </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">Statistik Pengunjung</h4>
                                <small class="text-muted d-block mb-3">Jumlah kendaraan masuk berdasarkan waktu masuk. Fokus qty, tanpa data pendapatan.</small>
                                <form id="filter-pengunjung" action="javascript:void(0)">
                                    <div class="row align-items-end g-2">
                                        <div class="col-md-2">
                                            <label class="form-label" for="grup-pengunjung">Pecah Per</label>
                                            <select class="form-select form-select-sm" id="grup-pengunjung">
                                                <option value="jam">Jam</option>
                                                <option value="hari" selected>Hari</option>
                                                <option value="minggu">Minggu</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label" for="pengunjung-awal">Periode Awal</label>
                                            <input type="date" class="form-control form-control-sm" id="pengunjung-awal">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label" for="pengunjung-akhir">Periode Akhir</label>
                                            <input type="date" class="form-control form-control-sm" id="pengunjung-akhir">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label" for="pintu-pengunjung">Pintu Masuk</label>
                                            <select class="form-select form-select-sm" id="pintu-pengunjung">
                                                <option value="all" selected>Semua Pintu</option>
                                                @foreach($pintu as $p)
                                                    <option value="{{ $p->id }}">{{ $p->nama }} ({{ $p->id }})</option>
                                                @endforeach
                                                <option value="__none__">Tanpa Pintu</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="submit" class="btn btn-sm btn-primary" id="btn-proses-pengunjung">Proses</button>
                                        </div>
                                    </div>
                                </form>
                                <hr class="my-3">
                                <div class="row g-3 mb-3">
                                    <div class="col-md-4">
                                        <div class="stat-card stat-card--primary">
                                            <div class="stat-icon"><i class="mdi mdi-account-multiple-outline"></i></div>
                                            <div class="stat-body">
                                                <small class="text-muted">Total Pengunjung</small>
                                                <div class="fw-bold stat-value" id="peng-total">-</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="stat-card stat-card--success">
                                            <div class="stat-icon"><i class="mdi mdi-chart-line"></i></div>
                                            <div class="stat-body">
                                                <small class="text-muted">Rata-rata / Periode</small>
                                                <div class="fw-bold stat-value" id="peng-rata">-</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="stat-card stat-card--warning">
                                            <div class="stat-icon"><i class="mdi mdi-trophy-outline"></i></div>
                                            <div class="stat-body">
                                                <small class="text-muted">Puncak</small>
                                                <div class="fw-bold stat-value" id="peng-puncak">-</div>
                                                <small class="text-muted stat-sub" id="peng-puncak-periode"></small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3" style="max-height: 320px;"><canvas id="chart-pengunjung" height="120"></canvas></div>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Periode</th>
                                                <th>Pintu Masuk</th>
                                                <th class="text-end">Jumlah Pengunjung</th>
                                            </tr>
                                        </thead>
                                        <tbody id="body-pengunjung">
                                            <tr><td colspan="3" class="text-center text-muted">Pilih filter lalu klik Proses.</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 pengunjungUrl = '{{ route('statistik.pengunjung.data', [], false) }}';
            let chartPengunjung = null;
            const today = new Date().toISOString().split('T')[0];
            $('#pengunjung-akhir').val(today);
            $('#pengunjung-awal').val(new Date(Date.now() - 6 * 864e5).toISOString().split('T')[0]);

            function fmtN(v) {
                return Number(v || 0).toLocaleString('id-ID');
            }

            function labelPengunjung(p, grup) {
                if (grup === 'jam') {
                    const d = new Date(p.replace(' ', 'T'));
                    return d.toLocaleDateString('id-ID', { day: '2-digit', month: 'short' }) + ' ' + String(d.getHours()).padStart(2, '0') + ':00';
                }
                if (grup === 'minggu') return 'Minggu ' + p;
                const d = new Date(p + 'T00:00:00');
                return d.toLocaleDateString('id-ID', { day: '2-digit', month: 'short' });
            }

            function drawPengunjungChart(rows, grup) {
                const ctx = document.getElementById('chart-pengunjung');
                if (chartPengunjung) chartPengunjung.destroy();

                const labels = [...new Set(rows.map(r => r.periode))];
                const perPintu = new Map();
                rows.forEach(function (row) {
                    if (!perPintu.has(row.pintu)) perPintu.set(row.pintu, new Map());
                    perPintu.get(row.pintu).set(row.periode, Number(row.jumlah));
                });
                const colors = ['#0d6efd', '#198754', '#fd7e14', '#6f42c1', '#dc3545', '#20c997', '#0dcaf0', '#ffc107', '#6c757d'];
                const datasets = [...perPintu.entries()].map(function (entry, i) {
                    const pintu = entry[0]; const data = entry[1];
                    return {
                        label: pintu,
                        data: labels.map(p => data.get(p) || 0),
                        borderColor: colors[i % colors.length],
                        backgroundColor: colors[i % colors.length],
                        fill: false,
                        tension: 0.25,
                        borderWidth: 2,
                        pointRadius: labels.length > 60 ? 0 : 3,
                    };
                });

                chartPengunjung = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels.map(p => labelPengunjung(p, grup)),
                        datasets: datasets,
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        legend: { display: datasets.length > 1 },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: { callback: v => Number(v).toLocaleString('id-ID') },
                            },
                        },
                        tooltips: {
                            callbacks: {
                                label: function (item, data) {
                                    return ' ' + data.datasets[item.datasetIndex].label + ': ' + fmtN(data.datasets[item.datasetIndex].data[item.index]) + ' pengunjung';
                                },
                            },
                        },
                    },
                });
            }

            $('#filter-pengunjung').on('submit', function () {
                const btn = $('#btn-proses-pengunjung'); const btnHtml = btn.html();
                const grup = $('#grup-pengunjung').val();
                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Memproses...');
                $('#body-pengunjung').html('<tr><td colspan="3" class="text-center text-muted py-4"><span class="spinner-border spinner-border-sm me-2"></span>Memuat pengunjung...</td></tr>');
                $.ajax({
                    url: pengunjungUrl,
                    type: 'GET',
                    data: {
                        grup: grup,
                        tgl_awal: $('#pengunjung-awal').val(),
                        tgl_akhir: $('#pengunjung-akhir').val(),
                        pintu_masuk: $('#pintu-pengunjung').val(),
                    },
                    success: function (r) {
                        const s = r.ringkasan || {};
                        $('#peng-total').text(fmtN(s.total) + ' pengunjung');
                        $('#peng-rata').text(fmtN(s.rata_rata) + ' pengunjung');
                        $('#peng-puncak').text(fmtN(s.puncak) + ' pengunjung');
                        const puncakInfo = s.puncak_periode ? labelPengunjung(s.puncak_periode, grup) + (s.puncak_pintu ? ' · ' + s.puncak_pintu : '') : '-';
                        $('#peng-puncak-periode').text(puncakInfo);
                        if (!r.data.length) {
                            $('#body-pengunjung').html('<tr><td colspan="3" class="text-center">Data tidak ditemukan.</td></tr>');
                            if (chartPengunjung) chartPengunjung.destroy();
                            return;
                        }
                        let html = '';
                        r.data.forEach(function (row) {
                            html += '<tr><td>' + labelPengunjung(row.periode, grup) + '</td>'
                                + '<td>' + row.pintu + '</td>'
                                + '<td class="text-end">' + fmtN(row.jumlah) + '</td></tr>';
                        });
                        $('#body-pengunjung').html(html);
                        drawPengunjungChart(r.data, grup);
                    },
                    error: function (xhr) {
                        let msg = 'Gagal memuat statistik pengunjung.';
                        if (xhr.responseJSON?.message) msg = xhr.responseJSON.message;
                        else if (xhr.status === 422 && xhr.responseJSON?.errors) msg = Object.values(xhr.responseJSON.errors).flat().join(' ');
                        $('#body-pengunjung').html('<tr><td colspan="3" class="text-center text-danger">' + msg + '</td></tr>');
                        Swal.fire({icon: 'error', title: 'Gagal memuat', text: msg});
                    },
                    complete: function () {
                        btn.prop('disabled', false).html(btnHtml);
                    },
                });
            });

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