<?= $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="text-2xl md:text-3xl font-bold text-on-surface mb-1">Dashboard Wali</h2>
            <p class="text-sm text-secondary">Pantau status perizinan aktif dan riwayat perizinan putra Anda.</p>
        </div>
        <a href="/wali/pengajuan" class="bg-primary text-white font-semibold text-sm px-4 py-2.5 rounded-lg shadow-sm hover:bg-primary-hover transition-all active:scale-95 flex items-center gap-xs cursor-pointer">
            <span class="material-symbols-outlined text-[20px]">add</span>
            <span>Ajukan Izin Baru</span>
        </a>
    </div>

    <!-- Bento Grid Layout -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-sm mb-md">
        
        <!-- Student Summary Card -->
        <div class="glass-card rounded-xl p-4 shadow-sm col-span-1 flex flex-col justify-between relative overflow-hidden bg-surface">
            <div class="absolute top-0 right-0 w-32 h-32 bg-primary opacity-5 rounded-full -mr-16 -mt-16 pointer-events-none"></div>
            <div>
                <h3 class="text-xs font-bold text-secondary mb-2 uppercase tracking-wide">Informasi Santri</h3>
                
                <?php if (empty($children)): ?>
                    <p class="text-sm text-secondary font-semibold mt-4">Belum terhubung ke data santri.</p>
                <?php else: ?>
                    <?php $mainChild = $children[0]; ?>
                    <div class="flex items-center gap-3 mb-3 mt-2">
                        <div class="w-12 h-12 rounded-full bg-surface-container flex items-center justify-center text-primary overflow-hidden shadow-inner">
                            <span class="material-symbols-outlined text-3xl">account_circle</span>
                        </div>
                        <div>
                            <p id="info-nama" class="text-lg font-bold text-on-surface leading-none mb-1"><?= esc($mainChild['nama']) ?></p>
                            <p id="info-kelas-asrama" class="text-xs font-semibold text-secondary">Kelas <?= esc($mainChild['kelas']) ?> - Asrama <?= esc($mainChild['asrama']) ?></p>
                        </div>
                    </div>
                    
                    <div class="mt-3 pt-3 border-t border-outline-variant flex justify-between items-center">
                        <span id="info-nis" class="text-xs text-secondary font-semibold">NIS: <?= esc($mainChild['nis']) ?></span>
                        <span class="text-primary text-xs font-bold">Aktif</span>
                    </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- Current Permit Status Card -->
        <?php 
        $highlightPermit = null;
        foreach ($permits as $p) {
            if (in_array($p['status'], ['active', 'approved', 'pending'])) {
                $highlightPermit = $p;
                break;
            }
        }
        ?>
        
        <?php if ($highlightPermit): ?>
            <div class="glass-card rounded-xl p-4 shadow-sm col-span-1 md:col-span-2 relative overflow-hidden border-l-4 border-l-primary bg-surface">
                <div class="flex flex-col md:flex-row justify-between h-full gap-4">
                    <div class="flex-1 flex flex-col justify-between">
                        <div>
                            <div class="flex items-center gap-2 mb-3">
                                <span class="material-symbols-outlined text-primary">verified_user</span>
                                <h3 class="text-sm font-bold text-on-surface uppercase">Izin Berjalan</h3>
                                
                                <?php if ($highlightPermit['status'] === 'pending'): ?>
                                    <span class="bg-amber-100 text-amber-800 border border-amber-200 text-[10px] font-bold px-2 py-0.5 rounded-full ml-auto">Menunggu</span>
                                <?php elseif ($highlightPermit['status'] === 'approved'): ?>
                                    <span class="bg-emerald-100 text-emerald-800 border border-emerald-200 text-[10px] font-bold px-2 py-0.5 rounded-full ml-auto">Disetujui</span>
                                <?php elseif ($highlightPermit['status'] === 'active'): ?>
                                    <span class="bg-blue-100 text-blue-800 border border-blue-200 text-[10px] font-bold px-2 py-0.5 rounded-full ml-auto">Sedang di Luar</span>
                                <?php endif; ?>
                            </div>
                            <p class="text-xl font-bold text-on-surface mb-1 leading-tight"><?= esc($highlightPermit['jenis_izin']) ?></p>
                            <p class="text-xs text-secondary mb-3">Batas Kembali: <span class="font-bold text-on-surface"><?= date('d M Y H:i', strtotime($highlightPermit['waktu_kembali'])) ?></span></p>
                        </div>
                        
                        <div class="flex gap-3 mt-auto pt-4">
                            <a href="/wali/izin/<?= $highlightPermit['id'] ?>" class="border border-primary text-primary hover:bg-primary hover:text-white font-bold text-xs px-4 py-2 rounded-lg transition-all flex items-center gap-2">
                                <span class="material-symbols-outlined text-sm">qr_code</span>
                                <span>Lihat Surat Izin / QR</span>
                            </a>
                        </div>
                    </div>
                    
                    <div class="bg-white p-2 rounded-lg border border-slate-200 flex flex-col items-center justify-center shrink-0 w-32 h-32 self-center sm:self-end shadow-sm">
                        <div id="quick-qr" class="p-1"></div>
                        <span class="text-[10px] text-slate-500 mt-1 text-center font-mono font-bold"><?= esc($highlightPermit['token_izin']) ?></span>
                    </div>
                </div>
            </div>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    new QRCode(document.getElementById("quick-qr"), {
                        text: "<?= esc($highlightPermit['token_izin']) ?>",
                        width: 80,
                        height: 80,
                        colorDark : "#059669",
                        colorLight : "#ffffff"
                    });
                });
            </script>
        <?php else: ?>
            <div class="glass-card rounded-xl p-4 shadow-sm col-span-1 md:col-span-2 flex flex-col items-center justify-center text-center bg-surface border border-outline-variant">
                <span class="material-symbols-outlined text-outline text-5xl mb-3 opacity-50">assignment_turned_in</span>
                <h4 class="text-sm font-bold text-on-surface">Tidak Ada Izin Aktif</h4>
                <p class="text-xs text-secondary max-w-xs mt-1">
                    Putra Anda saat ini berada di dalam pondok pesantren.
                </p>
            </div>
        <?php endif; ?>
    </div>

    <!-- Secondary Section: History Table Layout -->
    <div class="glass-card rounded-xl shadow-sm overflow-hidden bg-surface border border-outline-variant">
        <div class="px-4 py-3 border-b border-outline-variant flex justify-between items-center bg-surface-container-low">
            <h3 class="text-lg font-bold text-on-surface">Riwayat Perizinan Terakhir</h3>
            <a href="/wali/riwayat" class="text-primary hover:text-primary-hover transition-colors p-1">
                <span class="material-symbols-outlined">open_in_new</span>
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-surface-container border-b border-outline-variant">
                        <th class="py-3 px-4 text-xs font-bold text-secondary uppercase tracking-wider whitespace-nowrap">Tanggal</th>
                        <th class="py-3 px-4 text-xs font-bold text-secondary uppercase tracking-wider">Jenis Izin</th>
                        <th class="py-3 px-4 text-xs font-bold text-secondary uppercase tracking-wider hidden md:table-cell">Keterangan</th>
                        <th class="py-3 px-4 text-xs font-bold text-secondary uppercase tracking-wider">Status</th>
                    </tr>
                </thead>
                <tbody class="text-sm">
                    <?php if (empty($permits)): ?>
                        <tr>
                            <td colspan="4" class="py-6 text-center text-secondary">Belum ada riwayat perizinan.</td>
                        </tr>
                    <?php else: ?>
                        <?php 
                        // Show only top 5 recent permits
                        $recentPermits = array_slice($permits, 0, 5);
                        foreach ($recentPermits as $p): 
                        ?>
                        <tr class="border-b border-outline-variant hover:bg-surface-container transition-colors">
                            <td class="py-3 px-4 whitespace-nowrap text-on-surface font-semibold"><?= date('d M Y', strtotime($p['waktu_keluar'])) ?></td>
                            <td class="py-3 px-4 text-on-surface font-bold"><?= esc($p['jenis_izin']) ?></td>
                            <td class="py-3 px-4 text-secondary hidden md:table-cell truncate max-w-[200px]"><?= esc($p['alasan']) ?></td>
                            <td class="py-3 px-4">
                                <?php if ($p['status'] === 'pending'): ?>
                                    <span class="bg-amber-100 text-amber-800 border border-amber-200 text-[10px] font-bold px-2 py-1 rounded-full inline-flex items-center gap-1">
                                        <span class="material-symbols-outlined text-[14px]">schedule</span> Menunggu
                                    </span>
                                <?php elseif ($p['status'] === 'approved'): ?>
                                    <span class="bg-emerald-100 text-emerald-800 border border-emerald-200 text-[10px] font-bold px-2 py-1 rounded-full inline-flex items-center gap-1">
                                        <span class="material-symbols-outlined text-[14px]">check_circle</span> Disetujui
                                    </span>
                                <?php elseif ($p['status'] === 'active'): ?>
                                    <span class="bg-blue-100 text-blue-800 border border-blue-200 text-[10px] font-bold px-2 py-1 rounded-full inline-flex items-center gap-1">
                                        <span class="material-symbols-outlined text-[14px]">directions_run</span> Di Luar
                                    </span>
                                <?php elseif ($p['status'] === 'done'): ?>
                                    <span class="bg-slate-100 text-slate-800 border border-slate-200 text-[10px] font-bold px-2 py-1 rounded-full inline-flex items-center gap-1 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700">
                                        <span class="material-symbols-outlined text-[14px]">done_all</span> Selesai
                                    </span>
                                <?php elseif ($p['status'] === 'rejected'): ?>
                                    <span class="bg-red-100 text-red-800 border border-red-200 text-[10px] font-bold px-2 py-1 rounded-full inline-flex items-center gap-1">
                                        <span class="material-symbols-outlined text-[14px]">cancel</span> Ditolak
                                    </span>
                                <?php endif; ?>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
        <div class="px-4 py-3 border-t border-outline-variant bg-surface-container-low flex justify-center">
            <a href="/wali/riwayat" class="text-primary font-bold text-sm hover:underline cursor-pointer">Lihat Semua Riwayat</a>
        </div>
    </div>

</div>
<script>
    const childrenData = <?= json_encode($children ?? []) ?>;

    function filterSantri() {
        const query = document.getElementById('search-santri').value.toLowerCase();
        


        // Update Informasi Santri card based on search query
        if (childrenData.length > 0) {
            let matchedChild = childrenData[0]; // default to first child
            
            if (query.trim() !== '') {
                // Find first child that matches the query
                const found = childrenData.find(c => c.nama.toLowerCase().includes(query));
                if (found) {
                    matchedChild = found;
                }
            }
            
            const elNama = document.getElementById('info-nama');
            const elKelas = document.getElementById('info-kelas-asrama');
            const elNis = document.getElementById('info-nis');

            if (elNama && elKelas && elNis) {
                elNama.innerText = matchedChild.nama;
                elKelas.innerText = 'Kelas ' + matchedChild.kelas + ' - Asrama ' + matchedChild.asrama;
                elNis.innerText = 'NIS: ' + matchedChild.nis;
            }
        }
    }
</script>
<?= $this->endSection() ?>
