<!DOCTYPE html>
<html>
<head>
    <title>Pendaftaran PPDB</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>

<body class="bg-light">
<div class="container py-5">
    <div class="col-md-8 mx-auto">

        <div class="card shadow-lg border-0 rounded-4">
            <div class="card-header bg-primary text-white text-center rounded-top-4">
                <h4 class="mb-0">Form Pendaftaran PPDB</h4>
                <small>Silakan lengkapi data dengan benar</small>
            </div>

            <div class="card-body p-4">

                <form method="post"
                      action="<?= site_url('ppdb/daftar/submit') ?>"
                      enctype="multipart/form-data">

                    <?= csrf_field() ?>

                    <!-- ================= DATA SISWA ================= -->
                    <h6 class="text-primary fw-bold mb-3">Data Calon Siswa</h6>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <input name="name" class="form-control" placeholder="Nama Lengkap" required>
                        </div>
                        <div class="col-md-6">
                            <input name="nisn" class="form-control" placeholder="NISN" required>
                        </div>
                        <div class="col-md-6">
                            <input name="birth_place" class="form-control" placeholder="Tempat Lahir">
                        </div>
                        <div class="col-md-6">
                            <input type="date" name="birth_date" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <select name="gender" class="form-select" required>
                                <option value="">Jenis Kelamin</option>
                                <option value="M">Laki-laki</option>
                                <option value="F">Perempuan</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <input name="phone" class="form-control" placeholder="No HP / WhatsApp" required>
                        </div>
                        <div class="col-12">
                            <textarea name="address" class="form-control" placeholder="Alamat Lengkap"></textarea>
                        </div>
                    </div>

                    <hr>

                    <!-- ================= DATA ORANG TUA ================= -->
                    <h6 class="text-primary fw-bold mb-3">Data Orang Tua</h6>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <input name="father_name" class="form-control" placeholder="Nama Ayah">
                        </div>
                        <div class="col-md-6">
                            <input name="father_job" class="form-control" placeholder="Pekerjaan Ayah">
                        </div>
                        <div class="col-md-6">
                            <input name="mother_name" class="form-control" placeholder="Nama Ibu">
                        </div>
                        <div class="col-md-6">
                            <input name="mother_job" class="form-control" placeholder="Pekerjaan Ibu">
                        </div>
                    </div>

                    <hr>

                    <!-- ================= ASAL SEKOLAH ================= -->
                    <h6 class="text-primary fw-bold mb-3">Asal Sekolah</h6>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <input name="school_origin" class="form-control" placeholder="Nama Sekolah Asal">
                        </div>
                        <div class="col-md-6">
                            <input name="school_address" class="form-control" placeholder="Alamat Sekolah Asal">
                        </div>
                    </div>

                    <hr>

                    <!-- ================= JALUR PENDAFTARAN ================= -->
                    <h6 class="text-primary fw-bold mb-3">Jalur Pendaftaran</h6>

                    <select name="registration_path" id="jalur" class="form-select mb-3" required>
                        <option value="">-- Pilih Jalur --</option>
                        <option value="ZONASI">Zonasi</option>
                        <option value="PRESTASI">Prestasi</option>
                        <option value="AFIRMASI">Afirmasi</option>
                    </select>

                    <!-- ZONASI -->
                    <div id="zonasi" class="d-none">
                        <input name="domicile_distance" class="form-control mb-2"
                               placeholder="Jarak Rumah ke Sekolah (KM)">
                        <label class="form-label">Upload KK</label>
                        <input type="file" name="kk_file" class="form-control mb-2">
                    </div>

                    <!-- PRESTASI -->
                    <div id="prestasi" class="d-none">
                        <textarea name="achievement_desc" class="form-control mb-2"
                                  placeholder="Deskripsi Prestasi"></textarea>
                        <label class="form-label">Upload Sertifikat Prestasi</label>
                        <input type="file" name="raport_file" class="form-control mb-2">
                    </div>

                    <!-- AFIRMASI -->
                    <div id="afirmasi" class="d-none">
                        <input name="affirmation_type" class="form-control mb-2"
                               placeholder="Jenis Afirmasi (KIP / PKH / dll)">
                        <label class="form-label">Upload Bukti Afirmasi</label>
                        <input type="file" name="akta_file" class="form-control mb-2">
                    </div>

                    <hr>

                    <button class="btn btn-primary w-100 btn-lg">
                        🚀 Daftar Sekarang
                    </button>

                </form>

            </div>
        </div>

    </div>
</div>

<script>
const jalur = document.getElementById('jalur');
const zonasi = document.getElementById('zonasi');
const prestasi = document.getElementById('prestasi');
const afirmasi = document.getElementById('afirmasi');

jalur.addEventListener('change', function () {
    zonasi.classList.add('d-none');
    prestasi.classList.add('d-none');
    afirmasi.classList.add('d-none');

    if (this.value === 'ZONASI') zonasi.classList.remove('d-none');
    if (this.value === 'PRESTASI') prestasi.classList.remove('d-none');
    if (this.value === 'AFIRMASI') afirmasi.classList.remove('d-none');
});
</script>

</body>
</html>
