{{-- resources/views/admin/siswa/create.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Tambah Siswa')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Pendaftaran Siswa Baru</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Masukkan data akademik dan identitas dasar siswa.</p>
        </div>
        <a href="{{ route('admin.siswa') }}" class="btn btn-secondary btn-sm d-flex align-items-center gap-2">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
    </div>

    <div class="alert alert-info border-0 shadow-sm mb-4">
        <h6 class="alert-heading fw-bold mb-2"><i class="bi bi-info-circle me-1"></i> Alur Pendaftaran</h6>
        <p class="mb-0" style="font-size: 14px;">
            Ini adalah <strong>tahap 1</strong> pendaftaran. Tentukan penempatan ruang kelas dan data pokok siswa terlebih dahulu. Setelah tersimpan, Anda dapat mengeklik tombol <span class="badge bg-primary"><i class="bi bi-pencil-square"></i> Edit</span> pada tabel data siswa untuk melengkapi Foto Profil, Domisili, Orang Tua, dan Kesejahteraan Sosial.
        </p>
    </div>

    <div class="row">
        <div class="col-12">
            <form action="{{ route('admin.siswa.store') }}" method="POST">
                @csrf
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white pt-3 pb-2 border-bottom">
                        <h6 class="fw-bold text-primary mb-0"><i class="bi bi-person-badge me-2"></i>Formulir Pendaftaran Siswa</h6>
                    </div>
                    
                    <div class="card-body p-4">
                        @if($errors->any())
                            <div class="alert alert-danger shadow-sm border-0">
                                <ul class="mb-0 fw-medium">
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="p-3 bg-light rounded border mb-4">
                            <h6 class="fw-bold mb-3 text-success border-bottom border-success pb-2 d-inline-block">Penempatan Ruang Kelas</h6>
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <label class="form-label fw-medium">1. Jenjang Pendidikan <span class="text-danger">*</span></label>
                                    <select id="jenjang_select" class="form-select" required>
                                        <option value="">-- Pilih Jenjang --</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label fw-medium">2. Tingkat Kelas <span class="text-danger">*</span></label>
                                    <select id="tingkat_select" class="form-select" required disabled>
                                        <option value="">-- Pilih Tingkat --</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label fw-medium">3. Ruang Kelas <span class="text-danger">*</span></label>
                                    <select id="kelas_select" name="kelas_id" class="form-select" required disabled>
                                        <option value="">-- Pilih Ruang Kelas --</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label fw-medium">4. Gender Kelas</label>
                                    <select id="gender_kelas_select" class="form-select border-success" disabled>
                                        <option value="">-- Otomatis --</option>
                                    </select>
                                    <div class="form-text" style="font-size: 12px;">Kategori ruang / slot kelas.</div>
                                </div>
                            </div>
                        </div>

                        <div class="p-3 bg-light rounded border mb-4 border-primary" style="--bs-border-opacity: .2;">
                            <h6 class="fw-bold mb-3 text-primary border-bottom border-primary pb-2 d-inline-block">Periode Masa Registrasi Masuk Madrasah</h6>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-medium">1. Tahun PPDB / Terdaftar <span class="text-danger">*</span></label>
                                    <select id="tahun_ppdb_select" class="form-select" required>
                                        <option value="">-- Pilih Tahun Registrasi --</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-medium">2. Tahun Ajaran Aktif <span class="text-danger">*</span></label>
                                    <select id="tahun_ajaran_select" name="tahun_ajaran_id" class="form-select" required disabled>
                                        <option value="">-- Pilih Tahun Ajaran --</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <h6 class="fw-bold mb-3 text-primary border-bottom pb-2">Identitas Dasar & Akademik</h6>
                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="form-label fw-medium text-primary fw-bold">NIS Lokal (Nomor Induk Siswa) <span class="text-danger">*</span></label>
                                <input type="text" id="nis_input" name="nis" class="form-control fw-bold text-primary bg-white border-primary" readonly placeholder="Otomatis Terisi (Contoh: 4744801001)">
                                <div class="form-text text-muted" style="font-size: 12px;">Dihasilkan otomatis sistem berdasarkan kombinasi pilihan Tahun PPDB dan Jenjang Pendidikan.</div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="form-label fw-medium">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" name="nama_lengkap" class="form-control" required value="{{ old('nama_lengkap') }}" placeholder="Sesuai Akta Kelahiran / Ijazah">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Tempat Lahir</label>
                                <input type="text" name="tempat_lahir" class="form-control" value="{{ old('tempat_lahir') }}" placeholder="Contoh: Cirebon">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Tanggal Lahir</label>
                                <input type="date" name="tanggal_lahir" class="form-control" value="{{ old('tanggal_lahir') }}">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Gender <span class="text-danger">*</span></label>
                                <select id="biodata_gender_select" name="jenis_kelamin" class="form-select" required>
                                    <option value="">-- Pilih Gender --</option>
                                    @foreach($genders as $gender)
                                        @php
                                            $valDB = 'L';
                                            $lowerGender = strtolower($gender->nama_gender);
                                            if (str_contains($lowerGender, 'perempuan') || str_contains($lowerGender, 'wanita') || str_contains($lowerGender, 'putri') || str_contains($lowerGender, 'banat') || $lowerGender === 'p') {
                                                $valDB = 'P';
                                            }
                                        @endphp
                                        <option value="{{ $valDB }}" {{ old('jenis_kelamin') == $valDB ? 'selected' : '' }}>
                                            {{ $gender->nama_gender }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Agama</label>
                                <input type="text" name="agama" class="form-control bg-light" value="Islam" readonly>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Jenis Pendaftaran</label>
                                <select name="jenis_pendaftaran" class="form-select">
                                    <option value="Baru" {{ old('jenis_pendaftaran') == 'Baru' ? 'selected' : '' }}>Siswa Baru</option>
                                    <option value="Pindahan" {{ old('jenis_pendaftaran') == 'Pindahan' ? 'selected' : '' }}>Pindahan</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">NISN</label>
                                <input type="text" inputmode="numeric" name="nisn" class="form-control" value="{{ old('nisn') }}" placeholder="10 Digit Nomor Induk Nasional">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Asal Sekolah</label>
                                <input type="text" name="asal_sekolah" class="form-control" value="{{ old('asal_sekolah') }}" placeholder="Contoh: SMPN 1 Kuningan">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">No. HP / WA Siswa</label>
                                <input type="text" name="no_hp" class="form-control" value="{{ old('no_hp') }}" placeholder="Nomor aktif">
                            </div>
                        </div>

                    </div>
                    <div class="card-footer bg-light p-3 text-end">
                        <button type="submit" class="btn btn-primary px-4 fw-bold shadow-sm">
                            <i class="bi bi-save me-1"></i> Simpan Pendaftaran
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const dataKelasRaw = @json($kelas);
    const dataTahunRaw = @json($tahunAjarans);

    const tahunPpdbSelect = document.getElementById('tahun_ppdb_select');
    const tahunAjaranSelect = document.getElementById('tahun_ajaran_select');
    const nisInput = document.getElementById('nis_input');

    const jenjangSelect = document.getElementById('jenjang_select');
    const tingkatSelect = document.getElementById('tingkat_select');
    const kelasSelect = document.getElementById('kelas_select');
    const genderKelasSelect = document.getElementById('gender_kelas_select');
    const biodataGenderSelect = document.getElementById('biodata_gender_select');

    function hitungNisLokalOtomatis() {
        const tahunAjaranId = tahunAjaranSelect.value;
        const jenjangId = jenjangSelect.value;

        if (tahunAjaranId && jenjangId) {
            fetch(`{{ url('admin/siswa/get-nis-lokal') }}/${tahunAjaranId}/${jenjangId}`)
                .then(response => response.json())
                .then(res => {
                    if (res.success) {
                        nisInput.value = res.nis;
                    }
                })
                .catch(err => {
                    console.error("Gagal memuat NIS Lokal otomatis:", err);
                });
        } else {
            nisInput.value = '';
        }
    }

    const tahunPpdbMap = new Map();
    dataTahunRaw.forEach(item => {
        if(item.tahun_ppdb && item.tahun_ppdb_hijriyah) {
            tahunPpdbMap.set(item.tahun_ppdb, item.tahun_ppdb_hijriyah);
        }
    });
    
    const sortedTahunPpdb = Array.from(tahunPpdbMap.entries()).sort((a, b) => b[0].toString().localeCompare(a[0].toString()));
    sortedTahunPpdb.forEach(([masehi, hijriyah]) => {
        tahunPpdbSelect.add(new Option(`${hijriyah} H [${masehi} M]`, masehi));
    });

    tahunPpdbSelect.addEventListener('change', function() {
        tahunAjaranSelect.innerHTML = '<option value="">-- Pilih Tahun Ajaran --</option>';
        tahunAjaranSelect.disabled = true;
        nisInput.value = '';

        if (this.value) {
            const filteredTa = dataTahunRaw.filter(item => item.tahun_ppdb == this.value);
            filteredTa.forEach(item => {
                let labelText = `${item.tahun_ajaran_hijriyah} H [${item.tahun_ajaran} M]`;
                if(item.status_ppdb === 'buka') labelText += ' (BUKA)';
                tahunAjaranSelect.add(new Option(labelText, item.id));
            });
            tahunAjaranSelect.disabled = false;
        }
    });

    tahunAjaranSelect.addEventListener('change', hitungNisLokalOtomatis);
    jenjangSelect.addEventListener('change', hitungNisLokalOtomatis);

    const jenjangUnik = {};
    dataKelasRaw.forEach(k => {
        if (k.tingkat && k.tingkat.jenjang) {
            jenjangUnik[k.tingkat.jenjang.id] = k.tingkat.jenjang.nama_jenjang;
        }
    });
    for (const [id, nama] of Object.entries(jenjangUnik)) {
        jenjangSelect.add(new Option(nama, id));
    }

    jenjangSelect.addEventListener('change', function () {
        tingkatSelect.innerHTML = '<option value="">-- Pilih Tingkat --</option>';
        kelasSelect.innerHTML = '<option value="">-- Pilih Ruang Kelas --</option>';
        genderKelasSelect.innerHTML = '<option value="">-- Otomatis --</option>';
        tingkatSelect.disabled = true; kelasSelect.disabled = true; genderKelasSelect.disabled = true;

        if (this.value) {
            const tingkatUnik = {};
            dataKelasRaw.forEach(k => {
                if (k.tingkat && k.tingkat.jenjang && k.tingkat.jenjang.id == this.value) {
                    tingkatUnik[k.tingkat.id] = k.tingkat.nama_tingkat;
                }
            });
            for (const [id, nama] of Object.entries(tingkatUnik)) {
                tingkatSelect.add(new Option(nama, id));
            }
             tingkatSelect.disabled = false;
        }
    });

    tingkatSelect.addEventListener('change', function () {
        kelasSelect.innerHTML = '<option value="">-- Pilih Ruang Kelas --</option>';
        genderKelasSelect.innerHTML = '<option value="">-- Otomatis --</option>';
        kelasSelect.disabled = true; genderKelasSelect.disabled = true;

        if (this.value) {
            dataKelasRaw.forEach(k => {
                if (k.tingkat && k.tingkat.id == this.value) {
                    kelasSelect.add(new Option(k.nama_kelas, k.id));
                }
            });
            kelasSelect.disabled = false;
        }
    });

    kelasSelect.addEventListener('change', function () {
        genderKelasSelect.innerHTML = '<option value="">-- Pilih Gender Kelas --</option>';
        genderKelasSelect.disabled = true;

        if (this.value) {
            const kelasTerpilih = dataKelasRaw.find(k => k.id == this.value);
            if (kelasTerpilih) {
                if (!kelasTerpilih.details || kelasTerpilih.details.length === 0) {
                    genderKelasSelect.add(new Option('Kelas Campuran', 'campuran'));
                    genderKelasSelect.value = 'campuran'; 
                    genderKelasSelect.disabled = true;
                    biodataGenderSelect.value = '';
                    biodataGenderSelect.disabled = false;
                } else {
                    kelasTerpilih.details.forEach(dtl => {
                        if (dtl.gender) {
                            let namaGender = dtl.gender.nama_gender;
                            let kapasitasText = dtl.kapasitas ? ` [Sisa Kuota: ${dtl.kapasitas}]` : '';
                            let valueDatabase = 'L';
                            let lowerGender = namaGender.toLowerCase();
                            if (lowerGender.includes('perempuan') || lowerGender.includes('wanita') || lowerGender.includes('putri') || lowerGender.includes('banat') || lowerGender === 'p') {
                                valueDatabase = 'P';
                            }
                            genderKelasSelect.add(new Option(`${namaGender}${kapasitasText}`, valueDatabase));
                        }
                    });
                    genderKelasSelect.disabled = false;
                }
            }
        }
    });

    genderKelasSelect.addEventListener('change', function () {
        if (this.value && this.value !== 'campuran') {
            biodataGenderSelect.value = this.value;
            biodataGenderSelect.classList.add('border-success', 'border-2');
            setTimeout(() => { 
                biodataGenderSelect.classList.remove('border-success', 'border-2'); 
            }, 1500);
        }
    });
});
</script>
@endpush
@endsection