{{-- resources/views/admin/siswa/views-scripts.blade.php --}}

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const formEditSiswa = document.getElementById('formEditSiswa');
    if(formEditSiswa) {
        formEditSiswa.addEventListener('submit', function(e) {
            e.preventDefault();

            Swal.fire({
                title: 'Menyimpan Data...',
                html: 'Sistem sedang memproses pembaruan data.',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            fetch(this.action, {
                method: 'POST', 
                body: new FormData(this),
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-HTTP-Method-Override': 'PUT' 
                }
            })
            .then(async response => {
                if (!response.ok) {
                    if (response.status === 422) {
                        const errorData = await response.json();
                        throw { type: 'validation', errors: errorData.errors };
                    }
                    const contentType = response.headers.get("content-type");
                    if (contentType && contentType.indexOf("application/json") !== -1) {
                        const errData = await response.json();
                        throw new Error(errData.message || 'Terjadi kesalahan pada server.');
                    } else {
                        throw new Error(`Server merespons dengan status ${response.status}.`);
                    }
                }
                return response.json();
            })
            .then(data => {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: data.message,
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.reload();
                });
            })
            .catch(error => {
                if (error.type === 'validation') {
                    let errorHtml = '<ul class="text-start mb-0 text-danger" style="font-size: 14px;">';
                    for (const key in error.errors) {
                        errorHtml += `<li>${error.errors[key][0]}</li>`;
                    }
                    errorHtml += '</ul>';
                    
                    Swal.fire({
                        icon: 'error',
                        title: 'Validasi Gagal!',
                        html: errorHtml,
                        confirmButtonText: 'Periksa Kembali'
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: error.message
                    });
                }
            });
        });
    }

    const dataKelasRaw = @json($kelas ?? []);
    const dataTahunRaw = @json($tahunAjarans ?? []); 

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

    let isInitPage = true; 
    let savedTingkatId = "";
    let savedJenjangId = "";

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

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

    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');
    const tahunPpdbSelect = document.getElementById('tahun_ppdb_select');
    const tahunAjaranSelect = document.getElementById('tahun_ajaran_select');
    const nisInput = document.getElementById('nis_input');

    if(tahunPpdbSelect) {
        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() {
            loadTahunAjaran(this.value);
            hitungNisLokalOtomatis();
        });
    }

    if(tahunAjaranSelect) {
        tahunAjaranSelect.addEventListener('change', hitungNisLokalOtomatis);
    }

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

        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;

            if (targetId) {
                tahunAjaranSelect.value = targetId;
            }
        }
    }

    function hitungNisLokalOtomatis() {
        if (isInitPage || !nisInput || !tahunAjaranSelect || !jenjangSelect) return;

        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 = '';
        }
    }

    if(jenjangSelect) {
        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 () { loadTingkat(this.value); hitungNisLokalOtomatis(); });
    }

    if(tingkatSelect) {
        tingkatSelect.addEventListener('change', function () { loadKelas(this.value); });
    }

    if(kelasSelect) {
        kelasSelect.addEventListener('change', function () { loadGenderKelas(this.value, false); });
    }

    if(genderKelasSelect) {
        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);
            }
        });
    }

    function loadTingkat(jenjangId) {
        if(!tingkatSelect) return;
        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) {
        if(!kelasSelect) return;
        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) {
        if(!genderKelasSelect) return;
        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;
                    if(!isInit) 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;

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

    if (savedJenjangId && jenjangSelect) {
        jenjangSelect.value = savedJenjangId;
        loadTingkat(savedJenjangId);
        if (savedTingkatId) {
            tingkatSelect.value = savedTingkatId;
            loadKelas(savedTingkatId);
            if (savedKelasId) {
                kelasSelect.value = savedKelasId;
                loadGenderKelas(savedKelasId, true);
            }
        }
    }
    if (savedTahunPpdb && tahunPpdbSelect) {
        tahunPpdbSelect.value = savedTahunPpdb; 
        loadTahunAjaran(savedTahunPpdb, savedTahunAjaranId); 
    }

    isInitPage = false; 

    let cropper = null;
    let stream = null;
    let isKameraMode = false; 
    
    const cropModalElement = document.getElementById('cropModal');
    if(cropModalElement) {
        const cropModal = bootstrap.Modal.getOrCreateInstance(cropModalElement);
        
        const imageToCrop = document.getElementById('imageToCrop');
        const modalTitle = document.getElementById('cropModalTitle');
        const btnSaveCrop = document.getElementById('btnSaveCrop');

        const triggerFile = document.getElementById('foto_file_trigger');
        if(triggerFile) {
            triggerFile.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        isKameraMode = false;
                        document.getElementById('kamera-area').classList.add('d-none');
                        document.getElementById('crop-area').classList.remove('d-none');
                        modalTitle.innerHTML = '<i class="bi bi-crop"></i> Geser & Potong Foto';
                        imageToCrop.src = event.target.result;
                        btnSaveCrop.style.display = 'inline-block';
                        cropModal.show();
                    };
                    reader.readAsDataURL(file);
                }
            });
        }

        const btnKamera = document.getElementById('btnBukaKamera');
        if(btnKamera) {
            btnKamera.addEventListener('click', function(e) {
                e.preventDefault();
                isKameraMode = true;
                document.getElementById('crop-area').classList.add('d-none');
                document.getElementById('kamera-area').classList.remove('d-none');
                modalTitle.innerHTML = '<i class="bi bi-camera"></i> Ambil Foto Profil';
                btnSaveCrop.style.display = 'none'; 
                cropModal.show();

                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
                    .then(function (mediaStream) {
                        stream = mediaStream;
                        document.getElementById('videoElement').srcObject = mediaStream;
                    })
                    .catch(function (err) {
                        cropModal.hide();
                        alert("Kamera tidak dapat diakses! Pastikan Anda memberi izin akses kamera di browser.");
                    });
                } else {
                    cropModal.hide();
                    alert("Browser Anda tidak mendukung fitur kamera.");
                }
            });
        }

        const btnCap = document.getElementById('btnCapture');
        if(btnCap) {
            btnCap.addEventListener('click', function() {
                const video = document.getElementById('videoElement');
                const canvas = document.createElement('canvas');
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                imageToCrop.src = canvas.toDataURL('image/jpeg');
                
                stopCamera();
                
                isKameraMode = false;
                document.getElementById('kamera-area').classList.add('d-none');
                document.getElementById('crop-area').classList.remove('d-none');
                modalTitle.innerHTML = '<i class="bi bi-crop"></i> Geser & Potong Foto';
                btnSaveCrop.style.display = 'inline-block';
                
                setTimeout(() => {
                    initCropperInstance();
                }, 100);
            });
        }

        cropModalElement.addEventListener('shown.bs.modal', function () {
            if (!isKameraMode) {
                initCropperInstance();
            }
        });

        cropModalElement.addEventListener('hide.bs.modal', function () {
            stopCamera();
            if (cropper) {
                cropper.destroy();
                cropper = null;
            }
        });

        function initCropperInstance() {
            if (cropper) {
                cropper.destroy();
            }
            cropper = new Cropper(imageToCrop, {
                aspectRatio: 1,
                viewMode: 1,
                dragMode: 'move', 
                autoCropArea: 0.8,
                restore: false,
                guides: true,
                center: true,
                highlight: false,
                cropBoxMovable: true,
                cropBoxResizable: true,
                toggleDragModeOnDblclick: false
            });
        }

        if(btnSaveCrop) {
            btnSaveCrop.addEventListener('click', function() {
                if (!cropper) return;
                const finalCanvas = cropper.getCroppedCanvas({
                    width: 400,
                    height: 400,
                    imageSmoothingEnabled: true,
                    imageSmoothingQuality: 'high'
                });
                
                const base64Data = finalCanvas.toDataURL('image/webp', 0.9);
                
                document.getElementById('preview-foto').src = base64Data;
                document.getElementById('foto_base64').value = base64Data;
                document.getElementById('foto_file_trigger').value = ""; 
                
                cropModal.hide();
            });
        }

        window.stopCamera = function() {
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
                stream = null;
            }
            document.getElementById('videoElement').srcObject = null;
        }
    }
});

