{{-- resources/views/admin/ppdb/edit.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Edit Pendaftar PPDB')

@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">Edit Pendaftaran: {{ $ppdb->nama_lengkap }}</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Nomor Pendaftaran: <strong>{{ $ppdb->no_pendaftaran }}</strong></p>
        </div>
        <a href="{{ route('admin.ppdb') }}" 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="row">
        <div class="col-12">
            <form action="{{ route('admin.ppdb.update', $ppdb->id) }}" method="POST">
                @csrf
                @method('PUT')
                
                <input type="hidden" name="status" value="{{ $ppdb->status }}">

                <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-pencil-square me-2"></i>Edit Data Pendaftaran</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">Rencana Penempatan 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>
                                        <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>
                                        <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">
                                        <option value="">-- Otomatis --</option>
                                    </select>
                                </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 & Registrasi PPDB</h6>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label fw-medium">1. Tahun PPDB <span class="text-danger">*</span></label>
                                    <select id="tahun_ppdb_select" class="form-select" required>
                                        <option value="">-- Pilih Tahun PPDB --</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label fw-medium">2. Tahun Ajaran <span class="text-danger">*</span></label>
                                    <select id="tahun_ajaran_select" name="tahun_ajaran_id" class="form-select" required>
                                        <option value="">-- Pilih Tahun Ajaran --</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label fw-medium">3. Registrasi PPDB</label>
                                    <input type="text" id="no_pendaftaran_input" name="no_pendaftaran" class="form-control fw-bold text-primary bg-white" readonly value="{{ $ppdb->no_pendaftaran }}">
                                </div>
                            </div>
                        </div>

                        <h6 class="fw-bold mb-3 text-primary border-bottom pb-2">Identitas Dasar Calon Siswa</h6>
                        <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', $ppdb->nama_lengkap) }}">
                            </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', $ppdb->tempat_lahir) }}">
                            </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', $ppdb->tanggal_lahir) }}" max="{{ date('Y-m-d') }}">
                            </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, 'p')) $valDB = 'P';
                                        @endphp
                                        <option value="{{ $valDB }}" {{ old('jenis_kelamin', $ppdb->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="{{ $ppdb->agama }}" 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', $ppdb->jenis_pendaftaran) == 'Baru' ? 'selected' : '' }}>Siswa Baru</option>
                                    <option value="Pindahan" {{ old('jenis_pendaftaran', $ppdb->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', $ppdb->nisn) }}">
                            </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', $ppdb->asal_sekolah) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">No. HP / WA Calon Siswa</label>
                                <input type="text" name="no_hp" class="form-control" value="{{ old('no_hp', $ppdb->no_hp) }}">
                            </div>
                        </div>

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

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

    const savedKelasId = "{{ old('kelas_id', $ppdb->kelas_id) }}";
    const savedJenisKelamin = "{{ old('jenis_kelamin', $ppdb->jenis_kelamin) }}";
    const savedTahunAjaranId = "{{ old('tahun_ajaran_id', $ppdb->tahun_ajaran_id) }}";

    let savedTingkatId = "";
    let savedJenjangId = "";
    let savedTahunPpdb = "";

    if (savedKelasId) {
        const k = dataKelasRaw.find(x => x.id == savedKelasId);
        if (k && k.tingkat) {
            savedTingkatId = k.tingkat.id;
            if (k.tingkat.jenjang) savedJenjangId = k.tingkat.jenjang.id;
        }
    }

    if (savedTahunAjaranId) {
        const t = dataTahunRaw.find(x => x.id == savedTahunAjaranId);
        if (t) savedTahunPpdb = t.tahun_ppdb;
    }

    const tahunPpdbSelect = document.getElementById('tahun_ppdb_select');
    const tahunAjaranSelect = document.getElementById('tahun_ajaran_select');
    const noPendaftaranInput = document.getElementById('no_pendaftaran_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 hitungNoPendaftaranOtomatis() {
        const tahunAjaranId = tahunAjaranSelect.value;
        const jenjangId = jenjangSelect.value;

        if (tahunAjaranId == savedTahunAjaranId && jenjangId == savedJenjangId) {
            noPendaftaranInput.value = "{{ $ppdb->no_pendaftaran }}";
        } else if (tahunAjaranId && jenjangId) {
            fetch(`{{ url('admin/ppdb/get-no-pendaftaran') }}/${tahunAjaranId}/${jenjangId}`)
                .then(response => response.json())
                .then(res => { if (res.success) noPendaftaranInput.value = res.no_pendaftaran; });
        } else {
            noPendaftaranInput.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));
    });

    function loadTahunAjaran(tahunPpdb, isInit = false) {
        tahunAjaranSelect.innerHTML = '<option value="">-- Pilih Tahun Ajaran --</option>';
        tahunAjaranSelect.disabled = true;
        if(!isInit) noPendaftaranInput.value = '';

        if (tahunPpdb) {
            const filteredTa = dataTahunRaw.filter(item => item.tahun_ppdb == tahunPpdb);
            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;
        }
    }

    tahunPpdbSelect.addEventListener('change', function() { loadTahunAjaran(this.value, false); });
    tahunAjaranSelect.addEventListener('change', hitungNoPendaftaranOtomatis);
    jenjangSelect.addEventListener('change', hitungNoPendaftaranOtomatis);

    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)); }

    function loadTingkat(jenjangId) {
        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 (jenjangId) {
            const tingkatUnik = {};
            dataKelasRaw.forEach(k => {
                if (k.tingkat && k.tingkat.jenjang && k.tingkat.jenjang.id == jenjangId) 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;
        }
    }

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

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

    function loadGenderKelas(kelasId, isInit = false) {
        genderKelasSelect.innerHTML = '<option value="">-- Pilih Gender Kelas --</option>';
        genderKelasSelect.disabled = true;

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

                    if(isInit && savedKelasId == kelasId) {
                        for(let i=0; i < genderKelasSelect.options.length; i++){
                            if(genderKelasSelect.options[i].value == savedJenisKelamin) {
                                genderKelasSelect.selectedIndex = i;
                                break;
                            }
                        }
                    }
                }
            }
        }
    }

    jenjangSelect.addEventListener('change', function () { loadTingkat(this.value); });
    tingkatSelect.addEventListener('change', function () { loadKelas(this.value); });
    kelasSelect.addEventListener('change', function () { loadGenderKelas(this.value, false); });

    if (savedTahunPpdb) {
        tahunPpdbSelect.value = savedTahunPpdb;
        loadTahunAjaran(savedTahunPpdb, true);
        if (savedTahunAjaranId) tahunAjaranSelect.value = savedTahunAjaranId;
    }

    if (savedJenjangId) {
        jenjangSelect.value = savedJenjangId;
        loadTingkat(savedJenjangId);
        if (savedTingkatId) {
            tingkatSelect.value = savedTingkatId;
            loadKelas(savedTingkatId);
            if (savedKelasId) {
                kelasSelect.value = savedKelasId;
                loadGenderKelas(savedKelasId, true);
            }
        }
    }
});
</script>
@endpush
@endsection