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

<?= $this->section('content') ?>
<div class="space-y-8">
    
    <!-- Title -->
    <div>
        <h2 class="text-2xl font-bold text-on-surface">Manajemen Santri</h2>
        <p class="text-sm text-secondary">Kelola data santri Pondok Pesantren.</p>
    </div>

    <!-- Layout Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        
        <!-- Section 1: Form Tambah Santri -->
        <div class="bg-surface p-6 rounded-xl border border-outline shadow-sm space-y-6 self-start">
            <div class="flex items-center space-x-2 pb-4 border-b border-outline">
                <span class="material-symbols-outlined text-primary text-2xl">person_add</span>
                <h3 class="text-lg font-bold text-on-surface">Tambah Data Santri</h3>
            </div>

            <form action="/admin/santri/store" method="post" class="space-y-4">
                <?= csrf_field() ?>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="nis" class="block text-xs font-bold text-secondary uppercase mb-1">NIS (Nomor Induk)</label>
                        <input type="text" name="nis" id="nis" required placeholder="Contoh: 1004"
                               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"/>
                    </div>
                    <div>
                        <label for="nama" class="block text-xs font-bold text-secondary uppercase mb-1">Nama Lengkap</label>
                        <input type="text" name="nama" id="nama" required placeholder="Contoh: Abdullah"
                               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"/>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="kelas" class="block text-xs font-bold text-secondary uppercase mb-1">Kelas</label>
                        <input type="text" name="kelas" id="kelas" required placeholder="Contoh: 10B"
                               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"/>
                    </div>
                    <div>
                        <label for="asrama" class="block text-xs font-bold text-secondary uppercase mb-1">Asrama</label>
                        <input type="text" name="asrama" id="asrama" required placeholder="Contoh: Abu Bakar"
                               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"/>
                    </div>
                </div>

                <div>
                    <label for="wali_id" class="block text-xs font-bold text-secondary uppercase mb-1">Pilih Wali Santri (Orang Tua)</label>
                    <select name="wali_id" id="wali_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 ($walis as $w): ?>
                            <option value="<?= $w['id'] ?>"><?= esc($w['nama_lengkap']) ?> (<?= esc($w['username']) ?>)</option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <button type="submit" class="w-full py-2 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">
                    Simpan Santri
                </button>
            </form>
        </div>

        <!-- Section 2: List Santri -->
        <div class="bg-surface p-6 rounded-xl border border-outline shadow-sm">
            <div class="flex items-center space-x-2 pb-4 mb-4 border-b border-outline">
                <span class="material-symbols-outlined text-primary text-2xl">badge</span>
                <h3 class="text-lg font-bold text-on-surface">Daftar Santri</h3>
            </div>
            <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-2.5 px-4">Santri</th>
                            <th class="py-2.5 px-4">Kelas & Asrama</th>
                            <th class="py-2.5 px-4">Wali Santri</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[#272b31] text-on-surface-variant font-medium">
                        <?php foreach ($santriList as $s): ?>
                            <tr>
                                <td class="py-2.5 px-4">
                                    <div class="font-bold text-on-surface"><?= esc($s['nama']) ?></div>
                                    <div class="text-[10px] text-outline font-mono">NIS: <?= esc($s['nis']) ?></div>
                                </td>
                                <td class="py-2.5 px-4 text-xs font-semibold text-on-surface-variant">
                                    Kelas <?= esc($s['kelas']) ?> (<?= esc($s['asrama']) ?>)
                                </td>
                                <td class="py-2.5 px-4 font-semibold text-secondary">
                                    <?= esc($s['wali_nama']) ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>

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