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

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css">
<style>
    .cropper-container-wrapper {
        max-height: 450px;
        margin-bottom: 15px;
        background-color: #f8f9fa;
        overflow: hidden;
        border-radius: 8px;
    }
    #imageToCrop {
        display: block;
        max-width: 100%;
        max-height: 400px;
    }

    .nav-pills .nav-link {
        transition: all 0.3s ease;
        color: #495057;
    }
    .nav-pills .nav-link:hover {
        background-color: #f8f9fa;
    }
    .nav-pills .nav-link.active {
        font-weight: bold;
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
        background-color: #0d6efd !important; 
        color: #ffffff !important;
    }
</style>
@endpush

@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">Lengkapi Data Siswa</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Perbarui dan lengkapi profil: <strong>{{ $siswa->nama_lengkap }}</strong></p>
        </div>
        <a href="{{ route('admin.siswa') }}" class="btn btn-secondary btn-sm d-flex align-items-center gap-2 shadow-sm">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
    </div>

    <form id="formEditSiswa" action="{{ route('admin.siswa.update', $siswa->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <div class="nav-wrapper position-relative mb-4">
            <ul class="nav nav-pills p-1 bg-white border rounded-3 shadow-sm d-flex" id="siswaTab" role="tablist">
                <li class="nav-item flex-fill text-center" role="presentation">
                    <button class="nav-link active w-100 mb-0 px-0 py-2" id="tab-identitas" data-bs-toggle="tab" data-bs-target="#identitas" type="button" role="tab" style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-person-vcard me-1"></i> 1. Identitas & Akademik
                    </button>
                </li>
                <li class="nav-item flex-fill text-center" role="presentation">
                    <button class="nav-link w-100 mb-0 px-0 py-2" id="tab-alamat" data-bs-toggle="tab" data-bs-target="#alamat" type="button" role="tab" style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-geo-alt me-1"></i> 2. Domisili
                    </button>
                </li>
                <li class="nav-item flex-fill text-center" role="presentation">
                    <button class="nav-link w-100 mb-0 px-0 py-2" id="tab-ortu" data-bs-toggle="tab" data-bs-target="#ortu" type="button" role="tab" style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-people me-1"></i> 3. Data Orang Tua
                    </button>
                </li>
                <li class="nav-item flex-fill text-center" role="presentation">
                    <button class="nav-link w-100 mb-0 px-0 py-2" id="tab-sosial" data-bs-toggle="tab" data-bs-target="#sosial" type="button" role="tab" style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-shield-check me-1"></i> 4. Kesejahteraan
                    </button>
                </li>
                <li class="nav-item flex-fill text-center" role="presentation">
                    <button class="nav-link w-100 mb-0 px-0 py-2" id="tab-dokumen" data-bs-toggle="tab" data-bs-target="#dokumen" type="button" role="tab" style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-file-earmark-text me-1"></i> 5. File Dokumen
                    </button>
                </li>
            </ul>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-body p-4 border-bottom">
                <div class="tab-content">
                    @include('admin.siswa.edit-identitas')
                    @include('admin.siswa.edit-domisili')
                    @include('admin.siswa.edit-ortu')
                    @include('admin.siswa.edit-kesejahteraan')
                    @include('admin.siswa.edit-dokumen')
                </div>
            </div>
            
            <div class="card-footer bg-light p-3 text-end rounded-bottom">
                <button type="submit" class="btn btn-success px-4 fw-bold shadow-sm">
                    <i class="bi bi-save me-1"></i> Simpan Semua Pembaruan
                </button>
            </div>
        </div>
    </form>
</div>

<div class="modal fade" id="cropModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white border-bottom-0">
                <h5 class="modal-title fw-bold" id="cropModalTitle"><i class="bi bi-crop"></i> Sesuaikan Foto Profil</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="stopCamera()"></button>
            </div>
            <div class="modal-body bg-dark p-4 text-center">
                <div id="kamera-area" class="d-none">
                    <video id="videoElement" autoplay playsinline style="width: 100%; max-height: 400px; background: #000; border-radius: 8px;"></video>
                    <div class="mt-3">
                        <button type="button" class="btn btn-light rounded-circle p-3 shadow" id="btnCapture" style="width: 65px; height: 65px; border: 4px solid #dee2e6;">
                            <i class="bi bi-camera-fill fs-3 text-primary"></i>
                        </button>
                    </div>
                </div>
                <div id="crop-area" class="d-none">
                    <div class="cropper-container-wrapper">
                        <img id="imageToCrop" alt="Source Image">
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-dark border-top-0 d-flex justify-content-between">
                <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal" onclick="stopCamera()">Batal</button>
                <button type="button" class="btn btn-success fw-bold px-4" id="btnSaveCrop" style="display: none;">
                    <i class="bi bi-check2-circle me-1"></i> Potong & Gunakan
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@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');
    
    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
            });
        })
        .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');

    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, targetId = null) {
        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) 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 = '';
        }
    }

    tahunPpdbSelect.addEventListener('change', function() {
        loadTahunAjaran(this.value);
        hitungNisLokalOtomatis();
    });
    tahunAjaranSelect.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));
    }

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

    jenjangSelect.addEventListener('change', function () { loadTingkat(this.value); hitungNisLokalOtomatis(); });
    tingkatSelect.addEventListener('change', function () { loadKelas(this.value); });
    kelasSelect.addEventListener('change', function () { loadGenderKelas(this.value, 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);
        }
    });

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

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

    isInitPage = false; 

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

    document.getElementById('foto_file_trigger').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);
        }
    });

    document.getElementById('btnBukaKamera').addEventListener('click', function() {
        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.");
        }
    });

    document.getElementById('btnCapture').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
        });
    }

    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;
    }
});
</script>
@endpush