<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'DigiShop') }} Admin</title>

    <script>
        // Check local storage or system preference to avoid FOUC before Alpine initializes
        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark')
        }
    </script>

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body class="font-sans antialiased overflow-hidden text-slate-700 bg-[#f8f9fb] transition-colors duration-200 dark:bg-slate-900 dark:text-gray-200" 
      x-data="{ 
          sidebarOpen: false, 
          sidebarCollapsed: false, 
          isDark: localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches),
          initClock() { setInterval(() => this.updateTime(), 1000); this.updateTime(); }, 
          timeData: '', 
          updateTime() { const now = new Date(); const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des']; this.timeData = `${days[now.getDay()]}, ${String(now.getDate()).padStart(2, '0')} ${months[now.getMonth()]} ${now.getFullYear()}, - ${now.toLocaleTimeString('id-ID', {hour: '2-digit', minute: '2-digit'}).replace('.', ':')}`; } 
      }" 
      x-init="initClock(); $watch('isDark', val => { if(val) { document.documentElement.classList.add('dark'); localStorage.setItem('color-theme', 'dark'); } else { document.documentElement.classList.remove('dark'); localStorage.setItem('color-theme', 'light'); } })">
    <div class="flex h-screen overflow-hidden">
        
        <!-- Mobile sidebar backdrop -->
        <div x-show="sidebarOpen" class="fixed inset-0 z-20 transition-opacity bg-slate-900 bg-opacity-50 lg:hidden" @click="sidebarOpen = false" x-cloak></div>

        <!-- Sidebar -->
        <div :class="[sidebarOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in', sidebarCollapsed ? 'lg:w-24' : 'lg:w-64']" class="fixed inset-y-0 left-0 z-30 flex flex-col transition-all duration-300 transform bg-white dark:bg-slate-800 border-r border-gray-200 dark:border-slate-700 lg:translate-x-0 lg:static lg:inset-0 w-64">
            
            <!-- Logo Section -->
            <div class="flex items-center justify-between h-[4.5rem] border-b border-gray-100 dark:border-slate-700 px-5" :class="sidebarCollapsed ? 'lg:justify-center lg:px-0' : ''">
                <!-- Logo -->
                <a href="{{ route('admin.dashboard') }}" @click="if(sidebarCollapsed) { $event.preventDefault(); sidebarCollapsed = false; }" class="flex items-center gap-3 flex-1 min-w-0" :class="sidebarCollapsed ? 'lg:justify-center cursor-pointer' : ''">
                    @php
                        $appLogo = \App\Models\Setting::where('key', 'app_logo')->value('value');
                        $appName = \App\Models\Setting::where('key', 'app_name')->value('value') ?? 'DigiShop';
                        $appDesc = \App\Models\Setting::where('key', 'app_description')->value('value') ?? 'Premium Digital Products Marketplace';
                    @endphp
                    
                    @if($appLogo && \Illuminate\Support\Facades\Storage::disk('public')->exists($appLogo))
                        <div class="p-1 rounded-lg flex items-center justify-center flex-shrink-0 bg-transparent h-10 w-10">
                            <img src="{{ \Illuminate\Support\Facades\Storage::url($appLogo) }}" alt="{{ $appName }}" class="max-h-full max-w-full object-contain">
                        </div>
                    @else
                        <div class="bg-slate-700 p-2 rounded-lg flex items-center justify-center flex-shrink-0 h-10 w-10">
                            <x-heroicon-o-book-open class="w-6 h-6 text-white" stroke-width="2" />
                        </div>
                    @endif
                    
                    <div class="flex flex-col overflow-hidden min-w-0" x-show="!sidebarCollapsed">
                        <span class="text-[1.1rem] font-extrabold text-[#1f2937] dark:text-gray-100 leading-none mb-1 truncate block">{{ $appName }}</span>
                        <span class="text-[0.65rem] font-medium text-slate-400 dark:text-slate-500 leading-none tracking-wide truncate block">{{ $appDesc }}</span>
                    </div>
                </a>
                <!-- Collapse Button text-slate-400 hover:text-slate-600 focus:outline-none hidden lg:block mr-0 items-end flex -->
                <div class="flex items-center justify-end flex-shrink-0 ml-2" x-show="!sidebarCollapsed">
                    <button @click="sidebarCollapsed = !sidebarCollapsed" class="text-slate-400 hover:text-[#1f2937] focus:outline-none hidden lg:block ml-2">
                        <x-heroicon-o-chevron-double-left class="w-[1.125rem] h-[1.125rem]" stroke-width="2" />
                    </button>
                </div>
            </div>



            <!-- Navigation -->
            <nav class="flex-1 px-4 py-8 space-y-2 overflow-y-auto">
                <!-- Dashboard -->
                <a href="{{ route('admin.dashboard') }}" class="flex items-center py-[0.625rem] text-sm font-medium transition-colors rounded-lg {{ request()->routeIs('admin.dashboard') ? 'text-slate-800 font-bold bg-slate-50' : 'text-slate-500 font-semibold hover:bg-slate-50 hover:text-slate-800' }}" :class="sidebarCollapsed ? 'lg:justify-center lg:px-0 px-4' : 'px-4'">
                    <x-heroicon-o-home class="w-[1.35rem] h-[1.35rem] flex-shrink-0 text-blue-500" x-bind:class="sidebarCollapsed ? '' : 'mr-3'" />
                    <span x-show="!sidebarCollapsed" class="truncate" :class="sidebarCollapsed ? 'lg:hidden' : ''">Dashboard</span>
                </a>

                <div x-show="!sidebarCollapsed" class="px-4 pt-4 pb-2">
                    <p class="text-[0.65rem] font-bold text-slate-400 uppercase tracking-wider">AKADEMIK / MENU</p>
                </div>

                <!-- Products -->
                <div x-data="{ open: {{ request()->routeIs('admin.products.*') || request()->routeIs('admin.categories.*') || request()->routeIs('admin.testimonials.*') ? 'true' : 'false' }} }">
                    <button @click="if(!sidebarCollapsed) { open = !open }" class="flex items-center w-full py-[0.625rem] text-sm font-medium transition-colors rounded-lg {{ request()->routeIs('admin.products.*') || request()->routeIs('admin.categories.*') || request()->routeIs('admin.testimonials.*') ? 'text-slate-800 font-bold bg-slate-50' : 'text-slate-500 font-semibold hover:bg-slate-50 hover:text-slate-800' }} focus:outline-none" :class="sidebarCollapsed ? 'lg:justify-center lg:px-0 px-4' : 'justify-between px-4'" title="Katalog">
                        <span class="flex items-center">
                            <x-heroicon-o-cube class="w-[1.35rem] h-[1.35rem] flex-shrink-0 text-emerald-500" x-bind:class="sidebarCollapsed ? '' : 'mr-3'" />
                            <span x-show="!sidebarCollapsed" class="truncate" :class="sidebarCollapsed ? 'lg:hidden' : ''">Katalog</span>
                        </span>
                        <x-heroicon-o-chevron-down class="w-4 h-4 transition-transform duration-200 flex-shrink-0" x-bind:class="open ? 'transform rotate-180' : ''" x-show="!sidebarCollapsed" />
                    </button>
                    <div x-show="open && !sidebarCollapsed" x-transition class="mt-1 space-y-1 px-3" x-cloak :class="sidebarCollapsed ? 'lg:hidden' : ''">
                        <a href="{{ route('admin.categories.index') }}" class="flex w-full items-center px-4 py-2 text-sm font-medium rounded-lg {{ request()->routeIs('admin.categories.*') ? 'text-slate-800 bg-slate-100 font-bold' : 'text-slate-500 hover:text-slate-800 font-semibold hover:bg-slate-50' }}">
                            Kategori
                        </a>
                        <a href="{{ route('admin.products.index') }}" class="flex w-full items-center px-4 py-2 text-sm font-medium rounded-lg {{ request()->routeIs('admin.products.*') ? 'text-slate-800 bg-slate-100 font-bold' : 'text-slate-500 hover:text-slate-800 font-semibold hover:bg-slate-50' }}">
                            Produk Digital
                        </a>
                        <a href="{{ route('admin.testimonials.index') }}" class="flex w-full items-center px-4 py-2 text-sm font-medium rounded-lg {{ request()->routeIs('admin.testimonials.*') ? 'text-slate-800 bg-slate-100 font-bold' : 'text-slate-500 hover:text-slate-800 font-semibold hover:bg-slate-50' }}">
                            Testimoni
                        </a>
                    </div>
                </div>

                <!-- Orders -->
                <a href="{{ route('admin.orders.index') }}" class="flex items-center py-[0.625rem] text-sm font-medium transition-colors rounded-lg {{ request()->routeIs('admin.orders.*') ? 'text-slate-800 font-bold bg-slate-50' : 'text-slate-500 font-semibold hover:bg-slate-50 hover:text-slate-800' }}" :class="sidebarCollapsed ? 'lg:justify-center lg:px-0 px-4' : 'px-4'" title="Pesanan">
                    <x-heroicon-o-shopping-cart class="w-[1.35rem] h-[1.35rem] flex-shrink-0 text-amber-500" x-bind:class="sidebarCollapsed ? '' : 'mr-3'" />
                    <span x-show="!sidebarCollapsed" class="truncate" :class="sidebarCollapsed ? 'lg:hidden' : ''">Pesanan</span>
                </a>

                <!-- Users -->
                <a href="{{ route('admin.users.index') }}" class="flex items-center py-[0.625rem] text-sm font-medium transition-colors rounded-lg {{ request()->routeIs('admin.users.*') ? 'text-slate-800 font-bold bg-slate-50' : 'text-slate-500 font-semibold hover:bg-slate-50 hover:text-slate-800' }}" :class="sidebarCollapsed ? 'lg:justify-center lg:px-0 px-4' : 'px-4'" title="Pelanggan">
                    <x-heroicon-o-users class="w-[1.35rem] h-[1.35rem] flex-shrink-0 text-violet-500" x-bind:class="sidebarCollapsed ? '' : 'mr-3'" />
                    <span x-show="!sidebarCollapsed" class="truncate" :class="sidebarCollapsed ? 'lg:hidden' : ''">Pelanggan</span>
                </a>

                <!-- Pages -->
                <a href="{{ route('admin.pages.index') }}" class="flex items-center py-[0.625rem] text-sm font-medium transition-colors rounded-lg {{ request()->routeIs('admin.pages.*') ? 'text-slate-800 font-bold bg-slate-50' : 'text-slate-500 font-semibold hover:bg-slate-50 hover:text-slate-800' }}" :class="sidebarCollapsed ? 'lg:justify-center lg:px-0 px-4' : 'px-4'" title="Halaman">
                    <x-heroicon-o-document-text class="w-[1.35rem] h-[1.35rem] flex-shrink-0 text-teal-500" x-bind:class="sidebarCollapsed ? '' : 'mr-3'" />
                    <span x-show="!sidebarCollapsed" class="truncate" :class="sidebarCollapsed ? 'lg:hidden' : ''">Halaman</span>
                </a>

                <div x-show="!sidebarCollapsed" class="px-4 pt-4 pb-2">
                    <p class="text-[0.65rem] font-bold text-slate-400 uppercase tracking-wider">KEUANGAN / SISTEM</p>
                </div>

                <!-- Bank Accounts -->
                <a href="{{ route('admin.banks.index') }}" class="flex items-center py-[0.625rem] text-sm font-medium transition-colors rounded-lg {{ request()->routeIs('admin.banks.*') ? 'text-slate-800 font-bold bg-slate-50' : 'text-slate-500 font-semibold hover:bg-slate-50 hover:text-slate-800' }}" :class="sidebarCollapsed ? 'lg:justify-center lg:px-0 px-4' : 'px-4'" title="Rekening & E-Wallet">
                    <x-heroicon-o-credit-card class="w-[1.35rem] h-[1.35rem] flex-shrink-0 text-rose-500" x-bind:class="sidebarCollapsed ? '' : 'mr-3'" />
                    <span x-show="!sidebarCollapsed" class="truncate" :class="sidebarCollapsed ? 'lg:hidden' : ''">Rekening & E-Wallet</span>
                </a>

                <!-- Settings Group -->
                <div x-data="{ open: {{ request()->routeIs('admin.settings.*') || request()->routeIs('admin.maintenance.*') || request()->routeIs('admin.themes.*') ? 'true' : 'false' }} }">
                    <button @click="if(!sidebarCollapsed) { open = !open }" class="flex items-center w-full py-[0.625rem] text-sm font-medium transition-colors rounded-lg {{ request()->routeIs('admin.settings.*') || request()->routeIs('admin.themes.*') ? 'text-slate-800 font-bold bg-slate-50 dark:text-gray-100 dark:bg-slate-700/50' : 'text-slate-500 font-semibold hover:bg-slate-50 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700/50' }} focus:outline-none" :class="sidebarCollapsed ? 'lg:justify-center lg:px-0 px-4' : 'justify-between px-4'" title="Pengaturan">
                        <span class="flex items-center">
                            <x-heroicon-o-cog-6-tooth class="w-[1.35rem] h-[1.35rem] flex-shrink-0 text-slate-500" x-bind:class="sidebarCollapsed ? '' : 'mr-3'" />
                            <span x-show="!sidebarCollapsed" class="truncate" :class="sidebarCollapsed ? 'lg:hidden' : ''">Pengaturan</span>
                        </span>
                        <x-heroicon-o-chevron-down class="w-4 h-4 transition-transform duration-200 flex-shrink-0" x-bind:class="open ? 'transform rotate-180' : ''" x-show="!sidebarCollapsed" />
                    </button>
                    <div x-show="open && !sidebarCollapsed" x-transition class="mt-1 space-y-1 px-3" x-cloak :class="sidebarCollapsed ? 'lg:hidden' : ''">
                        <a href="{{ route('admin.settings.index') }}" class="flex w-full items-center px-4 py-2 text-sm font-medium rounded-lg {{ request()->routeIs('admin.settings.index') ? 'text-slate-800 bg-slate-100 font-bold dark:text-gray-100 dark:bg-slate-700' : 'text-slate-500 hover:text-slate-800 font-semibold hover:bg-slate-50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700/50' }}">
                            Branding Toko
                        </a>
                        <a href="{{ route('admin.settings.branding') }}" class="flex w-full items-center px-4 py-2 text-sm font-medium rounded-lg {{ request()->routeIs('admin.settings.branding') ? 'text-slate-800 bg-slate-100 font-bold dark:text-gray-100 dark:bg-slate-700' : 'text-slate-500 hover:text-slate-800 font-semibold hover:bg-slate-50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700/50' }}">
                            Branding App
                        </a>
                        <a href="{{ route('admin.settings.footer') }}" class="flex w-full items-center px-4 py-2 text-sm font-medium rounded-lg {{ request()->routeIs('admin.settings.footer') ? 'text-slate-800 bg-slate-100 font-bold dark:text-gray-100 dark:bg-slate-700' : 'text-slate-500 hover:text-slate-800 font-semibold hover:bg-slate-50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700/50' }}">
                            Pengaturan Footer
                        </a>
                        <a href="{{ route('admin.settings.hero') }}" class="flex w-full items-center px-4 py-2 text-sm font-medium rounded-lg {{ request()->routeIs('admin.settings.hero') ? 'text-slate-800 bg-slate-100 font-bold dark:text-gray-100 dark:bg-slate-700' : 'text-slate-500 hover:text-slate-800 font-semibold hover:bg-slate-50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700/50' }}">
                            Pengaturan Hero
                        </a>
                        <a href="{{ route('admin.settings.video') }}" class="flex w-full items-center px-4 py-2 text-sm font-medium rounded-lg {{ request()->routeIs('admin.settings.video') ? 'text-slate-800 bg-slate-100 font-bold dark:text-gray-100 dark:bg-slate-700' : 'text-slate-500 hover:text-slate-800 font-semibold hover:bg-slate-50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700/50' }}">
                            Video Konten
                        </a>
                        <a href="{{ route('admin.maintenance.index') }}" class="flex w-full items-center px-4 py-2 text-sm font-medium rounded-lg {{ request()->routeIs('admin.maintenance.*') ? 'text-slate-800 bg-slate-100 font-bold dark:text-gray-100 dark:bg-slate-700' : 'text-slate-500 hover:text-slate-800 font-semibold hover:bg-slate-50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700/50' }}">
                            Maintenance
                        </a>
                        <a href="{{ route('admin.themes.index') }}" class="flex w-full items-center px-4 py-2 text-sm font-medium rounded-lg {{ request()->routeIs('admin.themes.*') ? 'text-slate-800 bg-slate-100 font-bold dark:text-gray-100 dark:bg-slate-700' : 'text-slate-500 hover:text-slate-800 font-semibold hover:bg-slate-50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700/50' }}">
                            Tema Website
                        </a>
                    </div>
                </div>
            </nav>

            <!-- Sidebar Footer (User Logout) -->
            <div class="border-t border-gray-100 p-4" :class="sidebarCollapsed ? 'lg:p-3 lg:flex lg:justify-center' : ''">
                <!-- Expanded User Info -->
                <div class="flex items-center justify-between" x-show="!sidebarCollapsed" :class="sidebarCollapsed ? 'lg:hidden' : ''">
                    <div class="flex items-center gap-3 max-w-[150px]">
                        <div class="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center text-white font-bold flex-shrink-0">
                            {{ substr(Auth::user()->name, 0, 1) }}
                        </div>
                        <div class="flex flex-col overflow-hidden">
                            <span class="text-[0.85rem] font-bold text-slate-800 leading-tight truncate">{{ Auth::user()->name }}</span>
                            <span class="text-[0.7rem] text-slate-500 truncate mt-0.5">Superadmin</span>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('logout') }}" class="flex-shrink-0">
                        @csrf
                        <button type="submit" class="text-slate-400 hover:text-slate-600 transition-colors p-2" title="Logout">
                            <x-heroicon-o-arrow-right-start-on-rectangle class="w-[1.125rem] h-[1.125rem]" stroke-width="2" />
                        </button>
                    </form>
                </div>
                
                <!-- Collapsed User Info -->
                <div x-show="sidebarCollapsed" class="hidden lg:flex flex-col items-center gap-3 w-full" style="display: none;" :style="sidebarCollapsed ? 'display: flex' : 'display: none'">
                    <div class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center text-white font-bold relative group">
                        {{ substr(Auth::user()->name, 0, 1) }}
                        <div class="absolute left-14 top-1/2 -translate-y-1/2 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
                            {{ Auth::user()->name }}
                        </div>
                    </div>
                    <form method="POST" action="{{ route('logout') }}" class="w-full">
                        @csrf
                        <button type="submit" class="w-full flex justify-center text-slate-400 hover:text-red-500 transition-colors p-2 bg-slate-50 rounded-lg hover:bg-slate-100 relative group" title="Logout">
                            <x-heroicon-o-arrow-right-start-on-rectangle class="w-[1.125rem] h-[1.125rem]" stroke-width="2" />
                            <div class="absolute left-14 top-1/2 -translate-y-1/2 bg-red-600 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
                                Logout
                            </div>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex flex-col flex-1 overflow-hidden bg-transparent">
            <!-- Topbar -->
            <header class="flex items-center justify-between px-6 bg-white dark:bg-slate-800 border-b border-gray-100 dark:border-slate-700 h-[4.5rem] flex-shrink-0 z-10 transition-colors duration-300">
                <div class="flex items-center flex-1">
                    <button @click="sidebarOpen = true" class="mr-4 text-slate-500 focus:outline-none lg:hidden">
                        <x-heroicon-o-bars-3 class="w-6 h-6" />
                    </button>
                    
                    <!-- Page Title (Moved from inner page) -->
                    <div class="flex items-center w-full max-w-full truncate overflow-hidden">
                        @if (isset($header))
                            <div class="font-extrabold text-[#1f2937] dark:text-gray-100 text-xl tracking-tight leading-none pt-1">
                                {{ $header }}
                            </div>
                        @else
                            <h2 class="font-extrabold text-[#1f2937] dark:text-gray-100 text-xl tracking-tight leading-none pt-1">Admin Dashboard</h2>
                        @endif
                    </div>
                </div>

                <div class="flex items-center gap-5 ml-4 flex-shrink-0">
                    <!-- Theme Toggle -->
                    <button @click="isDark = !isDark" class="text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 p-1.5 rounded-full transition-colors focus:outline-none" title="Toggle Dark/Light Mode">
                        <x-heroicon-o-moon x-show="!isDark" class="w-[1.2rem] h-[1.2rem]" stroke-width="2" />
                        <x-heroicon-o-sun x-show="isDark" style="display: none;" class="w-[1.2rem] h-[1.2rem]" stroke-width="2" />
                    </button>

                    <!-- Notifications -->
                    <button class="text-slate-400 hover:text-slate-600 transition-colors relative focus:outline-none" title="Notifications">
                        <x-heroicon-o-bell class="w-[1.15rem] h-[1.15rem]" stroke-width="2" />
                        <span class="absolute top-[1px] right-[2px] block w-2 h-2 rounded-full hidden"></span>
                    </button>

                    <!-- User Name & Date/Time -->
                    <div class="hidden md:flex flex-col items-end pr-2 pl-1 whitespace-nowrap">
                        <span class="text-[0.9rem] font-bold text-[#1f2937] dark:text-gray-100 leading-tight mb-0.5">{{ Auth::user()->name }}</span>
                        <!-- Live Time using AlpineJS -->
                        <span x-text="timeData" class="text-[0.7rem] font-medium text-slate-500 dark:text-slate-400 leading-none"></span>
                    </div>
                </div>
            </header>

            <!-- Main Scrollable Area -->
            <main class="flex-1 overflow-x-hidden overflow-y-auto bg-[#f8f9fb] dark:bg-slate-900 transition-colors duration-300 p-6 lg:p-8">
                <!-- Flash messages -->
                @if (session('success'))
                    <div class="mb-6 p-4 rounded-lg bg-green-50 border border-green-200 text-green-700 flex items-center shadow-sm">
                        <x-heroicon-s-check-circle class="w-5 h-5 mr-2" />
                        {{ session('success') }}
                    </div>
                @endif
                
                @if (session('error'))
                    <div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200 text-red-700 flex items-center shadow-sm">
                        <x-heroicon-s-x-circle class="w-5 h-5 mr-2" />
                        {{ session('error') }}
                    </div>
                @endif

                <!-- Page Content -->
                <div class="max-w-full">
                    {{ $slot }}
                </div>
            </main>
        </div>
    </div>
    @stack('scripts')
</body>
</html>
