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

<?= $this->section('content') ?>
<div class="space-y-6">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-md">
        <div>
            <h2 class="text-2xl font-bold text-on-surface">Riwayat Perizinan</h2>
            <p class="text-sm text-secondary">Histori dan log perizinan seluruh santri.</p>
        </div>
    </div>

    <!-- Search Bar -->
    <div class="glass-card rounded-xl p-3 shadow-sm flex items-center gap-2">
        <span class="material-symbols-outlined text-outline">search</span>
        <input type="text" id="search-santri" placeholder="Cari nama santri atau NIS..." 
               class="block w-full border-none bg-transparent focus:ring-0 text-sm placeholder-slate-400 focus:outline-none"
               onkeyup="filterSantri()"/>
    </div>

    <!-- History Table -->
    <div class="bg-surface p-6 rounded-xl border border-outline shadow-sm">
        <div class="flex items-center space-x-2 pb-4 mb-6 border-b border-outline">
            <span class="material-symbols-outlined text-secondary text-2xl">history</span>
            <h3 class="text-lg font-bold text-on-surface">Data Riwayat & Log</h3>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-[#272b31] text-sm">
                <thead>
                    <tr class="text-left text-outline font-bold uppercase text-[11px] tracking-wider">
                        <th class="py-3 px-4">Santri</th>
                        <th class="py-3 px-4">Info Izin</th>
                        <th class="py-3 px-4">Jadwal</th>
                        <th class="py-3 px-4">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[#272b31] text-on-surface-variant font-medium">
                    <?php if (empty($otherPermits)): ?>
                        <tr>
                            <td colspan="4" class="py-12 text-center text-outline">Belum ada riwayat perizinan.</td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($otherPermits as $permit): ?>
                            <tr>
                                <td class="py-3.5 px-4">
                                    <div class="font-bold text-on-surface"><?= esc($permit['santri_nama']) ?></div>
                                    <div class="text-[11px] text-outline">NIS: <?= esc($permit['santri_nis']) ?></div>
                                </td>
                                <td class="py-3.5 px-4 text-xs">
                                    <div class="font-semibold text-on-surface-variant"><?= esc($permit['jenis_izin']) ?></div>
                                    <div class="text-[10px] text-outline font-mono"><?= esc($permit['token_izin']) ?></div>
                                </td>
                                <td class="py-3.5 px-4 text-[11px] text-secondary">
                                    <div>Keluar: <?= date('d/m/y H:i', strtotime($permit['waktu_keluar'])) ?></div>
                                    <div>Kembali: <?= date('d/m/y H:i', strtotime($permit['waktu_kembali'])) ?></div>
                                </td>
                                <td class="py-3.5 px-4 text-xs">
                                    <?php if ($permit['status'] === 'approved'): ?>
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200">Disetujui</span>
                                    <?php elseif ($permit['status'] === 'active'): ?>
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-blue-50 text-blue-700 border border-blue-200">Di Luar</span>
                                    <?php elseif ($permit['status'] === 'rejected'): ?>
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-red-50 text-red-700 border border-red-200" title="Alasan: <?= esc($permit['catatan_tolak']) ?>">Ditolak</span>
                                    <?php elseif ($permit['status'] === 'done'): ?>
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-surface-dim text-on-surface-variant border border-outline">Selesai</span>
                                    <?php endif; ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    function filterSantri() {
        const query = document.getElementById('search-santri').value.toLowerCase();
        
        const table = document.querySelector('table');
        if (table) {
            const rows = table.querySelectorAll('tbody tr');
            rows.forEach(row => {
                const nameCell = row.querySelector('td:first-child');
                if (nameCell) {
                    const text = nameCell.innerText.toLowerCase();
                    if (text.includes(query)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                }
            });
        }
    }
</script>
<?= $this->endSection() ?>
