<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="row justify-content-center">
<div class="col-12">
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-2">
            <i class="bi bi-pencil-square text-primary"></i>
            <span class="fw-semibold">Edit Data Siswa</span>
        </div>
        <a href="/student" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Kembali
        </a>
    </div>
    <div class="card-body">

        <?php if (session()->getFlashdata('errors')): ?>
        <div class="alert alert-danger py-2">
            <ul class="mb-0 ps-3 small">
                <?php foreach (session()->getFlashdata('errors') as $error): ?>
                <li><?= esc($error) ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
        <?php endif; ?>

        <form action="/student/update/<?= $student['id'] ?>" method="post">
            <?= csrf_field() ?>

            <ul class="nav nav-tabs mb-4">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#identitas">
                        <i class="bi bi-person me-1"></i>Identitas
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#akademik">
                        <i class="bi bi-mortarboard me-1"></i>Akademik
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#alamat">
                        <i class="bi bi-geo-alt me-1"></i>Alamat
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#orangtua">
                        <i class="bi bi-people me-1"></i>Orang Tua
                    </a>
                </li>
            </ul>

            <div class="tab-content">

                <!-- Tab Identitas -->
                <div class="tab-pane fade show active" id="identitas">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">NIS <span class="text-danger">*</span></label>
                            <input type="text" name="nis" class="form-control"
                                value="<?= old('nis', $student['nis']) ?>" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">NISN</label>
                            <input type="text" name="nisn" class="form-control"
                                value="<?= old('nisn', $student['nisn']) ?>">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">NIK</label>
                            <input type="text" name="nik" class="form-control"
                                value="<?= old('nik', $student['nik']) ?>">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">No. KIP</label>
                            <input type="text" name="kip_no" class="form-control"
                                value="<?= old('kip_no', $student['kip_no'] ?? '') ?>"
                                placeholder="Nomor KIP (jika ada)">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                            <input type="text" name="full_name" class="form-control"
                                value="<?= old('full_name', $student['full_name']) ?>" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
                            <select name="gender" class="form-select" required>
                                <option value="L" <?= old('gender', $student['gender']) == 'L' ? 'selected' : '' ?>>Laki-laki</option>
                                <option value="P" <?= old('gender', $student['gender']) == 'P' ? 'selected' : '' ?>>Perempuan</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Agama</label>
                            <select name="religion" class="form-select">
                                <?php foreach (['Islam','Kristen','Katolik','Hindu','Buddha','Konghucu'] as $agama): ?>
                                <option value="<?= $agama ?>"
                                    <?= old('religion', $student['religion']) == $agama ? 'selected' : '' ?>>
                                    <?= $agama ?>
                                </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tempat Lahir</label>
                            <input type="text" name="birth_place" class="form-control"
                                value="<?= old('birth_place', $student['birth_place']) ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tanggal Lahir</label>
                            <input type="date" name="birth_date" class="form-control"
                                value="<?= old('birth_date', $student['birth_date']) ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">No. HP Siswa</label>
                            <input type="text" name="phone" class="form-control"
                                value="<?= old('phone', $student['phone']) ?>">
                        </div>
                    </div>
                </div>

                <!-- Tab Akademik -->
                <div class="tab-pane fade" id="akademik">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Tahun Masuk</label>
                            <input type="number" name="entry_year" class="form-control"
                                value="<?= old('entry_year', $student['entry_year']) ?>">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Tanggal Masuk</label>
                            <input type="date" name="entry_date" class="form-control"
                                value="<?= old('entry_date', $student['entry_date']) ?>">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Asal Sekolah</label>
                            <input type="text" name="origin_school" class="form-control"
                                value="<?= old('origin_school', $student['origin_school']) ?>">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">No. Seri Ijazah</label>
                            <input type="text" name="graduation_certificate_no" class="form-control"
                                value="<?= old('graduation_certificate_no', $student['graduation_certificate_no'] ?? '') ?>"
                                placeholder="Nomor seri ijazah kelulusan">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select" id="statusSelect">
                                <?php foreach (['Aktif','Alumni','Mutasi','Drop Out'] as $s): ?>
                                <option value="<?= $s ?>"
                                    <?= old('status', $student['status']) == $s ? 'selected' : '' ?>>
                                    <?= $s ?>
                                </option>
                                <?php endforeach; ?>
                            </select>
                        </div>

                        <!-- ── INFO KELUAR (muncul kondisional) ── -->
                        <div class="col-12" id="sectionInfoKeluar" style="display:none">
                            <hr class="my-1">
                            <div class="p-3 rounded border" id="boxInfoKeluar">
                                <!-- header dinamis diisi JS -->
                                <h6 class="fw-semibold mb-3" id="infoKeluarTitle"></h6>
                                <div class="row g-3">

                                    <!-- Tanggal keluar — semua status non-aktif -->
                                    <div class="col-md-4">
                                        <label class="form-label" id="labelExitDate">Tanggal</label>
                                        <input type="date" name="exit_date" class="form-control"
                                            value="<?= old('exit_date', $student['exit_date'] ?? '') ?>">
                                    </div>

                                    <!-- Sekolah tujuan — hanya Mutasi -->
                                    <div class="col-md-8" id="colExitTo" style="display:none">
                                        <label class="form-label">Sekolah / Tempat Tujuan</label>
                                        <input type="text" name="exit_to" class="form-control"
                                            placeholder="Nama sekolah tujuan..."
                                            value="<?= old('exit_to', $student['exit_to'] ?? '') ?>">
                                    </div>

                                    <!-- Alasan — Mutasi & Drop Out -->
                                    <div class="col-12" id="colExitReason" style="display:none">
                                        <label class="form-label">Alasan</label>
                                        <textarea name="exit_reason" class="form-control" rows="2"
                                            placeholder="Tulis alasan..."><?= old('exit_reason', $student['exit_reason'] ?? '') ?></textarea>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- ── END INFO KELUAR ── -->

                    </div>
                </div>

                <!-- Tab Alamat -->
                <div class="tab-pane fade" id="alamat">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Alamat Lengkap</label>
                            <textarea name="address" class="form-control" rows="2"><?= old('address', $student['address']) ?></textarea>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">RT</label>
                            <input type="text" name="rt" class="form-control"
                                value="<?= old('rt', $student['rt']) ?>">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">RW</label>
                            <input type="text" name="rw" class="form-control"
                                value="<?= old('rw', $student['rw']) ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Desa/Kelurahan</label>
                            <input type="text" name="village" class="form-control"
                                value="<?= old('village', $student['village']) ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Kecamatan</label>
                            <input type="text" name="district" class="form-control"
                                value="<?= old('district', $student['district']) ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Kota/Kabupaten</label>
                            <input type="text" name="city" class="form-control"
                                value="<?= old('city', $student['city']) ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Provinsi</label>
                            <input type="text" name="province" class="form-control"
                                value="<?= old('province', $student['province']) ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Kode Pos</label>
                            <input type="text" name="postal_code" class="form-control"
                                value="<?= old('postal_code', $student['postal_code']) ?>">
                        </div>
                    </div>
                </div>

                <!-- Tab Orang Tua -->
                <div class="tab-pane fade" id="orangtua">
                    <div class="row g-3">
                        <div class="col-12">
                            <h6 class="fw-semibold text-primary">
                                <i class="bi bi-file-earmark-person me-1"></i>Data Kartu Keluarga (KK)
                            </h6>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">No. Kartu Keluarga (KK)</label>
                            <input type="text" name="family_card_no" class="form-control"
                                value="<?= old('family_card_no', $student['family_card_no'] ?? '') ?>"
                                placeholder="16 digit Nomor KK">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Nama Kepala Keluarga</label>
                            <input type="text" name="family_head_name" class="form-control"
                                value="<?= old('family_head_name', $student['family_head_name'] ?? '') ?>"
                                placeholder="Nama kepala keluarga di KK">
                        </div>

                        <div class="col-12 mt-3">
                            <hr>
                        </div>

                        <div class="col-12">
                            <h6 class="fw-semibold text-primary">
                                <i class="bi bi-person me-1"></i>Data Ayah
                            </h6>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Nama Ayah</label>
                            <input type="text" name="father_name" class="form-control"
                                value="<?= old('father_name', $student['father_name']) ?>">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">NIK Ayah</label>
                            <input type="text" name="father_nik" class="form-control"
                                value="<?= old('father_nik', $student['father_nik']) ?>">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Tempat Lahir Ayah</label>
                            <input type="text" name="father_birth_place" class="form-control"
                                value="<?= old('father_birth_place', $student['father_birth_place'] ?? '') ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tanggal Lahir Ayah</label>
                            <input type="date" name="father_birth" class="form-control"
                                value="<?= old('father_birth', $student['father_birth']) ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Pendidikan Ayah</label>
                            <select name="father_edu" class="form-select">
                                <option value="">-- Pilih --</option>
                                <?php foreach (['SD','SMP','SMA','D3','S1','S2','S3'] as $edu): ?>
                                <option value="<?= $edu ?>"
                                    <?= old('father_edu', $student['father_edu']) == $edu ? 'selected' : '' ?>>
                                    <?= $edu ?>
                                </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Pekerjaan Ayah</label>
                            <input type="text" name="father_job" class="form-control"
                                value="<?= old('father_job', $student['father_job']) ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">No. HP Ayah</label>
                            <input type="text" name="father_phone" class="form-control"
                                value="<?= old('father_phone', $student['father_phone']) ?>">
                        </div>

                        <div class="col-12 mt-2">
                            <h6 class="fw-semibold mb-3" style="color:#e91e8c">
                                <i class="bi bi-person me-1"></i>Data Ibu
                            </h6>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Nama Ibu</label>
                            <input type="text" name="mother_name" class="form-control"
                                value="<?= old('mother_name', $student['mother_name']) ?>">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">NIK Ibu</label>
                            <input type="text" name="mother_nik" class="form-control"
                                value="<?= old('mother_nik', $student['mother_nik']) ?>">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Tempat Lahir Ibu</label>
                            <input type="text" name="mother_birth_place" class="form-control"
                                value="<?= old('mother_birth_place', $student['mother_birth_place'] ?? '') ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tanggal Lahir Ibu</label>
                            <input type="date" name="mother_birth" class="form-control"
                                value="<?= old('mother_birth', $student['mother_birth']) ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Pendidikan Ibu</label>
                            <select name="mother_edu" class="form-select">
                                <option value="">-- Pilih --</option>
                                <?php foreach (['SD','SMP','SMA','D3','S1','S2','S3'] as $edu): ?>
                                <option value="<?= $edu ?>"
                                    <?= old('mother_edu', $student['mother_edu']) == $edu ? 'selected' : '' ?>>
                                    <?= $edu ?>
                                </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Pekerjaan Ibu</label>
                            <input type="text" name="mother_job" class="form-control"
                                value="<?= old('mother_job', $student['mother_job']) ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">No. HP Ibu</label>
                            <input type="text" name="mother_phone" class="form-control"
                                value="<?= old('mother_phone', $student['mother_phone']) ?>">
                        </div>
                    </div>
                </div>

            </div>

            <!-- Submit -->
            <div class="d-flex justify-content-end mt-4 pt-3 border-top gap-2">
                <a href="/student" class="btn btn-secondary">
                    <i class="bi bi-x-circle me-1"></i>Batal
                </a>
                <button type="submit" class="btn btn-primary px-4">
                    <i class="bi bi-save me-2"></i>Update Data Siswa
                </button>
            </div>

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

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

