<?php $__env->startSection('content'); ?>
    <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">
        <!-- Jumlah Laporan -->
        <div class="col dashboard-card">
            <div class="card shadow-sm border-0 h-100 border-bottom border-3 border-info">
                <div class="card-body text-center p-3">
                    <h6 class="text-muted text-uppercase small fw-bold" style="font-size: 0.75rem;">
                        Jumlah Laporan
                    </h6>
                    <h2 class="fw-bold m-0 text-info" id="statTotalBawahan">-</h2>
                </div>
            </div>
        </div>

        <!-- Laporan Sesuai -->
        <div class="col dashboard-card">
            <div class="card shadow-sm border-0 h-100 border-bottom border-3 border-success">
                <div class="card-body text-center p-3">
                    <h6 class="text-muted text-uppercase small fw-bold" style="font-size: 0.75rem;">
                        Laporan Sesuai
                    </h6>
                    <h2 class="fw-bold m-0 text-success" id="statSesuai">0</h2>
                </div>
            </div>
        </div>

        <!-- Laporan Pending -->
        <div class="col dashboard-card">
            <div class="card shadow-sm border-0 h-100 border-bottom border-3 border-warning">
                <div class="card-body text-center p-3">
                    <h6 class="text-muted text-uppercase small fw-bold" style="font-size: 0.75rem;">
                        Laporan Pending
                    </h6>
                    <h2 class="fw-bold m-0 text-warning" id="statPending">0</h2>
                </div>
            </div>
        </div>

        <!-- Tidak Sesuai -->
        <div class="col dashboard-card">
            <div class="card shadow-sm border-0 h-100 border-bottom border-3 border-secondary">
                <div class="card-body text-center p-3">
                    <h6 class="text-muted text-uppercase small fw-bold" style="font-size: 0.75rem;">
                        Tidak Sesuai
                    </h6>
                    <h2 class="fw-bold m-0 text-secondary" id="statTidakSesuai">0</h2>
                </div>
            </div>
        </div>

        <!-- Belum Lapor -->
        <div class="col dashboard-card">
            <div class="card shadow-sm border-0 h-100 border-bottom border-3 border-danger">
                <div class="card-body text-center p-3">
                    <h6 class="text-muted text-uppercase small fw-bold" style="font-size: 0.75rem;">
                        Belum Lapor
                    </h6>
                    <h2 class="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="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>Tanggal</th>
                            <th>NRP</th>
                            <th>Nama</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() {

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

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

                fetch(`<?php echo e(route('anakAsuh.monitoring')); ?> `)
                    .then(res => res.json())
                    .then(json => {
                        let html = '';
                        let sudah = 0;
                        let belum = 0;

                        if (json.data.length === 0) {
                            html =
                                '<tr><td colspan="7" class="text-center py-4 text-muted">Tidak ada data bawahan.</td></tr>';
                        } else {
                            json.data.forEach((item, index) => {
                                item.status ? sudah++ : belum++;

                                const opsiTanggal = {
                                    day: 'numeric',
                                    month: 'long',
                                    year: 'numeric'
                                };
                                const tanggalFormat = item.tanggal ? new Date(item.tanggal)
                                    .toLocaleDateString('id-ID', opsiTanggal) : '-';

                                // Logika Penentuan Badge Status Berdasarkan konfirmasi_status
                                let badgeStatus = '';

                                if (!item.status) {

                                    badgeStatus = `
                                        <span class="badge rounded-pill bg-danger text-white">
                                            ! Belum Lapor
                                        </span>
                                    `;

                                } else {

                                    const statusMap = {

                                        sesuai: {
                                            class: 'bg-success text-white',
                                            text: '✓ Sesuai'
                                        },

                                        pending: {
                                            class: 'bg-warning text-dark',
                                            text: '⏳ Pending'
                                        },

                                        tidak_sesuai: {
                                            class: 'bg-secondary text-white',
                                            text: '❌ Tidak Sesuai'
                                        }

                                    };

                                    const status = statusMap[item.konfirmasi_status];

                                    if (status) {

                                        badgeStatus = `
                                            <a href="/laporan/${item.slug_laporan}" 
                                                class="badge rounded-pill ${status.class} text-decoration-none">

                                                ${status.text}

                                            </a>
                                        `;

                                    } else {

                                        badgeStatus = `
                                            <a href="/laporan/${item.slug_laporan}" 
                                                class="badge rounded-pill bg-primary text-white text-decoration-none">

                                                ✓ Sudah Lapor

                                            </a>
                                        `;

                                    }
                                }

                                html += `
                                <tr>
                                    <!-- DESKTOP -->
                                    <td class="ps-4 text-muted d-none d-md-table-cell">${index + 1}</td>
                                    <td class="d-none d-md-table-cell">
                                        <div class="small fw-bold text-dark">${tanggalFormat}</div>
                                    </td>
                                    <td class="d-none d-md-table-cell">
                                        <div class="small fw-bold text-dark">${item.nrp}</div>
                                    </td>

                                    <!-- MOBILE + DESKTOP INFO -->
                                    <td>
                                        <div class="mobile-no d-block d-md-none">#${index + 1}</div>
                                        <div class="mobile-top">
                                            <div class="d-flex align-items-center">
                                                <div>
                                                    <div class="fw-bold text-dark">${item.nama}</div>
                                                </div>
                                            </div>
                                            <!-- MOBILE STATUS -->
                                            <div class="d-block d-md-none">
                                                ${badgeStatus}
                                            </div>
                                        </div>
                                    </td>

                                    <!-- DESKTOP STATUS -->
                                    <td class="text-center d-none d-md-table-cell">
                                        ${badgeStatus}
                                    </td>
                                </tr>
                                `;
                            });
                        }

                        body.innerHTML = html;

                        // Isi angka ke Card Statistik Utama
                        document.getElementById('statTotalBawahan').innerText = json.data.length;
                        document.getElementById('statBelumLapor').innerText = belum;

                        // Isi angka dari object summary API baru
                        document.getElementById('statSesuai').innerText = json.summary.sesuai;
                        document.getElementById('statPending').innerText = json.summary.pending;
                        document.getElementById('statTidakSesuai').innerText = json.summary.tidak_sesuai;

                        icon.classList.remove('fa-spin');
                    });
            }

            window.refreshData = function() {

                const icon = document.getElementById("refreshIcon");

                // animasi loading icon
                icon.classList.add("fa-spin");

                // reset page
                page = 1;

                // reload data
                loadMonitoring();

                // stop animasi setelah selesai
                setTimeout(() => {
                    icon.classList.remove("fa-spin");
                }, 800);

            };

            loadMonitoring();
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/u544939042/domains/mitracempaka.id/gl-asuh/resources/views/dashboard/anak-asuh-dashboard.blade.php ENDPATH**/ ?>