<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Tailwind -->
    <script src="https://cdn.tailwindcss.com"></script>

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

    <!-- Font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        primary: '#0f172a',
                        secondary: '#64748b',
                        accent: '#3b82f6',
                        accentDark: '#2563eb',
                    }
                }
            }
        }
    </script>

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

        body {
            background: #f8fafc;
        }

        .sidebar-link {
            transition: all 0.25s ease;
        }

        .sidebar-link:hover {
            background: rgba(255,255,255,0.08);
        }

        .sidebar-link.active {
            background: linear-gradient(to right, #3b82f6, #6366f1);
            color: white;
            box-shadow: 0 10px 15px -3px rgba(59,130,246,0.3);
        }

        .glass {
            background: rgba(255,255,255,0.7);
            backdrop-filter: blur(10px);
        }

        .card-hover:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.08);
        }
    </style>
</head>

<body class="font-sans text-gray-800 antialiased">

<div class="flex min-h-screen">

    <!-- SIDEBAR -->
    <aside class="w-64 bg-primary text-white fixed h-full shadow-xl z-50">

        <div class="p-6 flex flex-col h-full">

            <!-- LOGO -->
            <div class="flex items-center gap-3 mb-8">
                <div class="w-10 h-10 bg-accent rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/30">
                    <i class="bi bi-bag-heart-fill"></i>
                </div>
                <h1 class="text-xl font-extrabold tracking-tight">
                    Elvara<span class="text-accent">Admin</span>
                </h1>
            </div>

            <!-- MENU -->
            <nav class="space-y-1 flex-1">

                <a class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300 {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}"
                   href="{{ route('admin.dashboard') }}">
                    <i class="bi bi-speedometer2"></i>
                    Dashboard
                </a>

                <div class="pt-6 pb-2 text-xs text-gray-400 uppercase tracking-wider pl-4">
                    Master
                </div>

                <a class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300 {{ request()->routeIs('kategoris.*') ? 'active' : '' }}"
                   href="{{ route('kategoris.index') }}">
                    <i class="bi bi-folder2-open"></i>
                    Kategori
                </a>

                <a class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300 {{ request()->routeIs('produks.*') ? 'active' : '' }}"
                   href="{{ route('produks.index') }}">
                    <i class="bi bi-box-seam"></i>
                    Produk
                </a>

                <a class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300 {{ request()->routeIs('admin.stock_logs.*') ? 'active' : '' }}"
                   href="{{ route('admin.stock_logs.index') }}">
                    <i class="bi bi-clock-history"></i>
                    Stok
                </a>

                <a class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300 {{ request()->routeIs('users.*') ? 'active' : '' }}"
                   href="{{ route('users.index') }}">
                    <i class="bi bi-people"></i>
                    User
                </a>

                <div class="pt-6 pb-2 text-xs text-gray-400 uppercase tracking-wider pl-4">
                    Transaksi
                </div>

                <a class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300 {{ request()->routeIs('pesanans.*') ? 'active' : '' }}"
                   href="{{ route('pesanans.index') }}">
                    <i class="bi bi-cart-check"></i>
                    Pesanan
                </a>
            </nav>

            <!-- LOGOUT -->
            <form action="{{ route('logout') }}" method="POST">
                @csrf
                <button class="w-full mt-6 py-3 rounded-xl bg-white/10 hover:bg-red-500/20 text-red-300 hover:text-red-200 transition font-medium">
                    Logout
                </button>
            </form>

        </div>
    </aside>

    <!-- MAIN -->
    <main class="flex-1 ml-64">

        <!-- NAVBAR -->
        <header class="glass sticky top-0 z-40 border-b border-gray-200">
            <div class="flex justify-between items-center px-8 py-4">

                <h1 class="text-lg font-bold text-primary">
                    @yield('title')
                </h1>

                @auth
                <div class="flex items-center gap-5">

                    <!-- NOTIF -->
                    <div x-data="{ open: false }" class="relative">
                        <button @click="open = !open" class="p-2 rounded-full hover:bg-gray-100">
                            <i class="bi bi-bell text-gray-600"></i>
                        </button>

                        <div x-show="open" @click.away="open = false" x-cloak
                             class="absolute right-0 mt-3 w-80 bg-white rounded-xl shadow-xl border">

                            <div class="p-4 text-sm text-gray-500 text-center">
                                Notifikasi
                            </div>

                        </div>
                    </div>

                    <!-- USER -->
                    <div class="flex items-center gap-3 bg-gray-100 px-4 py-2 rounded-full">
                        <div class="w-8 h-8 bg-accent text-white rounded-full flex items-center justify-center text-sm font-bold">
                            {{ substr(auth()->user()->nama, 0, 1) }}
                        </div>
                        <span class="text-sm text-gray-600">
                            {{ auth()->user()->nama }}
                        </span>
                    </div>

                </div>
                @endauth
            </div>
        </header>

        <!-- CONTENT -->
        <div class="p-8">
            @yield('content')
        </div>

    </main>
</div>

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

</body>
</html>