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

<?= $this->section('content') ?>
<div class="space-y-8">
    
    <!-- Header -->
    <div>
        <h2 class="text-2xl font-bold text-on-surface">Log Aktivitas Gerbang</h2>
        <p class="text-sm text-secondary">Histori dan rekaman aktivitas keluar masuk santri di gerbang pesantren.</p>
    </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-log" placeholder="Cari nama santri di log..." 
               class="block w-full border-none bg-transparent focus:ring-0 text-sm placeholder-slate-400 focus:outline-none"
               onkeyup="filterLog()"/>
    </div>

    <!-- Log 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">list_alt</span>
            <h3 class="text-lg font-bold text-on-surface">Data Log Aktivitas Gerbang</h3>
        </div>

        <?php if (empty($logs)): ?>
            <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">published_with_changes</span>
                <h4 class="text-on-surface-variant font-semibold text-base">Belum ada aktivitas gerbang</h4>
                <p class="text-outline text-xs">
                    Semua log pemindaian keluar/masuk santri akan terekam di sini.
                </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">Waktu Scan</th>
                            <th class="py-3 px-4 text-center">Tipe Log</th>
                            <th class="py-3 px-4">Petugas / Token</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[#272b31] text-on-surface-variant font-medium">
                        <?php foreach ($logs as $log): ?>
                            <tr>
                                <td class="py-3.5 px-4">
                                    <div class="font-bold text-on-surface"><?= esc($log['santri_nama']) ?></div>
                                    <div class="text-[11px] text-outline">NIS: <?= esc($log['santri_nis']) ?></div>
                                </td>
                                <td class="py-3.5 px-4 text-xs font-semibold text-on-surface-variant">
                                    <?= date('d M Y H:i:s', strtotime($log['waktu_scan'])) ?>
                                </td>
                                <td class="py-3.5 px-4 text-center">
                                    <?php if ($log['jenis_scan'] === 'keluar'): ?>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-amber-50 text-amber-700 border border-amber-200">
                                            <span class="material-symbols-outlined text-[12px] mr-1">logout</span>
                                            <span>KELUAR PONDOK</span>
                                        </span>
                                    <?php else: ?>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                            <span class="material-symbols-outlined text-[12px] mr-1">login</span>
                                            <span>MASUK PONDOK</span>
                                        </span>
                                    <?php endif; ?>
                                </td>
                                <td class="py-3.5 px-4 text-xs">
                                    <div class="font-semibold text-on-surface-variant"><?= esc($log['petugas_nama']) ?></div>
                                    <div class="text-[10px] text-outline font-mono font-bold"><?= esc($log['token_izin']) ?></div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>
</div>

<script>
    function filterLog() {
        const query = document.getElementById('search-log').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() ?>
