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

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

    <!-- Header Section -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-md gap-sm mt-md lg:mt-0">
        <div>
            <h2 class="font-bold text-2xl md:text-3xl text-on-surface mb-1">Riwayat Perizinan</h2>
            <p class="text-sm text-secondary">Lihat histori seluruh perizinan putra Anda.</p>
        </div>
        <a href="/wali/pengajuan" class="bg-primary text-on-surface font-semibold text-sm px-4 py-2.5 rounded-lg shadow-sm hover:bg-surface-tint transition-all active:scale-95 flex items-center gap-xs">
            <span class="material-symbols-outlined text-[20px]">add</span>
            <span>Ajukan Izin Baru</span>
        </a>
    </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 jenis izin di riwayat..." 
               class="block w-full border-none bg-transparent focus:ring-0 text-sm placeholder-slate-400 focus:outline-none"
               onkeyup="filterRiwayat()"/>
    </div>

    <!-- Table Riwayat -->
    <div class="glass-card rounded-xl shadow-sm overflow-hidden">
        <div class="px-md py-sm border-b border-outline flex justify-between items-center bg-surface-container-lowest">
            <h3 class="font-bold text-lg text-on-surface">Data Riwayat</h3>
            <span class="material-symbols-outlined text-secondary text-lg">history</span>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-sm">
                <thead>
                    <tr class="bg-surface-container-low border-b border-outline text-[11px] text-secondary font-bold uppercase tracking-wider">
                        <th class="py-3 px-4">Tanggal</th>
                        <th class="py-3 px-4">Nama Santri</th>
                        <th class="py-3 px-4">Jenis Izin</th>
                        <th class="py-3 px-4 hidden md:table-cell">Keterangan / Alasan</th>
                        <th class="py-3 px-4">Status</th>
                        <th class="py-3 px-4 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="text-on-surface-variant font-medium divide-y divide-[#272b31]">
                    <?php if (empty($permits)): ?>
                        <tr>
                            <td colspan="6" class="py-12 text-center text-outline">Belum ada riwayat pengajuan izin.</td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($permits as $permit): ?>
                            <tr class="hover:bg-surface-dim/50 transition-colors">
                                <td class="py-3 px-4 whitespace-nowrap text-xs text-secondary">
                                    <?= date('d M Y', strtotime($permit['created_at'])) ?>
                                </td>
                                <td class="py-3 px-4 font-bold text-primary">
                                    <?= esc($permit['santri_nama']) ?>
                                </td>
                                <td class="py-3 px-4 font-bold text-on-surface-variant">
                                    <?= esc($permit['jenis_izin']) ?>
                                </td>
                                <td class="py-3 px-4 hidden md:table-cell text-xs text-secondary max-w-xs truncate">
                                    <?= esc($permit['alasan']) ?>
                                </td>
                                <td class="py-3 px-4 text-xs">
                                    <?php if ($permit['status'] === 'pending'): ?>
                                        <span class="bg-[#1e293b] text-amber-400 border border-amber-900/50 text-[10px] font-bold px-2 py-0.5 rounded-full">Menunggu</span>
                                    <?php elseif ($permit['status'] === 'approved'): ?>
                                        <span class="bg-[#1e293b] text-emerald-400 border border-emerald-900/50 text-[10px] font-bold px-2 py-0.5 rounded-full">Disetujui</span>
                                    <?php elseif ($permit['status'] === 'rejected'): ?>
                                        <span class="bg-[#1e293b] text-red-400 border border-red-900/50 text-[10px] font-bold px-2 py-0.5 rounded-full">Ditolak</span>
                                    <?php elseif ($permit['status'] === 'active'): ?>
                                        <span class="bg-[#1e293b] text-blue-400 border border-blue-900/50 text-[10px] font-bold px-2 py-0.5 rounded-full">Di Luar</span>
                                    <?php elseif ($permit['status'] === 'done'): ?>
                                        <span class="bg-[#1e293b] text-secondary border border-outline-variant text-[10px] font-bold px-2 py-0.5 rounded-full">Selesai</span>
                                    <?php endif; ?>
                                </td>
                                <td class="py-3 px-4 text-center">
                                    <?php if (in_array($permit['status'], ['approved', 'active', 'done'])): ?>
                                        <a href="/wali/izin/<?= $permit['id'] ?>" class="text-primary hover:underline text-xs font-bold flex items-center justify-center gap-0.5">
                                            <span class="material-symbols-outlined text-sm">visibility</span>
                                            <span>Detail</span>
                                        </a>
                                    <?php elseif ($permit['status'] === 'rejected' && !empty($permit['catatan_tolak'])): ?>
                                        <button onclick="alert('Alasan Penolakan:\n<?= esc(addslashes($permit['catatan_tolak'])) ?>')" class="text-rose-600 hover:underline text-xs font-bold">
                                            Alasan
                                        </button>
                                    <?php else: ?>
                                        <span class="text-slate-300">-</span>
                                    <?php endif; ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    function filterRiwayat() {
        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 text = row.innerText.toLowerCase();
                if (text.includes(query)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }
    }
</script>
<?= $this->endSection() ?>
