{{-- resources/views/admin/data-guru/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 () {
    // -------------------------------------------------------------------
    // 1. PENANGANAN SUBMIT FORM VIA AJAX (AJAX FORM SUBMISSION)
    // -------------------------------------------------------------------
    const formEditGuru = document.getElementById('formEditGuru');
    if(formEditGuru) {
        formEditGuru.addEventListener('submit', function(e) {
            e.preventDefault();

            Swal.fire({
                title: 'Menyimpan Data...',
                html: 'Sistem sedang memproses pembaruan data profil pendidik.',
                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 || 'Data berhasil diperbarui!',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    // Reload halaman agar perubahan foto dan data terlihat di header
                    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
                    });
                }
            });
        });
    }

    // -------------------------------------------------------------------
    // 2. PENANGANAN FOTO (CROPPER JS & WEBCAM)
    // -------------------------------------------------------------------
    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');

        // BUKA GALERI (FILE BROWSER)
        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);
                }
            });
        }

        // BUKA KAMERA WEBCAM/HP
        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();
                        Swal.fire('Akses Ditolak', 'Kamera tidak dapat diakses! Pastikan Anda memberi izin akses kamera di browser.', 'error');
                    });
                } else {
                    cropModal.hide();
                    Swal.fire('Tidak Didukung', 'Browser Anda tidak mendukung fitur kamera.', 'warning');
                }
            });
        }

        // AMBIL GAMBAR DARI KAMERA (CAPTURE)
        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);
            });
        }

        // INIT CROPPER SAAT MODAL TERBUKA (JIKA DARI GALERI)
        cropModalElement.addEventListener('shown.bs.modal', function () {
            if (!isKameraMode) {
                initCropperInstance();
            }
        });

        // BERSIHKAN RESOURCE SAAT MODAL DITUTUP
        cropModalElement.addEventListener('hide.bs.modal', function () {
            stopCamera();
            if (cropper) {
                cropper.destroy();
                cropper = null;
            }
            if(triggerFile) triggerFile.value = ''; // Reset input file
        });

        // FUNGSI INSTANSIASI CROPPER
        function initCropperInstance() {
            if (cropper) {
                cropper.destroy();
            }
            cropper = new Cropper(imageToCrop, {
                aspectRatio: 1, // Memaksa rasio 1:1 (kotak) untuk foto profil
                viewMode: 1,
                dragMode: 'move', 
                autoCropArea: 0.8,
                restore: false,
                guides: true,
                center: true,
                highlight: false,
                cropBoxMovable: true,
                cropBoxResizable: true,
                toggleDragModeOnDblclick: false
            });
        }

        // SIMPAN HASIL CROP
        if(btnSaveCrop) {
            btnSaveCrop.addEventListener('click', function() {
                if (!cropper) return;
                
                const finalCanvas = cropper.getCroppedCanvas({
                    width: 400,
                    height: 400,
                    imageSmoothingEnabled: true,
                    imageSmoothingQuality: 'high'
                });
                
                // Konversi ke Base64 (Format WebP agar ringan)
                const base64Data = finalCanvas.toDataURL('image/webp', 0.9);
                
                // Set ke image preview di UI Utama
                document.getElementById('preview-foto').src = base64Data;
                
                // Set ke hidden input form (ini yang akan dikirim ke server)
                document.getElementById('foto_base64').value = base64Data;
                
                cropModal.hide();
            });
        }

        // FUNGSI MATIKAN KAMERA
        window.stopCamera = function() {
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
                stream = null;
            }
            document.getElementById('videoElement').srcObject = null;
        }
    }
});
</script>
@endpush