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

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

    <!-- Header Actions -->
    <div class="flex justify-between items-center">
        <a href="/kesantrian/dashboard" class="inline-flex items-center space-x-2 text-primary font-bold hover:text-primary-hover transition text-sm">
            <span class="material-symbols-outlined text-sm">arrow_back</span>
            <span>Kembali ke Panel Kesantrian</span>
        </a>
    </div>

    <!-- Alert / Summary -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-surface p-5 rounded-xl border border-outline shadow-sm flex items-center space-x-4">
            <div class="p-3 bg-blue-50 rounded-lg text-blue-600">
                <span class="material-symbols-outlined text-2xl">group_work</span>
            </div>
            <div>
                <p class="text-xs text-outline font-semibold uppercase">Total Santri di Luar</p>
                <h4 class="text-2xl font-bold text-on-surface"><?= count($activeList) ?> Santri</h4>
            </div>
        </div>
        <div class="bg-surface p-5 rounded-xl border border-outline shadow-sm flex items-center space-x-4">
            <div class="p-3 bg-rose-50 rounded-lg text-rose-600">
                <span class="material-symbols-outlined text-2xl">gpp_maybe</span>
            </div>
            <div>
                <p class="text-xs text-outline font-semibold uppercase">Terlambat Kembali (Overdue)</p>
                <h4 class="text-2xl font-bold text-rose-600"><?= $overdueCount ?> Santri</h4>
            </div>
        </div>
    </div>

    <!-- Monitoring 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-primary text-2xl">hourglass_bottom</span>
            <h3 class="text-lg font-bold text-on-surface">Daftar Santri Sedang Berada Di Luar</h3>
        </div>

        <?php if (empty($activeList)): ?>
            <div class="py-16 flex flex-col items-center justify-center text-center space-y-3">
                <span class="material-symbols-outlined text-slate-300 text-6xl">school</span>
                <h4 class="text-on-surface-variant font-semibold text-base">Seluruh santri berada di dalam pondok</h4>
                <p class="text-outline text-xs">
                    Saat ini tidak ada santri yang sedang keluar pondok.
                </p>
            </div>
        <?php else: ?>
            <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">Jenis & Alasan Izin</th>
                            <th class="py-3 px-4">Jadwal Perizinan</th>
                            <th class="py-3 px-4 text-center">Status Kehadiran</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[#272b31] text-on-surface-variant font-medium">
                        <?php foreach ($activeList as $permit): ?>
                            <tr class="<?= $permit['is_overdue'] ? 'bg-red-50/30' : '' ?>">
                                <td class="py-4 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']) ?> | Kelas <?= esc($permit['santri_kelas']) ?> | Asrama: <?= esc($permit['santri_asrama']) ?></div>
                                </td>
                                <td class="py-4 px-4 text-xs">
                                    <div class="font-bold text-on-surface-variant"><?= esc($permit['jenis_izin']) ?></div>
                                    <div class="text-secondary max-w-sm leading-relaxed"><?= esc($permit['alasan']) ?></div>
                                </td>
                                <td class="py-4 px-4 text-xs text-secondary">
                                    <div class="flex items-center space-x-1.5">
                                        <span class="material-symbols-outlined text-outline text-sm">logout</span>
                                        <span class="font-semibold text-on-surface-variant">Keluar: <?= date('d M Y H:i', strtotime($permit['waktu_keluar'])) ?></span>
                                    </div>
                                    <div class="flex items-center space-x-1.5 mt-1">
                                        <span class="material-symbols-outlined text-outline text-sm">login</span>
                                        <span class="font-semibold text-on-surface-variant">Batas Kembali: <?= date('d M Y H:i', strtotime($permit['waktu_kembali'])) ?></span>
                                    </div>
                                </td>
                                <td class="py-4 px-4 text-center">
                                    <?php if ($permit['is_overdue']): ?>
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-rose-100 text-rose-700 border border-rose-200 animate-pulse">
                                            <span class="material-symbols-outlined text-[14px] mr-1">warning</span>
                                            <span>TERLAMBAT KEMBALI</span>
                                        </span>
                                    <?php else: ?>
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-50 text-blue-700 border border-blue-200">
                                            <span class="material-symbols-outlined text-[14px] mr-1">check</span>
                                            <span>Di Luar (Aman)</span>
                                        </span>
                                    <?php endif; ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>

</div>
<?= $this->endSection() ?>
