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

<?= $this->section('content') ?>
<div class="space-y-8">
    
    <!-- Top Nav Actions & Title -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
            <h2 class="text-2xl font-bold text-on-surface">Panel Manajemen Kesantrian</h2>
            <p class="text-sm text-secondary">Persetujuan perizinan santri dan penerbitan izin langsung (bypass).</p>
        </div>
        <a href="/kesantrian/monitoring" class="inline-flex items-center space-x-2 px-4 py-2.5 rounded-lg bg-slate-900 text-on-surface text-sm font-semibold hover:bg-slate-800 shadow transition">
            <span class="material-symbols-outlined text-sm">monitoring</span>
            <span>Monitoring Santri di Luar</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 di antrean..." 
               class="block w-full border-none bg-transparent focus:ring-0 text-sm placeholder-slate-400 focus:outline-none"
               onkeyup="filterSantri()"/>
    </div>

    <!-- Core Grid layout -->
    <div class="grid grid-cols-1 gap-8">
        
        <div class="space-y-8">
            
            <!-- Pending Approvals Section -->
            <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-amber-500 text-2xl animate-pulse">pending_actions</span>
                    <h3 class="text-lg font-bold text-on-surface">Menunggu Persetujuan (<?= count($pendingPermits) ?>)</h3>
                </div>

                <?php if (empty($pendingPermits)): ?>
                    <div class="py-12 flex flex-col items-center justify-center text-center space-y-3">
                        <span class="material-symbols-outlined text-slate-300 text-6xl">check_circle</span>
                        <h4 class="text-on-surface-variant font-semibold text-base">Semua pengajuan telah diproses</h4>
                        <p class="text-outline text-xs">
                            Belum ada pengajuan izin baru dari wali santri saat ini.
                        </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">Pengajuan Izin</th>
                                    <th class="py-3 px-4">Waktu</th>
                                    <th class="py-3 px-4 text-right">Aksi</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-[#272b31] text-on-surface-variant font-medium">
                                <?php foreach ($pendingPermits 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']) ?> | Kelas <?= esc($permit['santri_kelas']) ?></div>
                                        </td>
                                        <td class="py-3.5 px-4 text-xs">
                                            <div class="font-bold text-on-surface-variant"><?= esc($permit['jenis_izin']) ?></div>
                                            <div class="text-secondary max-w-xs truncate" title="<?= esc($permit['alasan']) ?>"><?= esc($permit['alasan']) ?></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-right">
                                            <div class="inline-flex space-x-2">
                                                <form action="/kesantrian/approve/<?= $permit['id'] ?>" method="post" class="inline">
                                                    <?= csrf_field() ?>
                                                    <button type="submit" class="px-3 py-1 rounded bg-primary text-on-surface text-xs font-bold hover:bg-primary-hover shadow-sm transition">
                                                        Setujui
                                                    </button>
                                                </form>
                                                
                                                <button onclick="handleReject(<?= $permit['id'] ?>)" class="px-3 py-1 rounded bg-red-50 text-red-600 border border-red-200 text-xs font-bold hover:bg-red-100 transition">
                                                    Tolak
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<!-- Rejection Modal / Prompt Handler -->
<div id="reject-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
<!-- Backdrop -->
<div class="absolute inset-0 bg-slate-900 opacity-50" onclick="closeRejectModal()"></div>

<!-- Content Card -->
<div class="relative bg-surface rounded-xl shadow-xl max-w-md w-full mx-4 p-6 border border-outline space-y-4">
<h3 class="text-lg font-bold text-on-surface">Tolak Pengajuan Izin</h3>
<p class="text-sm text-secondary">Berikan keterangan mengapa pengajuan izin keluar santri ditolak.</p>

<form id="reject-form" action="" method="post" class="space-y-4">
    <?= csrf_field() ?>
    <div>
        <label for="catatan_tolak" class="block text-xs font-bold text-secondary uppercase mb-1">Alasan Penolakan</label>
        <textarea name="catatan_tolak" id="catatan_tolak" rows="3" required placeholder="Contoh: Jadwal bertabrakan dengan kegiatan ujian..."
                  class="block w-full rounded-lg border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-sm"></textarea>
    </div>
    <div class="flex justify-end space-x-2">
        <button type="button" onclick="closeRejectModal()" class="px-4 py-2 border border-outline text-on-surface-variant rounded-lg text-sm font-semibold hover:bg-surface-dim transition">
            Batal
        </button>
        <button type="submit" class="px-4 py-2 bg-red-600 text-on-surface rounded-lg text-sm font-semibold hover:bg-red-700 shadow-sm transition">
            Tolak Pengajuan
        </button>
    </div>
</form>
</div>
</div>

<script>
function handleReject(permitId) {
const modal = document.getElementById('reject-modal');
const form = document.getElementById('reject-form');
form.action = '/kesantrian/reject/' + permitId;
modal.classList.remove('hidden');
document.getElementById('catatan_tolak').focus();
}

function closeRejectModal() {
document.getElementById('reject-modal').classList.add('hidden');
}

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

// Filter rows in all tables containing student names
const tables = document.querySelectorAll('table');
tables.forEach(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() ?>