<?= $this->section('scripts') ?>
<script>
// Konfigurasi per status
const exitConfig = {
    'Alumni': {
        show      : true,
        title     : '<i class="bi bi-mortarboard me-2 text-success"></i>Info Kelulusan',
        labelDate : 'Tanggal Lulus',
        showTo    : false,
        showReason: false,
        boxClass  : 'border-success bg-success bg-opacity-10',
    },
    'Mutasi': {
        show      : true,
        title     : '<i class="bi bi-arrow-right-circle me-2 text-warning"></i>Info Mutasi',
        labelDate : 'Tanggal Mutasi',
        showTo    : true,
        showReason: true,
        boxClass  : 'border-warning bg-warning bg-opacity-10',
    },
    'Drop Out': {
        show      : true,
        title     : '<i class="bi bi-x-circle me-2 text-danger"></i>Info Drop Out',
        labelDate : 'Tanggal Drop Out',
        showTo    : false,
        showReason: true,
        boxClass  : 'border-danger bg-danger bg-opacity-10',
    },
    'Aktif': {
        show: false,
    },
};

function onStatusChange(status) {
    const cfg     = exitConfig[status] ?? { show: false };
    const section = document.getElementById('sectionInfoKeluar');
    const box     = document.getElementById('boxInfoKeluar');

    if (!cfg.show) {
        section.style.display = 'none';
        return;
    }

    // Tampilkan section
    section.style.display = '';

    // Update warna box
    box.className = 'p-3 rounded border ' + cfg.boxClass;

    // Update judul
    document.getElementById('infoKeluarTitle').innerHTML = cfg.title;

    // Update label tanggal
    document.getElementById('labelExitDate').textContent = cfg.labelDate;

    // Show/hide field sekolah tujuan
    document.getElementById('colExitTo').style.display     = cfg.showTo     ? '' : 'none';

    // Show/hide field alasan
    document.getElementById('colExitReason').style.display = cfg.showReason ? '' : 'none';
}

// Init saat halaman load
document.addEventListener('DOMContentLoaded', function() {
    const sel = document.getElementById('statusSelect');
    onStatusChange(sel.value);
    sel.addEventListener('change', function() {
        onStatusChange(this.value);
    });
});
</script>
<?= $this->endSection() ?>