<?php $__env->startSection('content'); ?>
    <style>
        .card {
            border-radius: 10px;
        }

        .table thead th {
            border-top: none;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .badge {
            font-weight: 500;
            padding: 0.5em 0.8em;
        }

        .avatar-circle {
            width: 38px;
            height: 38px;
            background: #e9ecef;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #495057;
        }

        .btn-white {
            background: #fff;
            border: 1px solid #dee2e6;
        }

        .btn-white:hover {
            background: #f8f9fa;
        }

        .pilih-bulan.active {
            background-color: #0d6efd;
            color: white;
        }
    </style>

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="fw-bold">Monitoring Kepatuhan Laporan</h2>
    </div>

    <!-- Statistik Cards -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body text-center">
                    <h6 class="text-muted text-uppercase small fw-bold">Total Laporan Anda</h6>
                    <h2 class="display-6 fw-bold m-0 text-primary"><?php echo e($totalLaporan); ?></h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 h-100 border-bottom border-3 border-info">
                <div class="card-body text-center">
                    <h6 class="text-muted text-uppercase small fw-bold">Total Anak Asuh</h6>
                    <h2 class="display-6 fw-bold m-0 text-info" id="statTotalBawahan">-</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 h-100 border-bottom border-3 border-success">
                <div class="card-body text-center">
                    <h6 class="text-muted text-uppercase small fw-bold">Sudah Lapor</h6>
                    <h2 class="display-6 fw-bold m-0 text-success" id="statSudahLapor">-</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 h-100 border-bottom border-3 border-danger">
                <div class="card-body text-center">
                    <h6 class="text-muted text-uppercase small fw-bold">Belum Lapor</h6>
                    <h2 class="display-6 fw-bold m-0 text-danger" id="statBelumLapor">-</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3">
            <div class="d-flex align-items-center">
                <h5 class="mb-0 fw-bold text-secondary">Daftar Monitoring Manpower</h5>
                <div class="ms-auto">
                    <button onclick="refreshData()" class="btn btn-sm btn-primary shadow-sm px-3">
                        <i class="fas fa-sync-alt me-2" id="refreshIcon"></i>Refresh Data
                    </button>
                </div>
            </div>
        </div>

        <div class="row align-items-center mb-4">
            <div class="col-12 col-sm-10 d-flex justify-content-start align-items-center">
                <!-- Grup Navigasi Tanggal -->
                <div class="btn-group shadow-sm" role="group" aria-label="Date Navigation">
                    <!-- Tombol Prev -->
                    <button type="button" id="prevDate" class="btn btn-white border-end px-3 py-2" title="Sebelumnya">
                        <i class="bi bi-chevron-left fw-bold text-primary"></i>
                    </button>

                    <!-- Tombol Display Tanggal -->
                    <button type="button" class="btn btn-white px-4 py-2 d-flex align-items-center" data-bs-toggle="modal"
                        data-bs-target="#ModalFilter">
                        <i class="bi bi-calendar3 me-2 text-secondary"></i>
                        <span class="date-display fw-bold text-dark" id="dateDisplay" style="font-size: 1.1rem;">
                            <!-- Tanggal muncul di sini -->
                            Pilih Tanggal
                        </span>
                    </button>

                    <!-- Tombol Next -->
                    <button type="button" id="nextDate" class="btn btn-white border-start px-3 py-2" title="Selanjutnya">
                        <i class="bi bi-chevron-right fw-bold text-primary"></i>
                    </button>
                </div>
            </div>
        </div>


        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light text-muted small text-uppercase">
                        <tr>
                            <th class="ps-4">No</th>
                            <th>Informasi Karyawan</th>
                            <th>Departemen & Plant</th>
                            <th class="text-center">Status</th>
                        </tr>
                    </thead>
                    <tbody id="monitoringBody"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Filter -->
    <div class="modal fade" id="ModalFilter" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content p-3 rounded-4 border-0 shadow">
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-semibold">Pilih Bulan & Tahun</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <select id="tahunPicker" class="form-select mb-3 shadow-sm">
                        <?php for($t = date('Y') - 5; $t <= date('Y') + 1; $t++): ?>
                            <option value="<?php echo e($t); ?>" <?php echo e($t == date('Y') ? 'selected' : ''); ?>><?php echo e($t); ?>

                            </option>
                        <?php endfor; ?>
                    </select>
                    <div class="d-flex flex-wrap justify-content-center">
                        <?php $bulanList = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des']; ?>
                        <?php $__currentLoopData = $bulanList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $b): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <button type="button"
                                class="btn btn-outline-primary m-1 pilih-bulan <?php echo e($i + 1 == date('n') ? 'active' : ''); ?>"
                                data-bulan="<?php echo e($i + 1); ?>">
                                <?php echo e($b); ?>

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

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const params = new URLSearchParams(window.location.search);
            let bulan = parseInt(params.get('bulan')) || (new Date().getMonth() + 1);
            let tahun = parseInt(params.get('tahun')) || (new Date().getFullYear());

            function updateDateDisplay(b, t) {
                const monthNames = [
                    'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                ];
                document.getElementById('dateDisplay').innerText = monthNames[b - 1] + ' ' + t;
            }

            window.loadMonitoring = function(b, t) {
                const body = document.getElementById('monitoringBody');
                const icon = document.getElementById('refreshIcon');

                icon.classList.add('fa-spin');
                body.innerHTML =
                    '<tr><td colspan="4" class="text-center py-5"><div class="spinner-border text-primary"></div></td></tr>';

                // Update URL agar saat refresh halaman filter tetap ada
                const newUrl = `?bulan=${b}&tahun=${t}`;
                window.history.replaceState({}, '', newUrl);

                // Panggil API dengan parameter bulan & tahun
                fetch(`<?php echo e(route('dashboard.monitoring')); ?>?bulan=${b}&tahun=${t}`)
                    .then(res => res.json())
                    .then(json => {
                        let html = '';
                        let sudah = 0;
                        let belum = 0;

                        if (json.data.length === 0) {
                            html =
                                '<tr><td colspan="4" class="text-center py-4 text-muted">Tidak ada data bawahan.</td></tr>';
                        } else {
                            json.data.forEach((item, index) => {
                                item.status ? sudah++ : belum++;
                                html += `
                                    <tr>
                                        <td class="ps-4 text-muted">${index + 1}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-circle me-3">${item.nama.charAt(0)}</div>
                                                <div>
                                                    <div class="fw-bold text-dark">${item.nama}</div>
                                                    <div class="small text-muted">${item.jabatan}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="small fw-bold text-dark">${item.departemen}</div>
                                            <div class="small text-muted text-uppercase" style="font-size: 10px;">${item.plant}</div>
                                        </td>
                                        <td class="text-center">
                                            ${item.status 
                                                ? '<span class="badge rounded-pill bg-success text-white">✓ Sudah Lapor</span>' 
                                                : '<span class="badge rounded-pill bg-danger text-white">! Belum Lapor</span>'
                                            }
                                        </td>
                                    </tr>`;
                            });
                        }

                        body.innerHTML = html;
                        document.getElementById('statTotalBawahan').innerText = json.data.length;
                        document.getElementById('statSudahLapor').innerText = sudah;
                        document.getElementById('statBelumLapor').innerText = belum;

                        updateDateDisplay(b, t);
                        icon.classList.remove('fa-spin');
                    });
            }

            window.refreshData = function() {
                loadMonitoring(bulan, tahun);
            }

            $("#prevDate").on("click", function() {
                bulan--;
                if (bulan < 1) {
                    bulan = 12;
                    tahun--;
                }
                loadMonitoring(bulan, tahun);
            });

            $("#nextDate").on("click", function() {
                bulan++;
                if (bulan > 12) {
                    bulan = 1;
                    tahun++;
                }
                loadMonitoring(bulan, tahun);
            });

            $(document).on("click", ".pilih-bulan", function() {
                $(".pilih-bulan").removeClass("active");
                $(this).addClass("active");

                bulan = $(this).data("bulan");
                tahun = $("#tahunPicker").val();

                loadMonitoring(bulan, tahun);

                // Tutup modal otomatis setelah pilih
                bootstrap.Modal.getInstance(document.getElementById('ModalFilter')).hide();
            });

            // Load pertama kali
            loadMonitoring(bulan, tahun);
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\gl-asuh\resources\views/dashboard.blade.php ENDPATH**/ ?>