{{-- resources/views/admin/data-staff/edit.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Lengkapi Profil Staff')

@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">Kelengkapan Profil Staff</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Melengkapi data: <strong>{{ $staff->nama_lengkap }}</strong></p>
        </div>
        <a href="{{ route('admin.staff') }}" class="btn btn-secondary btn-sm d-flex align-items-center gap-2 shadow-sm">
            <i class="bi bi-arrow-left"></i> Kembali ke Daftar
        </a>
    </div>

    <form id="formEditStaff" action="{{ route('admin.staff.update', $staff->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="staffTabs" 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="profil-tab" data-bs-toggle="tab" data-bs-target="#profil" type="button" role="tab" style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-person-vcard me-1"></i> 1. Profil & Kepegawaian
                    </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="keluarga-tab" data-bs-toggle="tab" data-bs-target="#keluarga" type="button" role="tab" style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-people me-1"></i> 2. Kependudukan
                    </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="domisili-tab" data-bs-toggle="tab" data-bs-target="#domisili" type="button" role="tab" style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-geo-alt me-1"></i> 3. 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="kompetensi-tab" data-bs-toggle="tab" data-bs-target="#kompetensi" type="button" role="tab" style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-award me-1"></i> 4. Kompetensi
                    </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="finansial-tab" data-bs-toggle="tab" data-bs-target="#finansial" type="button" role="tab" style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-wallet2 me-1"></i> 5. Finansial
                    </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="dokumen-tab" 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-pdf me-1"></i> 6. File Dokumen
                    </button>
                </li>
            </ul>
        </div>

        <div class="card shadow-sm border-0 mb-4">
            <div class="card-body p-4 border-bottom">
                <div class="tab-content" id="staffTabsContent">
                    @include('admin.data-staff.edit_profil')
                    @include('admin.data-staff.edit_keluarga') 
                    @include('admin.data-staff.edit_domisili')
                    @include('admin.data-staff.edit_kompetensi')
                    @include('admin.data-staff.edit_finansial')
                    @include('admin.data-staff.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 formEditStaff = document.getElementById('formEditStaff');
    
    formEditStaff.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
                });
            }
        });
    });

    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;
    }
    
    const tmtMasehi = document.getElementById('tmt_masehi');
    const tmtHijriyah = document.getElementById('tmt_hijriyah');
    const nipInput = document.getElementById('nip_madrasah');
    const staffId = {{ $staff->id ?? 0 }};

    function perbaruiNIP(tahunHijriyah) {
        if (!tahunHijriyah || isNaN(tahunHijriyah)) return;
        const duaDigitTahun = String(tahunHijriyah).slice(-2);
        const idBerformat = String(staffId).padStart(3, '0');
        
        if (nipInput) {
            nipInput.value = `44802${duaDigitTahun}${idBerformat}`;
            
            nipInput.classList.add('bg-success', 'text-white');
            setTimeout(() => nipInput.classList.remove('bg-success', 'text-white'), 1000);
        }
    }

    if (tmtMasehi) {
        tmtMasehi.addEventListener('change', function() {
            if(this.value) {
                const date = new Date(this.value);
                
                const formatter = new Intl.DateTimeFormat('id-ID-u-ca-islamic', { 
                    day: 'numeric', 
                    month: 'long', 
                    year: 'numeric' 
                });
                
                if (tmtHijriyah) {
                    let hasilFormat = formatter.format(date);
                    if (!hasilFormat.endsWith('H') && !hasilFormat.endsWith('Hijriah')) {
                        hasilFormat += ' H';
                    }
                    tmtHijriyah.value = hasilFormat;
                }

                const yearFmt = new Intl.DateTimeFormat('en-US-u-ca-islamic', { year: 'numeric' });
                const tahunMurni = yearFmt.format(date).replace(/\D/g, ''); 
                perbaruiNIP(tahunMurni);
            }
        });
    }

    const petaBulan = {
        'muharram': 1, 'safar': 2, 'rabiul awal': 3, 'rabiul akhir': 4,
        'jumadil awal': 5, 'jumadil akhir': 6, 'rajab': 7, 'sya\'ban': 8, 'syaban': 8,
        'ramadhan': 9, 'syawal': 10, 'dzulqa\'dah': 11, 'dzulqadah': 11, 'dzulhijjah': 12
    };

    if (tmtHijriyah) {
        tmtHijriyah.addEventListener('change', async function() {
            let str = this.value.toLowerCase().replace(/hijriah/g, '').replace(/\bh\b/g, '').trim();
            let parts = str.split(/\s+/);

            let temuanTahun = str.match(/\b(14\d{2})\b/);
            if(temuanTahun) {
                perbaruiNIP(temuanTahun[1]);
            }

            if (parts.length >= 3) {
                let hari = parts[0];
                let tahun = parts[parts.length - 1];
                let stringBulan = parts.slice(1, parts.length - 1).join(' ');
                let bulanAngka = petaBulan[stringBulan];

                if (hari && bulanAngka && tahun) {
                    try {
                        let res = await fetch(`https://api.aladhan.com/v1/hToG?date=${hari}-${bulanAngka}-${tahun}`);
                        let data = await res.json();
                        
                        if (data.code === 200) {
                            let gDate = data.data.gregorian.date.split('-'); 
                            if (tmtMasehi) {
                                tmtMasehi.value = `${gDate[2]}-${gDate[1]}-${gDate[0]}`; 
                            }
                        }
                    } catch(e) {
                        console.error("Gagal menghubungi API Konversi Kalender.", e);
                    }
                }
            }
        });
    }

});
</script>
@endpush