<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @php
        $sysAppName = \App\Models\SchoolSetting::get('app_name', 'Sistem Absensi Fingerprint');
        $sysSchoolName = \App\Models\SchoolSetting::get('school_name', 'SMKN 1 Gunung Agung');
        $sysFaviconUrl = \App\Models\SchoolSetting::getFileUrl('school_favicon');
        $sysLogoUrl = \App\Models\SchoolSetting::getFileUrl('school_logo');

        $pageTitle = $title ?? '';
        if (empty($pageTitle)) {
            $routeName = request()->route()?->getName() ?? '';
            $routeNames = [
                'dashboard' => 'Dashboard',
                'users.index' => 'Manajemen Pengguna',
                'shifts.index' => 'Pengaturan Shift',
                'personnel.index' => 'Data Guru & Siswa',
                'personnel.id-cards' => 'Cetak ID Card',
                'machines.index' => 'Mesin Fingerprint',
                'reports.index' => 'Laporan Kehadiran',
                'reports.class-recap' => 'Rekap Per Kelas',
                'reports.warning-letters' => 'Surat Peringatan',
                'roles-permissions.index' => 'Hak Akses & Permission',
                'academic-calendar.index' => 'Kalender Akademik',
                'leave-applications.index' => 'Pengajuan Izin',
                'system-monitoring.index' => 'Monitoring Aplikasi',
                'backup-restore.index' => 'Backup & Restore',
                'whatsapp-gateway.index' => 'WhatsApp Gateway',
                'school-settings.index' => 'Pengaturan Sekolah',
                'login' => 'Login',
                'parent-portal' => 'Portal Orang Tua',
                'help.guide' => 'Panduan Penggunaan',
            ];
            
            if (array_key_exists($routeName, $routeNames)) {
                $pageTitle = $routeNames[$routeName];
            } else {
                $pageTitle = ucwords(str_replace(['.', '-'], ' ', $routeName));
            }
        }
    @endphp
    <title>{{ $pageTitle ? $pageTitle . ' - ' . $sysAppName : $sysAppName . ' - ' . $sysSchoolName }}</title>
    @if($sysFaviconUrl)
        <link rel="icon" type="image/x-icon" href="{{ $sysFaviconUrl }}">
        <link rel="shortcut icon" href="{{ $sysFaviconUrl }}">
    @endif

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind CSS CDN & Alpine JS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            50: '#f0f7ff',
                            100: '#e0effe',
                            500: '#0284c7',
                            600: '#0369a1',
                            700: '#075985',
                            900: '#0c4a6e',
                        }
                    }
                }
            }
        }
    </script>
    @livewireStyles
