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

<?= $this->section('content') ?>
<div class="space-y-6 max-w-2xl mx-auto">

    <!-- Header -->
    <div class="mb-md">
        <h2 class="text-2xl font-bold text-on-surface">Form Izin Darurat (Bypass)</h2>
        <p class="text-sm text-secondary">Buat surat perizinan instan langsung aktif tanpa pengajuan dari wali.</p>
    </div>

    <!-- Direct creation bypass form -->
    <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">bolt</span>
            <h3 class="text-lg font-bold text-on-surface">Direct Creation (Bypass)</h3>
        </div>

        <form action="/kesantrian/bypass" method="post" class="space-y-4">
            <?= csrf_field() ?>

            <div>
                <label for="santri_id" class="block text-xs font-bold text-secondary uppercase mb-1">Pilih Santri</label>
                <select name="santri_id" id="santri_id" required class="block w-full rounded-lg bg-surface-container-lowest text-on-surface border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-sm">
                    <?php foreach ($santriList as $s): ?>
                        <option value="<?= $s['id'] ?>"><?= esc($s['nama']) ?> (<?= esc($s['nis']) ?> - Kelas <?= esc($s['kelas']) ?>)</option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div>
                <label for="jenis_izin" class="block text-xs font-bold text-secondary uppercase mb-1">Jenis Izin</label>
                <input type="text" name="jenis_izin" id="jenis_izin" required placeholder="Contoh: Belanja Mingguan, Bypass Darurat"
                       class="block w-full rounded-lg bg-surface-container-lowest text-on-surface border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-sm placeholder-outline"
                       value="<?= old('jenis_izin') ?>"/>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="waktu_keluar" class="block text-xs font-bold text-secondary uppercase mb-1">Waktu Keluar</label>
                    <input type="datetime-local" name="waktu_keluar" id="waktu_keluar" required
                           class="block w-full rounded-lg bg-surface-container-lowest text-on-surface border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-sm"
                           value="<?= old('waktu_keluar') ?>"/>
                </div>
                <div>
                    <label for="waktu_kembali" class="block text-xs font-bold text-secondary uppercase mb-1">Batas Waktu Kembali</label>
                    <input type="datetime-local" name="waktu_kembali" id="waktu_kembali" required
                           class="block w-full rounded-lg bg-surface-container-lowest text-on-surface border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-sm"
                           value="<?= old('waktu_kembali') ?>"/>
                </div>
            </div>

            <div>
                <label for="alasan" class="block text-xs font-bold text-secondary uppercase mb-1">Keterangan / Alasan</label>
                <textarea name="alasan" id="alasan" rows="3" required placeholder="Keterangan dispensasi..."
                          class="block w-full rounded-lg bg-surface-container-lowest text-on-surface border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-sm placeholder-outline"><?= old('alasan') ?></textarea>
            </div>

            <button type="submit" class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-extrabold text-white bg-primary hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 mt-6">
                Terbitkan Izin Bypass
            </button>
        </form>
    </div>

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