@extends('layouts.app')
@section('title', 'Dashboard')

@section('content')

    <div class="container-fluid px-4">
        <h1 class="mt-4">Dashboard Sistem</h1>
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item active">Ringkasan Aktivitas</li>
        </ol>


        {{-- ========================= --}}
        {{-- CARD BARIS 1 --}}
        {{-- ========================= --}}
        <div class="row mb-4">

            @include('components.card-stat', [
                'color' => 'primary',
                'title' => 'Tamu Hari Ini',
                'value' => number_format($tamuHariIni),
                'icon' => 'users',
                'footer' => 'Tanggal ' . now()->translatedFormat('d M Y'),
            ])

            @include('components.card-stat', [
                'color' => 'success',
                'title' => 'Total Seluruh Tamu',
                'value' => number_format($totalTamu),
                'icon' => 'address-book',
                'footer' => 'Semua tamu terdaftar',
            ])

            @include('components.card-stat', [
                'color' => 'warning',
                'title' => 'Penyelenggara',
                'value' => number_format($totalPenyelenggara),
                'icon' => 'user-tie',
                'footer' => 'Penyelenggara terdaftar',
            ])

            @include('components.card-stat', [
                'color' => 'info',
                'title' => 'OPD Terdaftar',
                'value' => number_format($totalOpd),
                'icon' => 'building',
                'footer' => 'Daftar OPD',
            ])
        </div>


        {{-- ========================= --}}
        {{-- CARD BARIS 2 --}}
        {{-- ========================= --}}
        <div class="row mb-4">

            @include('components.card-stat', [
                'color' => 'secondary',
                'title' => 'Acara Berlangsung',
                'value' => number_format($acaraBerlangsung),
                'icon' => 'clock',
                'footer' => 'Sedang berlangsung sekarang',
            ])

            @include('components.card-stat', [
                'color' => 'primary',
                'title' => 'Acara Mendatang',
                'value' => number_format($acaraMendatang),
                'icon' => 'calendar-plus',
                'footer' => 'Belum dimulai',
            ])

            @include('components.card-stat', [
                'color' => 'danger',
                'title' => 'Acara Selesai Minggu Ini',
                'value' => number_format($acaraSelesaiMinggu),
                'icon' => 'calendar-check',
                'footer' => 'Rekap minggu berjalan',
            ])

            @include('components.card-stat', [
                'color' => 'dark',
                'title' => 'Akun Pengelola',
                'value' => number_format($jumlahAdmin),
                'icon' => 'user-cog',
                'footer' => 'Admin sistem',
            ])

        </div>


        {{-- ========================= --}}
        {{-- GRAFIK --}}
        {{-- ========================= --}}
        <div class="row">

            @include('components.chart', [
                'id' => 'statistikTamu',
                'icon' => 'chart-area',
                'title' => 'Statistik Tamu 7 Hari Terakhir',
            ])

            @include('components.chart', [
                'id' => 'statistikAcara',
                'icon' => 'chart-bar',
                'title' => 'Statistik Acara Bulan Ini',
            ])

            @include('components.chart', [
                'id' => 'chartPenyelenggara',
                'icon' => 'chart-bar',
                'title' => 'Top 5 Penyelenggara Bulan Ini',
            ])

            @include('components.chart', [
                'id' => 'chartAcaraPerBulan',
                'icon' => 'chart-line',
                'title' => 'Grafik Acara per Bulan (12 Bulan Terakhir)',
            ])


            @include('components.chart', [
                'id' => 'chartOpdPerAcara',
                'icon' => 'chart-bar',
                'title' => 'OPD Hadir vs Tidak Hadir per Acara',
            ])


        </div>

    </div>

    <div id="opdSidePanel">
        <div id="opdSidePanelHeader">
            <span id="opdSidePanelTitle">Detail OPD</span>
            <button id="opdSidePanelClose">✖</button>
        </div>
        <div id="opdSidePanelContent"></div>
    </div>

@endsection
@push('pageStyles')
    <style>
        .card-footer {
            min-height: 38px;
        }

        #statistikTamu,
        #statistikAcara,
        #chartPenyelenggara,
        #chartAcaraPerBulan,
        #chartOpdPerAcara {
            height: 320px !important;
        }

        #opdSidePanel {
            position: fixed;
            top: 0;
            right: -350px;
            /* hidden */
            width: 350px;
            height: 100vh;
            background: #fff;
            border-left: 2px solid #ddd;
            box-shadow: -3px 0 6px rgba(0, 0, 0, 0.1);
            padding: 0;
            transition: 0.3s ease;
            z-index: 9999;
            display: flex;
            flex-direction: column;
        }

        #opdSidePanelHeader {
            padding: 15px;
            background: #f5f5f5;
            font-weight: bold;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #opdSidePanelClose {
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
        }

        #opdSidePanelContent {
            padding: 15px;
            overflow-y: auto;
            font-size: 14px;
        }
    </style>
@endpush

