{{-- resources/views/partials/mobile-nav.blade.php --}}
{{-- Deskripsi: ULTRA-MODERN GLASSMORPHISM BOTTOM NAV (SISWA) DENGAN ON-DEMAND GPS & SMART QRIS ROUTER --}}

<style>
    /* --- 1. 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: 2000; 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; }
    
    /* --- 2. 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%; }

    /* --- 3. MODAL BOTTOM SHEET (SMART ACTION) --- */
    .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-card { background: white; border-radius: 24px; padding: 20px 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; }
    .action-card:active { transform: scale(0.95); background: #f8fafc; }
    .action-icon { width: 60px; height: 60px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; margin-bottom: 12px; position: relative; }
    .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); }
    .icon-label-mini { font-size: 0.5rem; font-weight: 900; margin-top: 2px; letter-spacing: 1px; }
    .action-label { font-size: 0.9rem; font-weight: 800; color: #0F172A; }
    .action-sub { font-size: 0.65rem; color: #64748B; font-weight: 700; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px;}

    /* --- 4. 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); }
    .qr-national-wrapper { border: 2px solid #F1F5F9; border-radius: 30px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); background: white; }

    /* --- 7. SMART DISTANCE BADGE (LIVE HUD) --- */
    .distance-badge-container {
        position: absolute;
        top: -32px; /* Mengambang tepat di atas tombol tengah */
        left: 50%;
        transform: translateX(-50%);
        z-index: 2010;
        white-space: nowrap;
        pointer-events: none; /* Agar tidak menghalangi klik jika meleset */
    }
    .distance-badge {
        background: rgba(15, 23, 42, 0.85); /* Kaca gelap modern */
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #F8FAFC;
        font-size: 0.65rem;
        font-weight: 800;
        padding: 5px 14px;
        border-radius: 20px;
        box-shadow: 0 8px 15px rgba(0,0,0,0.15);
        border: 1px solid rgba(255,255,255,0.2);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 6px;
        letter-spacing: 0.5px;
    }
    .distance-badge.in-range { background: linear-gradient(135deg, #10B981, #059669); border-color: #34D399; color: white; box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4); }
    .distance-badge.out-range { background: linear-gradient(135deg, #F59E0B, #D97706); border-color: #FBBF24; color: white; box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4); }
</style>

{{-- ========================================================== --}}
{{-- 1. BOTTOM NAVIGATION BAR                                   --}}
{{-- ========================================================== --}}
<div class="m-bottom-nav d-lg-none">
    <a href="{{ route('siswa.dashboard') }}" class="m-nav-item {{ request()->routeIs('siswa.dashboard') ? 'active' : '' }}">
        <i class="fas fa-home"></i><span>Home</span>
    </a>
    <a href="{{ route('siswa.laporan.nilai') }}" class="m-nav-item {{ request()->routeIs('siswa.laporan.nilai') ? 'active' : '' }}">
        <i class="fas fa-star"></i><span>Nilai</span>
    </a>
    
    {{-- Floating Action Button (Center) - QRIS GATEWAY --}}
    <div class="m-nav-center-wrapper">
        
        <div class="distance-badge-container animate__animated animate__fadeInUp">
            <div id="live-distance-badge" class="distance-badge">
                <i class="fas fa-satellite-dish fa-spin"></i> GPS...
            </div>
        </div>

        <a href="javascript:void(0)" class="m-nav-center animate__animated animate__pulse animate__infinite" id="btnGateway" onclick="bukaSmartGateway()">
            <div class="qris-fab-container">
                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Logo_QRIS.svg" alt="QRIS" class="qris-logo-white" style="width: 40px; filter: brightness(0) invert(1);">
            </div>
        </a>
    </div>

    <a href="{{ route('siswa.laporan.jadwal') }}" class="m-nav-item {{ request()->routeIs('siswa.laporan.jadwal') ? 'active' : '' }}">
        <i class="fas fa-calendar-alt"></i><span>Jadwal</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>

{{-- ========================================================== --}}
{{-- 2. MODAL UTAMA: PILIHAN SCAN ATAU IZIN (BERDASARKAN LOKASI)--}}
{{-- ========================================================== --}}
<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>
                
                {{-- STATE A: DALAM RADIUS SEKOLAH (SCAN QR) --}}
                <div id="gatewayInRange" style="display: none;">
                    <div class="text-center mb-4">
                        <div class="d-inline-block p-3 bg-success-light rounded-circle mb-2" style="background: #DCFCE7;">
                            <i class="fas fa-check-circle text-success fa-2x"></i>
                        </div>
                        <h5 class="font-weight-900 text-dark mb-0">Area Sekolah Terdeteksi</h5>
                        <p class="text-muted small">Silakan pilih aksi di bawah ini</p>
                    </div>
                    <div class="row px-2">
                        <div class="col-6 mb-3">
                            <a href="javascript:void(0)" class="action-card" onclick="startScanner()">
                                <div class="action-icon bg-primary-gradient"><i class="fas fa-qrcode"></i><div class="icon-label-mini">SCAN</div></div>
                                <span class="action-label">Scan QR</span><small class="action-sub">Absen & Kantin</small>
                            </a>
                        </div>
                        <div class="col-6 mb-3">
                            <a href="javascript:void(0)" class="action-card" data-toggle="modal" data-target="#myQrModal" data-dismiss="modal">
                                <div class="action-icon bg-orange-gradient"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Logo_QRIS.svg" style="width: 30px; filter: brightness(0) invert(1);"></div>
                                <span class="action-label">Identitas</span><small class="action-sub">My QR Code</small>
                            </a>
                        </div>
                    </div>
                </div>

                {{-- STATE B: LUAR RADIUS SEKOLAH (PENGAJUAN IZIN) --}}
                <div id="gatewayOutOfRange" style="display: none;">
                    <div class="text-center mb-4">
                        <div class="d-inline-block p-3 bg-warning-light rounded-circle mb-2" style="background: #FEF3C7;">
                            <i class="fas fa-map-marker-alt text-warning fa-2x"></i>
                        </div>
                        <h5 class="font-weight-900 text-dark mb-1">Di Luar Area Sekolah</h5>
                        <p class="text-muted small">Akses gerbang & kantin ditutup. Silakan ajukan izin jika Anda berhalangan hadir.</p>
                    </div>
                    <div class="px-2">
                        <button type="button" class="btn btn-warning btn-block rounded-pill font-weight-bold py-3 shadow-sm text-white" 
                                onclick="bukaFormIzinManual()" style="background: linear-gradient(135deg, #F59E0B, #D97706); border:none;">
                            <i class="fas fa-file-medical mr-2"></i> AJUKAN IZIN / SAKIT SEKARANG
                        </button>
                    </div>
                </div>

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

{{-- ========================================================== --}}
{{-- 3. MODAL SCANNER KAMERA                                    --}}
{{-- ========================================================== --}}
<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 CODE</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;">
                <div id="reader" style="width: 100%; height: 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 kode QR berada di dalam kotak</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-5" data-dismiss="modal" onclick="stopScanner()" style="border: 1px solid #475569;">Batal Scan</button>
            </div>
        </div>
    </div>
</div>

{{-- ========================================================== --}}
{{-- 4. MODAL MY QR (IDENTITAS SISWA)                           --}}
{{-- ========================================================== --}}
<div class="modal fade bottom-sheet d-lg-none" id="myQrModal" 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 text-center">
                <div class="mx-auto rounded-pill mb-4" style="width: 40px; height: 4px; background: #cbd5e1;"></div>
                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Logo_QRIS.svg" alt="QRIS" style="height: 25px;" class="mb-3">
                <h5 class="font-weight-900 text-dark mb-1" style="letter-spacing: -0.5px;">My Student QRIS</h5>
                <p class="text-muted small mb-4 font-weight-bold">Tunjukkan kode ini ke kasir kantin</p>
                <div class="qr-national-wrapper p-4 d-inline-block mb-4">
                    @php
                        $qrData = Auth::user()->siswa?->rfid_uid ?? Auth::user()->siswa?->nis ?? Auth::user()->username;
                        $displayId = Auth::user()->siswa?->nis ?? Auth::user()->username;
                    @endphp
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=250x250&data={{ $qrData }}&color=0F172A" alt="QR" style="width: 200px; height: 200px;">
                    <div class="mt-4">
                        <div class="font-weight-900 text-dark text-uppercase" style="letter-spacing: 1px; font-size: 1.1rem;">{{ Auth::user()->name }}</div>
                        <div class="badge mt-2 px-3 py-2" style="background: #f1f5f9; color: #64748b; border-radius: 10px; font-weight: 800; letter-spacing: 1px;">ID: {{ $displayId }}</div>
                    </div>
                </div>
                <button type="button" class="btn btn-block btn-light rounded-pill font-weight-bold py-3 text-primary shadow-sm" style="border: 1px solid #e2e8f0;" data-dismiss="modal">Tutup Kode QR</button>
            </div>
        </div>
    </div>
</div>

{{-- ========================================================== --}}
{{-- 5. MODAL PENGAJUAN IZIN / SAKIT (LUAR RADIUS)              --}}
{{-- ========================================================== --}}
<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="formPengajuanIzin" onsubmit="submitFormIzin(event)" enctype="multipart/form-data">
                <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">
                        <div class="bg-warning-light text-warning d-inline-flex align-items-center justify-content-center rounded-circle mb-2" style="width: 50px; height: 50px; background: #FEF3C7; color: #D97706; font-size: 1.5rem;">
                            <i class="fas fa-file-medical"></i>
                        </div>
                        <h5 class="font-weight-900 text-dark mt-1 mb-1">Pengajuan Izin / Sakit</h5>
                        <p class="text-muted small mb-0">Lengkapi form ini jika Anda berhalangan hadir.</p>
                    </div>

                    {{-- Data GPS Terselubung --}}
                    <input type="hidden" name="latitude" id="izinLat">
                    <input type="hidden" name="longitude" id="izinLng">

                    <div class="form-group mb-3">
                        <label class="font-weight-bold text-dark small">Tipe Ketidakhadiran</label>
                        <select name="status_pengajuan" class="form-control" required style="border-radius: 12px; height: 45px; background: #F8FAFC;">
                            <option value="Sakit">Sakit</option>
                            <option value="Izin">Izin / Keperluan Keluarga</option>
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label class="font-weight-bold text-dark small">Alasan / Keterangan</label>
                        <textarea name="keterangan" class="form-control" rows="3" required style="border-radius: 12px; background: #F8FAFC;" placeholder="Contoh: Demam sejak semalam..."></textarea>
                    </div>

                    <div class="form-group mb-4">
                        <label class="font-weight-bold text-dark small">Upload Surat/Foto Bukti</label>
                        <input type="file" name="foto_surat" class="form-control p-1" accept="image/*" required style="border-radius: 12px; background: #F8FAFC; height: auto;">
                        <small class="text-muted mt-1 d-block"><i class="fas fa-info-circle mr-1 text-info"></i>Maksimal ukuran file 5MB (JPG/PNG).</small>
                    </div>

                    <div class="row">
                        <div class="col-6 pr-1">
                            <button type="button" class="btn btn-light btn-block rounded-pill font-weight-bold py-3 text-dark" data-dismiss="modal">Batal</button>
                        </div>
                        <div class="col-6 pl-1">
                            <button type="submit" class="btn btn-primary btn-block rounded-pill font-weight-bold py-3 shadow-sm bg-primary-gradient border-0">Kirim <i class="fas fa-paper-plane ml-1"></i></button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ========================================================== --}}
{{-- 6. JAVASCRIPT: LOGIKA ON-DEMAND GPS & SMART ROUTER         --}}
{{-- ========================================================== --}}

{{-- @once dan @push('js') memastikan script hanya diload 1x di posisi terbawah HTML sesuai standar AdminLTE --}}
@once
    @push('js')
        <script src="https://unpkg.com/html5-qrcode"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            // ====================================================================
            // A. VARIABEL GLOBAL & KONFIGURASI (JURNAL STYLE)
            // ====================================================================
            let userLat = null, userLng = null, userDist = null;
            let gpsReady = false;
            let html5QrCode = null;

            // FIX: Amankan format data float/integer dari Database
            const schLat   = parseFloat('{{ Auth::user()->siswa->sekolah->latitude ?? 0 }}') || 0;
            const schLng   = parseFloat('{{ Auth::user()->siswa->sekolah->longitude ?? 0 }}') || 0;
            const radLimit = parseInt('{{ Auth::user()->siswa->sekolah->radius_zona ?? 150 }}', 10) || 150;

            // ====================================================================
            // B. INITIALIZE DOCUMENT READY & AJAX SETUP (SOLUSI CSRF 419)
            // ====================================================================
            $(document).ready(function() {
                // 1. Setup CSRF token harus di dalam Document Ready
                $.ajaxSetup({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
                });

                // 2. Mulai melacak GPS di background sejak awal
                startLiveTracking();
            });

            // ====================================================================
            // C. MESIN PELACAK LOKASI OTOMATIS & SMART HUD UPDATE
            // ====================================================================
            function startLiveTracking() {
                const badge = $('#live-distance-badge'); // Tangkap elemen badge

                if (!navigator.geolocation) {
                    badge.html('<i class="fas fa-exclamation-triangle"></i> GPS Mati');
                    console.error("Browser tidak mendukung GPS.");
                    return;
                }

                // Cek jika kordinat sekolah belum diset di database
                if (schLat === 0 && schLng === 0) {
                    badge.html('<i class="fas fa-ban"></i> Koordinat Admin Kosong');
                    return;
                }

                // watchPosition: Memantau lokasi secara terus menerus (lebih akurat & instan)
                navigator.geolocation.watchPosition(
                    function(pos) {
                        userLat = pos.coords.latitude;
                        userLng = pos.coords.longitude;
                        
                        // Hitung Jarak ke Sekolah secara real-time
                        userDist = calculateDistance(userLat, userLng, schLat, schLng);
                        gpsReady = true;

                        // ---- LOGIKA SMART BADGE (HUD) ----
                        // Format jarak: Jika di atas 1000m jadikan KM (contoh: 1.2 KM), jika di bawah jadikan Meter
                        let distText = userDist >= 1000 
                            ? (userDist / 1000).toFixed(1) + ' KM' 
                            : Math.round(userDist) + ' Meter';

                        if (userDist <= radLimit) {
                            // Masuk Area Sekolah (Warna Hijau)
                            badge.removeClass('out-range').addClass('in-range');
                            badge.html(`<i class="fas fa-check-circle"></i> ${distText}`);
                        } else {
                            // Luar Area Sekolah (Warna Orange)
                            badge.removeClass('in-range').addClass('out-range');
                            badge.html(`<i class="fas fa-walking"></i> ${distText}`);
                        }
                    },
                    function(err) {
                        gpsReady = false;
                        badge.removeClass('in-range out-range');
                        badge.html('<i class="fas fa-spinner fa-spin"></i> Mencari sinyal...');
                        console.warn("GPS Error: " + err.message);
                    },
                    { 
                        enableHighAccuracy: true, // Paksa GPS presisi tinggi
                        timeout: 10000, 
                        maximumAge: 0 
                    }
                );
            }

            // Haversine Formula
            function calculateDistance(lat1, lon1, lat2, lon2) {
                if(lat1 === 0 || lat2 === 0) return 9999;
                const R = 6371000; // Jari-jari bumi dalam meter
                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);
                const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
                return R * c;
            }

            // ====================================================================
            // D. LOGIKA TOMBOL SMART GATEWAY
            // ====================================================================
            function bukaSmartGateway() {
                // Jika data GPS belum masuk sama sekali
                if (!gpsReady || userLat === null) {
                    Swal.fire({
                        title: 'Mencari Lokasi...',
                        text: 'Pastikan GPS HP aktif dan izinkan akses lokasi.',
                        icon: 'info',
                        timer: 2500,
                        showConfirmButton: false
                    });
                    return;
                }

                // Tampilkan Modal Utama
                $('#smartActionModal').modal('show');

                // SMART SWITCH: Tentukan UI berdasarkan jarak yang ada di memori
                if (userDist <= radLimit) {
                    // DALAM RADIUS: Tampilkan Scan QR
                    $('#gatewayOutOfRange').hide();
                    $('#gatewayInRange').show();
                } else {
                    // LUAR RADIUS: Tampilkan Form Izin
                    $('#gatewayInRange').hide();
                    $('#gatewayOutOfRange').show();
                    
                    // Masukkan data GPS terakhir ke form izin secara otomatis
                    $('#izinLat').val(userLat);
                    $('#izinLng').val(userLng);
                }
            }

            // ====================================================================
            // E. LOGIKA SCANNER QR CODE (KAMERA)
            // ====================================================================
            function startScanner() {
                $('#smartActionModal').modal('hide');
                
                // Jeda animasi penutupan modal pertama sebelum membuka modal kedua (Mencegah Freeze)
                setTimeout(() => {
                    $('#scannerModal').modal('show');
                    
                    html5QrCode = new Html5Qrcode("reader");
                    const config = { fps: 20, qrbox: { width: 250, height: 250 }, aspectRatio: 1.0 };

                    html5QrCode.start({ facingMode: "environment" }, config, (decodedText) => {
                        // Berhenti jika QR berhasil dibaca
                        stopScanner();
                        $('#scannerModal').modal('hide');
                        
                        // Rutekan Hasil Scan
                        if (decodedText.startsWith('GATE-ABSEN-')) {
                            prosesAbsensiSiswa(decodedText);
                        } else if (decodedText.startsWith('KANTIN-PAY-')) {
                            let idKantin = decodedText.replace('KANTIN-PAY-', '');
                            prosesKantin(idKantin);
                        } else {
                            Swal.fire('Error', 'Format QR Code tidak dikenali oleh sistem sekolah.', 'error');
                        }
                    }).catch(err => {
                        $('#scannerModal').modal('hide'); // Tutup modal jika kamera gagal
                        console.error(err);
                        Swal.fire('Kamera Error', 'Aplikasi butuh izin kamera untuk memindai QR.', 'error');
                    });
                }, 350); // Jeda 350ms
            }

            function stopScanner() {
                if (html5QrCode && html5QrCode.isScanning) {
                    html5QrCode.stop().then(() => { html5QrCode.clear(); });
                }
            }
            $('#scannerModal').on('hidden.bs.modal', stopScanner);

            // ====================================================================
            // F. AJAX PROCESSOR (ABSENSI & KANTIN & IZIN)
            // ====================================================================
            
            // 1. Proses Absensi via QR
            function prosesAbsensiSiswa(qrData) {
                Swal.fire({ title: 'Menyimpan Absensi...', allowOutsideClick: false, didOpen: () => { Swal.showLoading(); } });
                
                $.post("{{ route('siswa.absen.qr') }}", {
                    qr_data: qrData,
                    latitude: userLat,
                    longitude: userLng,
                    device_id: 'DEV-' + Math.random().toString(36).substr(2, 9).toUpperCase() // Opsional: Anti Titip Absen
                }, function(res) {
                    Swal.fire({ 
                        icon: 'success', title: res.message, text: res.type === 'masuk' ? 'Selamat belajar!' : 'Hati-hati di jalan!',
                        confirmButtonText: 'Oke', customClass: { popup: 'rounded-2xl', confirmButton: 'rounded-pill px-4' } 
                    }).then(() => { location.reload(); });
                }).fail(function(err) {
                    Swal.fire({
                        icon: 'error', title: 'Gagal Absen', text: err.responseJSON?.message || 'Terjadi kesalahan sistem.',
                        customClass: { popup: 'rounded-2xl', confirmButton: 'rounded-pill px-4 bg-danger' }
                    });
                });
            }

            // 2. Proses Pembayaran Kantin
            function prosesKantin(idKantin) {
                Swal.fire({
                    title: 'Nominal Bayar', input: 'number', inputLabel: 'Masukkan Total Belanja (Rp)', showCancelButton: true, 
                    confirmButtonText: '<i class="fas fa-paper-plane mr-1"></i> Bayar Sekarang', confirmButtonColor: '#1D4ED8',
                    customClass: { popup: 'rounded-2xl', confirmButton: 'rounded-pill px-4', cancelButton: 'rounded-pill px-4' },
                    inputValidator: (value) => { if (!value || value < 500) { return 'Minimal transaksi Rp 500!'; } }
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({ title: 'Memproses Pembayaran...', allowOutsideClick: false, showConfirmButton: false, didOpen: () => { Swal.showLoading() } });
                        
                        $.post("{{ route('siswa.bayar.qris') }}", { 
                            kantin_id: idKantin, nominal: result.value 
                        }, function(res) {
                            Swal.fire({ 
                                icon: 'success', title: 'Berhasil!', html: `Transaksi Kantin Selesai.<br><br><div class="badge badge-light p-2 mt-2">Sisa Saldo: <b>Rp ${res.sisa_saldo}</b></div>`, 
                                customClass: { popup: 'rounded-2xl', confirmButton: 'rounded-pill px-4 btn-success' } 
                            }).then(() => { location.reload(); });
                        }).fail(function(err) {
                            Swal.fire('Pembayaran Gagal', err.responseJSON?.message || 'Transaksi ditolak oleh sistem.', 'error');
                        });
                    }
                });
            }

            // 3. Menampilkan Form Izin secara Manual
            function bukaFormIzinManual() {
                $('#smartActionModal').modal('hide');
                $('#izinModal').modal('show');
            }

            // 4. Proses Submit Form Izin / Sakit
            function submitFormIzin(e) {
                e.preventDefault();
                let formData = new FormData(document.getElementById('formPengajuanIzin'));

                Swal.fire({ title: 'Mengirim Pengajuan...', html: 'Sedang mengunggah bukti surat...', allowOutsideClick: false, didOpen: () => { Swal.showLoading(); } });

                $.ajax({
                    url: "{{ route('absen.ajukan_izin') }}",
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        $('#izinModal').modal('hide');
                        Swal.fire({
                            icon: 'success', title: 'Terkirim!', text: res.message,
                            customClass: { popup: 'rounded-2xl', confirmButton: 'rounded-pill px-4' }
                        }).then(() => { location.reload(); });
                    },
                    error: function(err) {
                        Swal.fire({
                            icon: 'error', title: 'Gagal Mengirim', text: err.responseJSON?.message || 'Pastikan file yang diupload JPG/PNG maksimal 5MB.',
                            customClass: { popup: 'rounded-2xl', confirmButton: 'rounded-pill px-4 bg-danger' }
                        });
                    }
                });
            }
        </script>
    @endpush
@endonce