</head>
<body class="font-sans antialiased bg-slate-950 text-slate-100 min-h-screen flex" x-data="{ sidebarOpen: false }">

    <!-- Sidebar Navigation -->
    <aside class="fixed inset-y-0 left-0 z-40 w-64 bg-slate-900 border-r border-slate-800 transform transition-transform duration-300 md:translate-x-0"
        :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'">
        
        <!-- Brand Header -->
        <div class="h-16 flex items-center px-6 border-b border-slate-800 gap-3">
            @if($sysLogoUrl)
                <img src="{{ $sysLogoUrl }}" alt="Logo" class="w-10 h-10 object-contain rounded-xl bg-slate-950 p-1 border border-slate-800 flex-shrink-0">
            @else
                <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-sky-600 to-indigo-600 flex items-center justify-center text-white shadow-md shadow-sky-500/20 flex-shrink-0">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457-.39-2.823-1.07-4" />
                    </svg>
                </div>
            @endif
            <div class="truncate">
                <h2 class="text-sm font-bold text-white leading-tight truncate">{{ $sysAppName }}</h2>
                <p class="text-[10px] text-sky-400 font-medium truncate">{{ $sysSchoolName }}</p>
            </div>
        </div>

        <!-- Navigation Menu -->
        <nav class="p-4 space-y-1 text-sm font-medium overflow-y-auto max-h-[calc(100vh-8rem)]">
            <a href="{{ route('dashboard') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('dashboard') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                Dashboard
            </a>

            @can('viewAny', App\Models\User::class)
            <a href="{{ route('users.index') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('users.*') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                Manajemen Pengguna
            </a>
            @endcan

            @can('viewAny', App\Models\Shift::class)
            <a href="{{ route('shifts.index') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('shifts.*') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                Pengaturan Shift
            </a>
            @endcan

            @can('viewAny', App\Models\User::class)
            <a href="{{ route('personnel.index') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('personnel.index') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                Data Guru & Siswa
            </a>

            <a href="{{ route('personnel.id-cards') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('personnel.id-cards*') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-6 0h6"></path></svg>
                Cetak ID Card Siswa
            </a>
            @endcan

            @can('viewAny', App\Models\FingerprintMachine::class)
            <a href="{{ route('machines.index') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('machines.*') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path></svg>
                Mesin Fingerprint
            </a>


            @endcan

            @can('viewAny', App\Models\AttendanceRecord::class)
            <a href="{{ route('reports.index') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('reports.index') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                Laporan Kehadiran
            </a>

            <a href="{{ route('reports.class-recap') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('reports.class-recap') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                Rekap Per Kelas
            </a>

            <a href="{{ route('reports.warning-letters') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('reports.warning-letters*') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                Surat Peringatan & SP
            </a>
            @endcan

            @can('viewAny', App\Models\Permission::class)
            <a href="{{ route('roles-permissions.index') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('roles-permissions.*') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                Hak Akses & Permission
            </a>
            @endcan

            @can('viewAny', App\Models\AcademicYear::class)
            <a href="{{ route('academic-calendar.index') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('academic-calendar.*') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                Kalender & Hari Kerja
            </a>
            @endcan

            @can('viewAny', App\Models\LeaveApplication::class)
            <a href="{{ route('leave-applications.index') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('leave-applications.*') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                Pengajuan Izin & Sakit
            </a>
            @endcan

            @can('viewAny', App\Models\User::class)
            <a href="{{ route('system-monitoring.index') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('system-monitoring.*') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                Monitoring Aplikasi
            </a>
            @endcan

            @can('viewAny', App\Models\Backup::class)
            <a href="{{ route('backup-restore.index') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('backup-restore.*') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path></svg>
                Backup & Restore
            </a>
            @endcan

            @can('viewAny', App\Models\User::class)
            <a href="{{ route('whatsapp-gateway.index') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('whatsapp-gateway.*') ? 'bg-emerald-600 text-white font-semibold shadow-lg shadow-emerald-600/20' : 'text-emerald-400 hover:bg-slate-800 hover:text-emerald-300' }}">
                <svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                WA Gateway Anti-Block
            </a>

            <a href="{{ route('school-settings.index') }}" 
                class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all {{ request()->routeIs('school-settings.*') ? 'bg-sky-600 text-white font-semibold shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                Pengaturan Sekolah
            </a>
            @endcan
        </nav>

        <!-- User Profile Footer -->
        <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-slate-800 bg-slate-900/50">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3 overflow-hidden">
                    <div class="w-9 h-9 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold text-sky-400 border border-slate-600 flex-shrink-0">
                        {{ strtoupper(substr(auth()->user()?->name ?? 'A', 0, 2)) }}
                    </div>
                    <div class="truncate">
                        <p class="text-xs font-semibold text-white truncate">{{ auth()->user()?->name }}</p>
                        <p class="text-[10px] text-slate-400 truncate capitalize">{{ auth()->user()?->role?->label }}</p>
                    </div>
                </div>

                <!-- Logout Button Form -->
                <form action="{{ route('logout') }}" method="POST">
                    @csrf
                    <button type="submit" title="Logout" class="p-2 text-slate-400 hover:text-rose-400 transition-colors rounded-lg hover:bg-slate-800">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
                    </button>
                </form>
            </div>
        </div>
    </aside>

    <!-- Main Content Area -->
    <div class="flex-1 md:ml-64 flex flex-col min-h-screen">
        
        <!-- Header -->
        <header class="h-16 bg-slate-900/80 backdrop-blur border-b border-slate-800 sticky top-0 z-30 px-6 flex items-center justify-between">
            <div class="flex items-center gap-4">
                <button @click="sidebarOpen = !sidebarOpen" class="md:hidden text-slate-400 hover:text-white">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                </button>
                <livewire:header-global-search />
            </div>

            <div class="flex items-center gap-3">
                <a href="{{ route('help.guide') }}" class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-sky-400 text-xs font-semibold transition-colors flex items-center gap-1.5 border border-slate-700/50">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    <span>Panduan Bantuan</span>
                </a>
                <span class="text-xs text-slate-400 font-mono">{{ now()->translatedFormat('l, d F Y') }}</span>
                <livewire:notifications.header-notification-dropdown />
            </div>
        </header>

        <!-- Main Body -->
        <main class="flex-1 p-6">
            
            <!-- Hidden element to pass PHP session flash to Livewire morphs -->
            <div id="session-toast-data" 
                data-type="{{ session('toast.type') ?? (session('success') ? 'success' : (session('error') ? 'error' : (session('warning') ? 'warning' : (session('info') ? 'info' : '')))) }}"
                data-message="{{ session('toast.message') ?? session('success') ?? session('error') ?? session('warning') ?? session('info') ?? '' }}"
                style="display:none;"></div>

            <!-- Visual Toast Notification Container -->
            @if(session('toast') || session('success') || session('error'))
                <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)" 
                    class="mb-6 p-4 rounded-xl shadow-lg border flex items-center justify-between transition-all duration-300
                    {{ (session('toast.type') == 'success' || session('success')) ? 'bg-emerald-950/80 border-emerald-500/40 text-emerald-300' : '' }}
                    {{ (session('toast.type') == 'error' || session('error')) ? 'bg-rose-950/80 border-rose-500/40 text-rose-300' : '' }}
                    {{ (session('toast.type') == 'info' || session('info')) ? 'bg-sky-950/80 border-sky-500/40 text-sky-300' : '' }}">
                    <div class="flex items-center gap-3 text-sm font-medium">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <span>{{ session('toast.message') ?? session('success') ?? session('error') }}</span>
                    </div>
                    <button @click="show = false" class="text-slate-400 hover:text-white">&times;</button>
                </div>
            @endif

            {{ $slot }}
        </main>
    </div>

    <!-- SweetAlert2 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        .swal2-popup-dark {
            background-color: #0f172a !important;
            border: 1px solid #334155 !important;
            border-radius: 1.25rem !important;
            color: #f8fafc !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
        }
        .swal2-title-dark {
            color: #ffffff !important;
            font-size: 1.125rem !important;
            font-weight: 700 !important;
        }
        .swal2-html-dark {
            color: #94a3b8 !important;
            font-size: 0.875rem !important;
        }
        .swal2-toast-dark {
            background-color: #0f172a !important;
            border: 1px solid #334155 !important;
            border-radius: 1rem !important;
            color: #f8fafc !important;
        }
    </style>

    @livewireScripts

    <!-- Global SweetAlert2 Handler Scripts -->
    <script>
        // Custom Swal Toast Mixin
        const SwalToast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 4000,
            timerProgressBar: true,
            customClass: {
                popup: 'swal2-toast-dark',
                title: 'swal2-title-dark'
            },
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer);
                toast.addEventListener('mouseleave', Swal.resumeTimer);
            }
        });

        // Global Toast Trigger Function
        window.showToast = function(type = 'success', message = '') {
            if (!message || message.trim() === '') return;
            let icon = 'success';
            if (type === 'error' || type === 'danger') icon = 'error';
            if (type === 'warning') icon = 'warning';
            if (type === 'info') icon = 'info';

            SwalToast.fire({
                icon: icon,
                title: message
            });
        };

        // Global Confirmation Dialog Helper
        window.confirmAction = function(options = {}) {
            const title = options.title || 'Apakah Anda Yakin?';
            const text = options.text || 'Tindakan ini tidak dapat dibatalkan.';
            const icon = options.icon || 'warning';
            const confirmButtonText = options.confirmButtonText || 'Ya, Lanjutkan!';
            const cancelButtonText = options.cancelButtonText || 'Batal';
            const confirmButtonColor = options.confirmButtonColor || '#e11d48';

            return Swal.fire({
                title: title,
                text: text,
                icon: icon,
                showCancelButton: true,
                confirmButtonColor: confirmButtonColor,
                cancelButtonColor: '#334155',
                confirmButtonText: confirmButtonText,
                cancelButtonText: cancelButtonText,
                customClass: {
                    popup: 'swal2-popup-dark',
                    title: 'swal2-title-dark',
                    htmlContainer: 'swal2-html-dark'
                }
            });
        };

        function checkAndShowToast() {
            const el = document.getElementById('session-toast-data');
            if (el) {
                const type = el.getAttribute('data-type');
                const message = el.getAttribute('data-message');
                if (message && message.trim() !== '') {
                    window.showToast(type || 'success', message);
                    el.setAttribute('data-message', '');
                }
            }
        }

        // Listen for Events & Livewire Commits
        document.addEventListener('DOMContentLoaded', () => {
            checkAndShowToast();

            // Native window listener for Livewire 3 dispatches (e.g. $this->dispatch('toast', type: '...', message: '...'))
            window.addEventListener('toast', event => {
                const detail = event.detail[0] || event.detail;
                window.showToast(detail.type || 'success', detail.message || '');
            });

            window.addEventListener('swal:toast', event => {
                const detail = event.detail[0] || event.detail;
                window.showToast(detail.type || 'success', detail.message || '');
            });

            window.addEventListener('swal:confirm', event => {
                const detail = event.detail[0] || event.detail;
                window.confirmAction({
                    title: detail.title,
                    text: detail.text,
                    icon: detail.icon || 'warning',
                    confirmButtonText: detail.confirmButtonText || 'Ya, Lanjutkan',
                    confirmButtonColor: detail.confirmButtonColor || '#e11d48'
                }).then((result) => {
                    if (result.isConfirmed && detail.componentId && detail.method) {
                        Livewire.find(detail.componentId).call(detail.method, ...(detail.params || []));
                    }
                });
            });

            if (typeof Livewire !== 'undefined') {
                Livewire.hook('commit', ({ succeed }) => {
                    succeed(() => {
                        queueMicrotask(() => {
                            checkAndShowToast();
                        });
                    });
                });
            }
        });
    </script>
</body>
</html>
