{{-- 
    Lokasi File: resources/views/partials/guru_mobile_nav.blade.php
    Deskripsi: Bottom Navigation, Smart Gateway Modal, Scanner Guru & Mode Asisten Siswa
--}}

@php
    // GURU HANYA BERPUSAT PADA PENGATURAN YAYASAN (GLOBAL SETTINGS)
    $webSetting = \Illuminate\Support\Facades\DB::table('cms_settings')->first() 
               ?? \Illuminate\Support\Facades\DB::table('settings')->first();
    
    // Ambil langsung dari Yayasan, jika kosong set default 0
    $safeLat = $webSetting->latitude ?? 0;
    $safeLng = $webSetting->longitude ?? 0;
    $safeRad = $webSetting->radius_zona ?? 150;
@endphp

{{-- ========================================================== --}}
{{-- 1. CSS KHUSUS NAVIGASI & MODAL (TERMASUK NUKE FIX Z-INDEX) --}}
{{-- ========================================================== --}}
<style>
    /* --- BOTTOM NAVIGATION GLASSMORPHISM --- */
    .m-bottom-nav { 
        position: fixed; bottom: 0; left: 0; right: 0; height: 75px; 
        background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); 
        -webkit-backdrop-filter: blur(16px); display: flex; justify-content: space-around; align-items: center; 
        box-shadow: 0 -10px 30px rgba(0,0,0,0.05); border-top-left-radius: 30px; 
        border-top-right-radius: 30px; 
        z-index: 1030;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid rgba(255, 255, 255, 0.4);
    }
    .m-nav-item { 
        text-align: center; color: #94a3b8; text-decoration: none !important; 
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    }
    .m-nav-item.active { color: #1D4ED8; transform: translateY(-3px); }
    .m-nav-item i { font-size: 1.3rem; margin-bottom: 4px; transition: transform 0.3s ease; }
    .m-nav-item.active i { transform: scale(1.15); }
    .m-nav-item span { font-size: 0.65rem; font-weight: 800; }
    
    /* --- QRIS FLOATING ACTION BUTTON (FAB) --- */
    .m-nav-center-wrapper { flex: 1; display: flex; justify-content: center; z-index: 2005; position: relative; }
    .m-nav-center { 
        width: 62px; height: 62px; background: linear-gradient(135deg, #1D4ED8, #3B82F6); 
        border-radius: 50%; display: flex; align-items: center; justify-content: center; 
        margin-top: -55px; border: 5px solid #f4f7fb; box-shadow: 0 10px 25px rgba(29, 78, 216, 0.35); 
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    }
    .m-nav-center:active { transform: scale(0.9); box-shadow: 0 5px 15px rgba(29, 78, 216, 0.2); }
    .qris-fab-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

    /* --- MODAL BOTTOM SHEET & CARDS --- */
    .bottom-sheet .modal-dialog-bottom { position: absolute; bottom: 0; margin: 0; width: 100%; max-width: 100%; }
    .bottom-sheet.fade .modal-dialog-bottom { transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .bottom-sheet.show .modal-dialog-bottom { transform: translateY(0); }
    .modern-modal-content { border: 0; border-radius: 35px 35px 0 0 !important; background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px); box-shadow: 0 -15px 40px rgba(0,0,0,0.1) !important; }
    
    .action-icon { width: 50px; height: 50px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; margin-bottom: 10px; position: relative; font-size: 1.2rem; }
    .bg-primary-gradient { background: linear-gradient(135deg, #1D4ED8, #3B82F6); box-shadow: 0 8px 15px rgba(29, 78, 216, 0.3); }
    .bg-orange-gradient { background: linear-gradient(135deg, #FF9800, #F59E0B); box-shadow: 0 8px 15px rgba(245, 158, 11, 0.3); }
    .bg-green-gradient { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3); }
    .bg-rose-gradient { background: linear-gradient(135deg, #e11d48, #fb7185); box-shadow: 0 8px 15px rgba(225, 29, 72, 0.3); }
    
    .icon-label-mini { font-size: 0.45rem; font-weight: 900; margin-top: 2px; letter-spacing: 1px; }
    .action-label { font-size: 0.8rem; font-weight: 800; color: #0F172A; text-align: center; line-height: 1.2;}
    .action-sub { font-size: 0.6rem; color: #64748B; font-weight: 700; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px;}

    /* --- SCANNER FRAME --- */
    .scan-frame-national { position: absolute; width: 260px; height: 260px; z-index: 10; display: flex; align-items: center; justify-content: center; }
    .corner { position: absolute; width: 30px; height: 30px; border: 4px solid #3B82F6; }
    .top-left { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
    .top-right { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
    .bottom-left { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
    .bottom-right { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
    .laser { width: 100%; height: 3px; background: rgba(59, 130, 246, 0.5); box-shadow: 0 0 15px #3B82F6; position: absolute; animation: laser-anim 2s infinite ease-in-out; }
    @keyframes laser-anim { 0% { top: 5%; } 50% { top: 95%; } 100% { top: 5%; } }
    .scanner-instruction { position: absolute; bottom: 40px; color: white; font-size: 0.75rem; background: rgba(0,0,0,0.6); padding: 8px 20px; border-radius: 20px; z-index: 20; font-weight: 700; backdrop-filter: blur(5px); }
    
    .modern-modal-content .modal-body { padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important; }

    /* 🔥 SOLUSI NUKE: MODAL Z-INDEX & MATIKAN BOTTOM NAV SAAT MODAL AKTIF 🔥 */
    body.modal-open .m-bottom-nav { z-index: 0 !important; opacity: 0 !important; pointer-events: none !important; }
    .modal-backdrop { z-index: 104000 !important; }
    .modal { z-index: 105000 !important; }
    .modal-dialog { z-index: 106000 !important; pointer-events: auto !important; }
    .modern-modal-content { z-index: 107000 !important; pointer-events: auto !important; }
    
    /* Tombol Klik Paksa Aktif */
    .action-card { background: white; border-radius: 20px; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; text-decoration: none !important; border: 1px solid #F1F5F9; box-shadow: 0 8px 20px rgba(226, 232, 240, 0.6) !important; transition: 0.3s; height: 100%; cursor: pointer !important; pointer-events: auto !important; position: relative; z-index: 108000 !important; }
    .action-card:active { transform: scale(0.95); background: #f8fafc; }
    .action-card.disabled-card { opacity: 0.5; filter: grayscale(100%); cursor: not-allowed !important; }
    .action-card.disabled-card:active { transform: none; background: white; }
    #gatewayMenu { position: relative; z-index: 107500 !important; pointer-events: auto !important; }

    /* 🔥 PAKSA SWEETALERT MUNCUL PALING DEPAN 🔥 */
    .swal2-container { 
        z-index: 999999 !important; 
    }
</style>

{{-- ========================================================== --}}
{{-- 2. HTML BOTTOM NAVIGATION BAR                              --}}
{{-- ========================================================== --}}
<div class="m-bottom-nav d-lg-none">
    <a href="{{ route('guru.dashboard') }}" class="m-nav-item {{ request()->routeIs('guru.dashboard') ? 'active' : '' }}">
        <i class="fas fa-home"></i><span>Beranda</span>
    </a>
    <a href="{{ route('guru.jurnal.jadwal.saya') }}" class="m-nav-item {{ request()->routeIs('guru.jurnal.jadwal.*') ? 'active' : '' }}">
        <i class="fas fa-calendar-alt"></i><span>Jadwal</span>
    </a>
    
    {{-- FAB QRIS CENTER --}}
    <div class="m-nav-center-wrapper">
        <a href="#" class="m-nav-center animate__animated animate__pulse animate__infinite" onclick="event.preventDefault(); bukaSmartGateway();">
            <div class="qris-fab-container">
                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Logo_QRIS.svg" alt="QRIS" style="width: 40px; filter: brightness(0) invert(1);">
            </div>
        </a>
    </div>

    <a href="{{ route('kalender.index') }}" class="m-nav-item {{ request()->routeIs('guru.kalender.index') ? 'active' : '' }}">
        <i class="fas fa-calendar-check"></i><span>Kalender</span>
    </a>
    <a href="{{ route('profile') }}" class="m-nav-item {{ request()->routeIs('profile') ? 'active' : '' }}">
        <i class="fas fa-user-circle"></i><span>Profil</span>
    </a>
</div>

{{-- ========================================================== --}}
{{-- 3. MODAL UTAMA: SMART GATEWAY GURU                         --}}
{{-- ========================================================== --}}
<div class="modal fade bottom-sheet d-lg-none" id="smartActionModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-bottom" role="document">
        <div class="modal-content modern-modal-content">
            <div class="modal-body p-4">
                <div class="mx-auto rounded-pill mb-4" style="width: 40px; height: 4px; background: #cbd5e1;"></div>
                
                {{-- LOADING GPS --}}
                <div id="gatewayLoading" class="text-center py-4">
                    <div class="spinner-border text-primary mb-3" role="status" style="width: 2.5rem; height: 2.5rem;"></div>
                    <h6 class="font-weight-bold text-dark">Memverifikasi Lokasi Anda...</h6>
                </div>

                {{-- MENU UTAMA (TAMPIL SETELAH GPS DIDAPATKAN) --}}
                <div id="gatewayMenu" style="display: none;">
                    <div id="statusLokasiGateway" class="text-center mb-4"></div>
                    
                    <div class="row px-1">
                        {{-- Tombol Absensi QR --}}
                        <div class="col-4 mb-3 px-1">
                            <a href="#" class="action-card" id="btnActionAbsensi" onclick="event.preventDefault(); klikTombolAbsensi();">
                                <div class="action-icon bg-primary-gradient" id="iconAbsensi"><i class="fas fa-qrcode"></i></div>
                                <span class="action-label">Absensi</span>
                                <span class="action-sub">QR Code</span>
                            </a>
                        </div>
                        
                        {{-- Tombol Izin (Selalu Aktif) --}}
                        <div class="col-4 mb-3 px-1">
                            <a href="#" class="action-card" onclick="event.preventDefault(); bukaFormIzinManual('Izin');">
                                <div class="action-icon bg-orange-gradient"><i class="fas fa-envelope-open-text"></i></div>
                                <span class="action-label">Izin</span>
                                <span class="action-sub">Terencana</span>
                            </a>
                        </div>
                        
                        {{-- Tombol Sakit (Selalu Aktif) --}}
                        <div class="col-4 mb-3 px-1">
                            <a href="#" class="action-card" onclick="event.preventDefault(); bukaFormIzinManual('Sakit');">
                                <div class="action-icon bg-rose-gradient"><i class="fas fa-file-medical"></i></div>
                                <span class="action-label">Sakit</span>
                                <span class="action-sub">Upload Surat</span>
                            </a>
                        </div>
                    </div>

                    {{-- Tombol Mode Asisten Scanner Siswa --}}
                    <div class="row px-1 mt-2">
                        <div class="col-12 px-1">
                            <a href="#" class="action-card" id="btnActionAsisten" onclick="event.preventDefault(); klikTombolAsisten();" style="flex-direction: row; padding: 15px 20px;">
                                <div class="action-icon bg-green-gradient mb-0 mr-3" id="iconAsisten" style="width: 40px; height: 40px; font-size: 1rem;"><i class="fas fa-camera"></i></div>
                                <div style="text-align: left;">
                                    <span class="action-label d-block text-left" style="font-size: 0.9rem;">Mode Asisten Siswa</span>
                                    <span class="action-sub d-block text-left">Scan Kartu Siswa via Kamera HP</span>
                                </div>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

{{-- ========================================================== --}}
{{-- 4. MODAL SCANNER KAMERA (UTAMA & ASISTEN)                  --}}
{{-- ========================================================== --}}
{{-- Scanner Utama: Untuk Absen Diri Sendiri (QR Gerbang) --}}
<div class="modal fade" id="scannerModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 28px; overflow: hidden; background: #000;">
            <div class="modal-header border-0 text-white" style="position: absolute; z-index: 100; width: 100%; top: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);">
                <h6 class="modal-title mx-auto font-weight-bold" style="letter-spacing: 1px; font-size: 0.8rem;">ARAHKAN KE QR GERBANG</h6>
                <button type="button" class="close text-white m-0 p-0" data-dismiss="modal" onclick="stopScanner()" style="position: absolute; right: 20px; text-shadow: none;">&times;</button>
            </div>
            <div class="modal-body p-0" style="min-height: 450px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;">
    {{-- Hapus height 100% --}}
    <div id="reader" style="width: 100%;"></div> 
    
    <div class="scan-frame-national">
        <div class="corner top-left"></div><div class="corner top-right"></div>
        <div class="corner bottom-left"></div><div class="corner bottom-right"></div>
        <div class="laser"></div>
    </div>
    <div class="scanner-instruction">Pastikan QR Code Gerbang berada di dalam kotak</div>
</div>
        </div>
    </div>
</div>

{{-- Scanner Asisten: Untuk Scan Kartu Siswa (Barcode/QR) --}}
<div class="modal fade" id="modalScannerGuru" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 28px; overflow: hidden; background: #000;">
            <div class="modal-header border-0 text-white" style="position: absolute; z-index: 100; width: 100%; top: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);">
                <h6 class="modal-title mx-auto font-weight-bold" style="letter-spacing: 1px; font-size: 0.8rem;">SCAN KARTU SISWA</h6>
                <button type="button" class="close text-white m-0 p-0" data-dismiss="modal" onclick="tutupScannerGuru()" style="position: absolute; right: 20px; text-shadow: none;">&times;</button>
            </div>
            <div class="modal-body p-0" style="min-height: 450px; display: flex; align-items: center; justify-content: center; position: relative;">
                <div id="reader-guru" style="width: 100%; height: 100%;"></div>
                
                {{-- Frame Persegi Panjang untuk Barcode Kartu --}}
                <div class="scan-frame-national" style="width: 280px; height: 160px;">
                    <div class="corner top-left"></div><div class="corner top-right"></div>
                    <div class="corner bottom-left"></div><div class="corner bottom-right"></div>
                    <div class="laser"></div>
                </div>
                <div class="scanner-instruction" style="bottom: 80px;">Arahkan ke Barcode / QR ID Card</div>
            </div>
            <div class="modal-footer border-0 justify-content-center" style="background: #1e293b;">
                <button type="button" class="btn btn-dark rounded-pill font-weight-bold px-4" data-dismiss="modal" onclick="tutupScannerGuru()"><i class="fas fa-times mr-2"></i> Tutup Scanner</button>
            </div>
        </div>
    </div>
</div>

{{-- ========================================================== --}}
{{-- 5. MODAL PENGAJUAN IZIN/SAKIT                              --}}
{{-- ========================================================== --}}
<div class="modal fade bottom-sheet d-lg-none" id="izinModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-bottom" role="document">
        <div class="modal-content modern-modal-content">
            <form id="formPengajuanIzinGuru" onsubmit="submitFormIzinGuru(event)" enctype="multipart/form-data">
                {{-- KUNCI KEAMANAN --}}
                @csrf
                <input type="hidden" name="_token" id="csrfTokenHidden" value="{{ csrf_token() }}">
                
                <div class="modal-body p-4">
                    <div class="mx-auto rounded-pill mb-4" style="width: 40px; height: 4px; background: #cbd5e1;"></div>
                    <div class="text-center mb-4">
                        <h5 class="font-weight-900 text-dark mt-1 mb-1">Pengajuan Izin / Sakit</h5>
                    </div>
                    <input type="hidden" name="latitude" id="izinLatGuru">
                    <input type="hidden" name="longitude" id="izinLngGuru">
                    <div class="form-group mb-3">
                        <select name="status_pengajuan" id="statusPengajuan" class="form-control bg-light" required>
                            <option value="">-- Pilih Jenis Pengajuan --</option>
                            <option value="Sakit">Sakit</option>
                            <option value="Izin">Izin Terencana</option>
                            <option value="Dinas Luar">Dinas Luar (DL)</option>
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <textarea name="keterangan" id="keteranganIzin" class="form-control bg-light" rows="3" required placeholder="Alasan/Keterangan..."></textarea>
                    </div>
                    <div class="form-group mb-4">
                        <label class="small font-weight-bold">Upload Surat Bukti (Maks 5MB)</label>
                        <input type="file" name="foto_surat" id="fotoSurat" class="form-control p-1 bg-light" accept="image/*,application/pdf" required>
                    </div>
                    <button type="submit" id="btnKirimIzin" class="btn btn-primary btn-block rounded-pill py-3">Kirim Pengajuan</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ========================================================== --}}
{{-- 6. JAVASCRIPT LOGIC KHUSUS NAVIGASI & MODAL GATEWAY        --}}
{{-- ========================================================== --}}

@once
    @push('js')
        <script src="https://unpkg.com/html5-qrcode"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            let userLat = null, userLng = null, gpsReady = false;
            let html5QrCode = null;
            let html5QrCodeGuru = null;
            let isDalamRadius = false; 

            // Koordinat ditarik dari PHP (Pengaturan Global Website / Sekolah)
            const schLat   = {{ (float) ($safeLat ?: 0) }};
            const schLng   = {{ (float) ($safeLng ?: 0) }};
            const radLimit = {{ (int) ($safeRad ?: 150) }};

            $(document).ready(function() {
                // Setup AJAX Global untuk token
                $.ajaxSetup({
                    headers: { 
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') || $('#csrfTokenHidden').val()
                    }
                });

                // Pindahkan Modal ke Body agar tidak terjebak Z-Index parent
                $('#smartActionModal').appendTo("body");
                $('#scannerModal').appendTo("body");
                $('#modalScannerGuru').appendTo("body");
                $('#izinModal').appendTo("body");

                startLiveGeofencing();
            });

            // MESIN GPS OTOMATIS DI BACKGROUND
            function startLiveGeofencing() {
                if (navigator.geolocation) {
                    navigator.geolocation.watchPosition(
                        function(pos) {
                            userLat = pos.coords.latitude;
                            userLng = pos.coords.longitude;
                            gpsReady = true;
                            
                            // Cek jika fungsi updateDashboardCards ada di halaman dashboard yang memanggil ini
                            if (typeof updateDashboardCards === "function") {
                                updateDashboardCards(); 
                            }
                        },
                        function(err) { 
                            console.warn("Background GPS Error:", err.message); 
                            gpsReady = false; 
                        },
                        { enableHighAccuracy: true, timeout: 10000, maximumAge: 2000 }
                    );
                }
            }

            // RUMUS HAVERSINE UNTUK JARAK
            function calculateDistance(lat1, lon1, lat2, lon2) {
                if(lat1 === 0 || lat2 === 0) return 9999;
                const R = 6371000;
                const dLat = (lat2 - lat1) * Math.PI / 180;
                const dLon = (lon2 - lon1) * Math.PI / 180;
                const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1 * Math.PI/180) * Math.cos(lat2 * Math.PI/180) * Math.sin(dLon/2) * Math.sin(dLon/2);
                return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
            }

            // ====================================================================
            // ANTI-FREEZE & PEMBERSIH LAYAR (NUKE FIX)
            // ====================================================================
            function paksaBukaKunciLayar() {
                setTimeout(function() {
                    $('.modal-backdrop').remove();
                    $('body').removeClass('modal-open swal2-shown swal2-height-auto').css({
                        'padding-right': '',
                        'overflow': 'auto',
                        'pointer-events': 'auto'
                    });
                }, 300);
            }

            // WATCHDOG (PENJAGA LAYAR SCROLL)
            setInterval(function() {
                if ($('.modal.show').length === 0 && !Swal.isVisible()) {
                    if ($('body').hasClass('modal-open') || $('body').css('overflow') === 'hidden') {
                        paksaBukaKunciLayar();
                    }
                }
            }, 500);

            // ====================================================================
            // C. PENCARI LOKASI & MENU GATEWAY
            // ====================================================================
            function bukaSmartGateway() {
                if (!gpsReady || userLat === null) {
                    Swal.fire({
                        title: 'Mencari Lokasi...',
                        html: 'Meminta akses GPS perangkat Anda...',
                        allowOutsideClick: false,
                        didOpen: () => { Swal.showLoading(); }
                    });

                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(
                            function(pos) {
                                userLat = pos.coords.latitude;
                                userLng = pos.coords.longitude;
                                gpsReady = true;
                                
                                Swal.close();
                                $('#smartActionModal').modal({ backdrop: 'static', keyboard: false });
                                tampilkanModalGateway(); 
                            },
                            function(err) {
                                Swal.close();
                                if (err.code === err.PERMISSION_DENIED) {
                                    Swal.fire('Izin Lokasi Diblokir', 'Anda menolak izin lokasi. Silakan ubah izin lokasi browser menjadi "Izinkan".', 'warning');
                                } else {
                                    Swal.fire('GPS Lemah/Mati', 'Gagal mendapatkan lokasi. Pastikan GPS menyala dan berada di area terbuka.', 'error');
                                }
                            },
                            { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
                        );
                    } else {
                        Swal.fire('Error', 'Browser HP Anda tidak mendukung GPS.', 'error');
                    }
                } else {
                    $('#smartActionModal').modal({ backdrop: 'static', keyboard: false });
                    tampilkanModalGateway();
                }
            }

            function tampilkanModalGateway() {
                $('#smartActionModal').modal('show');
                $('#gatewayLoading').hide();
                $('#gatewayMenu').fadeIn();

                let masterDist = calculateDistance(userLat, userLng, schLat, schLng);
                
                let btnAbsen = $('#btnActionAbsensi');
                let iconAbsen = $('#iconAbsensi');
                let btnAsisten = $('#btnActionAsisten');
                let iconAsisten = $('#iconAsisten');
                let statusDiv = $('#statusLokasiGateway');

                if (masterDist <= radLimit) {
                    // DI DALAM RADIUS SEKOLAH
                    isDalamRadius = true;
                    statusDiv.html(`
                        <div class="d-inline-block p-2 rounded-circle mb-1" style="background: #DCFCE7;">
                            <i class="fas fa-map-marker-alt text-success fa-lg"></i>
                        </div>
                        <h6 class="font-weight-900 text-dark mb-0">Anda Berada di Area Sekolah</h6>
                        <small class="text-success font-weight-bold">Akurasi Jarak: ${Math.round(masterDist)}m</small>
                    `);
                    
                    // Aktifkan Semua Tombol
                    btnAbsen.removeClass('disabled-card');
                    iconAbsen.html('<i class="fas fa-qrcode"></i>');
                    
                    btnAsisten.removeClass('disabled-card');
                    iconAsisten.html('<i class="fas fa-camera"></i>');
                } else {
                    // DI LUAR RADIUS SEKOLAH
                    isDalamRadius = false;
                    statusDiv.html(`
                        <div class="d-inline-block p-2 rounded-circle mb-1" style="background: #FEE2E2;">
                            <i class="fas fa-map-marker-alt text-danger fa-lg"></i>
                        </div>
                        <h6 class="font-weight-900 text-dark mb-0">Di Luar Area Sekolah</h6>
                        <small class="text-danger font-weight-bold">Jarak: ${Math.round(masterDist)}m (Batas: ${radLimit}m)</small>
                    `);

                    // Matikan Tombol Absen & Asisten
                    btnAbsen.addClass('disabled-card');
                    iconAbsen.html('<i class="fas fa-lock"></i>');
                    
                    btnAsisten.addClass('disabled-card');
                    iconAsisten.html('<i class="fas fa-lock"></i>');
                }
            }

            // ROUTING KLIK TOMBOL
            function klikTombolAbsensi() {
                if (isDalamRadius) {
                    startScanner();
                } else {
                    Swal.fire('Terkunci', 'Fitur Absensi QR (Check-In) hanya dapat digunakan jika Anda berada di dalam radius sekolah.', 'warning');
                }
            }

            function klikTombolAsisten() {
                if (isDalamRadius) {
                    bukaScannerAsistenSiswa();
                } else {
                    Swal.fire('Terkunci', 'Mode Asisten Siswa hanya dapat digunakan jika Anda berada di dalam radius sekolah.', 'warning');
                }
            }

            // ====================================================================
            // D. FUNGSI SCANNER UTAMA (UNTUK GURU SENDIRI)
            // ====================================================================
           // ====================================================================
            // D. FUNGSI SCANNER UTAMA (UNTUK GURU SENDIRI)
            // ====================================================================
            function startScanner() {
                // 1. Tutup modal menu tanpa Nuke Fix agar transisinya mulus
                $('#smartActionModal').modal('hide');
                
                // 2. Buka modal kamera
                setTimeout(function() {
                    $('#scannerModal').modal('show');
                }, 400); 
            }

            // 3. TRIGGER KAMERA HANYA SAAT MODAL SUDAH 100% TERBUKA (Ini kuncinya!)
            $('#scannerModal').on('shown.bs.modal', function () {
                if (html5QrCode && html5QrCode.getState() === 2) return; // Cegah double scan
                
                html5QrCode = new Html5Qrcode("reader");
                html5QrCode.start(
                    { facingMode: "environment" }, 
                    { fps: 10, qrbox: { width: 250, height: 250 } },
                    (decodedText) => {
                        stopScanner();
                        $('#scannerModal').modal('hide');
                        
                        if (decodedText.startsWith('GATE-ABSEN-')) {
                            prosesAbsensiGuruQR(decodedText);
                        } else {
                            Swal.fire('Format Salah', 'Kode QR ini bukan milik Gerbang Sekolah.', 'error');
                        }
                    }
                ).catch(err => {
                    stopScanner();
                    $('#scannerModal').modal('hide');
                    Swal.fire('Kamera Gagal', 'Pastikan izin kamera sudah diaktifkan di browser Anda dan situs menggunakan HTTPS.', 'error');
                });
            });

            function stopScanner() {
                if (html5QrCode) {
                    try { html5QrCode.stop().then(() => html5QrCode.clear()); } catch (e) {}
                }
            }
            
            $('#scannerModal').on('hidden.bs.modal', function() {
                stopScanner();
                paksaBukaKunciLayar(); // Baru panggil nuke fix saat modal benar-benar tertutup
            });
            function prosesAbsensiGuruQR(qrData) {
                Swal.fire({ title: 'Memproses Absensi...', allowOutsideClick: false, didOpen: () => { Swal.showLoading(); } });
                
                $.post("{{ route('guru.absen.qr') }}", {
                    qr_data: qrData, latitude: userLat, longitude: userLng, _token: $('#csrfTokenHidden').val()
                }, function(res) {
                    Swal.fire({ icon: 'success', title: 'Berhasil!', text: res.message, customClass: { popup: 'rounded-2xl' } })
                    .then(() => { 
                        window.location.href = window.location.href; 
                    });
                }).fail(function(err) {
                    Swal.fire('Ditolak', err.responseJSON?.message || 'Gagal menyimpan absensi.', 'error').then(() => paksaBukaKunciLayar());
                });
            }

            // ====================================================================
            // E. FUNGSI SCANNER ASISTEN (GURU MENGABSENKAN SISWA)
            // ====================================================================
           function bukaScannerAsistenSiswa() {
                $('#smartActionModal').modal('hide');
                setTimeout(function() {
                    $('#modalScannerGuru').modal('show');
                }, 400); 
            }

            $('#modalScannerGuru').on('shown.bs.modal', function () {
                if (html5QrCodeGuru && html5QrCodeGuru.getState() === 2) return;
                
                html5QrCodeGuru = new Html5Qrcode("reader-guru");
                html5QrCodeGuru.start(
                    { facingMode: "environment" }, 
                    { fps: 10, qrbox: { width: 250, height: 120 }, aspectRatio: 1.0 }, 
                    (decodedText) => {
                        html5QrCodeGuru.pause(true); // Pause sementara agar tidak scan berulang
                        
                        Swal.fire({ 
                            title: 'Memproses...', 
                            html: `Mengirim data siswa:<br><b>${decodedText}</b>`, 
                            allowOutsideClick: false, 
                            didOpen: () => { Swal.showLoading() },
                            target: document.getElementById('modalScannerGuru')
                        });

                        $.post("{{ route('guru.absen.scan_siswa') }}", {
                            qr_data: decodedText, latitude: userLat, longitude: userLng, _token: $('#csrfTokenHidden').val()
                        }, function(res) {
                            Swal.fire({
                                icon: res.status === 'success' ? 'success' : 'warning',
                                title: res.status === 'success' ? 'Berhasil' : 'Peringatan',
                                text: res.message,
                                timer: 2000,
                                showConfirmButton: false,
                                target: document.getElementById('modalScannerGuru'),
                                customClass: { popup: 'rounded-2xl' }
                            }).then(() => { html5QrCodeGuru.resume(); }); // Resume kamera setelah beres
                        }).fail(function(err) {
                            Swal.fire({
                                icon: 'error', title: 'Gagal',
                                text: err.responseJSON?.message || 'Terjadi kesalahan sistem.',
                                target: document.getElementById('modalScannerGuru'),
                                customClass: { popup: 'rounded-2xl' }
                            }).then(() => { html5QrCodeGuru.resume(); });
                        });
                    }
                ).catch(err => {
                    tutupScannerGuru();
                    $('#modalScannerGuru').modal('hide');
                    Swal.fire('Kamera Gagal', 'Pastikan HP Anda memberikan izin akses kamera ke situs ini.', 'error');
                });
            });

            function tutupScannerGuru() {
                if (html5QrCodeGuru) {
                    try { html5QrCodeGuru.stop().then(() => html5QrCodeGuru.clear()); } catch (e) {}
                }
            }

            $('#modalScannerGuru').on('hidden.bs.modal', function() {
                tutupScannerGuru();
                paksaBukaKunciLayar();
            });
            // ====================================================================
            // F. FUNGSI BUKA FORM IZIN / SAKIT
            // ====================================================================
            function bukaFormIzinManual(jenisPengajuan) {
                $('#izinLatGuru').val(userLat);
                $('#izinLngGuru').val(userLng);
                $('#statusPengajuan').val(jenisPengajuan);

                $('#smartActionModal').modal('hide');

                setTimeout(function() {
                    paksaBukaKunciLayar();
                    $('#izinModal').modal('show');
                }, 400); 
            }

            function submitFormIzinGuru(e) {
                e.preventDefault();
                
                let formElement = document.getElementById('formPengajuanIzinGuru');
                
                if (!formElement.checkValidity()) {
                    formElement.reportValidity();
                    return;
                }

                let formData = new FormData();
                formData.append('_token', $('#csrfTokenHidden').val()); 
                formData.append('status_pengajuan', $('#statusPengajuan').val());
                formData.append('keterangan', $('#keteranganIzin').val());
                formData.append('latitude', $('#izinLatGuru').val());
                formData.append('longitude', $('#izinLngGuru').val());
                
                let fileInput = document.getElementById('fotoSurat');
                if (fileInput.files.length > 0) {
                    formData.append('foto_surat', fileInput.files[0]);
                }

                let btnSubmit = $('#btnKirimIzin');
                btnSubmit.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i> Mengirim...');

                $.ajax({
                    url: "{{ route('absen.ajukan_izin') }}", 
                    type: 'POST', 
                    data: formData, 
                    contentType: false, 
                    processData: false,
                    cache: false,
                    success: function(res) {
                        $('#izinModal').modal('hide');
                        paksaBukaKunciLayar();

                        Swal.fire({
                            icon: 'success', 
                            title: 'Berhasil!', 
                            text: res.message, 
                            allowOutsideClick: false,
                            customClass: { popup: 'rounded-2xl' }
                        }).then(() => { 
                            window.location.href = window.location.href; 
                        });
                    },
                    error: function(xhr) {
                        btnSubmit.prop('disabled', false).html('Kirim Pengajuan');
                        paksaBukaKunciLayar();
                        
                        if (xhr.status === 419 || xhr.status === 401) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Memperbarui Keamanan...',
                                text: 'Halaman terlalu lama tidak merespon. Sistem akan memuat ulang secara otomatis.',
                                showConfirmButton: false,
                                timer: 2500
                            }).then(() => {
                                window.location.reload(true); 
                            });
                        } else {
                            Swal.fire('Gagal', xhr.responseJSON?.message || 'Terjadi kesalahan sistem saat mengirim data.', 'error');
                        }
                    }
                });
            }
        </script>
    @endpush
@endonce