<!DOCTYPE html>
<html>
<head>
    <title>Pendaftaran PPDB</title>

    <link rel="stylesheet" href="<?= base_url('adminlte/plugins/fontawesome-free/css/all.min.css') ?>">
    <link rel="stylesheet" href="<?= base_url('adminlte/dist/css/adminlte.min.css') ?>">

    <style>
        body { background:#f4f6f9; }
        .ppdb-card {
            border-radius:18px;
            overflow:hidden;
        }
        .ppdb-header {
            background:linear-gradient(90deg,#0d6efd,#20c997);
            color:#fff;
        }
    </style>
</head>
<body>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-9">

            <div class="card shadow ppdb-card">
                <div class="card-header ppdb-header text-center">
                    <h4 class="mb-0 fw-bold">
                        <i class="fas fa-user-plus me-2"></i>
                        Form Pendaftaran PPDB 
                    </h4>
                </div>

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

                    <!-- DATA PRIBADI -->
                    <h5 class="text-primary fw-bold mb-3">
                        <i class="fas fa-id-card me-1"></i> Data Pribadi 
                    </h5>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label>Nama Lengkap</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>NISN</label>
                            <input type="text" name="nisn" class="form-control" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label>Tempat Lahir</label>
                            <input type="text" name="birth_place" class="form-control">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label>Tanggal Lahir</label>
                            <input type="date" name="birth_date" class="form-control">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label>Jenis Kelamin</label>
                            <select name="gender" class="form-control">
                                <option value="M">Laki-laki</option>
                                <option value="F">Perempuan</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label>Alamat</label>
                        <textarea name="address" class="form-control"></textarea>
                    </div>

                    <!-- JALUR PENDAFTARAN -->
                    <h5 class="text-primary fw-bold mt-4 mb-3">
                        <i class="fas fa-route me-1"></i> Jalur Pendaftaran
                    </h5>

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

                    <!-- ZONASI -->
                    <div id="zonasi" class="mb-3 d-none">
                        <label>Jarak Rumah ke Sekolah (meter)</label>
                        <input type="number" name="domicile_distance" class="form-control">
                    </div>

                    <!-- PRESTASI -->
                    <div id="prestasi" class="mb-3 d-none">
                        <label>Prestasi (contoh: Juara 1 Olimpiade)</label>
                        <input type="text" name="achievement_desc" class="form-control">
                    </div>

                    <!-- AFIRMASI -->
                    <div id="afirmasi" class="mb-3 d-none">
                        <label>Jenis Afirmasi</label>
                        <select name="affirmation_type" class="form-control">
                            <option value="">-- Pilih --</option>
                            <option>PKH</option>
                            <option>KIP</option>
                            <option>Anak Disabilitas</option>
                        </select>
                    </div>

                    <!-- UPLOAD -->
                    <h5 class="text-primary fw-bold mt-4 mb-3">
                        <i class="fas fa-upload me-1"></i> Upload Dokumen
                    </h5>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label>Rapor (PDF/JPG)</label>
                            <input type="file" name="rapor[]" multiple class="form-control">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label>Kartu Keluarga</label>
                            <input type="file" name="kk" class="form-control">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label>Foto</label>
                            <input type="file" name="photo" class="form-control">
                        </div>
                    </div>

                </div>

                <div class="card-footer text-center">
                    <button class="btn btn-primary btn-lg px-5">
                        <i class="fas fa-paper-plane me-1"></i> Kirim Pendaftaran
                    </button>
                </div>
                </form>

            </div>

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

<script src="<?= base_url('adminlte/plugins/jquery/jquery.min.js') ?>"></script>
<script>
$('#jalur').on('change', function(){
    $('#zonasi,#prestasi,#afirmasi').addClass('d-none');
    if(this.value==='ZONASI') $('#zonasi').removeClass('d-none');
    if(this.value==='PRESTASI') $('#prestasi').removeClass('d-none');
    if(this.value==='AFIRMASI') $('#afirmasi').removeClass('d-none');
});
</script>

</body>
</html>
