<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - GasKu</title>
    <link rel="icon" type="image/jpeg" href="{{ asset('fix.jpeg') }}">
    <link rel="manifest" href="{{ asset('manifest.json') }}?v=8">
    <meta name="theme-color" content="#22c55e">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="GASKU">
    <link class="apple-touch-icon" href="{{ asset('fix.jpeg') }}">

    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register("{{ asset('sw.js') }}")
                    .then(reg => console.log('Service Worker registered', reg))
                    .catch(err => console.error('Service Worker registration failed', err));
            });
        }
    </script>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <script src="https://unpkg.com/lucide@latest"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: #f8fafc;
        }
        
        .floating-shape {
            position: absolute;
            z-index: 0;
            filter: blur(80px);
            opacity: 0.15;
            pointer-events: none;
        }

        @keyframes float {
            0% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(30px, -30px) scale(1.1); }
            100% { transform: translate(-20px, 20px) scale(0.9); }
        }

        .animate-float {
            animation: float 15s infinite alternate ease-in-out;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 40px -2px rgba(34, 197, 94, 0.08), 0 0 20px -2px rgba(0, 0, 0, 0.03);
        }


    </style>
</head>
<body class="antialiased text-slate-800 min-h-screen min-h-[100dvh] relative flex flex-col items-center justify-start p-4 overflow-y-auto">
    
    <!-- PWA Standalone Splash Screen -->
    <div id="pwaSplashScreen" class="fixed inset-0 z-[99999] flex flex-col items-center justify-between bg-slate-950 transition-opacity duration-300 ease-out" style="display: none;">
        <div></div>
        <div class="flex flex-col items-center gap-6">
            <!-- Animated SVG Loader (No white background, pure CSS) -->
            <div class="relative w-16 h-16 flex items-center justify-center">
                <div class="absolute inset-0 rounded-full border-4 border-emerald-500/10 animate-pulse"></div>
                <div class="absolute inset-0 rounded-full border-4 border-transparent border-t-emerald-500 animate-spin"></div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-7 h-7 text-emerald-500 animate-pulse">
                    <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>
                </svg>
            </div>
            <div class="text-center space-y-1">
                <h2 class="text-2xl font-black text-white tracking-tight">Gas<span class="text-emerald-400">Ku</span></h2>
                <p class="text-xs font-bold text-slate-400 tracking-wider uppercase">Selamat Datang</p>
            </div>
            <div class="w-32 h-1 bg-slate-800 rounded-full overflow-hidden mt-2 relative">
                <div id="splashProgressBar" class="absolute top-0 bottom-0 left-0 bg-emerald-500 rounded-full transition-all duration-[600ms] ease-out w-0"></div>
            </div>
        </div>
        <div class="pb-8">
            <p class="text-[9px] font-bold text-slate-600 uppercase tracking-widest">Sistem Inventaris & Pengiriman LPG</p>
        </div>
    </div>
    <script>
        (function() {
            const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
            if (isStandalone && !sessionStorage.getItem('splash_shown')) {
                const splash = document.getElementById('pwaSplashScreen');
                splash.style.display = 'flex';
                setTimeout(() => {
                    const bar = document.getElementById('splashProgressBar');
                    if (bar) bar.style.width = '100%';
                }, 50);
                setTimeout(() => {
                    splash.classList.add('opacity-0');
                    setTimeout(() => {
                        splash.style.display = 'none';
                    }, 350);
                }, 800);
                sessionStorage.setItem('splash_shown', 'true');
            }
        })();
    </script>

    <!-- Ambient Background -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="floating-shape animate-float w-96 h-96 bg-gas3kg rounded-full top-[-10%] right-[-10%]"></div>
        <div class="floating-shape animate-float w-80 h-80 bg-green-400 rounded-full bottom-[-10%] left-[-5%]" style="animation-delay: -5s;"></div>
        <div class="floating-shape animate-float w-64 h-64 bg-gas12kg rounded-full top-[30%] left-[10%]" style="animation-delay: -2s; opacity: 0.05;"></div>
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-[0.02]"></div>
    </div>

    <div class="w-full max-w-[420px] my-auto relative z-10 animate-in fade-in zoom-in-95 duration-500">


        <!-- Main Card -->
        <div class="glass-card rounded-[1.75rem] sm:rounded-[2rem] p-6 sm:p-10 transition-all">
            
            <!-- Logo & Header -->
            <div class="text-center mb-6 sm:mb-8">
                <div class="inline-flex items-center justify-center w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-gas3kg to-green-500 rounded-2xl shadow-lg shadow-gas3kg/30 mb-4 sm:mb-5 relative group">
                    <div class="absolute inset-0 bg-white/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <i data-lucide="flame" class="w-7 h-7 sm:w-8 sm:h-8 text-white"></i>
                </div>
                <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight text-slate-900 mb-1.5 sm:mb-2">Selamat Datang</h1>
                <p class="text-xs sm:text-sm text-slate-500 font-medium">Silakan masuk untuk mengakses akun Anda</p>
            </div>

            <!-- Alerts -->
            @if (session('status'))
                <div class="bg-emerald-50 text-emerald-600 p-3.5 rounded-xl text-sm mb-6 border border-emerald-100 flex items-start">
                    <i data-lucide="check-circle" class="w-4.5 h-4.5 mr-2.5 shrink-0 mt-0.5"></i>
                    <div class="font-semibold">{{ rtrim(session('status'), '.') }}</div>
                </div>
            @endif

            @if (session('error'))
                <div class="bg-amber-50 text-amber-700 p-3.5 rounded-xl text-sm mb-6 border border-amber-200 flex items-start">
                    <i data-lucide="alert-circle" class="w-4.5 h-4.5 mr-2.5 shrink-0 mt-0.5 text-amber-600"></i>
                    <div class="font-semibold">{{ rtrim(session('error'), '.') }}</div>
                </div>
            @endif

            @if ($errors->any())
                <div class="bg-red-50 text-red-600 p-3.5 rounded-xl text-sm mb-6 border border-red-100 flex items-start">
                    <i data-lucide="alert-circle" class="w-4.5 h-4.5 mr-2.5 shrink-0 mt-0.5"></i>
                    <div>
                        <ul class="space-y-1 font-semibold list-none pl-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ rtrim($error, '.') }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif

            <!-- Form -->
            <form action="{{ route('login') }}" method="POST" class="space-y-4 sm:space-y-5">
                @csrf
                
                <div>
                    <label for="email" class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-1 sm:mb-1.5 ml-1">Email</label>
                    <div class="relative group">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none transition-colors group-focus-within:text-gas3kg text-slate-400">
                            <i data-lucide="mail" class="h-4 w-4 sm:h-4.5 sm:w-4.5"></i>
                        </div>
                        <input id="email" name="email" type="email" autocomplete="email" value="{{ old('email') }}" required 
                            class="block w-full pl-11 pr-3 py-2.5 sm:py-3 border border-slate-200 rounded-2xl text-[13px] sm:text-sm font-semibold placeholder-slate-400 focus:outline-none focus:border-gas3kg focus:ring-4 focus:ring-gas3kg/10 transition-all bg-slate-50 focus:bg-white" 
                            placeholder="nama@email.com">
                    </div>
                </div>

                <div>
                    <div class="flex items-center justify-between mb-1 sm:mb-1.5 ml-1 mr-1">
                        <label for="password" class="block text-xs font-bold uppercase tracking-wider text-slate-500">Kata Sandi</label>
                        <a href="{{ route('password.request') }}" class="text-xs font-bold text-gas3kg hover:text-green-700 transition-colors">Lupa Password?</a>
                    </div>
                    <div class="relative group">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none transition-colors group-focus-within:text-gas3kg text-slate-400">
                            <i data-lucide="lock" class="h-4 w-4 sm:h-4.5 sm:w-4.5"></i>
                        </div>
                        <input id="password" name="password" type="password" autocomplete="current-password" required 
                            class="block w-full pl-11 pr-12 py-2.5 sm:py-3 border border-slate-200 rounded-2xl text-[13px] sm:text-sm font-semibold placeholder-slate-400 focus:outline-none focus:border-gas3kg focus:ring-4 focus:ring-gas3kg/10 transition-all bg-slate-50 focus:bg-white" 
                            placeholder="••••••••">
                        <button type="button" onclick="togglePassword('password', this)" class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-gas3kg focus:outline-none transition-colors">
                            <i data-lucide="eye" class="h-4 w-4 sm:h-4.5 sm:w-4.5 icon-show"></i>
                            <i data-lucide="eye-off" class="h-4 w-4 sm:h-4.5 sm:w-4.5 icon-hide hidden"></i>
                        </button>
                    </div>
                </div>

                <div class="flex items-center pt-0.5 sm:pt-1 ml-1">
                    <input id="remember-me" name="remember-me" type="checkbox" class="h-3.5 w-3.5 sm:h-4 sm:w-4 text-gas3kg focus:ring-gas3kg/20 border-slate-300 rounded cursor-pointer transition-colors accent-gas3kg">
                    <label for="remember-me" class="ml-2 block text-xs sm:text-sm font-semibold text-slate-600 cursor-pointer">Ingat saya</label>
                </div>

                <div class="pt-2 sm:pt-3">
                    <button type="submit" class="group relative flex w-full justify-center items-center py-3 sm:py-3.5 px-4 border border-transparent rounded-2xl shadow-lg shadow-gas3kg/25 text-[13px] sm:text-sm font-bold text-white bg-gas3kg hover:bg-green-600 focus:outline-none focus:ring-4 focus:ring-gas3kg/30 transition-all active:scale-[0.98] overflow-hidden">
                        <span class="relative z-10 flex items-center">
                            Masuk ke Sistem
                            <i data-lucide="arrow-right-circle" class="ml-2 w-4.5 h-4.5 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
                        </span>
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:animate-[shimmer_1.5s_infinite]"></div>
                    </button>
                </div>


                <!-- PWA Install Card (mobile only, shown automatically) -->
                <div id="pwa-card" style="display:none;flex-direction:column;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1.5px solid #86efac;border-radius:18px;padding:16px;position:relative;overflow:hidden;" class="mt-4 sm:mt-5">
                    <div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#22c55e,transparent);"></div>
                    <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
                        <div style="width:44px;height:44px;border-radius:12px;border:1px solid rgba(34,197,94,0.25);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(34,197,94,0.12);flex-shrink:0;overflow:hidden;">
                            <img src="{{ asset('fix.jpeg') }}" alt="GasKu" style="width:100%;height:100%;object-fit:cover;">
                        </div>
                        <div style="flex:1;">
                            <div style="font-size:0.9rem;font-weight:800;color:#14532d;">GasKu</div>
                            <div style="font-size:0.68rem;color:#16a34a;font-weight:600;">Pasang aplikasi ke HP Anda</div>
                        </div>
                        <span style="background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.3);border-radius:999px;padding:3px 9px;font-size:0.6rem;font-weight:700;color:#15803d;">GRATIS</span>
                    </div>
                    <p id="pwa-desc" style="font-size:0.72rem;color:#166534;line-height:1.55;margin-bottom:12px;text-align:center;">Tambahkan GasKu ke <strong>Layar Utama</strong> HP Anda</p>
                    <button onclick="triggerInstall()" style="display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 16px;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:12px;color:#fff;font-family:inherit;font-size:0.82rem;font-weight:800;cursor:pointer;box-shadow:0 4px 16px rgba(34,197,94,0.3);margin-bottom:8px;">
                        <i data-lucide="plus-circle" style="width:16px;height:16px;"></i>
                        <span id="pwa-btn-label">Pasang ke Layar Utama</span>
                    </button>
                    <button onclick="dismissPwaCard()" style="background:none;border:none;width:100%;font-family:inherit;font-size:0.7rem;font-weight:600;color:#6b7280;cursor:pointer;padding:4px;text-align:center;">Tidak sekarang</button>
                </div>
            </form>

            <style>
                @keyframes shimmer { 100% { transform: translateX(100%); } }
                @keyframes slideUpModal {
                    from { transform: translateY(100%); opacity: 0; }
                    to   { transform: translateY(0);    opacity: 1; }
                }
            </style>

            <!-- Footer link (inside card on mobile, always visible) -->
            <div class="mt-5 pt-4 sm:mt-6 sm:pt-5 border-t border-slate-100 text-center text-[13px] sm:text-sm font-medium text-slate-500">
                Belum memiliki akun?
                <a href="{{ route('register') }}" class="font-extrabold text-gas3kg hover:text-green-700 hover:underline decoration-gas3kg decoration-2 underline-offset-4 transition-all">Daftar Sekarang</a>
            </div>
        </div>
    </div>

    <!-- Install Guide Modal (iOS Safari + Chrome Desktop fallback) -->
    <div id="ios-modal" onclick="closeIosModal(event)" style="display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);align-items:flex-end;justify-content:center;">
        <div style="width:100%;max-width:480px;background:#fff;border-radius:24px 24px 0 0;padding:28px 24px 40px;animation:slideUpModal 0.4s cubic-bezier(.34,1.56,.64,1) both;">
            <div style="width:40px;height:4px;background:#e5e7eb;border-radius:2px;margin:0 auto 20px;"></div>
            <div id="guide-modal-title" style="font-size:1.05rem;font-weight:800;color:#111827;text-align:center;margin-bottom:6px;">📲 Pasang ke Layar Utama</div>
            <div id="guide-modal-sub" style="font-size:0.75rem;color:#6b7280;text-align:center;margin-bottom:24px;line-height:1.5;">Ikuti langkah berikut untuk menambahkan GasKu.</div>
            <div id="guide-modal-steps" style="display:flex;flex-direction:column;gap:14px;">
                <!-- Steps populated by JS -->
            </div>
            <button onclick="closeIosModal()" style="width:100%;margin-top:22px;padding:13px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;font-family:inherit;font-size:0.85rem;font-weight:700;color:#6b7280;cursor:pointer;">Mengerti, tutup</button>
        </div>
    </div>

    <script>
        lucide.createIcons();

        // ── Password toggle ──────────────────────────────────────────────────
        function togglePassword(inputId, button) {
            const input = document.getElementById(inputId);
            const iconShow = button.querySelector('.icon-show');
            const iconHide = button.querySelector('.icon-hide');
            if (input.type === 'password') {
                input.type = 'text';
                iconShow.classList.add('hidden');
                iconHide.classList.remove('hidden');
            } else {
                input.type = 'password';
                iconShow.classList.remove('hidden');
                iconHide.classList.add('hidden');
            }
        }

        // ── PWA: Service Worker ──────────────────────────────────────────────
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register("{{ asset('sw.js') }}").catch(() => {});
        }

        // ── Browser / platform detection ─────────────────────────────────────
        const ua         = navigator.userAgent || '';
        const isIOS      = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
        const isAndroid  = /Android/.test(ua);
        const isMobile   = isIOS || isAndroid;
        const isDesktop  = !isMobile;
        const isStandalone = window.matchMedia('(display-mode: standalone)').matches
                           || window.navigator.standalone === true;

        // ── Capture Chrome install prompt (Desktop + Android) ─────────────────
        let deferredPrompt = null;

        window.addEventListener('beforeinstallprompt', e => {
            e.preventDefault();
            deferredPrompt = e;
            // Update/refresh PWA card dynamically to use native prompt if visible
            if (!isStandalone && !sessionStorage.getItem('pwa_dismissed')) {
                showPwaCard();
            }
        });

        window.addEventListener('appinstalled', () => {
            deferredPrompt = null;
            document.getElementById('pwa-card').style.display = 'none';
        });

        // ── Show PWA card (in-form) ────────────────────────────────────
        function showPwaCard() {
            if (isStandalone || sessionStorage.getItem('pwa_dismissed')) return;
            const card = document.getElementById('pwa-card');
            const desc = document.getElementById('pwa-desc');
            const lbl  = document.getElementById('pwa-btn-label');
            
            if (isIOS) {
                desc.innerHTML = 'Tambahkan GasKu ke <strong>Home Screen</strong> iPhone/iPad — ikon langsung di layar utama tanpa buka browser!';
                lbl.innerText  = 'Pasang ke Home Screen';
            } else if (deferredPrompt) {
                desc.innerHTML = 'Pasang GasKu ke <strong>Layar Utama</strong> Anda';
                lbl.innerText  = 'Pasang Aplikasi';
            } else if (isMobile) {
                desc.innerHTML = 'Gunakan menu <strong>Tambahkan ke Layar Utama</strong> di browser Anda untuk pasang aplikasi GasKu.';
                lbl.innerText  = 'Cara Pasang';
            } 
            
            card.style.display = 'flex';
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }

        function triggerInstall() {
            if (deferredPrompt) {
                deferredPrompt.prompt();
                deferredPrompt.userChoice.then(choice => {
                    if (choice.outcome === 'accepted') {
                        document.getElementById('pwa-card').style.display = 'none';
                    }
                    deferredPrompt = null;
                });
            } else {
                showGuideModal();
            }
        }

        function dismissPwaCard() {
            document.getElementById('pwa-card').style.display = 'none';
            sessionStorage.setItem('pwa_dismissed', '1');
        }

        function showGuideModal() {
            const modal  = document.getElementById('ios-modal');
            const title  = document.getElementById('guide-modal-title');
            const sub    = document.getElementById('guide-modal-sub');
            const steps  = document.getElementById('guide-modal-steps');

            const stepStyle = 'display:flex;align-items:center;gap:14px;';
            const iconStyle = 'width:44px;height:44px;flex-shrink:0;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;';
            const textStyle = 'font-size:0.8rem;color:#374151;line-height:1.5;';

            if (isDesktop) {
                title.innerHTML = '🖥️ Install GasKu di Chrome Desktop';
                sub.innerHTML   = 'Klik ikon <strong>Install</strong> di address bar Chrome untuk pasang GasKu sebagai aplikasi desktop.';
                steps.innerHTML = `
                    <div style="${stepStyle}">
                        <div style="${iconStyle}">🔗</div>
                        <div style="${textStyle}">Pastikan Anda membuka halaman ini di <strong style="color:#15803d;">Google Chrome</strong></div>
                    </div>
                    <div style="${stepStyle}">
                        <div style="${iconStyle}">⬇️</div>
                        <div style="${textStyle}">Klik ikon <strong style="color:#15803d;">Install / Pasang</strong> (berbentuk komputer kecil) di ujung kanan address bar</div>
                    </div>
                    <div style="${stepStyle}">
                        <div style="${iconStyle}">✅</div>
                        <div style="${textStyle}">Klik <strong style="color:#15803d;">Instal</strong> pada dialog yang muncul — GasKu terbuka seperti app native!</div>
                    </div>`;
            } else if (isIOS) {
                title.innerHTML = '📲 Pasang ke Home Screen iPhone/iPad';
                sub.innerHTML   = 'Ikuti 3 langkah mudah di <strong>Safari</strong> untuk menambahkan GasKu ke Home Screen.';
                steps.innerHTML = `
                    <div style="${stepStyle}">
                        <div style="${iconStyle}">⬆️</div>
                        <div style="${textStyle}">Ketuk ikon <strong style="color:#15803d;">Bagikan</strong> (kotak + panah ke atas) di bawah Safari</div>
                    </div>
                    <div style="${stepStyle}">
                        <div style="${iconStyle}">➕</div>
                        <div style="${textStyle}">Gulir dan pilih <strong style="color:#15803d;">"Tambahkan ke Layar Utama"</strong></div>
                    </div>
                    <div style="${stepStyle}">
                        <div style="${iconStyle}">✅</div>
                        <div style="${textStyle}">Ketuk <strong style="color:#15803d;">Tambahkan</strong> — ikon GasKu muncul di Home Screen!</div>
                    </div>`;
            } else {
                title.innerHTML = '📱 Pasang ke Layar Utama';
                sub.innerHTML   = 'Tambahkan GasKu ke Layar Utama untuk akses cepat.';
                steps.innerHTML = `
                    <div style="${stepStyle}">
                        <div style="${iconStyle}">⋮</div>
                        <div style="${textStyle}">Ketuk menu <strong style="color:#15803d;">titik tiga</strong> di pojok kanan atas browser</div>
                    </div>
                    <div style="${stepStyle}">
                        <div style="${iconStyle}">➕</div>
                        <div style="${textStyle}">Pilih <strong style="color:#15803d;">"Tambahkan ke Layar Utama"</strong> atau <strong style="color:#15803d;">"Install App"</strong></div>
                    </div>
                    <div style="${stepStyle}">
                        <div style="${iconStyle}">✅</div>
                        <div style="${textStyle}">Ketuk <strong style="color:#15803d;">Tambahkan</strong> — ikon GasKu langsung ada di layar HP!</div>
                    </div>`;
            }

            modal.style.display = 'flex';
        }

        function closeIosModal(e) {
            if (!e || e.target === document.getElementById('ios-modal')) {
                document.getElementById('ios-modal').style.display = 'none';
            }
        }

        // ── Auto-show on load ─────────────────────────────────────────────────
        window.addEventListener('DOMContentLoaded', () => {
            if (!isStandalone && !sessionStorage.getItem('pwa_dismissed')) {
                showPwaCard();
            }

            const form = document.querySelector('form');
            if (form) {
                form.addEventListener('submit', (e) => {
                    if (form.checkValidity()) {
                        const overlay = document.getElementById('loadingOverlay');
                        if (overlay) {
                            overlay.classList.remove('opacity-0', 'pointer-events-none');
                            overlay.classList.add('opacity-100');
                        }
                    }
                });
            }
        });
    </script>

    <!-- Glassmorphic Loading Overlay -->
    <div id="loadingOverlay" class="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-slate-950/70 backdrop-blur-md opacity-0 pointer-events-none transition-all duration-300">
        <div class="glass-card rounded-[2.5rem] p-8 sm:p-10 max-w-[360px] w-full mx-4 text-center border border-white/25 shadow-2xl flex flex-col items-center gap-5">
            <!-- Loading Spinner -->
            <div class="relative w-16 h-16 flex items-center justify-center">
                <div class="absolute inset-0 rounded-full border-4 border-slate-200/20"></div>
                <div class="absolute inset-0 rounded-full border-4 border-t-gas3kg animate-spin"></div>
                <i data-lucide="flame" class="w-6 h-6 text-gas3kg animate-pulse absolute"></i>
            </div>
            <div class="space-y-2">
                <h3 class="text-xl font-extrabold text-slate-950">Selamat Datang</h3>
                <p class="text-xs font-bold text-slate-500 uppercase tracking-wider">Memproses Masuk ke Sistem...</p>
            </div>
        </div>
    </div>
</body>
</html>
