<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Ekspedisi') — Elvara</title>

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

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

    <!-- 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>
        body { background: #f8fafc; }

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

        .sidebar-link:hover {
            background: #f1f5f9;
        }

        .sidebar-link.active {
            background: linear-gradient(to right,#3b82f6,#6366f1);
            color: white;
        }

        .glass {
            background: rgba(255,255,255,0.7);
            backdrop-filter: blur(10px);
        }
    </style>
</head>

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

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

    <!-- SIDEBAR -->
    <aside class="w-64 bg-white border-r border-gray-200 fixed h-full 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 text-white rounded-xl flex items-center justify-center shadow">
                    <i class="bi bi-truck"></i>
                </div>
                <h1 class="text-xl font-extrabold text-primary">
                    Elvara<span class="text-accent">Express</span>
                </h1>
            </div>

            <!-- MENU -->
            <nav class="space-y-1 flex-1 text-sm font-medium">

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

                <a href="{{ route('ekspedisi.pesanan-masuk') }}"
                   class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl {{ request()->routeIs('ekspedisi.pesanan-masuk') ? 'active' : 'text-gray-600' }}">
                    <i class="bi bi-box-seam"></i> Pesanan Masuk

                    @php $jmlMasuk = \App\Models\Pesanan::where('status','diproses')->count(); @endphp
                    @if($jmlMasuk > 0)
                        <span class="ml-auto text-xs bg-accent text-white px-2 py-0.5 rounded-full">
                            {{ $jmlMasuk }}
                        </span>
                    @endif
                </a>

                <a href="{{ route('ekspedisi.dalam-pengiriman') }}"
                   class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl {{ request()->routeIs('ekspedisi.dalam-pengiriman') ? 'active' : 'text-gray-600' }}">
                    <i class="bi bi-truck"></i> Dalam Pengiriman
                </a>

                <a href="{{ route('ekspedisi.terkirim') }}"
                   class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl {{ request()->routeIs('ekspedisi.terkirim') ? 'active' : 'text-gray-600' }}">
                    <i class="bi bi-check2-circle"></i> Terkirim
                </a>

                <div class="pt-6 text-xs text-gray-400 uppercase pl-4">Lainnya</div>

                <a href="{{ route('ekspedisi.laporan') }}"
                   class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl {{ request()->routeIs('ekspedisi.laporan') ? 'active' : 'text-gray-600' }}">
                    <i class="bi bi-bar-chart"></i> Laporan
                </a>

                <a href="{{ route('ekspedisi.profil') }}"
                   class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl {{ request()->routeIs('ekspedisi.profil*') ? 'active' : 'text-gray-600' }}">
                    <i class="bi bi-person"></i> Profil
                </a>

            </nav>

            <!-- USER -->
            <div class="pt-6 border-t border-gray-200 flex items-center gap-3">
                <div class="w-9 h-9 rounded-full bg-accent text-white flex items-center justify-center font-bold">
                    {{ strtoupper(substr(auth()->user()->name ?? 'E',0,1)) }}
                </div>
                <div class="flex-1">
                    <p class="text-sm font-semibold text-primary">{{ auth()->user()->name }}</p>
                    <p class="text-xs text-gray-400">Kurir</p>
                </div>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button class="text-gray-400 hover:text-red-500">
                        <i class="bi bi-box-arrow-right"></i>
                    </button>
                </form>
            </div>

        </div>
    </aside>

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

        <!-- NAVBAR -->
        <header class="glass border-b border-gray-200 px-8 py-4 flex items-center justify-between sticky top-0 z-40">
            <h1 class="text-lg font-bold text-primary">@yield('page-title','Dashboard')</h1>

            <div class="flex items-center gap-4">

                <!-- NOTIF -->
                <div class="relative">
                    <button class="p-2 rounded-full hover:bg-gray-100">
                        <i class="bi bi-bell text-gray-600"></i>
                    </button>
                </div>

                <!-- USER MINI -->
                <div class="flex items-center gap-2 bg-gray-100 px-3 py-1.5 rounded-full">
                    <span class="text-sm text-gray-600">{{ auth()->user()->name }}</span>
                </div>

            </div>
        </header>

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

    </main>
</div>

</body>
</html>