<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-slate=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>GasKu - <?php echo $__env->yieldContent('title', 'Aplikasi Pesan Gas'); ?></title>
    <link rel="icon" type="image/jpeg" href="<?php echo e(asset('fix.jpeg')); ?>">
    <link rel="manifest" href="<?php echo e(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="<?php echo e(asset('fix.jpeg')); ?>">

    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register("<?php echo e(asset('sw.js')); ?>")
                    .then(reg => console.log('Service Worker registered', reg))
                    .catch(err => console.error('Service Worker registration failed', err));
            });
        }
    </script>
    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <?php echo \Livewire\Mechanisms\FrontendAssets\FrontendAssets::styles(); ?>

    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .nav-active { @apply bg-gas3kg/10 text-gas3kg font-bold border-r-4 border-gas3kg; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .custom-scroll::-webkit-scrollbar { width: 4px; }
        .custom-scroll::-webkit-scrollbar-track { background: transparent; }
        .custom-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }

        /* Chatbot window: fullscreen on mobile, popup on desktop */
        .chatbot-window {
            position: fixed;
            bottom: 84px; /* Di atas bottom nav (64px) + gap */
            right: 16px;
            left: 16px;
            max-height: calc(100dvh - 100px);
            border-radius: 1.25rem;
            z-index: 9998;
        }
        @media (min-width: 640px) {
            .chatbot-window {
                position: static;
                width: 400px;
                height: 550px;
                max-height: 550px;
                border-radius: 2rem;
                left: auto;
                right: auto;
                bottom: auto;
            }
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 pb-20 md:pb-0">

    <!-- 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>

    
    <?php 
    $navItems = [
        ['route' => 'user.dashboard', 'icon' => 'home', 'label' => 'Beranda'],
        ['route' => 'user.pesanan', 'icon' => 'shopping-bag', 'label' => 'Pesanan'],
    ]; 
    ?>

    
    <header class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md z-30 border-b border-slate-200 shadow-sm">
        <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto h-16 flex items-center justify-between">
            <div class="flex items-center gap-3 text-gas3kg">
                <div class="bg-gas3kg p-1.5 rounded-lg text-white shadow-md shadow-gas3kg/20">
                    <i data-lucide="flame" class="w-5 h-5 fill-gas12kg/20"></i>
                </div>
                <h1 class="text-xl font-bold tracking-tight">Gas<span class="text-gas12kg">Ku</span></h1>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $navItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                <a href="<?php echo e(route($item['route'])); ?>" 
                   class="flex items-center gap-2 px-3 py-2 text-sm font-semibold transition-all <?php echo e(Route::is($item['route']) ? 'text-gas3kg' : 'text-slate-500 hover:text-gas3kg'); ?>">
                    <i data-lucide="<?php echo e($item['icon']); ?>" class="w-4 h-4"></i>
                    <span><?php echo e($item['label']); ?></span>
                </a>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                
                <div class="h-6 w-px bg-slate-200 mx-2"></div>
                
                <!-- Bell Notifikasi Desktop -->
                <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('user.notification-bell', ['layout' => 'desktop']);

$__keyOuter = $__key ?? null;

$__key = null;
$__componentSlots = [];

$__key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-2534256693-0', $__key);

$__html = app('livewire')->mount($__name, $__params, $__key, $__componentSlots);

echo $__html;

unset($__html);
unset($__key);
$__key = $__keyOuter;
unset($__keyOuter);
unset($__name);
unset($__params);
unset($__componentSlots);
unset($__split);
?>
                
                <form action="<?php echo e(route('logout')); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <button type="submit" class="flex items-center gap-2 px-4 py-2 bg-red-50 text-red-600 text-sm font-semibold rounded-xl hover:bg-red-100 transition-all">
                        <i data-lucide="log-out" class="w-4 h-4"></i>
                        <span>Keluar</span>
                    </button>
                </form>
            </div>

            <div class="md:hidden flex items-center gap-3">
                <!-- Bell Notifikasi Mobile -->
                <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('user.notification-bell', ['layout' => 'mobile']);

$__keyOuter = $__key ?? null;

$__key = null;
$__componentSlots = [];

$__key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-2534256693-1', $__key);

$__html = app('livewire')->mount($__name, $__params, $__key, $__componentSlots);

echo $__html;

unset($__html);
unset($__key);
$__key = $__keyOuter;
unset($__keyOuter);
unset($__name);
unset($__params);
unset($__componentSlots);
unset($__split);
?>

                <div class="w-8 h-8 flex items-center justify-center bg-gas12kg/10 text-gas12kg rounded-full font-bold text-sm">
                    <?php echo e(substr(Auth::user()->name, 0, 1)); ?>

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

    
    <?php echo $__env->yieldContent('content'); ?>

    
    <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 px-4 flex justify-between items-center z-50 shadow-[0_-4px_10px_rgba(0,0,0,0.03)] h-16">
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $navItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
        <a href="<?php echo e(route($item['route'])); ?>" 
           class="flex flex-col items-center justify-center flex-1 transition-all <?php echo e(Route::is($item['route']) ? 'text-gas12kg' : 'text-slate-400'); ?>">
            <i data-lucide="<?php echo e($item['icon']); ?>" class="w-6 h-6 mb-1 <?php echo e(Route::is($item['route']) ? 'stroke-[2.5px]' : 'stroke-[2px]'); ?>"></i>
            <span class="text-[10px] font-bold"><?php echo e($item['label']); ?></span>
        </a>
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
        
        <form action="<?php echo e(route('logout')); ?>" method="POST" class="flex-1 flex justify-center">
            <?php echo csrf_field(); ?>
            <button type="submit" class="flex flex-col items-center justify-center w-full transition-all text-red-500">
                <i data-lucide="power" class="w-6 h-6 mb-1 stroke-[2px]"></i>
                <span class="text-[10px] font-bold">Keluar</span>
            </button>
        </form>
    </nav>

    <script>
        lucide.createIcons();
    </script>
    <!-- Floating AI Chatbot Widget -->
    <div x-data="floatingChatUser()" class="fixed bottom-[84px] sm:bottom-6 right-4 sm:right-6 z-[9999] flex flex-col items-end gap-3 font-sans">

        <!-- Chat Popover Window -->
        <div x-show="isOpen"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="opacity-0 translate-y-8 scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 scale-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="opacity-100 translate-y-0 scale-100"
             x-transition:leave-end="opacity-0 translate-y-8 scale-95"
             class="chatbot-window bg-white shadow-[0_20px_50px_rgba(0,0,0,0.15)] border border-slate-100 flex flex-col overflow-hidden"
             style="display: none;">

            <!-- Header -->
            <div class="bg-gradient-to-r from-slate-900 to-emerald-950 text-white px-5 py-4 flex items-center justify-between shadow-md">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-emerald-500 rounded-xl flex items-center justify-center shadow-lg">
                        <svg width="24" height="24" viewBox="0 0 32 32" fill="none"><line x1="16" y1="3" x2="16" y2="8" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="16" cy="2.5" r="1.5" fill="white"/><rect x="5" y="8" width="22" height="16" rx="6" fill="white" fill-opacity="0.95"/><ellipse cx="11.5" cy="15.5" rx="2.8" ry="2.8" fill="#10b981"/><circle cx="11.5" cy="15.5" r="1.1" fill="#059669"/><ellipse cx="20.5" cy="15.5" rx="2.8" ry="2.8" fill="#10b981"/><circle cx="20.5" cy="15.5" r="1.1" fill="#059669"/><path d="M12 20.5 Q16 23 20 20.5" stroke="#10b981" stroke-width="1.8" stroke-linecap="round" fill="none"/></svg>
                    </div>
                    <div>
                        <h4 class="font-extrabold text-sm tracking-tight leading-none text-white">Asisten AI GasKu</h4>
                        <div class="flex items-center gap-1.5 mt-1">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Aktif</span>
                        </div>
                    </div>
                </div>
                <button @click="isOpen = false; messages = [];" class="text-slate-400 hover:text-white transition-colors p-1.5 rounded-lg hover:bg-white/10">
                    <i data-lucide="minus" class="w-4 h-4"></i>
                </button>
            </div>

            <!-- Messages -->
            <div id="user-chat-messages" class="flex-1 overflow-y-auto custom-scroll p-4 space-y-4 bg-slate-50/50">
                <div class="flex items-start gap-2.5">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 overflow-hidden" style="background: linear-gradient(135deg, #059669, #10b981, #34d399);">
                        <svg width="18" height="18" viewBox="0 0 32 32" fill="none"><line x1="16" y1="3" x2="16" y2="8" stroke="white" stroke-width="2.5" stroke-linecap="round"/><rect x="5" y="8" width="22" height="16" rx="6" fill="white" fill-opacity="0.95"/><ellipse cx="11.5" cy="15.5" rx="2.8" ry="2.8" fill="#10b981"/><ellipse cx="20.5" cy="15.5" rx="2.8" ry="2.8" fill="#10b981"/><path d="M12 20.5 Q16 23 20 20.5" stroke="#10b981" stroke-width="1.8" stroke-linecap="round" fill="none"/></svg>
                    </div>
                    <div class="bg-white border border-slate-100 text-slate-700 px-4 py-3 rounded-2xl rounded-tl-none shadow-sm text-xs sm:text-sm font-medium leading-relaxed" style="max-width: 80%;">
                        Halo! Saya GasKu AI Assistant. 🔥<br>Ada yang bisa saya bantu hari ini?
                    </div>
                </div>
                <template x-for="(msg, index) in messages" :key="index">
                    <div class="flex items-start gap-2.5" :class="msg.role === 'user' ? 'flex-row-reverse' : ''">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 overflow-hidden"
                             :class="msg.role === 'user' ? 'bg-[#0F172A]' : ''" :style="msg.role !== 'user' ? 'background: linear-gradient(135deg, #059669, #10b981, #34d399);' : ''">
                            <template x-if="msg.role === 'user'"><i data-lucide="user" class="w-4 h-4 text-white"></i></template>
                            <template x-if="msg.role !== 'user'"><svg width="18" height="18" viewBox="0 0 32 32" fill="none"><line x1="16" y1="3" x2="16" y2="8" stroke="white" stroke-width="2.5" stroke-linecap="round"/><rect x="5" y="8" width="22" height="16" rx="6" fill="white" fill-opacity="0.95"/><ellipse cx="11.5" cy="15.5" rx="2.8" ry="2.8" fill="#10b981"/><ellipse cx="20.5" cy="15.5" rx="2.8" ry="2.8" fill="#10b981"/><path d="M12 20.5 Q16 23 20 20.5" stroke="#10b981" stroke-width="1.8" stroke-linecap="round" fill="none"/></svg></template>
                        </div>
                        <div class="px-4 py-3 rounded-2xl shadow-sm text-xs sm:text-sm font-medium leading-relaxed"
                             :class="msg.role === 'user' ? 'bg-gradient-to-br from-emerald-500 to-green-600 text-white rounded-tr-none' : 'bg-white border border-slate-100 text-slate-700 rounded-tl-none'"
                             style="max-width: 80%;" x-html="msg.content"></div>
                    </div>
                </template>
                <div x-show="isLoading" class="flex items-start gap-2.5" style="display: none;">
                    <div class="w-8 h-8 rounded-full flex-shrink-0 mt-0.5" style="background: linear-gradient(135deg, #059669, #10b981, #34d399);"></div>
                    <div class="bg-white border border-slate-100 px-4 py-3.5 rounded-2xl rounded-tl-none shadow-sm flex gap-1.5 items-center">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-bounce"></span>
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-bounce" style="animation-delay: 0.2s"></span>
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-bounce" style="animation-delay: 0.4s"></span>
                    </div>
                </div>
            </div>

            <!-- Input -->
            <div class="p-3 bg-white border-t border-slate-100">
                <form @submit.prevent="sendMessage" class="no-loader flex items-center gap-2">
                    <input type="text" x-model="inputBox" placeholder="Ketik pesan Anda..."
                           class="flex-1 bg-slate-50 border border-slate-100 rounded-2xl px-4 py-2.5 text-xs sm:text-sm font-semibold outline-none text-slate-700 placeholder:text-slate-400 focus:border-emerald-500 focus:bg-white transition-all"
                           :disabled="isLoading" autocomplete="off">
                    <button type="submit" :disabled="!inputBox.trim() || isLoading"
                            class="w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 flex-shrink-0"
                            :class="inputBox.trim() && !isLoading ? 'bg-gradient-to-br from-emerald-500 to-green-600 text-white hover:scale-105 active:scale-95 shadow-md' : 'bg-slate-100 text-slate-300'">
                        <i data-lucide="send" class="w-4 h-4 ml-0.5"></i>
                    </button>
                </form>
            </div>
        </div>

        <!-- Toggle Button -->
        <button @click="isOpen = !isOpen; if(!isOpen) { messages = []; } else { scrollToBottom(); }"
                class="w-14 h-14 bg-gradient-to-br from-slate-900 via-slate-800 to-emerald-950 rounded-full flex items-center justify-center shadow-xl hover:scale-110 active:scale-95 transition-all duration-300 text-white relative group border border-slate-800 flex-shrink-0">
            <span class="absolute inset-0 rounded-full bg-emerald-500/20 animate-ping opacity-75 group-hover:hidden"></span>
            <div class="relative w-6 h-6 flex items-center justify-center">
                <div x-show="!isOpen">
                    <svg width="26" height="26" viewBox="0 0 32 32" fill="none"><line x1="16" y1="3" x2="16" y2="8" stroke="#34d399" stroke-width="2" stroke-linecap="round"/><circle cx="16" cy="2.5" r="1.5" fill="#34d399"/><rect x="5" y="8" width="22" height="16" rx="6" fill="white" fill-opacity="0.15"/><ellipse cx="11.5" cy="15.5" rx="2.8" ry="2.8" fill="#34d399"/><ellipse cx="20.5" cy="15.5" rx="2.8" ry="2.8" fill="#34d399"/><path d="M12 20.5 Q16 23 20 20.5" stroke="#34d399" stroke-width="1.8" stroke-linecap="round" fill="none"/></svg>
                </div>
                <div x-show="isOpen" style="display: none;">
                    <i data-lucide="x" class="w-6 h-6 text-rose-400"></i>
                </div>
            </div>
        </button>
    </div>

    <script>
        function floatingChatUser() {
            return {
                isOpen: false,
                messages: [],
                inputBox: '',
                isLoading: false,
                sendMessage() {
                    const msg = this.inputBox.trim();
                    if (!msg) return;
                    this.messages.push({ role: 'user', content: msg });
                    this.inputBox = '';
                    this.isLoading = true;
                    this.scrollToBottom();
                    fetch('<?php echo e(route('chatbot.send')); ?>', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>' },
                        body: JSON.stringify({ message: msg })
                    }).then(r => r.json()).then(data => {
                        this.isLoading = false;
                        if (data.reply) {
                            let html = data.reply.replace(/\n\n/g, '<br><br>').replace(/\n/g, '<br>');
                            this.messages.push({ role: 'bot', content: html });
                        } else {
                            this.messages.push({ role: 'bot', content: data.error || 'Terjadi kesalahan.' });
                        }
                        setTimeout(() => { if (typeof lucide !== 'undefined') lucide.createIcons(); }, 50);
                        this.scrollToBottom();
                    }).catch(() => {
                        this.isLoading = false;
                        this.messages.push({ role: 'bot', content: '<span class="text-red-500">Gagal terhubung ke server.</span>' });
                        this.scrollToBottom();
                    });
                },
                scrollToBottom() {
                    setTimeout(() => {
                        const box = document.getElementById('user-chat-messages');
                        if (box) box.scrollTop = box.scrollHeight;
                    }, 100);
                }
            };
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Trigger loader on link click
            document.querySelectorAll('a').forEach(link => {
                const href = link.getAttribute('href');
                if (
                    href && 
                    !href.startsWith('#') && 
                    !href.startsWith('javascript:') && 
                    link.getAttribute('target') !== '_blank' &&
                    !link.classList.contains('no-loader')
                ) {
                    link.addEventListener('click', (e) => {
                        if (e.metaKey || e.ctrlKey || e.shiftKey) return;
                        const loader = document.getElementById('pageLoader');
                        if (loader) {
                            loader.classList.remove('opacity-0', 'pointer-events-none');
                            loader.classList.add('opacity-100');
                        }
                    });
                }
            });

            // Trigger loader on form submit
            document.querySelectorAll('form').forEach(form => {
                if (!form.classList.contains('no-loader') && form.getAttribute('target') !== '_blank') {
                    form.addEventListener('submit', () => {
                        if (form.checkValidity()) {
                            const loader = document.getElementById('pageLoader');
                            if (loader) {
                                loader.classList.remove('opacity-0', 'pointer-events-none');
                                loader.classList.add('opacity-100');
                            }
                        }
                    });
                }
            });
        });
    </script>

    <!-- Glassmorphic Page Loader -->
    <div id="pageLoader" class="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-slate-950/40 backdrop-blur-sm opacity-0 pointer-events-none transition-all duration-300">
        <div class="glass-card rounded-3xl p-6 max-w-[200px] w-full text-center border border-white/20 shadow-2xl flex flex-col items-center gap-3 bg-white/95">
            <div class="relative w-12 h-12 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>
            </div>
            <p class="text-xs font-black text-slate-800 tracking-wider uppercase">Memuat...</p>
        </div>
    </div>

    <?php echo \Livewire\Mechanisms\FrontendAssets\FrontendAssets::scripts(); ?>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // SweetAlert session flash notifications
            <?php if(session('success')): ?>
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: <?php echo json_encode(session('success'), 15, 512) ?>,
                    timer: 2500,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end',
                    timerProgressBar: true,
                });
            <?php endif; ?>

            <?php if(session('error')): ?>
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: <?php echo json_encode(session('error'), 15, 512) ?>,
                    confirmButtonText: 'Tutup',
                    confirmButtonColor: '#ef4444',
                });
            <?php endif; ?>

            <?php if(session('warning')): ?>
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian!',
                    text: <?php echo json_encode(session('warning'), 15, 512) ?>,
                    confirmButtonText: 'Tutup',
                    confirmButtonColor: '#ef4444',
                });
            <?php endif; ?>

            if (typeof Livewire !== 'undefined') {
                Livewire.onPageExpired((response, message) => {
                    window.location.href = '/login';
                });

                // Auto-hide pageLoader setelah setiap Livewire request selesai
                // (mencegah loader nyangkut saat form Livewire disubmit)
                Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => {
                    succeed(({ snapshot, effect }) => {
                        requestAnimationFrame(() => {
                            const loader = document.getElementById('pageLoader');
                            if (loader) {
                                loader.classList.add('opacity-0', 'pointer-events-none');
                                loader.classList.remove('opacity-100');
                            }
                        });
                    });
                });

                // SweetAlert listeners dari dispatch Livewire
                Livewire.on('swal-success', (data) => {
                    const d = Array.isArray(data) ? data[0] : data;
                    Swal.fire({
                        icon: 'success',
                        title: d.title || 'Berhasil!',
                        text: d.text || '',
                        timer: 2500,
                        showConfirmButton: false,
                        toast: true,
                        position: 'top-end',
                        timerProgressBar: true,
                    });
                });

                Livewire.on('swal-error', (data) => {
                    const d = Array.isArray(data) ? data[0] : data;
                    Swal.fire({
                        icon: 'error',
                        title: d.title || 'Gagal!',
                        text: d.text || '',
                        confirmButtonText: 'Tutup',
                        confirmButtonColor: '#ef4444',
                    });
                });
            }
        });
    </script>
    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH C:\laragon\www\LPG\resources\views/layouts/user_sidebar.blade.php ENDPATH**/ ?>