<?= $this->extend('layout/main') ?>

<?= $this->section('content') ?>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<ul class="nav nav-pills mb-3">
    <li class="nav-item">
        <a class="nav-link active rounded-pill small fw-bold" href="<?= base_url('approval') ?>">Antrean Pengajuan</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-muted rounded-pill small fw-bold" href="<?= base_url('approval/riwayat') ?>">Riwayat Selesai</a>
    </li>
</ul>

<div class="mb-4 d-flex justify-content-between align-items-end">
    <div>
        <h5 class="fw-bold text-dark">Antrean Approval Izin / Sakit / DL</h5>
        <p class="text-muted small mb-0">Daftar pengajuan (Status: Pending).</p>
    </div>
    <div id="bulkActionArea" style="display: none;">
        <button type="button" class="btn btn-success btn-sm rounded-pill px-3 fw-bold shadow-sm" onclick="bulkApprove('setuju')">
            <i class="fas fa-check-double me-1"></i> Setujui Terpilih (<span id="countSelected">0</span>)
        </button>
        <button type="button" class="btn btn-danger btn-sm rounded-pill px-3 fw-bold shadow-sm" onclick="bulkApprove('tolak')">
            <i class="fas fa-times-circle me-1"></i> Tolak
        </button>
    </div>
</div>

<div class="card border-0 shadow-sm" style="border-radius: 15px; overflow: hidden;">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 text-center">
                <thead class="bg-light">
                    <tr class="text-muted small uppercase">
                        <th class="ps-4 py-3 text-start">
                            <input type="checkbox" class="form-check-input" id="checkAll">
                        </th>
                        <th class="text-start">TANGGAL</th>
                        <th class="text-start">PEGAWAI</th>
                        <th>KATEGORI</th>
                        <th>STATUS</th>
                        <th>AKSI</th>
                    </tr>
                </thead>
                <tbody class="small text-dark">
                    <?php if (empty($pengajuan)): ?>
                        <tr><td colspan="6" class="py-5 text-muted">Tidak ada antrean pengajuan.</td></tr>
                    <?php endif; ?>

                    <?php foreach ($pengajuan as $p): ?>
                        <tr>
                            <td class="ps-4 text-start">
                                <input type="checkbox" class="form-check-input rowCheck" value="<?= $p['id_presensi'] ?>">
                            </td>
                            <td class="text-start">
                                <div class="fw-bold"><?= date('d/m/Y', strtotime($p['tanggal'])) ?></div>
                                <span class="text-muted" style="font-size: 0.65rem;">#<?= $p['id_presensi'] ?></span>
                            </td>
                            <td class="text-start">
                                <div class="fw-bold"><?= $p['nama_lengkap'] ?></div>
                                <div class="text-muted" style="font-size: 0.7rem;"><?= $p['nip'] ?></div>
                            </td>
                            <td>
                                <span class="badge bg-info bg-opacity-10 text-info border border-info border-opacity-25 px-2"><?= $p['kategori'] ?></span>
                            </td>
                            <td>
                                <span class="badge bg-warning bg-opacity-10 text-warning border border-warning border-opacity-25 px-2">Pending</span>
                            </td>
                            <td class="pe-4">
                                <button type="button" class="btn btn-sm btn-outline-success rounded-circle" onclick="modalApproval('<?= $p['id_presensi'] ?>', '<?= addslashes($p['nama_lengkap']) ?>', '<?= $p['kategori'] ?>')">
                                    <i class="fas fa-check"></i>
                                </button>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    // 1. LOGIKA CHECKBOX
    const checkAll = document.getElementById('checkAll');
    const rowChecks = document.querySelectorAll('.rowCheck');
    const bulkActionArea = document.getElementById('bulkActionArea');
    const countSelected = document.getElementById('countSelected');

    function updateBulkArea() {
        const checkedCount = document.querySelectorAll('.rowCheck:checked').length;
        bulkActionArea.style.display = checkedCount > 0 ? 'block' : 'none';
        countSelected.innerText = checkedCount;
    }

    checkAll.addEventListener('change', function() {
        rowChecks.forEach(cb => cb.checked = this.checked);
        updateBulkArea();
    });

    rowChecks.forEach(cb => {
        cb.addEventListener('change', updateBulkArea);
    });

    // 2. FUNGSI PERSATUAN (Tetap ada)
    function modalApproval(id, nama, kategoriAsli) {
        // ... (Kode modalApproval tunggal Anda yang sebelumnya sudah benar)
    }

    // 3. FUNGSI MASSAL (Penyelamat Waktu)
    function bulkApprove(aksi) {
        const selectedIds = Array.from(document.querySelectorAll('.rowCheck:checked')).map(cb => cb.value);
        
        Swal.fire({
            title: `Konfirmasi ${aksi == 'setuju' ? 'Persetujuan' : 'Penolakan'} Massal`,
            text: `Anda akan memproses ${selectedIds.length} data sekaligus. Lanjutkan?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, Proses Semua',
            confirmButtonColor: aksi == 'setuju' ? '#10b981' : '#ef4444'
        }).then((result) => {
            if (result.isConfirmed) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = "<?= base_url('approval/proses_massal') ?>"; // Kita buat fungsi baru di controller
                
                const addField = (name, value) => {
                    const field = document.createElement('input');
                    field.type = 'hidden';
                    field.name = name;
                    field.value = value;
                    form.appendChild(field);
                };

                addField('<?= csrf_token() ?>', '<?= csrf_hash() ?>');
                addField('ids', JSON.stringify(selectedIds));
                addField('aksi', aksi);
                
                document.body.appendChild(form);
                form.submit();
            }
        });
    }
</script>
<?= $this->endSection() ?>