<!DOCTYPE html>
<html class="light" lang="id" x-data="{ sidebarOpen: false }">

<head>
    <meta charset="utf-8" />
    <meta content="width=1280" name="viewport" id="viewport-meta" />
    <title>My Laundry - Management System</title>
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/app_icon.png?v=2" />
    <link rel="shortcut icon" href="/favicon.ico?v=2" />
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
    @livewireStyles
    <script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#13a4ec",
                        "background-light": "#f6f7f8",
                        "background-dark": "#101c22",
                    },
                    fontFamily: {
                        "display": ["Inter"]
                    },
                },
            },
        }
    </script>
    <style type="text/css">
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        body {
            font-family: 'Inter', sans-serif;
        }

        .page-title {
            color: #111618;
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: -0.025em;
        }

        .dark .page-title {
            color: white;
        }

        [x-cloak] {
            display: none !important;
        }

        /* Tampilkan overlay hanya di perangkat mobile (max-device-width: 1024px) DAN saat posisi Berdiri (Portrait) */
        @media screen and (max-device-width: 1024px) and (orientation: portrait) {
            #rotate-device-overlay {
                display: flex !important;
            }
            .main-content-wrapper {
                display: none !important;
            }
        }
    </style>

</head>

<body class="bg-background-light dark:bg-background-dark font-display text-[#111618] dark:text-white">
    
    @if(session('success'))
        <div id="success-notification" 
             class="fixed top-5 right-5 z-[100] min-w-[300px] max-w-md transform transition-all duration-500 ease-in-out translate-x-full">
            <div class="bg-white dark:bg-[#1e293b] border-l-4 border-emerald-500 shadow-2xl rounded-xl p-4 flex items-center justify-between gap-4">
                <div class="flex items-center gap-3">
                    <div class="bg-emerald-100 dark:bg-emerald-500/20 p-2 rounded-full text-emerald-600 dark:text-emerald-400">
                        <span class="material-symbols-outlined text-xl">check_circle</span>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Berhasil</p>
                        <p class="text-sm font-medium text-slate-700 dark:text-slate-200">{{ session('success') }}</p>
                    </div>
                </div>
                <button onclick="hideNotification()" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
                    <span class="material-symbols-outlined text-sm">close</span>
                </button>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div id="error-notification" 
             class="fixed top-5 right-5 z-[100] min-w-[300px] max-w-md transform transition-all duration-500 ease-in-out translate-x-full">
            <div class="bg-white dark:bg-[#1e293b] border-l-4 border-red-500 shadow-2xl rounded-xl p-4 flex items-center justify-between gap-4">
                <div class="flex items-center gap-3">
                    <div class="bg-red-100 dark:bg-red-500/20 p-2 rounded-full text-red-600 dark:text-red-400">
                        <span class="material-symbols-outlined text-xl">error</span>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Gagal</p>
                        <p class="text-sm font-medium text-slate-700 dark:text-slate-200">{{ session('error') }}</p>
                    </div>
                </div>
                <button onclick="hideErrorNotification()" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
                    <span class="material-symbols-outlined text-sm">close</span>
                </button>
            </div>
        </div>
    @endif
    
    {{-- OVERLAY PUTAR LAYAR --}}
    <div id="rotate-device-overlay" class="fixed inset-0 z-[9999] bg-slate-900 hidden flex-col items-center justify-center text-center p-6 text-white">
        <span class="material-symbols-outlined text-primary mb-10 animate-pulse" style="font-size: 150px; transform: rotate(-90deg);">screen_rotation</span>
        <h2 class="text-5xl font-black mb-6 tracking-tighter leading-tight">Putar Layar<br>HP Anda</h2>
        <p class="text-slate-300 text-xl font-medium leading-relaxed max-w-md">
            Aplikasi Dashboard ini dirancang untuk layar lebar. Mohon aktifkan Rotasi Layar dan posisikan HP Anda secara <br>
            <strong class="text-white text-3xl mt-4 block uppercase tracking-widest bg-primary/20 p-4 rounded-2xl border border-primary/50">Horizontal (Lanskap)</strong>
        </p>
    </div>

    <div class="flex h-screen overflow-hidden main-content-wrapper">

        <div x-show="sidebarOpen" @click="sidebarOpen = false" class="fixed inset-0 z-20 bg-black/50 lg:hidden" x-cloak></div>

        <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
            class="fixed inset-y-0 left-0 z-30 w-64 -translate-x-full bg-white dark:bg-[#1a262e] border-r border-[#dbe2e6] dark:border-[#2a3a44] transition-transform duration-300 lg:static lg:translate-x-0 flex flex-col flex-shrink-0">
            <div class="p-6 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <img src="/app_icon.png" class="w-8 h-8 rounded-lg" alt="Logo" />
                    <div>
                        <h1 class="text-[#111618] dark:text-white text-lg font-bold leading-tight uppercase italic">My Laundry</h1>
                        <p class="text-[#617c89] dark:text-[#a0b4be] text-xs font-medium">Manajemen Sistem</p>
                    </div>
                </div>
                <button @click="sidebarOpen = false" class="lg:hidden">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <nav class="flex-1 flex flex-col gap-2 px-3 overflow-y-auto">
                <a class="flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all duration-200 {{ request()->routeIs('dashboard') || request()->routeIs('orders.*') || request()->is('orders*') ? 'bg-primary/10 text-primary font-bold' : 'text-[#617c89] dark:text-[#a0b4be] hover:bg-gray-100 dark:hover:bg-[#2a3a44] hover:text-[#111618] dark:hover:text-white' }}"
                    href="{{ route('dashboard') }}">
                    <span class="material-symbols-outlined {{ request()->routeIs('dashboard') || request()->routeIs('orders.*') || request()->is('orders*') ? 'fill-[1]' : '' }}">home</span>
                    <span class="text-sm font-semibold">Beranda</span>
                </a>

                <a class="flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all duration-200 
    {{ (request()->routeIs('laundry.*') || request()->is('laundry*')) ? 'bg-primary/10 text-primary font-bold' : 'text-[#617c89] dark:text-[#a0b4be] hover:bg-gray-100 dark:hover:bg-[#2a3a44] hover:text-[#111618] dark:hover:text-white' }}"
                    href="{{ route('laundry') }}">

                    <span class="material-symbols-outlined {{ (request()->routeIs('laundry.*') || request()->is('laundry*')) ? 'fill-[1]' : '' }}">
                        local_laundry_service
                    </span>
                    <span class="text-sm font-semibold">Laundry</span>
                </a>

                <a class="flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all duration-200 
    {{ request()->routeIs('reports.*') ? 'bg-primary/10 text-primary font-bold' : 'text-[#617c89] dark:text-[#a0b4be] hover:bg-gray-100 dark:hover:bg-[#2a3a44]' }}"
                    href="{{ route('reports.index') }}"> {{-- Sesuaikan dengan nama rute di web.php --}}
                    <span class="material-symbols-outlined {{ request()->routeIs('reports.*') ? 'fill-[1]' : '' }}">description</span>
                    <p class="text-sm font-semibold">Laporan</p>
                </a>

                <a class="flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all duration-200 
    {{ request()->routeIs('settings') || request()->is('staff*') ? 'bg-primary/10 text-primary font-bold' : 'text-[#617c89] dark:text-[#a0b4be] hover:bg-gray-100 dark:hover:bg-[#2a3a44] hover:text-[#111618] dark:hover:text-white' }}"
                    href="{{ route('settings') }}">

                    <span class="material-symbols-outlined {{ request()->routeIs('settings') || request()->is('staff*') ? 'fill-[1]' : '' }}">
                        settings
                    </span>
                    <span class="text-sm font-semibold">Pengaturan</span>
                </a>
            </nav>
            <div class="p-4 border-t border-[#dbe2e6] dark:border-[#2a3a44] mt-auto">
                <div class="flex items-center gap-3 px-2 py-2">
                    <div class="relative flex-shrink-0">
                        <div class="size-11 rounded-full bg-slate-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden border-2 border-white dark:border-[#1a262e] shadow-sm">
                            <span class="material-symbols-outlined text-slate-500 dark:text-slate-400 text-3xl translate-y-1">
                                person
                            </span>
                        </div>
                        <div class="absolute bottom-0 right-0 size-3 bg-emerald-500 border-2 border-white dark:border-[#1a262e] rounded-full"></div>
                    </div>

                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-bold text-slate-900 dark:text-white truncate">
                            {{ Auth::user()->name }}
                        </p>
                        <p class="text-[11px] font-medium text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
                            <span class="size-1.5 bg-emerald-500 rounded-full"></span>
                            {{ ucfirst(Auth::user()->role) }}
                        </p>
                    </div>
                </div>
            </div>
        </aside>

        <main class="flex-1 flex flex-col overflow-y-auto min-w-0">
            <header class="flex items-center justify-between p-4 bg-white dark:bg-[#1a262e] border-b lg:hidden">
                <button @click="sidebarOpen = true">
                    <span class="material-symbols-outlined text-[#111618] dark:text-white">menu</span>
                </button>
                <div class="flex items-center gap-2">
                    <img src="/app_icon.png" class="w-6 h-6 rounded-md" alt="Logo" />
                    <span class="font-bold italic text-primary">My LAUNDRY</span>
                </div>

                <div class="w-8"></div>
            </header>

            <div class="p-3 md:p-8 space-y-4 md:space-y-8">
                {{ $slot }}
            </div>
        </main>
    </div>
    <script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipS96atlyCDuWbbxSU7shM7E38jE8V31TJuBdrLqLdAVf0z3vE171ZNe"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @livewireScripts
    <script>
        // Mencegah akses kembali ke halaman dashboard setelah logout menggunakan navigasi browser (back/forward/swipe)
        window.addEventListener('pageshow', function(event) {
            if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
                window.location.reload();
            }
        });

        // Logic Notifikasi Mengapung
        const successNotification = document.getElementById('success-notification');
        function hideNotification() {
            if (successNotification) {
                successNotification.classList.add('translate-x-full');
                setTimeout(() => successNotification.remove(), 500);
            }
        }
        if (successNotification) {
            setTimeout(() => { successNotification.classList.remove('translate-x-full'); }, 100);
            setTimeout(() => { hideNotification(); }, 4000);
        }

        const errorNotification = document.getElementById('error-notification');
        function hideErrorNotification() {
            if (errorNotification) {
                errorNotification.classList.add('translate-x-full');
                setTimeout(() => errorNotification.remove(), 500);
            }
        }
        if (errorNotification) {
            setTimeout(() => { errorNotification.classList.remove('translate-x-full'); }, 100);
            setTimeout(() => { hideErrorNotification(); }, 4000);
        }
    </script>
</body>

</html>