<?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>
 
    <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>


    <script>
        document.addEventListener("DOMContentLoaded", function() {

            window.loadMonitoring = function() {

                const body = document.getElementById('monitoringBody');
                const icon = document.getElementById('refreshIcon');
                body.innerHTML =
                    `<tr>
                    <td colspan="5" class="text-center py-5">
                        <div class="spinner-border text-primary"></div>
                    </td>
                </tr>`;

                fetch(`<?php echo e(route('hasilPenilaian.data')); ?>`)
                    .then(res => res.json())
                    .then(json => {

                        let html = '';

                        if (json.data.length === 0) {

                            html = `
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">
                                    Tidak ada data.
                                </td>
                            </tr>
                        `;

                        } else {

                            json.data.forEach((item, index) => {

                                const opsiTanggal = {
                                    day: 'numeric',
                                    month: 'long',
                                    year: 'numeric'
                                };

                                const tanggalFormat = item.tanggal ?
                                    new Date(item.tanggal).toLocaleDateString(
                                        'id-ID',
                                        opsiTanggal
                                    ) : '-';
 
                                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] || {

                                    class: 'bg-primary text-white',
                                    text: '✓ Sudah Lapor'

                                };

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

                                    ${status.text}

                                </a>
                            `;

                                html += `
                                <tr>

                                    <!-- NO -->
                                    <td class="ps-4 text-muted">
                                        ${index + 1}
                                    </td>

                                    <!-- TANGGAL -->
                                    <td>
                                        <div class="small fw-bold text-dark">
                                            ${tanggalFormat}
                                        </div>
                                    </td>

                                    <!-- NRP -->
                                    <td>
                                        <div class="small fw-bold text-dark">
                                            ${item.manpower?.nrp ?? '-'}
                                        </div>
                                    </td>

                                    <!-- NAMA -->
                                    <td>
                                        <div class="fw-bold text-dark">
                                            ${item.manpower?.nama ?? '-'}
                                        </div>
                                    </td>

                                    <!-- STATUS -->
                                    <td class="text-center">
                                        ${badgeStatus}
                                    </td>

                                </tr>
                            `;
                            });
                        }

                        body.innerHTML = html;
                    })
                    .catch(error => {

                        console.error(error);

                        body.innerHTML = `
                        <tr>
                            <td colspan="5" class="text-center text-danger py-4">
                                Gagal memuat data.
                            </td>
                        </tr>
                    `;
                    });
            }

            window.refreshData = function() {

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

                icon.classList.add("fa-spin");

                page = 1;

                loadMonitoring();

                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/menu/hasil-penilaian/index.blade.php ENDPATH**/ ?>