<!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', 'ApprovalDesk') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Bootstrap Icons -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @stack('styles')
    </head>
    <body class="font-sans antialiased bg-gray-50">
        <div x-data="{ sidebarOpen: true }" class="flex h-screen bg-gray-50">
            <!-- Sidebar -->
            <aside
                :class="sidebarOpen ? 'w-64' : 'w-16'"
                class="bg-slate-900 text-slate-100 transition-all duration-300 flex flex-col fixed left-0 top-0 h-full z-40 md:relative md:z-auto"
            >
                <!-- Logo -->
                <div class="flex items-center justify-between h-16 px-4 border-b border-slate-700">
                    <span v-show="sidebarOpen" class="text-xl font-bold text-indigo-400">ApprovalDesk</span>
                    <button @click="sidebarOpen = !sidebarOpen" class="p-1 hover:bg-slate-800 rounded-lg transition">
                        <i class="bi bi-list text-lg"></i>
                    </button>
                </div>

                <!-- Navigation Links -->
                <nav class="flex-1 px-3 py-6 space-y-2">
                    <a href="{{ route('dashboard') }}"
                       :class="sidebarOpen ? 'px-4 py-2' : 'px-2 py-2 justify-center'"
                       class="flex items-center gap-3 rounded-lg hover:bg-slate-800 transition {{ request()->routeIs('dashboard') ? 'bg-indigo-600' : '' }}">
                        <i class="bi bi-house-fill flex-shrink-0"></i>
                        <span v-show="sidebarOpen" class="text-sm font-medium">Dashboard</span>
                    </a>

                    <a href="#"
                       :class="sidebarOpen ? 'px-4 py-2' : 'px-2 py-2 justify-center'"
                       class="flex items-center gap-3 rounded-lg hover:bg-slate-800 transition">
                        <i class="bi bi-ticket-perforated flex-shrink-0"></i>
                        <span v-show="sidebarOpen" class="text-sm font-medium">Tokens</span>
                    </a>

                    <a href="#"
                       :class="sidebarOpen ? 'px-4 py-2' : 'px-2 py-2 justify-center'"
                       class="flex items-center gap-3 rounded-lg hover:bg-slate-800 transition">
                        <i class="bi bi-diagram-3 flex-shrink-0"></i>
                        <span v-show="sidebarOpen" class="text-sm font-medium">Departments</span>
                    </a>

                    <a href="#"
                       :class="sidebarOpen ? 'px-4 py-2' : 'px-2 py-2 justify-center'"
                       class="flex items-center gap-3 rounded-lg hover:bg-slate-800 transition">
                        <i class="bi bi-tag flex-shrink-0"></i>
                        <span v-show="sidebarOpen" class="text-sm font-medium">Categories</span>
                    </a>

                    <a href="#"
                       :class="sidebarOpen ? 'px-4 py-2' : 'px-2 py-2 justify-center'"
                       class="flex items-center gap-3 rounded-lg hover:bg-slate-800 transition">
                        <i class="bi bi-people-fill flex-shrink-0"></i>
                        <span v-show="sidebarOpen" class="text-sm font-medium">Users</span>
                    </a>

                    <a href="#"
                       :class="sidebarOpen ? 'px-4 py-2' : 'px-2 py-2 justify-center'"
                       class="flex items-center gap-3 rounded-lg hover:bg-slate-800 transition">
                        <i class="bi bi-bell-fill flex-shrink-0"></i>
                        <span v-show="sidebarOpen" class="text-sm font-medium">Notifications</span>
                    </a>
                </nav>

                <!-- User Info -->
                <div class="border-t border-slate-700 p-3">
                    <div v-show="sidebarOpen" class="text-xs text-slate-400 truncate">
                        {{ auth()->user()->name ?? 'User' }}
                    </div>
                </div>
            </aside>

            <!-- Main Content -->
            <div class="flex flex-col flex-1 md:ml-0" :class="sidebarOpen ? 'md:ml-0' : 'md:ml-0'">
                <!-- Topbar -->
                <header class="h-16 bg-white border-b border-slate-200 shadow-sm flex items-center justify-between px-6 sticky top-0 z-30">
                    <div class="flex items-center gap-4">
                        <button @click="sidebarOpen = !sidebarOpen" class="md:hidden p-1 hover:bg-gray-100 rounded-lg transition">
                            <i class="bi bi-list text-xl"></i>
                        </button>
                        <h1 class="text-lg font-semibold text-gray-900">{{ config('app.name', 'ApprovalDesk') }}</h1>
                    </div>

                    <div class="flex items-center gap-4">
                        <!-- Notification Bell -->
                        <button class="p-2 hover:bg-gray-100 rounded-lg transition relative">
                            <i class="bi bi-bell text-xl text-gray-600"></i>
                            <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                        </button>

                        <!-- User Avatar Dropdown -->
                        <div x-data="{ userMenuOpen: false }" class="relative">
                            <button @click="userMenuOpen = !userMenuOpen" class="flex items-center gap-2 p-1 hover:bg-gray-100 rounded-lg transition">
                                <img src="https://ui-avatars.com/api/?name={{ urlencode(auth()->user()->name ?? 'User') }}"
                                     alt="User" class="w-8 h-8 rounded-full">
                            </button>

                            <div x-show="userMenuOpen"
                                 @click.outside="userMenuOpen = false"
                                 class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-slate-100 z-50">
                                <div class="px-4 py-3 border-b border-slate-100">
                                    <p class="text-sm font-medium text-gray-900">{{ auth()->user()->name ?? 'User' }}</p>
                                    <p class="text-xs text-gray-500">{{ auth()->user()->email ?? 'user@example.com' }}</p>
                                </div>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Profile</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Settings</a>
                                <hr class="border-slate-100">
                                <form method="POST" action="{{ route('logout') }}" class="block">
                                    @csrf
                                    <button type="submit" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-50">
                                        Logout
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </header>

                <!-- Page Content -->
                <main class="flex-1 p-6 overflow-y-auto">
                    {{ $slot }}
                </main>
            </div>
        </div>

        <!-- Alpine.js -->
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
        @stack('scripts')
    </body>
</html>
