<?= $this->extend('layout/admin') ?>
<?= $this->section('content') ?>

<style>
    :root {
        --primary: #1e3cff;
        --primary-soft: #edf2ff;
        --radius-lg: 22px;
        --radius-md: 16px;
    }

    /* ===== PAGE ===== */
    .page-wrapper {
        background: linear-gradient(180deg, #eef3ff 0%, #ffffff 100%);
        padding: 24px;
        border-radius: var(--radius-lg);
    }

    /* ===== CARD ===== */
    .card-premium {
        border-radius: var(--radius-lg);
        border: none;
        background: #fff;
        overflow: hidden;
    }

    /* ===== HEADER ===== */
    .header-box {
        background: linear-gradient(135deg, #1e3cff, #5c88ff);
        color: #fff;
        padding: 28px;
    }

    .header-box h4 {
        font-weight: 800;
    }

    /* ===== STEPPER ===== */
    .stepper {
        gap: 8px;
    }

    .step {
        padding: 8px 18px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
    }

    .step-active {
        background: var(--primary);
        color: #fff;
    }

    .step-inactive {
        background: var(--primary-soft);
        color: #5170ff;
    }

    /* ===== FORM STEP ===== */
    .form-step {
        display: none;
    }

    .form-step.active {
        display: block;
        animation: fadeUp .3s ease;
    }

    /* ===== INPUT ===== */
    .form-control,
    .form-select,
    textarea {
        border-radius: 14px;
        border: 1px solid #e2e6ff;
        padding: 12px;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 .15rem rgba(30, 60, 255, .15);
    }

    /* ===== UPLOAD CARD ===== */
    .upload-card {
        border: 1px solid #e4e9ff;
        border-radius: 18px;
        padding: 16px;
        background: #fff;
    }

    /* ===== BUTTON ===== */
    .btn {
        border-radius: 14px;
        font-weight: 600;
    }

    /* ===== ANIMATION ===== */
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>

<div class="page-wrapper">
    <div class="card shadow-sm card-premium">

        <div class="header-box">
            <h4>Pendaftaran PPDB SIMSEKO</h4>
            <div class="opacity-75">Aplikasi PPDB Premium & Terintegrasi</div>
        </div>

        <div class="card-body">

            <!-- STEPPER -->
            <div class="stepper mb-4 d-flex flex-wrap">
                <div class="step step-active" id="s0">0. Level & Jalur</div>
                <div class="step step-inactive" id="s1">1. Identitas</div>
                <div class="step step-inactive" id="s2">2. Alamat</div>
                <div class="step step-inactive" id="s3">3. Orang Tua</div>
                <div class="step step-inactive" id="s4">4. Sekolah Asal</div>
                <div class="step step-inactive" id="s5">5. Prestasi</div>
                <div class="step step-inactive" id="s6">6. Dokumen</div>
                <div class="step step-inactive" id="s7">7. Konfirmasi</div>
            </div>



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

                <!-- STEP 0 -->
                <div class="form-step active" id="step0">
                    <div class="alert alert-primary"><b>Level & Jalur Pendaftaran</b></div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label>Level Sekolah *</label>
                            <select name="school_level" class="form-select" required>
                                <option value="">-- Pilih --</option>
                                <option>SD</option>
                                <option>SMP</option>
                                <option>SMA/SMK</option>
                            </select>
                        </div>
                        <div id="quotaBox" class="card-info-box d-none mt-3">
                            <div class="row text-center">
                                <div class="col">
                                    <div class="label">Total Kuota</div>
                                    <div class="value" id="qTotal">-</div>
                                </div>
                                <div class="col">
                                    <div class="label">Terpakai</div>
                                    <div class="value text-danger" id="qUsed">-</div>
                                </div>
                                <div class="col">
                                    <div class="label">Sisa</div>
                                    <div class="value text-success" id="qRemain">-</div>
                                </div>
                            </div>
                        </div>

                        <div id="quotaAlert" class="alert alert-danger d-none mt-3">
                            ❌ Kuota jalur ini sudah HABIS
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Jalur Pendaftaran *</label>
                            <select name="registration_path" id="registration_path" class="form-select" required>
                                <option value="">-- Pilih --</option>
                                <option value="No Filter">No Filter</option>
                                <option value="ZONASI">Zonasi</option>
                                <option value="PRESTASI">Prestasi</option>
                                <option value="AFIRMASI">Afirmasi</option>
                            </select>
                        </div>
                    </div>

                    <div class="alert alert-info">
                        <ul class="mb-0">
                            <li>Zonasi → Kartu Keluarga</li>
                            <li>Prestasi → Rapor / Sertifikat</li>
                            <li>Afirmasi → KIP / PKH</li>
                            <li><b>Semua Jalur → Foto Siswa</b></li>
                        </ul>
                    </div>
                </div>

                <!-- STEP 1 -->
                <div class="form-step" id="step1">
                    <div class="alert alert-primary">
                        <b>Identitas Siswa</b>
                        <small class="d-block opacity-75">
                            Isi sesuai dokumen resmi (Akta Kelahiran & Kartu Keluarga)
                        </small>
                    </div>

                    <!-- Nama -->
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label class="form-label">Nama Lengkap *</label>
                            <input class="form-control" name="name" placeholder="Nama sesuai Akta Kelahiran" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Nama Panggilan</label>
                            <input class="form-control" name="nickname" placeholder="Opsional">
                        </div>
                    </div>

                    <!-- JK -->
                    <div class="mb-3">
                        <label class="form-label">Jenis Kelamin *</label>
                        <select name="gender" class="form-select" required>
                            <option value="">-- Pilih --</option>
                            <option value="M">Laki-laki</option>
                            <option value="F">Perempuan</option>
                        </select>
                    </div>

                    <!-- NISN & NIK -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">NISN *</label>
                            <input class="form-control" name="nisn" placeholder="10 digit NISN" pattern="[0-9]{10}"
                                maxlength="10" inputmode="numeric" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">NIK Siswa *</label>
                            <input class="form-control" name="nik" placeholder="16 digit NIK" pattern="[0-9]{16}"
                                maxlength="16" inputmode="numeric" required>
                        </div>
                    </div>

                    <!-- Akta -->
                    <div class="mb-3">
                        <label class="form-label">No. Registrasi Akta Lahir *</label>
                        <input class="form-control" name="akta_number" placeholder="Nomor Akta Kelahiran" required>
                    </div>

                    <!-- TTL -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Tempat Lahir *</label>
                            <input class="form-control" name="birth_place" placeholder="Kota / Kabupaten" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Tanggal Lahir *</label>
                            <input type="date" class="form-control" name="birth_date" required>
                        </div>
                    </div>

                    <!-- Agama & Kewarganegaraan -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Agama *</label>
                            <select name="religion" class="form-select" required>
                                <option value="">-- Pilih --</option>
                                <option>Islam</option>
                                <option>Kristen</option>
                                <option>Katolik</option>
                                <option>Hindu</option>
                                <option>Buddha</option>
                                <option>Khonghucu</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Kewarganegaraan *</label>
                            <select name="citizenship" class="form-select" required>
                                <option value="">-- Pilih --</option>
                                <option value="WNI">WNI</option>
                                <option value="WNA">WNA</option>
                            </select>
                        </div>
                    </div>

                    <!-- Anak ke & Saudara -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Anak ke- *</label>
                            <input type="number" min="1" class="form-control" name="child_order" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Jumlah Saudara Kandung *</label>
                            <input type="number" min="0" class="form-control" name="siblings" required>
                        </div>
                    </div>

                    <!-- Kebutuhan Khusus -->
                    <div class="mb-3">
                        <label class="form-label">Kebutuhan Khusus</label>
                        <select name="special_needs" class="form-select">
                            <option value="">Tidak Ada</option>
                            <option value="TUNA_NETRA">Tuna Netra</option>
                            <option value="TUNA_RUNGU">Tuna Rungu</option>
                            <option value="TUNA_DAKSA">Tuna Daksa</option>
                            <option value="AUTIS">Autis</option>
                            <option value="LAINNYA">Lainnya</option>
                        </select>
                    </div>
                </div>

                <!--step 2 -->
                <input type="hidden" name="lat" id="lat">
                <input type="hidden" name="lng" id="lng">
                <input type="hidden" name="zonasi_status" id="zonasi_status">

                <div class="form-step" id="step2">
                    <div class="alert alert-primary">
                        <b>Alamat & Domisili</b>
                        <small class="d-block opacity-75">
                            Data sesuai Kartu Keluarga
                        </small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Alamat Jalan *</label>
                        <textarea class="form-control" name="address_street" placeholder="Nama jalan, nomor rumah, dll"
                            required></textarea>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">RT / RW *</label>
                            <input class="form-control" name="rt_rw" placeholder="Contoh: 003/005" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Kode Pos *</label>
                            <input class="form-control" name="postal_code" inputmode="numeric" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Provinsi *</label>
                            <input class="form-control" name="province" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Kabupaten / Kota *</label>
                            <input class="form-control" name="city" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Kecamatan *</label>
                            <input class="form-control" name="district" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Kelurahan / Desa *</label>
                            <input class="form-control" name="village" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Tinggal Bersama *</label>
                            <select name="live_with" class="form-select" required>
                                <option value="">-- Pilih --</option>
                                <option>Orang Tua</option>
                                <option>Wali</option>
                                <option>Asrama</option>
                                <option>Lainnya</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Moda Transportasi *</label>
                            <select name="transport_mode" class="form-select" required>
                                <option value="">-- Pilih --</option>
                                <option>Jalan Kaki</option>
                                <option>Sepeda</option>
                                <option>Motor</option>
                                <option>Mobil</option>
                                <option>Angkutan Umum</option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Jarak ke Sekolah (Km) *</label>
                            <input type="number" step="0.1" min="0" class="form-control" name="distance_to_school"
                                required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Waktu Tempuh (Menit) *</label>
                            <input type="number" min="0" class="form-control" name="travel_time" required>
                        </div>
                    </div>
                </div>


                <!-- STEP 3 : DATA ORANG TUA / WALI -->
                <div class="form-step" id="step3">
                    <div class="alert alert-success">
                        <b>Data Orang Tua / Wali</b>
                    </div>

                    <!-- STATUS -->
                    <div class="mb-3">
                        <label>Status Orang Tua *</label>
                        <select name="parent_status" id="parent_status" class="form-select" required>
                            <option value="">-- Pilih --</option>
                            <option value="AYAH_IBU">Ayah & Ibu</option>
                            <option value="WALI">Wali</option>
                        </select>
                    </div>

                    <!-- ================= AYAH ================= -->
                    <div id="box-ayah">
                        <h6 class="fw-bold text-primary">Data Ayah</h6>

                        <input class="form-control mb-2" name="father_name" placeholder="Nama Lengkap Ayah" required>
                        <input class="form-control mb-2" name="father_nik" placeholder="NIK Ayah" maxlength="16"
                            required>
                        <input type="number" class="form-control mb-2" name="father_birth_year"
                            placeholder="Tahun Lahir" required>
                        <textarea class="form-control mb-2" name="father_address" placeholder="Alamat KTP"
                            required></textarea>

                        <div class="mb-3">
                            <label class="form-label">Lokasi Rumah (Klik di Peta)</label>
                            <div id="map" style="height: 350px; border-radius: 14px;"></div>
                            <small class="text-muted">
                                Lokasi dipakai untuk menghitung jarak ke sekolah
                            </small>
                        </div>

                        <select class="form-select mb-2" name="father_education" required>
                            <option value="">Pendidikan Terakhir</option>
                            <option>SD</option>
                            <option>SMP</option>
                            <option>SMA</option>
                            <option>D3</option>
                            <option>S1</option>
                            <option>S2</option>
                        </select>

                        <input class="form-control mb-2" name="father_job" placeholder="Pekerjaan" required>

                        <!-- PENGHASILAN -->
                        <select class="form-select mb-3" name="father_income" required>
                            <option value="">Penghasilan Bulanan</option>
                            <option value="<500rb">&lt; 500 rb</option>
                            <option value="500rb-1jt">500 rb - 1 jt</option>
                            <option value="1jt-2jt">1 jt - 2 jt</option>
                            <option value="2jt-5jt">2 jt - 5 jt</option>
                            <option value=">5jt">&gt; 5 jt</option>
                            <option value=">20jt">&gt; 20 jt</option>
                        </select>

                        <input class="form-control mb-4" name="father_phone" placeholder="No HP / WhatsApp" required>
                    </div>

                    <!-- ================= IBU ================= -->
                    <div id="box-ibu">
                        <h6 class="fw-bold text-primary">Data Ibu</h6>

                        <input class="form-control mb-2" name="mother_name" placeholder="Nama Lengkap Ibu" required>
                        <input class="form-control mb-2" name="mother_nik" placeholder="NIK Ibu" maxlength="16"
                            required>
                        <input type="number" class="form-control mb-2" name="mother_birth_year"
                            placeholder="Tahun Lahir" required>
                        <textarea class="form-control mb-2" name="mother_address" placeholder="Alamat KTP"
                            required></textarea>

                        <select class="form-select mb-2" name="mother_education" required>
                            <option value="">Pendidikan Terakhir</option>
                            <option>SD</option>
                            <option>SMP</option>
                            <option>SMA</option>
                            <option>D3</option>
                            <option>S1</option>
                            <option>S2</option>
                        </select>

                        <select class="form-select mb-2" name="father_job" required>
                            <option value="">Pilih Pekerjaan Ayah</option>
                            <option value="PNS">PNS</option>
                            <option value="TNI">TNI</option>
                            <option value="POLRI">Polri</option>
                            <option value="KARYAWAN_SWASTA">Karyawan Swasta</option>
                            <option value="WIRAUSAHA">Wira Usaha</option>
                            <option value="IBU_RUMAH_TANGGA">Ibu Rumah Tangga</option>
                        </select>

                        <select class="form-select mb-2" name="mother_job" id="mother_job" required>
                            <option value="">Pilih Pekerjaan Ibu</option>
                            <option value="PNS">PNS</option>
                            <option value="TNI">TNI</option>
                            <option value="POLRI">Polri</option>
                            <option value="KARYAWAN_SWASTA">Karyawan Swasta</option>
                            <option value="WIRAUSAHA">Wira Usaha</option>
                            <option value="IBU_RUMAH_TANGGA">Ibu Rumah Tangga</option>
                        </select>


                        <select class="form-select mb-3" name="mother_income" required>
                            <option value="">Penghasilan Bulanan</option>
                            <option value="<500rb">&lt; 500 rb</option>
                            <option value="500rb-1jt">500 rb - 1 jt</option>
                            <option value="1jt-2jt">1 jt - 2 jt</option>
                            <option value="2jt-5jt">2 jt - 5 jt</option>
                            <option value=">5jt">&gt; 5 jt</option>
                            <option value=">20jt">&gt; 20 jt</option>
                        </select>

                        <input class="form-control mb-4" name="mother_phone" placeholder="No HP / WhatsApp" required>
                    </div>

                    <!-- ================= WALI ================= -->
                    <div id="box-wali" class="d-none">
                        <h6 class="fw-bold text-warning">Data Wali</h6>

                        <input class="form-control mb-2" name="guardian_name" placeholder="Nama Lengkap Wali">
                        <input class="form-control mb-2" name="guardian_nik" placeholder="NIK Wali" maxlength="16">
                        <input type="number" class="form-control mb-2" name="guardian_birth_year"
                            placeholder="Tahun Lahir">
                        <textarea class="form-control mb-2" name="guardian_address"
                            placeholder="Alamat Domisili"></textarea>

                        <select class="form-select mb-2" name="guardian_education">
                            <option value="">Pendidikan Terakhir</option>
                            <option>SD</option>
                            <option>SMP</option>
                            <option>SMA</option>
                            <option>D3</option>
                            <option>S1</option>
                            <option>S2</option>
                        </select>

                        <input class="form-control mb-2" name="guardian_job" placeholder="Pekerjaan">

                        <select class="form-select mb-3" name="guardian_income">
                            <option value="">Penghasilan Bulanan</option>
                            <option value="<500rb">&lt; 500 rb</option>
                            <option value="500rb-1jt">500 rb - 1 jt</option>
                            <option value="1jt-2jt">1 jt - 2 jt</option>
                            <option value="2jt-5jt">2 jt - 5 jt</option>
                            <option value=">5jt">&gt; 5 jt</option>
                            <option value=">20jt">&gt; 20 jt</option>
                        </select>

                        <input class="form-control mb-3" name="guardian_phone" placeholder="No HP / WhatsApp">
                    </div>
                </div>


                <!-- STEP 4 : SEKOLAH ASAL -->
                <div class="form-step" id="step4">
                    <div class="alert alert-warning">
                        <b>Sekolah Asal</b>
                        <small class="d-block opacity-75">Isi sesuai ijazah / data resmi sekolah</small>
                    </div>

                    <!-- JENJANG -->
                    <div class="mb-3">
                        <label>Jenjang Sekolah Asal *</label>
                        <select name="origin_school_level" class="form-select" required>
                            <option value="">-- Pilih Jenjang --</option>
                            <option value="SD">SD</option>
                            <option value="MI">MI</option>
                            <option value="SMP">SMP</option>
                            <option value="MTs">MTs</option>
                            <option value="SMA">SMA</option>
                            <option value="SMK">SMK</option>
                            <option value="MA">MA</option>
                        </select>
                    </div>

                    <!-- STATUS SEKOLAH -->
                    <div class="mb-3">
                        <label>Status Sekolah *</label><br>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="school_status" value="NEGERI" required>
                            <label class="form-check-label">Negeri</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="school_status" value="SWASTA" required>
                            <label class="form-check-label">Swasta</label>
                        </div>
                    </div>

                    <!-- NAMA SEKOLAH -->
                    <input class="form-control mb-3" name="school_origin" placeholder="Nama Sekolah Asal" required>

                    <!-- NPSN -->
                    <input class="form-control mb-3" name="school_npsn" placeholder="NPSN Sekolah" inputmode="numeric"
                        pattern="[0-9]{8}" maxlength="8" required>

                    <!-- KAB / KOTA -->
                    <input class="form-control mb-3" name="school_city" placeholder="Kabupaten / Kota Sekolah" required>

                    <!-- TAHUN LULUS -->
                    <div class="mb-3">
                        <label>Tahun Lulus *</label>
                        <input type="number" class="form-control" name="graduation_year" min="1990"
                            max="<?= date('Y') ?>" placeholder="Contoh: 2024" required>
                    </div>

                    <!-- IJAZAH / SKHUN (OPSIONAL) -->
                    <input class="form-control mb-3" name="certificate_number"
                        placeholder="No. Ijazah / SKHUN (Opsional)">
                </div>

                <!-- STEP 5 : PRESTASI -->
                <div class="form-step" id="step5">

                    <div class="alert alert-success">
                        <b>Prestasi Siswa</b>
                        <small class="d-block opacity-75">
                            Prestasi akademik & non akademik (jika ada)
                        </small>
                    </div>

                    <!-- JENIS PRESTASI -->
                    <div class="mb-3">
                        <label>Jenis Prestasi</label>
                        <select id="prestasi_type" class="form-select">
                            <option value="">Tidak Ada Prestasi</option>
                            <option value="AKADEMIK">Prestasi Akademik</option>
                            <option value="NON_AKADEMIK">Prestasi Non Akademik</option>
                        </select>
                    </div>

                    <!-- AKADEMIK -->
                    <div id="prestasi-akademik" class="upload-card d-none mb-4">

                        <input type="text" name="prestasi_academic_subject" class="form-control mb-2"
                            placeholder="Bidang / Mata Pelajaran">

                        <select name="prestasi_academic_level" class="form-select mb-2">
                            <option value="">Tingkat</option>
                            <option>Kabupaten</option>
                            <option>Provinsi</option>
                            <option>Nasional</option>
                            <option>Internasional</option>
                        </select>

                        <input type="text" name="prestasi_academic_rank" class="form-control mb-2"
                            placeholder="Peringkat (1 / 2 / 3 / Harapan)">

                        <input type="number" name="prestasi_academic_year" class="form-control mb-2"
                            placeholder="Tahun">

                    </div>

                    <!-- NON AKADEMIK -->
                    <div id="prestasi-non" class="upload-card d-none">

                        <input type="text" name="prestasi_non_type" class="form-control mb-2"
                            placeholder="Jenis Prestasi (Olahraga / Seni / dll)">

                        <select name="prestasi_non_level" class="form-select mb-2">
                            <option value="">Tingkat</option>
                            <option>Kabupaten</option>
                            <option>Provinsi</option>
                            <option>Nasional</option>
                            <option>Internasional</option>
                        </select>

                        <input type="text" name="prestasi_non_rank" class="form-control mb-2" placeholder="Peringkat">

                        <input type="number" name="prestasi_non_year" class="form-control mb-2" placeholder="Tahun">

                        <input type="text" name="prestasi_non_organizer" class="form-control mb-2"
                            placeholder="Penyelenggara">

                        <input type="file" name="prestasi_certificate_file" class="form-control"
                            accept=".pdf,.jpg,.jpeg,.png">
                    </div>

                </div>

                <!-- STEP 6 : UPLOAD DOKUMEN -->
                <div class="form-step" id="step6">

                    <div class="alert alert-dark mb-4">
                        <b>Upload Dokumen Persyaratan</b>
                        <small class="d-block opacity-75">
                            Pastikan file sesuai format & ukuran yang ditentukan
                        </small>
                    </div>

                    <div class="row g-4">

                        <!-- ================= KOLOM KIRI ================= -->
                        <div class="col-md-6">

                            <div class="upload-card mb-3">
                                <div class="upload-title">
                                    <i class="fas fa-user-circle"></i> Dokumen Identitas
                                </div>

                                <!-- PAS FOTO -->
                                <div class="mb-3">
                                    <label>Pas Foto Terbaru *</label>
                                    <input type="file" name="photo_file" class="form-control" accept=".jpg,.jpeg,.png"
                                        required>
                                    <small class="text-muted">JPG / PNG • Rasio 3:4 • Max 500 KB</small>
                                </div>

                                <!-- KK -->
                                <div class="mb-3">
                                    <label>Kartu Keluarga (KK) *</label>
                                    <input type="file" name="kk_file" class="form-control" accept=".pdf,.jpg,.jpeg,.png"
                                        required>
                                    <small class="text-muted">PDF / JPG • Scan asli • Max 1 MB</small>
                                </div>

                                <!-- AKTA -->
                                <div class="mb-3">
                                    <label>Akta Kelahiran *</label>
                                    <input type="file" name="akta_file" class="form-control"
                                        accept=".pdf,.jpg,.jpeg,.png" required>
                                    <small class="text-muted">PDF / JPG • Scan asli • Max 1 MB</small>
                                </div>

                            </div>

                        </div>

                        <!-- ================= KOLOM KANAN ================= -->
                        <div class="col-md-6">

                            <div class="upload-card mb-3">
                                <div class="upload-title">
                                    <i class="fas fa-file-alt"></i> Dokumen Pendukung
                                </div>

                                <!-- KTP ORANG TUA -->
                                <div class="mb-3">
                                    <label>KTP Orang Tua *</label>
                                    <input type="file" name="ktp_parent_file" class="form-control"
                                        accept=".pdf,.jpg,.jpeg,.png" required>
                                    <small class="text-muted">
                                        Ayah & Ibu digabung jadi 1 file
                                    </small>
                                </div>

                                <!-- RAPOR (PRESTASI) -->
                                <div id="box-rapor-prestasi" class="mb-3 d-none">
                                    <label>Rapor Terakhir *</label>
                                    <input type="file" name="rapor_file" class="form-control"
                                        accept=".pdf,.jpg,.jpeg,.png">
                                    <small class="text-muted">
                                        Wajib untuk jalur Prestasi
                                    </small>
                                </div>

                                <!-- KIP / PIP -->
                                <div class="mb-3">
                                    <label>Kartu KIP / PIP (Opsional)</label>
                                    <input type="file" name="kip_file" class="form-control"
                                        accept=".pdf,.jpg,.jpeg,.png">
                                    <small class="text-muted">
                                        Untuk pengajuan beasiswa
                                    </small>
                                </div>

                                <!-- IJAZAH -->
                                <div id="box-ijazah" class="mb-3 d-none">
                                    <label>Ijazah *</label>
                                    <input type="file" name="ijazah_file" class="form-control"
                                        accept=".pdf,.jpg,.jpeg,.png">
                                </div>

                                <!-- SKL -->
                                <div id="box-skl" class="mb-3 d-none">
                                    <label>SKL / Rapor *</label>
                                    <input type="file" name="skl_file" class="form-control"
                                        accept=".pdf,.jpg,.jpeg,.png">
                                </div>

                            </div>

                        </div>

                    </div>
                </div>

                <!-- STEP 7 -->
                <div class="form-step" id="step7">
                    <div class="alert alert-info">
                        <b>Konfirmasi</b><br>Pastikan semua data sudah benar
                    </div>
                    <button class="btn btn-success btn-lg w-100">Kirim Pendaftaran</button>
                </div>

                <div class="d-flex justify-content-between mt-4">
                    <button type="button" class="btn btn-light" id="prevBtn">Kembali</button>
                    <button type="button" class="btn btn-primary" id="nextBtn">Lanjut</button>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        let step = 0;
        const maxStep = 7;

        const steps = document.querySelectorAll('.form-step');
        const steppers = document.querySelectorAll('.step');

        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');

        function renderStep() {

            // tampilkan step aktif
            steps.forEach((el, i) => {
                el.classList.toggle('active', i === step);
            });

            // update stepper header
            steppers.forEach((el, i) => {
                el.classList.toggle('step-active', i === step);
                el.classList.toggle('step-inactive', i !== step);
            });

            // tombol prev
            prevBtn.style.display = step === 0 ? 'none' : 'inline-block';

            // tombol next / submit
            if (step === maxStep) {
                nextBtn.style.display = 'none';
            } else {
                nextBtn.style.display = 'inline-block';
                nextBtn.innerText = 'Lanjut';
            }
        }

        renderStep(); // WAJIB

        /* ===== VALIDASI STEP ===== */
        function validateStep() {
            let valid = true;
            const currentStep = steps[step];

            currentStep.querySelectorAll('[required]').forEach(el => {
                if (el.offsetParent === null) return;

                let empty = el.type === 'file'
                    ? el.files.length === 0
                    : !el.value.trim();

                el.classList.toggle('is-invalid', empty);
                if (empty) valid = false;
            });

            if (!valid) {
                alert('⚠️ Lengkapi semua data wajib');
            }
            return valid;
        }

        nextBtn.addEventListener('click', () => {
            if (!validateStep()) return;

            if (step < maxStep) {
                step++;
                renderStep();
            }
        });

        prevBtn.addEventListener('click', () => {
            if (step > 0) {
                step--;
                renderStep();
            }
        });



        /* ===============================
           DOKUMEN BERDASARKAN JALUR
        =============================== */
        function resetDocs() {
            [docZ, docP, docA].forEach(d => {
                d.classList.add('d-none');
                d.querySelectorAll('input').forEach(i => i.required = false);
            });
        }

        pathSelect?.addEventListener('change', () => {
            resetDocs();

            if (pathSelect.value === 'ZONASI') {
                docZ.classList.remove('d-none');
                docZ.querySelector('input').required = true;
            }

            if (pathSelect.value === 'PRESTASI') {
                docP.classList.remove('d-none');
                // JANGAN set required di sini
            }


            if (pathSelect.value === 'AFIRMASI') {
                docA.classList.remove('d-none');
                docA.querySelector('input').required = true;
            }
        });

        renderStep();
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const prestasiType = document.getElementById('prestasi_type');
        const akadBox = document.getElementById('prestasi-akademik');
        const nonBox = document.getElementById('prestasi-non');

        function resetPrestasiBox() {
            akadBox.classList.add('d-none');
            nonBox.classList.add('d-none');

            akadBox.querySelectorAll('input').forEach(i => i.required = false);
            nonBox.querySelectorAll('input').forEach(i => i.required = false);
        }

        prestasiType.addEventListener('change', () => {
            resetPrestasiBox();

            if (prestasiType.value === 'AKADEMIK') {
                akadBox.classList.remove('d-none');
                akadBox.querySelector('input').required = true;
            }

            if (prestasiType.value === 'NON_AKADEMIK') {
                nonBox.classList.remove('d-none');
                nonBox.querySelector('input').required = true;
            }
        });

    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const status = document.getElementById('parent_status');
        const boxAyah = document.getElementById('box-ayah');
        const boxIbu = document.getElementById('box-ibu');
        const boxWali = document.getElementById('box-wali');

        function setRequired(box, state) {
            box.querySelectorAll('input, select, textarea').forEach(el => {
                el.required = state;
            });
        }

        status.addEventListener('change', () => {

            if (status.value === 'WALI') {

                boxAyah.classList.add('d-none');
                boxIbu.classList.add('d-none');
                boxWali.classList.remove('d-none');

                setRequired(boxAyah, false);
                setRequired(boxIbu, false);
                setRequired(boxWali, true);

            } else {

                boxAyah.classList.remove('d-none');
                boxIbu.classList.remove('d-none');
                boxWali.classList.add('d-none');

                setRequired(boxAyah, true);
                setRequired(boxIbu, true);
                setRequired(boxWali, false);
            }
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const pathSelect = document.getElementById('registration_path');
        const raporInput = boxRapor.querySelector('input');

        pathSelect.addEventListener('change', handlePrestasi);
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const gradYear = document.querySelector('[name="graduation_year"]');

        const boxIjazah = document.getElementById('box-ijazah');
        const boxSKL = document.getElementById('box-skl');

        const ijazahInput = boxIjazah.querySelector('input');
        const sklInput = boxSKL.querySelector('input');

        function handleGraduation() {
            const year = parseInt(gradYear.value);
            const currentYear = new Date().getFullYear();

            boxIjazah.classList.add('d-none');
            boxSKL.classList.add('d-none');

            ijazahInput.required = false;
            sklInput.required = false;

            if (!year) return;

            if (year < currentYear) {
                boxIjazah.classList.remove('d-none');
                ijazahInput.required = true;
            } else {
                boxSKL.classList.remove('d-none');
                sklInput.required = true;
            }
        }

        gradYear.addEventListener('change', handleGraduation);
    });
</script>


<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAliygADyXduI6hq1lPKWn-cSJkrX5Q0Xo&libraries=places"></script>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const schoolLatLng = {
            lat: -6.200000,   // 📌 GANTI LAT SEKOLAH
            lng: 106.816666   // 📌 GANTI LNG SEKOLAH
        };

        const map = new google.maps.Map(document.getElementById("map"), {
            center: schoolLatLng,
            zoom: 13
        });

        const marker = new google.maps.Marker({
            map: map,
            draggable: true
        });

        map.addListener("click", (e) => {
            marker.setPosition(e.latLng);
            updateDistance(e.latLng.lat(), e.latLng.lng());
        });

        function updateDistance(lat, lng) {

            document.getElementById('lat').value = lat;
            document.getElementById('lng').value = lng;

            const service = new google.maps.DistanceMatrixService();

            service.getDistanceMatrix({
                origins: [{ lat, lng }],
                destinations: [schoolLatLng],
                travelMode: 'DRIVING'
            }, (response, status) => {

                if (status !== 'OK') {
                    alert('Gagal menghitung jarak');
                    return;
                }

                const element = response.rows[0].elements[0];

                const distanceKm = element.distance.value / 1000;
                const durationMin = Math.ceil(element.duration.value / 60);

                document.querySelector('[name="distance_to_school"]').value = distanceKm.toFixed(2);
                document.querySelector('[name="travel_time"]').value = durationMin;
            });
        }
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const jobIbu = document.getElementById('mother_job');
        const incomeIbu = document.querySelector('[name="mother_income"]');

        if (!jobIbu || !incomeIbu) return;

        function handleIbuRumahTangga() {
            if (jobIbu.value === 'IBU_RUMAH_TANGGA') {
                incomeIbu.value = '0';
                incomeIbu.setAttribute('readonly', true);
                incomeIbu.classList.add('bg-light');
            } else {
                incomeIbu.removeAttribute('readonly');
                incomeIbu.classList.remove('bg-light');
                if (incomeIbu.value === '0') incomeIbu.value = '';
            }
        }

        jobIbu.addEventListener('change', handleIbuRumahTangga);
    });
</script>

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