window.bukaModalEditAbsen = function(id, mapel, tanggal, status, keterangan) {
    let actionUrl = "{{ url('admin/absensi') }}/" + id;
    
    document.getElementById('formEditAbsensi').action = actionUrl;
    document.getElementById('edit_nama_mapel').value = mapel;
    document.getElementById('edit_tanggal').value = tanggal;
    document.getElementById('edit_status').value = status;
    document.getElementById('edit_keterangan').value = (keterangan && keterangan !== '-') ? keterangan : '';

    const modalEditEl = document.getElementById('modalEditAbsensi');
    if(modalEditEl) {
        new bootstrap.Modal(modalEditEl).show();
    }
}

    window.bukaModalInputNilai = function(mapelId, namaMapel, hadir, tugas, uts, uas) {
        document.getElementById('input_nilai_mapel_id').value = mapelId;
        document.getElementById('input_nilai_nama_mapel').value = namaMapel;
        document.getElementById('n_hadir').value = hadir;
        document.getElementById('n_tugas').value = tugas;
        document.getElementById('n_uts').value = uts;
        document.getElementById('n_uas').value = uas;

        kalkulasiNilaiOtomatis();

        new bootstrap.Modal(document.getElementById('modalInputNilai')).show();
    }

    function kalkulasiNilaiOtomatis() {
        let nHadir = parseFloat(document.getElementById('n_hadir').value) || 0;
        let nTugas = parseFloat(document.getElementById('n_tugas').value) || 0;
        let nUts = parseFloat(document.getElementById('n_uts').value) || 0;
        let nUas = parseFloat(document.getElementById('n_uas').value) || 0;
        let total = (nHadir * 0.10) + (nTugas * 0.20) + (nUts * 0.30) + (nUas * 0.40);
        
        total = total.toFixed(1);

        let grade = '-';
        if (total > 0) {
            if(total >= 90) grade = 'A';
            else if(total >= 80) grade = 'B';
            else if(total >= 70) grade = 'C';
            else if(total >= 60) grade = 'D';
            else grade = 'E';
        }

        document.getElementById('display_total').innerText = total > 0 ? total : '0';
        document.getElementById('display_grade').innerText = grade;
        
        const displayGradeEl = document.getElementById('display_grade');
        displayGradeEl.className = 'fs-3 fw-bold'; // reset
        if(grade == 'A') displayGradeEl.classList.add('text-primary');
        else if(grade == 'B') displayGradeEl.classList.add('text-success');
        else if(grade == 'C') displayGradeEl.classList.add('text-warning');
        else if(grade == 'D' || grade == 'E') displayGradeEl.classList.add('text-danger');
        else displayGradeEl.classList.add('text-dark');
    }

    const inputsNilai = document.querySelectorAll('.kalkulasi-nilai');
    inputsNilai.forEach(input => {
        input.addEventListener('input', kalkulasiNilaiOtomatis);
    });
</script>
@endpush