<?php $__env->startSection('title', 'Dashboard'); ?>

<?php $__env->startSection('content'); ?>
    <div class="container-fluid">
        <!-- HEADER -->
        <div class="mb-4">
            <h3 class="fw-bold">Dashboard Admin</h3>

            <p class="text-muted">Statistik Buku Tamu</p>
        </div>

        <!-- CARD -->
        <div class="row g-4 mb-4">
            <!-- TOTAL TAMU -->
            <div class="col-md-3">
                <div class="card shadow border-0">
                    <div class="card-body">
                        <h6>Total Tamu</h6>

                        <h2 class="fw-bold text-primary"><?php echo e($totalTamu); ?></h2>
                    </div>
                </div>
            </div>

            <!-- TOTAL KUNJUNGAN -->
            <div class="col-md-3">
                <div class="card shadow border-0">
                    <div class="card-body">
                        <h6>Total Kunjungan</h6>

                        <h2 class="fw-bold text-success">
                            <?php echo e($totalKunjungan); ?>

                        </h2>
                    </div>
                </div>
            </div>

            <!-- PENDING -->
            <div class="col-md-2">
                <div class="card shadow border-0">
                    <div class="card-body">
                        <h6>Pending</h6>

                        <h2 class="fw-bold text-warning"><?php echo e($pending); ?></h2>
                    </div>
                </div>
            </div>

            <!-- DITERIMA -->
            <div class="col-md-2">
                <div class="card shadow border-0">
                    <div class="card-body">
                        <h6>Diterima</h6>

                        <h2 class="fw-bold text-info"><?php echo e($diterima); ?></h2>
                    </div>
                </div>
            </div>

            <!-- DITOLAK -->
            <div class="col-md-2">
                <div class="card shadow border-0">
                    <div class="card-body">
                        <h6>Ditolak</h6>

                        <h2 class="fw-bold text-danger"><?php echo e($ditolak); ?></h2>
                    </div>
                </div>
            </div>
        </div>

        <!-- CHART -->
        <div class="card shadow border-0">
            <div class="card-body">
                <!-- FILTER -->
                <div
                    class="d-flex justify-content-between align-items-center mb-4"
                >
                    <h5 class="fw-bold mb-0">Grafik Status Kunjungan</h5>

                    <form
                        method="GET"
                        action="<?php echo e(route('admin.dashboard')); ?>"
                        class="d-flex gap-2 align-items-center"
                        id="filterForm"
                    >
                        <!-- TAHUN -->
                        <select name="tahun" class="form-select" onchange="this.form.submit()">
                            <?php $__currentLoopData = $daftarTahun; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $thn): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option
                                    value="<?php echo e($thn); ?>"
                                    <?php echo e($tahun == $thn ? 'selected' : ''); ?>

                                >
                                    <?php echo e($thn); ?>

                                </option>

                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>

                        <!-- BULAN -->
                        <select name="bulan" class="form-select" onchange="resetWeekAndSubmit(this)">
                            <option value="">Semua Bulan</option>

                            <?php for($i = 1; $i <= 12; $i++): ?>
                                <option
                                    value="<?php echo e($i); ?>"
                                    <?php echo e($bulan == $i ? 'selected' : ''); ?>

                                >
                                    <?php echo e(date('F', mktime(0,0,0,$i,1))); ?>

                                </option>

                            <?php endfor; ?>
                        </select>

                        <!-- MINGGU (Hanya muncul jika bulan terpilih) -->
                        <?php if($bulan): ?>
                            <select name="minggu" class="form-select" onchange="this.form.submit()">
                                <option value="">Semua Minggu</option>
                                <?php $__currentLoopData = $weeks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $wInfo): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option
                                        value="<?php echo e($idx); ?>"
                                        <?php echo e($minggu == $idx ? 'selected' : ''); ?>

                                    >
                                        <?php echo e($wInfo['label']); ?>

                                    </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        <?php endif; ?>

                        <button type="submit" class="btn btn-primary">
                            Filter
                        </button>
                    </form>

                    <script>
                        function resetWeekAndSubmit(select) {
                            const mingguSelect = document.querySelector('select[name="minggu"]');
                            if (mingguSelect) {
                                mingguSelect.value = "";
                            }
                            select.form.submit();
                        }
                    </script>
                </div>

                <!-- CANVAS -->
                <div style="height: 400px">
                    <?php if(
                    count($labels) > 0
                ): ?>
                        <canvas id="chartKunjungan"></canvas>

                    <?php else: ?>
                        <div
                            class="d-flex flex-column justify-content-center align-items-center h-100 text-center"
                        >
                            <i
                                class="bi bi-bar-chart-line fs-1 text-secondary mb-3"
                            ></i>

                            <h5 class="fw-bold text-secondary">
                                Tidak Ada Data
                            </h5>

                            <p
                                class="text-muted mb-0"
                            >Tidak terdapat data kunjungan pada periode yang dipilih.</p>
                        </div>

                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
    <!-- CHART JS -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        /**
         * LABEL
         */
        const labels = <?php echo json_encode($labels ?? [], 15, 512) ?>;

        /**
         * DATA
         */
        const dataPending = <?php echo json_encode($dataPending ?? [], 15, 512) ?>;

        const dataDiterima = <?php echo json_encode($dataDiterima ?? [], 15, 512) ?>;

        const dataDitolak = <?php echo json_encode($dataDitolak ?? [], 15, 512) ?>;

        /**
         * DEBUG
         */
        console.log({
            labels,

            dataPending,

            dataDiterima,

            dataDitolak,
        });

        /**
         * CHART
         */
        const ctx = document.getElementById('chartKunjungan');

        if (ctx) {
            new Chart(ctx, {
                type: 'bar',

                data: {
                    labels: labels,

                    datasets: [
                        /**
                         * PENDING
                         */
                        {
                            label: 'Pending',

                            data: dataPending,

                            backgroundColor: 'rgba(37, 99, 235)',
                        },

                        /**
                         * DITERIMA
                         */
                        {
                            label: 'Diterima',

                            data: dataDiterima,

                            backgroundColor: 'rgba(20, 184, 166)',
                        },

                        /**
                         * DITOLAK
                         */
                        {
                            label: 'Ditolak',

                            data: dataDitolak,

                            backgroundColor: 'rgba(249, 115, 22)',
                        },
                    ],
                },

                options: {
                    responsive: true,

                    maintainAspectRatio: false,

                    interaction: {
                        mode: 'index',

                        intersect: false,
                    },

                    plugins: {
                        legend: {
                            position: 'bottom',

                            labels: {
                                color: '#64748b',

                                font: {
                                    weight: 'bold',
                                },
                            },
                        },
                    },

                    scales: {
                        y: {
                            beginAtZero: true,

                            ticks: {
                                precision: 0,

                                color: '#64748b',
                            },

                            grid: {
                                color: 'rgba(0,0,0,0.05)',
                            },
                        },

                        x: {
                            ticks: {
                                color: '#64748b',
                            },

                            grid: {
                                display: false,
                            },
                        },
                    },
                },
            });
        }
    </script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\buku-tamu-ksop\resources\views/admin/dashboard.blade.php ENDPATH**/ ?>