@push('pageScripts')
    <script>
        // =============================
        // GLOBAL DEFAULTS
        // =============================
        if (window.Chart) {
            Chart.defaults.global.defaultFontFamily =
                '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif';
            Chart.defaults.global.defaultFontColor = '#333';
            Chart.defaults.global.defaultFontSize = 12;
            Chart.defaults.global.tooltips.intersect = true;
            Chart.defaults.global.tooltips.mode = 'nearest';
            Chart.defaults.global.maintainAspectRatio = false;
        }

        function $id(id) {
            return document.getElementById(id);
        }

        function fmtNumber(v) {
            if (v === null || v === undefined) return '-';
            return v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

        const opdDetailHadir = {!! json_encode($opdDetailHadir ?? []) !!};
        const opdDetailTidakHadir = {!! json_encode($opdDetailTidakHadir ?? []) !!};

        const baseGrid = {
            color: "rgba(0,0,0,0.05)",
            borderDash: [3, 3]
        };

        const baseXAxes = [{
            ticks: {
                autoSkip: true,
                maxRotation: 0,
                fontSize: 11
            },
            gridLines: {
                display: false
            }
        }];

        const baseYAxes = [{
            ticks: {
                beginAtZero: true,
                precision: 0,
                fontSize: 11
            },
            gridLines: baseGrid
        }];

        function baseOptions(extra = {}) {
            return Object.assign({
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                tooltips: {
                    callbacks: {
                        label: function(t) {
                            const val = t.yLabel ?? t.value ?? t.xLabel;
                            return fmtNumber(val);
                        }
                    }
                },
                scales: {
                    xAxes: baseXAxes,
                    yAxes: baseYAxes
                }
            }, extra);
        }

        function safeCreateChart(ctx, cfg) {
            try {
                return new Chart(ctx, cfg);
            } catch (e) {
                console.error(e);
                return null;
            }
        }

        // =============================
        // DATASET TAMU
        // =============================
        const datasetTamu = {
            7: {
                labels: {!! json_encode($data7['labels']) !!},
                values: {!! json_encode($data7['values']) !!}
            },
            30: {
                labels: {!! json_encode($data30['labels']) !!},
                values: {!! json_encode($data30['values']) !!}
            },
            180: {
                labels: {!! json_encode($data180['labels']) !!},
                values: {!! json_encode($data180['values']) !!}
            }
        };

        // === Inisialisasi Chart Statistik Tamu ===
        const ctxStatistik = document.getElementById("statistikTamu").getContext("2d");
        const titleElement = document.getElementById("chartTitle"); // pastikan ID ini ada di komponen chart header

        let statistikChart = new Chart(ctxStatistik, {
            type: 'line',
            data: {
                labels: datasetTamu[7].labels,
                datasets: [{
                    label: "Jumlah Tamu",
                    lineTension: 0.3,
                    backgroundColor: "rgba(2,117,216,0.2)",
                    borderColor: "rgba(2,117,216,1)",
                    pointRadius: 5,
                    pointBackgroundColor: "rgba(2,117,216,1)",
                    pointBorderColor: "rgba(255,255,255,0.8)",
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(2,117,216,1)",
                    pointHitRadius: 50,
                    pointBorderWidth: 2,
                    data: datasetTamu[7].values,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: false
                        },
                        ticks: {
                            maxTicksLimit: 7
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            precision: 0,
                            maxTicksLimit: 5
                        }
                    }]
                },
                legend: {
                    display: false
                }
            }
        });

        // === Dropdown Ganti Periode ===
        const periodeSelect = document.getElementById('periodeTamu');
        if (periodeSelect) {
            periodeSelect.addEventListener('change', function() {
                const val = this.value;

                // Update data chart
                statistikChart.data.labels = datasetTamu[val].labels;
                statistikChart.data.datasets[0].data = datasetTamu[val].values;
                statistikChart.update();

                // Update judul chart (otomatis)
                let newTitle = '';
                if (val == 7)
                    newTitle = 'Statistik Tamu 7 Hari Terakhir';
                else if (val == 30)
                    newTitle = 'Statistik Tamu 1 Bulan Terakhir (Per Minggu)';
                else
                    newTitle = 'Statistik Tamu 6 Bulan Terakhir (Per Bulan)';

                // Jika header chart pakai <div id="chartTitle">
                if (titleElement) {
                    titleElement.innerHTML = `<i class="fas fa-chart-area me-1"></i> ${newTitle}`;
                }
            });
        }


        // =============================
        // GRAFIK ACARA BULAN INI
        // =============================
        (function() {
            let el = $id('statistikAcara');
            if (!el) return;

            safeCreateChart(el.getContext("2d"), {
                type: 'bar',
                data: {
                    labels: ["Mulai Bulan Ini", "Selesai Bulan Ini"],
                    datasets: [{
                        label: "Jumlah",
                        data: [{{ $bulanIniMulai }}, {{ $bulanIniSelesai }}],
                        backgroundColor: ["rgba(13,110,253,0.85)", "rgba(25,135,84,0.85)"]
                    }]
                },
                options: baseOptions()
            });
        })();

        // =============================
        // GRAFIK TOP PENYELENGGARA
        // =============================
        (function() {
            let el = $id('chartPenyelenggara');
            if (!el) return;

            safeCreateChart(el.getContext("2d"), {
                type: 'bar',
                data: {
                    labels: {!! json_encode($topPenyelenggara->pluck('nama_penyelenggara')) !!},
                    datasets: [{
                        data: {!! json_encode($topPenyelenggara->pluck('total')) !!},
                        backgroundColor: "rgba(13,110,253,0.78)"
                    }]
                },
                options: baseOptions()
            });
        })();

        // =============================
        // GRAFIK ACARA PER BULAN
        // =============================
        (function() {
            let el = $id('chartAcaraPerBulan');
            if (!el) return;

            safeCreateChart(el.getContext("2d"), {
                type: 'line',
                data: {
                    labels: {!! json_encode($bulanLabels) !!},
                    datasets: [{
                        data: {!! json_encode($bulanData) !!},
                        borderWidth: 2,
                        backgroundColor: "rgba(25,135,84,0.12)",
                        borderColor: "rgba(25,135,84,1)"
                    }]
                },
                options: baseOptions()
            });
        })();

        // =============================
        // GRAFIK OPD HADIR
        // =============================
        let chartOpdPerAcara = null;

        (function() {
            let el = $id('chartOpdPerAcara');
            if (!el) return;

            chartOpdPerAcara = safeCreateChart(el.getContext("2d"), {
                type: 'horizontalBar',
                data: {
                    labels: {!! json_encode($acaraLabels) !!},
                    datasets: [{
                            label: "OPD Hadir",
                            backgroundColor: "rgba(25,135,84,0.85)",
                            data: {!! json_encode($opdHadir) !!}
                        },
                        {
                            label: "OPD Tidak Hadir",
                            backgroundColor: "rgba(220,53,69,0.85)",
                            data: {!! json_encode($opdTidakHadir) !!}
                        }
                    ]
                },
                options: baseOptions({
                    legend: {
                        display: true,
                        position: 'bottom'
                    },
                    tooltips: {
                        enabled: true,
                        mode: 'nearest',
                        intersect: true,
                        callbacks: {
                            title: function(tooltipItems, data) {
                                const item = tooltipItems[0];
                                const datasetIndex = item.datasetIndex;
                                return datasetIndex === 0 ? 'OPD Hadir' : 'OPD Tidak Hadir';
                            },
                            label: function(t) {
                                return "Jumlah: " + t.xLabel;
                            }
                        }
                    }

                })
            });
        })();

        // ===============================
        // PANEL KANAN UNTUK DETAIL OPD
        // ===============================
        const panel = document.getElementById("opdSidePanel");
        const panelTitle = document.getElementById("opdSidePanelTitle");
        const panelContent = document.getElementById("opdSidePanelContent");
        const panelClose = document.getElementById("opdSidePanelClose");

        panelClose.onclick = function() {
            panel.style.right = "-350px";
        };

        document.getElementById("chartOpdPerAcara").onclick = function(evt) {
            const points = chartOpdPerAcara.getElementAtEvent(evt);
            if (!points.length) return;

            const item = points[0];
            const acara = chartOpdPerAcara.data.labels[item._index];
            const isHadir = item._datasetIndex === 0;

            const list = isHadir ?
                (opdDetailHadir[acara] || []) :
                (opdDetailTidakHadir[acara] || []);

            // Title panel
            panelTitle.innerHTML = `
        ${acara}<br>
        <small style="font-weight:normal;">
            ${isHadir ? 'OPD Hadir' : 'OPD Tidak Hadir'} (${list.length})
        </small>
    `;

            // Content
            panelContent.innerHTML = list.length ?
                list.map(i => `<div>• ${i}</div>`).join("") :
                "<div style='color:#666;'>Tidak ada data</div>";

            // Show panel
            panel.style.right = "0px";
        };



        // =============================
        // AJAX FILTER OPD
        // =============================
        (function() {
            const b = $id('bulanOpd');
            const t = $id('tahunOpd');
            if (!b || !t) return;

            function updateOpd() {
                fetch(`/api/opd-per-acara?bulan=${b.value}&tahun=${t.value}`)
                    .then(r => r.json())
                    .then(data => {
                        chartOpdPerAcara.data.labels = data.labels;
                        chartOpdPerAcara.data.datasets[0].data = data.hadir;
                        chartOpdPerAcara.data.datasets[1].data = data.tidakHadir;
                        chartOpdPerAcara.update();
                    });
            }

            b.addEventListener('change', updateOpd);
            t.addEventListener('change', updateOpd);
        })();


        document.addEventListener("DOMContentLoaded", function() {
            const bulanSekarang = "{{ $bulanDipilih }}";
            const tahunSekarang = "{{ $tahunDipilih }}";

            const sb = $id('bulanOpd');
            const st = $id('tahunOpd');

            if (sb) sb.value = bulanSekarang;
            if (st) st.value = tahunSekarang;
        });
    </script>
@endpush