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

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

    <!-- Header Section -->
    <div class="mb-md">
        <h2 class="font-bold text-2xl md:text-3xl text-on-surface mb-1">Ajukan Izin Baru</h2>
        <p class="text-sm text-secondary">Isi formulir di bawah ini untuk mengajukan perizinan santri.</p>
    </div>

    <!-- Request Form -->
    <div class="glass-card rounded-xl p-md shadow-sm space-y-4">
        <div class="flex items-center space-x-2 pb-3 mb-2 border-b border-outline">
            <span class="material-symbols-outlined text-primary">add_moderator</span>
            <h3 class="font-bold text-lg text-on-surface">Formulir Pengajuan Izin</h3>
        </div>

        <form action="/wali/pengajuan/submit" method="post" class="space-y-4 text-sm">
            <?= 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 border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-xs bg-surface-container-lowest text-on-surface">
                    <?php foreach ($children as $child): ?>
                        <option value="<?= $child['id'] ?>"><?= esc($child['nama']) ?></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: Izin Pulang Sakit"
                       class="block w-full rounded-lg border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-xs placeholder-outline bg-surface-container-lowest text-on-surface"
                       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">Rencana Keluar</label>
                    <input type="datetime-local" name="waktu_keluar" id="waktu_keluar" required
                           class="block w-full rounded-lg border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-xs bg-surface-container-lowest text-on-surface"
                           value="<?= old('waktu_keluar') ?>"/>
                </div>

                <div>
                    <label for="waktu_kembali" class="block text-xs font-bold text-secondary uppercase mb-1">Rencana Kembali</label>
                    <input type="datetime-local" name="waktu_kembali" id="waktu_kembali" required
                           class="block w-full rounded-lg border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-xs bg-surface-container-lowest text-on-surface"
                           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="Berikan keterangan detail..."
                          class="block w-full rounded-lg border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-xs placeholder-outline bg-surface-container-lowest text-on-surface"><?= 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-xs font-semibold text-on-surface bg-primary hover:bg-primary-hover focus:outline-none transition mt-6">
                Kirim Pengajuan
            </button>
        </form>
    </div>

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