<?= $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-person-plus text-primary"></i>
            <span class="fw-semibold">Tambah Siswa Baru</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/store" method="post">
            <?= csrf_field() ?>

            <!-- Nav Tabs -->
            <ul class="nav nav-tabs mb-4" id="studentTabs">
                <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-12">
                            <div class="alert alert-info py-2 small">
                                <i class="bi bi-info-circle me-1"></i>
                                NIS terakhir: <strong><?= esc($lastNis) ?></strong> |
                                Saran NIS berikutnya: <strong class="text-primary"><?= esc($suggestNis) ?></strong>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">NIS <span class="text-danger">*</span></label>
                            <input type="text" name="nis" id="nisInput" class="form-control"
                                value="<?= old('nis', $suggestNis) ?>" required>
                            <div class="form-text">Boleh diubah</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">NISN</label>
                            <input type="text" name="nisn" class="form-control"
                                value="<?= old('nisn') ?>"
                                placeholder="10 digit NISN">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">NIK</label>
                            <input type="text" name="nik" class="form-control"
                                value="<?= old('nik') ?>"
                                placeholder="16 digit 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') ?>"
                                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') ?>"
                                placeholder="Nama lengkap siswa" 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="">-- Pilih --</option>
                                <option value="L" <?= old('gender') == 'L' ? 'selected' : '' ?>>Laki-laki</option>
                                <option value="P" <?= old('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', 'Islam') == $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') ?>"
                                placeholder="Kota tempat lahir">
                        </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') ?>">
                        </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') ?>"
                                placeholder="08xxxxxxxxxx">
                        </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 <span class="text-danger">*</span></label>
                            <input type="number" name="entry_year" id="entryYear" class="form-control"
                                value="<?= old('entry_year', date('Y')) ?>"
                                min="2000" max="2099" required>
                        </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') ?>">
                        </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') ?>"
                                placeholder="Nama sekolah asal">
                        </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') ?>"
                                placeholder="Nomor seri ijazah kelulusan">
                        </div>
                        <?php if ($activePeriod): ?>
                        <div class="col-md-6">
                            <label class="form-label">Masukkan ke Kelas</label>
                            <select name="classroom_id" class="form-select">
                                <option value="">-- Pilih Kelas (Opsional) --</option>
                                <?php foreach ($classrooms as $classroom): ?>
                                <option value="<?= $classroom['id'] ?>"
                                    <?= old('classroom_id') == $classroom['id'] ? 'selected' : '' ?>>
                                    <?= esc($classroom['grade_name']) ?> -
                                    <?= esc($classroom['name']) ?>
                                    <?php if ($classroom['major_name']): ?>
                                    (<?= esc($classroom['major_name']) ?>)
                                    <?php endif; ?>
                                </option>
                                <?php endforeach; ?>
                            </select>
                            <div class="form-text">
                                Periode aktif: <strong><?= esc($activePeriod['year_name']) ?> — <?= esc($activePeriod['semester']) ?></strong>
                            </div>
                        </div>
                        <?php else: ?>
                        <div class="col-12">
                            <div class="alert alert-warning py-2 small">
                                <i class="bi bi-exclamation-triangle me-1"></i>
                                Belum ada periode aktif. Siswa tidak akan langsung masuk ke kelas.
                            </div>
                        </div>
                        <?php endif; ?>
                    </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"
                                placeholder="Jl. ..."><?= old('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') ?>" placeholder="001">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">RW</label>
                            <input type="text" name="rw" class="form-control"
                                value="<?= old('rw') ?>" placeholder="001">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Desa/Kelurahan</label>
                            <input type="text" name="village" class="form-control"
                                value="<?= old('village') ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Kecamatan</label>
                            <input type="text" name="district" class="form-control"
                                value="<?= old('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') ?>">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Provinsi</label>
                            <input type="text" name="province" class="form-control"
                                value="<?= old('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') ?>">
                        </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') ?>"
                                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') ?>"
                                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') ?>">
                        </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') ?>">
                        </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') ?>">
                        </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') ?>">
                        </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') == $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') ?>">
                        </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') ?>">
                        </div>

                        <div class="col-12 mt-2">
                            <h6 class="fw-semibold text-pink" 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') ?>">
                        </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') ?>">
                        </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') ?>">
                        </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') ?>">
                        </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') == $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') ?>">
                        </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') ?>">
                        </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>Simpan Data Siswa
                </button>
            </div>

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

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

<?= $this->section('scripts') ?>
<script>
// Update saran NIS ketika tahun masuk berubah
document.getElementById('entryYear').addEventListener('change', function() {
    const year = this.value;
    if (year.length === 4) {
        fetch('/student/suggest-nis?year=' + year)
            .then(r => r.json())
            .then(data => {
                document.getElementById('nisInput').value = data.suggest;
                document.querySelector('.alert-info strong:first-of-type').textContent = data.last;
                document.querySelector('.alert-info strong.text-primary').textContent  = data.suggest;
            });
    }
});
</script>
<?= $this->endSection() ?>