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

<?= $this->section('content') ?>

<!-- Include jQuery and Select2 for dynamic form logic -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
    /* Custom Grid & Form Styles */
    .form-wizard {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    .wizard-header {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        padding: 1.5rem 2rem;
    }
    .wizard-title {
        margin: 0;
        color: #1e293b;
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .wizard-subtitle {
        margin: 5px 0 0 0;
        color: #64748b;
        font-size: 0.9rem;
    }
    
    /* Stepper */
    .stepper {
        display: flex;
        padding: 1.5rem 2rem;
        background: #fff;
        border-bottom: 1px solid #e2e8f0;
        gap: 10px;
    }
    .step {
        flex: 1;
        text-align: center;
        padding: 10px;
        position: relative;
        cursor: pointer;
        border-bottom: 3px solid #e2e8f0;
        color: #94a3b8;
        font-weight: 600;
        transition: all 0.3s;
    }
    .step.active {
        border-bottom-color: #4f46e5;
        color: #4f46e5;
    }
    .step.completed {
        border-bottom-color: #10b981;
        color: #10b981;
    }
    .step span {
        display: block;
        font-size: 0.8rem;
        margin-top: 5px;
    }

    /* Form Layout */
    .wizard-body {
        padding: 2rem;
        min-height: 400px;
    }
    .step-content {
        display: none;
        animation: fadeIn 0.4s;
    }
    .step-content.active {
        display: block;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 20px;
    }
    .col-span-12 { grid-column: span 12; }
    .col-span-6 { grid-column: span 6; }
    .col-span-4 { grid-column: span 4; }
    .col-span-3 { grid-column: span 3; }
    .col-span-8 { grid-column: span 8; }

    .form-group {
        display: flex;
        flex-direction: column;
    }
    .form-label {
        font-weight: 600;
        color: #475569;
        margin-bottom: 6px;
        font-size: 0.9rem;
    }
    .form-control, .form-select {
        padding: 10px 12px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        font-size: 0.95rem;
        color: #334155;
        background: #fff;
        transition: border-color 0.2s;
    }
    .form-control:focus, .form-select:focus {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }
    .text-danger { color: #ef4444; }
    .text-muted { color: #64748b; font-size: 0.8rem; margin-top: 4px; }
    
    .section-title {
        color: #334155;
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 1px dashed #cbd5e1;
    }

    .sub-section {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* Footer Buttons */
    .wizard-footer {
        padding: 1.5rem 2rem;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
    }
    .btn {
        padding: 10px 20px;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.95rem;
        transition: background 0.2s;
    }
    .btn-light {
        background: #fff;
        border: 1px solid #cbd5e1;
        color: #475569;
    }
    .btn-light:hover { background: #f1f5f9; }
    .btn-primary {
        background: #4f46e5;
        color: #fff;
    }
    .btn-primary:hover { background: #4338ca; }
    .btn-success {
        background: #10b981;
        color: #fff;
    }
    .btn-success:hover { background: #059669; }
    
    /* Responsive */
    @media (max-width: 768px) {
        .col-span-6, .col-span-4, .col-span-3, .col-span-8 {
            grid-column: span 12;
        }
        .stepper {
            flex-direction: column;
            gap: 0;
        }
    }
</style>

<div class="form-wizard">
    <div class="wizard-header">
        <h2 class="wizard-title"><i class='bx bx-user-plus'></i> Pendaftaran Mahasiswa Baru</h2>
        <p class="wizard-subtitle">Formulir Terintegrasi Neo Feeder PDDIKTI</p>
    </div>

    <?php if (session()->getFlashdata('error')) : ?>
        <div style="padding: 15px 30px; background: #fee2e2; color: #b91c1c; border-bottom: 1px solid #fecaca; display: flex; align-items: center; gap: 10px;">
            <i class='bx bx-error-circle' style="font-size: 1.2rem;"></i> <?= session()->getFlashdata('error') ?>
        </div>
    <?php endif; ?>

    <!-- Stepper Navigation -->
    <div class="stepper">
        <div class="step active" id="nav-step-1" onclick="goToStep(1)">
            1. Data Diri
            <span>Identitas & Alamat</span>
        </div>
        <div class="step" id="nav-step-2" onclick="goToStep(2)">
            2. Orang Tua
            <span>Ayah, Ibu & Wali</span>
        </div>
        <div class="step" id="nav-step-3" onclick="goToStep(3)">
            3. Akademik
            <span>Prodi & Pendaftaran</span>
        </div>
        <div class="step" id="nav-step-4" onclick="goToStep(4)">
            4. Keb. Khusus
            <span>Informasi Tambahan</span>
        </div>
    </div>

    <form action="<?= base_url('mahasiswa/store') ?>" method="POST" id="mhsForm">
        <?= csrf_field() ?>
        <div class="wizard-body">
            
            <!-- STEP 1: DATA DIRI & ALAMAT -->
            <div class="step-content active" id="step-1">
                <div class="section-title">Data Pribadi</div>
                <div class="form-grid">
                    <div class="form-group col-span-4">
                        <label class="form-label">NIK <span class="text-danger">*</span></label>
                        <input type="text" name="nik" class="form-control" value="<?= old('nik') ?>" required minlength="16" maxlength="16" placeholder="16 Digit NIK KTP">
                    </div>
                    <div class="form-group col-span-8">
                        <label class="form-label">Nama Lengkap (Sesuai Ijazah) <span class="text-danger">*</span></label>
                        <input type="text" name="nama_lengkap" class="form-control" value="<?= old('nama_lengkap') ?>" required>
                    </div>

                    <div class="form-group col-span-6">
                        <label class="form-label">Tempat Lahir <span class="text-danger">*</span></label>
                        <input type="text" name="tempat_lahir" class="form-control" value="<?= old('tempat_lahir') ?>" required>
                    </div>
                    <div class="form-group col-span-6">
                        <label class="form-label">Tanggal Lahir <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_lahir" class="form-control" value="<?= old('tanggal_lahir') ?>" required>
                    </div>

                    <div class="form-group col-span-4">
                        <label class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
                        <select name="jenis_kelamin" class="form-select" required>
                            <option value="">-- Pilih --</option>
                            <option value="L" <?= old('jenis_kelamin') == 'L' ? 'selected' : '' ?>>Laki-laki (L)</option>
                            <option value="P" <?= old('jenis_kelamin') == 'P' ? 'selected' : '' ?>>Perempuan (P)</option>
                        </select>
                    </div>
                    <div class="form-group col-span-4">
                        <label class="form-label">Agama <span class="text-danger">*</span></label>
                        <select name="agama" class="form-select" required>
                            <option value="">-- Pilih --</option>
                            <option value="1" <?= old('agama') == '1' ? 'selected' : '' ?>>Islam</option>
                            <option value="2" <?= old('agama') == '2' ? 'selected' : '' ?>>Kristen</option>
                            <option value="3" <?= old('agama') == '3' ? 'selected' : '' ?>>Katholik</option>
                            <option value="4" <?= old('agama') == '4' ? 'selected' : '' ?>>Hindu</option>
                            <option value="5" <?= old('agama') == '5' ? 'selected' : '' ?>>Buddha</option>
                            <option value="6" <?= old('agama') == '6' ? 'selected' : '' ?>>Konghucu</option>
                        </select>
                    </div>
                    <div class="form-group col-span-4">
                        <label class="form-label">Kewarganegaraan <span class="text-danger">*</span></label>
                        <select name="kewarganegaraan" class="form-select" required>
                            <option value="ID" selected>Indonesia (WNI)</option>
                        </select>
                    </div>

                    <div class="form-group col-span-6">
                        <label class="form-label">Nama Ibu Kandung <span class="text-danger">*</span></label>
                        <input type="text" name="nama_ibu_kandung" class="form-control" value="<?= old('nama_ibu_kandung') ?>" required placeholder="Wajib untuk verifikasi PDDIKTI">
                    </div>
                    <div class="form-group col-span-3">
                        <label class="form-label">NISN <span class="text-danger">*</span></label>
                        <input type="text" name="nisn" class="form-control" value="<?= old('nisn') ?>" required>
                    </div>
                    <div class="form-group col-span-3">
                        <label class="form-label">NPWP</label>
                        <input type="text" name="npwp" class="form-control" value="<?= old('npwp') ?>">
                    </div>
                </div>

                <div class="section-title" style="margin-top: 30px;">Alamat & Kontak</div>
                <div class="form-grid">
                    <div class="form-group col-span-6">
                        <label class="form-label">Jalan</label>
                        <input type="text" name="jalan" class="form-control" value="<?= old('jalan') ?>">
                    </div>
                    <div class="form-group col-span-6">
                        <label class="form-label">Dusun</label>
                        <input type="text" name="dusun" class="form-control" value="<?= old('dusun') ?>">
                    </div>
                    
                    <div class="form-group col-span-2">
                        <label class="form-label">RT</label>
                        <input type="number" name="rt" class="form-control" value="<?= old('rt') ?>">
                    </div>
                    <div class="form-group col-span-2">
                        <label class="form-label">RW</label>
                        <input type="number" name="rw" class="form-control" value="<?= old('rw') ?>">
                    </div>
                    <div class="form-group col-span-4">
                        <label class="form-label">Kelurahan <span class="text-danger">*</span></label>
                        <input type="text" name="kelurahan" class="form-control" value="<?= old('kelurahan') ?>" required>
                    </div>
                    <div class="form-group col-span-4">
                        <label class="form-label">Kode Pos</label>
                        <input type="number" name="kode_pos" class="form-control" value="<?= old('kode_pos') ?>">
                    </div>
                    
                    <div class="form-group col-span-12" style="position: relative;">
                        <label class="form-label">Kecamatan <span class="text-danger">*</span></label>
                        <input type="text" id="inputKecamatan" class="form-control" value="<?= old('kecamatan') ?>" required placeholder="Ketik nama kecamatan... (Min 3 huruf)">
                        <!-- Hidden input to store id_wilayah for PDDIKTI -->
                        <input type="hidden" name="id_wilayah" id="id_wilayah" value="<?= old('id_wilayah', '000000') ?>">
                        <!-- Hidden input for the name to be saved locally -->
                        <input type="hidden" name="kecamatan" id="kecamatan_name" value="<?= old('kecamatan') ?>">
                        
                        <div id="wilayahDropdown" style="display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); max-height: 250px; overflow-y: auto; z-index: 50; margin-top: 4px;">
                            <div id="wilayahLoading" style="padding: 10px; color: #64748b; font-size: 0.9rem; display: none;">Mencari wilayah...</div>
                            <ul id="wilayahList" style="list-style: none; padding: 0; margin: 0;"></ul>
                        </div>
                        <p class="text-muted">Pencarian data kecamatan langsung dari database Neo Feeder PDDIKTI Pusat.</p>
                    </div>

                    <div class="form-group col-span-4">
                        <label class="form-label">Email Pribadi <span class="text-danger">*</span></label>
                        <input type="email" name="email_pribadi" class="form-control" value="<?= old('email_pribadi') ?>" required>
                    </div>
                    <div class="form-group col-span-4">
                        <label class="form-label">No. HP <span class="text-danger">*</span></label>
                        <input type="text" name="no_hp" class="form-control" value="<?= old('no_hp') ?>" required>
                    </div>
                    <div class="form-group col-span-4">
                        <label class="form-label">Telephone</label>
                        <input type="text" name="telepon" class="form-control" value="<?= old('telepon') ?>">
                    </div>

                    <div class="form-group col-span-4">
                        <label class="form-label">Alat Transportasi</label>
                        <select name="alat_transportasi" class="form-select">
                            <option value="1">Jalan kaki</option>
                            <option value="2">Kendaraan umum</option>
                            <option value="3">Mobil pribadi</option>
                            <option value="4" selected>Sepeda motor</option>
                            <option value="5">Sepeda</option>
                        </select>
                    </div>
                    <div class="form-group col-span-4">
                        <label class="form-label">Jenis Tinggal</label>
                        <select name="jenis_tinggal" class="form-select">
                            <option value="1" selected>Bersama orang tua</option>
                            <option value="2">Wali</option>
                            <option value="3">Kos</option>
                            <option value="4">Asrama</option>
                            <option value="5">Panti asuhan</option>
                        </select>
                    </div>
                    <div class="form-group col-span-4">
                        <label class="form-label">Penerima KPS? <span class="text-danger">*</span></label>
                        <select name="penerima_kps" class="form-select" required>
                            <option value="0" selected>Bukan Penerima KPS (Tidak)</option>
                            <option value="1">Penerima KPS (Ya)</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- STEP 2: ORANG TUA -->
            <div class="step-content" id="step-2">
                <div class="sub-section">
                    <div class="section-title border-0 mb-3"><i class='bx bx-male'></i> Data Ayah</div>
                    <div class="form-grid">
                        <div class="form-group col-span-4">
                            <label class="form-label">NIK Ayah</label>
                            <input type="text" name="nik_ayah" class="form-control" value="<?= old('nik_ayah') ?>">
                        </div>
                        <div class="form-group col-span-4">
                            <label class="form-label">Nama Ayah</label>
                            <input type="text" name="nama_ayah" class="form-control" value="<?= old('nama_ayah') ?>">
                        </div>
                        <div class="form-group col-span-4">
                            <label class="form-label">Tanggal Lahir Ayah</label>
                            <input type="date" name="tanggal_lahir_ayah" class="form-control" value="<?= old('tanggal_lahir_ayah') ?>">
                        </div>
                        
                        <div class="form-group col-span-4">
                            <label class="form-label">Pendidikan Ayah</label>
                            <select name="pendidikan_ayah" class="form-select">
                                <option value="0">Tidak sekolah</option>
                                <option value="4">SD / Sederajat</option>
                                <option value="5">SMP / Sederajat</option>
                                <option value="6" selected>SMA / Sederajat</option>
                                <option value="10">S1</option>
                                <option value="11">S2</option>
                            </select>
                        </div>
                        <div class="form-group col-span-4">
                            <label class="form-label">Pekerjaan Ayah</label>
                            <select name="pekerjaan_ayah" class="form-select">
                                <option value="1">Tidak Bekerja</option>
                                <option value="3">Petani</option>
                                <option value="5">PNS/TNI/Polri</option>
                                <option value="6">Karyawan Swasta</option>
                                <option value="9" selected>Wiraswasta</option>
                                <option value="11">Buruh</option>
                                <option value="99">Lain-lain</option>
                            </select>
                        </div>
                        <div class="form-group col-span-4">
                            <label class="form-label">Penghasilan Ayah</label>
                            <select name="penghasilan_ayah" class="form-select">
                                <option value="0">Tidak Diisi</option>
                                <option value="11">< 500 Ribu</option>
                                <option value="12">500 Ribu - 1 Juta</option>
                                <option value="13" selected>1 Juta - 2 Juta</option>
                                <option value="14">2 Juta - 5 Juta</option>
                                <option value="15">5 Juta - 20 Juta</option>
                                <option value="16">> 20 Juta</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="sub-section">
                    <div class="section-title border-0 mb-3"><i class='bx bx-female'></i> Data Ibu Kandung</div>
                    <div class="form-grid">
                        <div class="form-group col-span-6">
                            <label class="form-label">NIK Ibu</label>
                            <input type="text" name="nik_ibu" class="form-control" value="<?= old('nik_ibu') ?>">
                        </div>
                        <div class="form-group col-span-6">
                            <label class="form-label">Tanggal Lahir Ibu</label>
                            <input type="date" name="tanggal_lahir_ibu" class="form-control" value="<?= old('tanggal_lahir_ibu') ?>">
                        </div>
                        
                        <div class="form-group col-span-4">
                            <label class="form-label">Pendidikan Ibu</label>
                            <select name="pendidikan_ibu" class="form-select">
                                <option value="0">Tidak sekolah</option>
                                <option value="4">SD / Sederajat</option>
                                <option value="5">SMP / Sederajat</option>
                                <option value="6" selected>SMA / Sederajat</option>
                                <option value="10">S1</option>
                                <option value="11">S2</option>
                            </select>
                        </div>
                        <div class="form-group col-span-4">
                            <label class="form-label">Pekerjaan Ibu</label>
                            <select name="pekerjaan_ibu" class="form-select">
                                <option value="1" selected>Ibu Rumah Tangga / Tidak Bekerja</option>
                                <option value="3">Petani</option>
                                <option value="5">PNS/TNI/Polri</option>
                                <option value="6">Karyawan Swasta</option>
                                <option value="9">Wiraswasta</option>
                                <option value="99">Lain-lain</option>
                            </select>
                        </div>
                        <div class="form-group col-span-4">
                            <label class="form-label">Penghasilan Ibu</label>
                            <select name="penghasilan_ibu" class="form-select">
                                <option value="0" selected>Tidak Berpenghasilan</option>
                                <option value="11">< 500 Ribu</option>
                                <option value="12">500 Ribu - 1 Juta</option>
                                <option value="13">1 Juta - 2 Juta</option>
                                <option value="14">2 Juta - 5 Juta</option>
                                <option value="15">5 Juta - 20 Juta</option>
                                <option value="16">> 20 Juta</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="sub-section mb-0">
                    <div class="section-title border-0 mb-3"><i class='bx bx-group'></i> Data Wali (Opsional)</div>
                    <div class="form-grid">
                        <div class="form-group col-span-6">
                            <label class="form-label">Nama Wali</label>
                            <input type="text" name="nama_wali" class="form-control" value="<?= old('nama_wali') ?>">
                        </div>
                        <div class="form-group col-span-6">
                            <label class="form-label">Tanggal Lahir Wali</label>
                            <input type="date" name="tanggal_lahir_wali" class="form-control" value="<?= old('tanggal_lahir_wali') ?>">
                        </div>
                        
                        <div class="form-group col-span-4">
                            <label class="form-label">Pendidikan Wali</label>
                            <select name="pendidikan_wali" class="form-select">
                                <option value="0" selected>Tidak Diisi</option>
                                <option value="6">SMA / Sederajat</option>
                                <option value="10">S1</option>
                            </select>
                        </div>
                        <div class="form-group col-span-4">
                            <label class="form-label">Pekerjaan Wali</label>
                            <select name="pekerjaan_wali" class="form-select">
                                <option value="0" selected>Tidak Diisi</option>
                                <option value="6">Karyawan Swasta</option>
                                <option value="9">Wiraswasta</option>
                            </select>
                        </div>
                        <div class="form-group col-span-4">
                            <label class="form-label">Penghasilan Wali</label>
                            <select name="penghasilan_wali" class="form-select">
                                <option value="0" selected>Tidak Diisi</option>
                                <option value="11">< 500 Ribu</option>
                                <option value="12">500 Ribu - 1 Juta</option>
                                <option value="13">1 Juta - 2 Juta</option>
                                <option value="14">2 Juta - 5 Juta</option>
                                <option value="15">5 Juta - 20 Juta</option>
                                <option value="16">> 20 Juta</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- STEP 3: AKADEMIK -->
            <div class="step-content" id="step-3">
                <div class="section-title">Riwayat Pendidikan Akademik</div>
                <div class="form-grid">
                    <div class="form-group col-span-6">
                        <label class="form-label">NIM (Nomor Induk Mahasiswa) <span class="text-danger">*</span></label>
                        <input type="text" name="nim" class="form-control" value="<?= old('nim') ?>" required placeholder="Masukkan NIM Resmi">
                    </div>
                    <div class="form-group col-span-6">
                        <label class="form-label">Program Studi <span class="text-danger">*</span></label>
                        <select name="prodi_id" class="form-select" required>
                            <option value="">-- Pilih Prodi --</option>
                            <?php foreach($prodi as $p): ?>
                                <option value="<?= $p['id'] ?>" <?= old('prodi_id') == $p['id'] ? 'selected' : '' ?>>
                                    <?= $p['jenjang'] ?> <?= $p['nama_prodi'] ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    
                    <div class="form-group col-span-4">
                        <label class="form-label">Jenis Pendaftaran <span class="text-danger">*</span></label>
                        <select name="jenis_daftar" id="jenis_daftar" class="form-select" required>
                            <option value="">-- Pilih Jenis --</option>
                            <option value="1" <?= old('jenis_daftar') == '1' ? 'selected' : '' ?>>Peserta didik baru</option>
                            <option value="2" <?= old('jenis_daftar') == '2' ? 'selected' : '' ?>>Pindahan</option>
                            <option value="11" <?= old('jenis_daftar') == '11' ? 'selected' : '' ?>>Alih Jenjang</option>
                            <option value="3" <?= old('jenis_daftar') == '3' ? 'selected' : '' ?>>RPL Perolehan SKS</option>
                            <option value="4" <?= old('jenis_daftar') == '4' ? 'selected' : '' ?>>Pendidikan Non Gelar (Course)</option>
                            <option value="5" <?= old('jenis_daftar') == '5' ? 'selected' : '' ?>>Fast Track</option>
                            <option value="6" <?= old('jenis_daftar') == '6' ? 'selected' : '' ?>>RPL Transfer SKS</option>
                            <option value="7" <?= old('jenis_daftar') == '7' ? 'selected' : '' ?>>PPG PGP / PLPG</option>
                        </select>
                    </div>
                    <div class="form-group col-span-4">
                        <label class="form-label">Jalur Pendaftaran <span class="text-danger">*</span></label>
                        <select name="jalur_daftar" class="form-select" required>
                            <option value="">-- Pilih Jalur --</option>
                            <option value="10">Program Kerjasama Perusahaan/Institusi/Pemerintah</option>
                            <option value="4">Prestasi</option>
                            <option value="3">Penelusuran Minat dan Kemampuan (PMDK)</option>
                            <option value="8" selected>Seleksi Mandiri</option>
                            <option value="99">Ujian Masuk Bersama Lainnya</option>
                            <option value="11">Seleksi Nasional Berdasarkan Tes (SNBT)</option>
                            <option value="12">Seleksi Nasional Berdasarkan Prestasi (SNBP)</option>
                            <option value="13">Program Internasional</option>
                        </select>
                    </div>
                    <div class="form-group col-span-4">
                        <label class="form-label">Periode Pendaftaran <span class="text-danger">*</span></label>
                        <input type="text" name="periode_masuk" class="form-control" value="<?= old('periode_masuk') ?>" required minlength="5" maxlength="5" placeholder="Contoh: 20252">
                        <p class="text-muted">Format: 20251 (Ganjil), 20252 (Genap).</p>
                    </div>
                    
                    <div class="form-group col-span-4">
                        <label class="form-label">Tanggal Masuk <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_daftar" class="form-control" value="<?= old('tanggal_daftar', date('Y-m-d')) ?>" required>
                    </div>

                    <div class="form-group col-span-4">
                        <label class="form-label">Pembiayaan Awal <span class="text-danger">*</span></label>
                        <select name="pembiayaan_awal" class="form-select" required>
                            <option value="1" <?= old('pembiayaan_awal') == '1' ? 'selected' : '' ?>>Mandiri</option>
                            <option value="2" <?= old('pembiayaan_awal') == '2' ? 'selected' : '' ?>>Beasiswa Penuh</option>
                            <option value="3" <?= old('pembiayaan_awal') == '3' ? 'selected' : '' ?>>Beasiswa Tidak Penuh</option>
                            <option value="4" <?= old('pembiayaan_awal') == '4' ? 'selected' : '' ?>>Beasiswa Bidikmisi</option>
                            <option value="5" <?= old('pembiayaan_awal') == '5' ? 'selected' : '' ?>>Instansi Pemerintah</option>
                        </select>
                    </div>

                    <div class="form-group col-span-6">
                        <label class="form-label">Biaya Masuk <span class="text-danger">*</span></label>
                        <div style="position: relative;">
                            <span style="position: absolute; left: 10px; top: 8px; color: #64748b; font-weight: 500;">IDR</span>
                            <input type="number" name="biaya_masuk" class="form-control" value="<?= old('biaya_masuk', '0') ?>" style="padding-left: 45px;" required>
                        </div>
                    </div>

                    <!-- Div Pindahan -->
                    <div id="divPindahan" class="col-span-12 form-grid" style="display: none; padding: 15px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; margin-top: 10px;">
                        <div class="col-span-12" style="font-weight: 600; color: #0f172a; margin-bottom: 5px;">Data Perguruan Tinggi Asal</div>
                        <div class="form-group col-span-6">
                            <label class="form-label">Asal Perguruan Tinggi <span class="text-danger">*</span></label>
                            <select name="asal_pt" id="asal_pt" class="form-select">
                                <option value="">Cari Perguruan Tinggi...</option>
                            </select>
                        </div>
                        <div class="form-group col-span-6">
                            <label class="form-label">Asal Program Studi <span class="text-danger">*</span></label>
                            <select name="asal_prodi" id="asal_prodi" class="form-select">
                                <option value="">Pilih Asal PT terlebih dahulu</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- STEP 4: KEBUTUHAN KHUSUS -->
            <div class="step-content" id="step-4">
                <div class="section-title">Informasi Kebutuhan Khusus</div>
                <div class="form-grid">
                    <div class="form-group col-span-6">
                        <label class="form-label">Pilihan Kebutuhan Khusus <span class="text-danger">*</span></label>
                        <select name="kebutuhan_khusus_mhs" class="form-select" required>
                            <option value="0" selected>Tidak</option>
                            <option value="1">Iya</option>
                        </select>
                        <p class="text-muted">Apakah mahasiswa memiliki kebutuhan khusus?</p>
                    </div>
                </div>
            </div>

        </div>

        <div class="wizard-footer">
            <div>
                <a href="<?= base_url('mahasiswa') ?>" class="btn btn-light"><i class='bx bx-arrow-back'></i> Kembali</a>
            </div>
            <div style="display: flex; gap: 10px;">
                <button type="button" class="btn btn-light" id="btnPrev" onclick="nextStep(-1)" style="display: none;">Sebelumnya</button>
                <button type="button" class="btn btn-primary" id="btnNext" onclick="nextStep(1)">Selanjutnya <i class='bx bx-right-arrow-alt'></i></button>
                <button type="submit" class="btn btn-success" id="btnSubmit" style="display: none;"><i class='bx bx-save'></i> Simpan & Kirim ke PDDIKTI</button>
            </div>
        </div>
    </form>
</div>

<script>
    let currentStep = 1;
    const totalSteps = 4;

    function goToStep(step) {
        // Validate current step before jumping if trying to go forward
        if (step > currentStep) {
            if (!validateStep(currentStep)) return;
        }

        // Hide all
        document.querySelectorAll('.step-content').forEach(el => el.classList.remove('active'));
        document.querySelectorAll('.stepper .step').forEach(el => {
            el.classList.remove('active');
        });

        // Update nav UI
        for (let i = 1; i < step; i++) {
            document.getElementById('nav-step-' + i).classList.add('completed');
        }
        document.getElementById('nav-step-' + step).classList.add('active');
        document.getElementById('nav-step-' + step).classList.remove('completed');

        // Show target
        document.getElementById('step-' + step).classList.add('active');
        currentStep = step;
        updateButtons();
    }

    function nextStep(dir) {
        if (dir === 1) {
            if (!validateStep(currentStep)) return;
        }
        let target = currentStep + dir;
        if (target >= 1 && target <= totalSteps) {
            goToStep(target);
        }
    }

    function updateButtons() {
        document.getElementById('btnPrev').style.display = currentStep === 1 ? 'none' : 'inline-flex';
        
        if (currentStep === totalSteps) {
            document.getElementById('btnNext').style.display = 'none';
            document.getElementById('btnSubmit').style.display = 'inline-flex';
        } else {
            document.getElementById('btnNext').style.display = 'inline-flex';
            document.getElementById('btnSubmit').style.display = 'none';
        }
    }

    // Autocomplete Kecamatan PDDIKTI
    const inputKecamatan = document.getElementById('inputKecamatan');
    const idWilayahInput = document.getElementById('id_wilayah');
    const kecamatanNameInput = document.getElementById('kecamatan_name');
    const wilayahDropdown = document.getElementById('wilayahDropdown');
    const wilayahList = document.getElementById('wilayahList');
    const wilayahLoading = document.getElementById('wilayahLoading');
    let searchTimeout = null;

    inputKecamatan.addEventListener('input', function() {
        const query = this.value.trim();
        // Reset valid selection if typed again
        if (query !== kecamatanNameInput.value) {
            idWilayahInput.value = '000000'; 
            kecamatanNameInput.value = '';
        }

        if (query.length < 3) {
            wilayahDropdown.style.display = 'none';
            return;
        }

        clearTimeout(searchTimeout);
        wilayahDropdown.style.display = 'block';
        wilayahLoading.style.display = 'block';
        wilayahList.innerHTML = '';

        searchTimeout = setTimeout(() => {
            fetch('<?= base_url('mahasiswa/searchWilayah') ?>?q=' + encodeURIComponent(query))
                .then(res => res.json())
                .then(data => {
                    wilayahLoading.style.display = 'none';
                    wilayahList.innerHTML = '';
                    
                    if (data.length === 0) {
                        wilayahList.innerHTML = '<li style="padding: 10px; color: #ef4444;">Tidak ditemukan di PDDIKTI</li>';
                        return;
                    }

                    data.forEach(item => {
                        const li = document.createElement('li');
                        li.style.padding = '8px 12px';
                        li.style.cursor = 'pointer';
                        li.style.borderBottom = '1px solid #f1f5f9';
                        li.textContent = item.nama_wilayah;
                        
                        // Hover effect
                        li.onmouseover = () => li.style.background = '#f8fafc';
                        li.onmouseout = () => li.style.background = '#fff';

                        // Click event
                        li.onclick = () => {
                            inputKecamatan.value = item.nama_wilayah;
                            kecamatanNameInput.value = item.nama_wilayah;
                            idWilayahInput.value = item.id_wilayah;
                            wilayahDropdown.style.display = 'none';
                            inputKecamatan.style.borderColor = '#10b981'; // Green to show success
                        };

                        wilayahList.appendChild(li);
                    });
                })
                .catch(() => {
                    wilayahLoading.style.display = 'none';
                    wilayahList.innerHTML = '<li style="padding: 10px; color: #ef4444;">Gagal mengambil data</li>';
                });
        }, 600); // 600ms debounce
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', function(e) {
        if (!inputKecamatan.contains(e.target) && !wilayahDropdown.contains(e.target)) {
            wilayahDropdown.style.display = 'none';
        }
    });

    function validateStep(step) {
        const stepEl = document.getElementById('step-' + step);
        const inputs = stepEl.querySelectorAll('input[required], select[required]');
        let isValid = true;

        inputs.forEach(input => {
            if (!input.value.trim()) {
                isValid = false;
                input.style.borderColor = '#ef4444';
            } else {
                input.style.borderColor = '#cbd5e1';
            }
        });

        if (!isValid) {
            alert('Mohon lengkapi semua field yang wajib diisi (berwarna merah) pada halaman ini.');
        }
        return isValid;
    }
    
    $(document).ready(function() {
        // Logic for Asal PT/Prodi if Pindahan
        $('#jenis_daftar').on('change', function() {
            if($(this).val() == '2' || $(this).val() == '11') { // Pindahan or Alih Jenjang
                $('#divPindahan').show();
                $('#asal_pt').attr('required', true);
                $('#asal_prodi').attr('required', true);
            } else {
                $('#divPindahan').hide();
                $('#asal_pt').removeAttr('required');
                $('#asal_prodi').removeAttr('required');
            }
        });

        // Initialize Select2 for Asal PT
        $('#asal_pt').select2({
            placeholder: 'Cari Perguruan Tinggi...',
            minimumInputLength: 3,
            ajax: {
                url: '<?= base_url('mahasiswa/searchPT') ?>',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return { q: params.term };
                },
                processResults: function (data) {
                    return { results: data };
                },
                cache: true
            }
        });

        // Initialize Select2 for Asal Prodi
        $('#asal_pt').on('change', function() {
            var pt_id = $(this).val();
            $('#asal_prodi').empty().append('<option value="">Cari Prodi...</option>');
            if(pt_id) {
                $('#asal_prodi').select2({
                    placeholder: 'Cari Program Studi...',
                    ajax: {
                        url: '<?= base_url('mahasiswa/searchProdi') ?>',
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return { id_pt: pt_id, q: params.term };
                        },
                        processResults: function (data) {
                            return { results: data };
                        },
                        cache: true
                    }
                });
            }
        });

        // Initial check on load
        if($('#jenis_daftar').val() == '2' || $('#jenis_daftar').val() == '11') {
            $('#divPindahan').show();
        }

    });
</script>

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