<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin — @yield('title', 'Dashboard') | AdamService</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        body { font-family: 'Inter', sans-serif; }
        .sidebar-link { transition: all .15s; }
        .sidebar-link:hover, .sidebar-link.active { background: rgba(255,255,255,.12); color: #fff; }
        .sidebar-link.active { border-left: 3px solid #f59e0b; }
    </style>
    @stack('styles')
</head>
<body class="bg-gray-100 min-h-screen" x-data="{ sidebarOpen: false }">

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

    {{-- Sidebar --}}
    <aside class="fixed inset-y-0 left-0 z-50 w-64 bg-gradient-to-b from-gray-900 to-blue-950 text-gray-300 flex flex-col transition-transform duration-300
                  {{ '' }} lg:translate-x-0"
           :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'">

        {{-- Logo --}}
        <div class="flex items-center gap-3 px-5 py-5 border-b border-white/10">
            <div class="w-9 h-9 bg-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
                <i class="fas fa-mobile-alt text-white text-sm"></i>
            </div>
            <div>
                <p class="text-white font-bold text-sm leading-tight">Adam<span class="text-amber-400">Service</span></p>
                <p class="text-gray-400 text-xs">Administration</p>
            </div>
            <button @click="sidebarOpen = false" class="ml-auto lg:hidden text-gray-400 hover:text-white">
                <i class="fas fa-times"></i>
            </button>
        </div>

        {{-- Admin Info --}}
        <div class="px-5 py-4 border-b border-white/10">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 bg-amber-400 rounded-full flex items-center justify-center">
                    <i class="fas fa-user text-amber-900 text-sm"></i>
                </div>
                <div class="min-w-0">
                    <p class="text-white text-sm font-medium truncate">{{ session('admin_name', 'Admin') }}</p>
                    <p class="text-gray-400 text-xs truncate">{{ session('admin_email', '') }}</p>
                </div>
            </div>
        </div>

        {{-- Navigation --}}
        <nav class="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto">
            <p class="text-gray-500 text-xs uppercase tracking-wider px-3 py-2 font-semibold">Principal</p>

            <a href="{{ route('admin.dashboard') }}" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                <i class="fas fa-tachometer-alt w-4 text-center"></i> Tableau de bord
            </a>

            <p class="text-gray-500 text-xs uppercase tracking-wider px-3 py-2 pt-4 font-semibold">Catalogue</p>

            <a href="{{ route('admin.categories.index') }}" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm {{ request()->routeIs('admin.categories*') ? 'active' : '' }}">
                <i class="fas fa-tags w-4 text-center"></i> Catégories
            </a>
            <a href="{{ route('admin.produits.index') }}" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm {{ request()->routeIs('admin.produits*') ? 'active' : '' }}">
                <i class="fas fa-box w-4 text-center"></i> Produits
            </a>

            <p class="text-gray-500 text-xs uppercase tracking-wider px-3 py-2 pt-4 font-semibold">Gestion</p>

            <a href="{{ route('admin.orders.index') }}" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm {{ request()->routeIs('admin.orders*') ? 'active' : '' }}">
                <i class="fas fa-shopping-bag w-4 text-center"></i> Commandes
                @php $pendingOrders = \App\Models\Order::where('status','pending')->count(); @endphp
                @if($pendingOrders > 0)
                    <span class="ml-auto bg-amber-400 text-amber-900 text-xs font-bold px-1.5 py-0.5 rounded-full">{{ $pendingOrders }}</span>
                @endif
            </a>
            <a href="{{ route('admin.promotions.index') }}" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm {{ request()->routeIs('admin.promotions*') ? 'active' : '' }}">
                <i class="fas fa-tag w-4 text-center"></i> Offres Spéciales
            </a>
            <a href="{{ route('admin.messages.index') }}" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm {{ request()->routeIs('admin.messages*') ? 'active' : '' }}">
                <i class="fas fa-envelope w-4 text-center"></i> Messages
                @php $unreadMessages = \App\Models\Message::where('is_read',false)->count(); @endphp
                @if($unreadMessages > 0)
                    <span class="ml-auto bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded-full">{{ $unreadMessages }}</span>
                @endif
            </a>

            <div class="pt-4 border-t border-white/10 mt-4">
                <a href="{{ route('home') }}" target="_blank" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm">
                    <i class="fas fa-external-link-alt w-4 text-center"></i> Voir le site
                </a>
                <form action="{{ route('admin.logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="sidebar-link w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-red-400 hover:text-red-300 hover:bg-red-900/20">
                        <i class="fas fa-sign-out-alt w-4 text-center"></i> Déconnexion
                    </button>
                </form>
            </div>
        </nav>
    </aside>

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

    {{-- Main --}}
    <div class="flex-1 lg:ml-64 flex flex-col min-h-screen">

        {{-- Top Bar --}}
        <header class="bg-white border-b border-gray-200 px-4 sm:px-6 py-3 flex items-center justify-between sticky top-0 z-30">
            <button @click="sidebarOpen = true" class="lg:hidden text-gray-500 hover:text-gray-700 p-1">
                <i class="fas fa-bars text-xl"></i>
            </button>
            <h1 class="text-base font-semibold text-gray-800 ml-2 lg:ml-0">@yield('title', 'Tableau de bord')</h1>
            <div class="flex items-center gap-3 text-sm text-gray-500">
                <span class="hidden sm:block">{{ date('d/m/Y') }}</span>
                <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-user text-blue-600 text-xs"></i>
                </div>
            </div>
        </header>

        {{-- Flash --}}
        @if(session('success'))
        <div class="mx-4 sm:mx-6 mt-4" x-data="{ show: true }" x-show="show">
            <div class="bg-green-50 border border-green-200 text-green-800 rounded-lg px-4 py-3 flex items-center justify-between text-sm">
                <span><i class="fas fa-check-circle mr-2"></i>{{ session('success') }}</span>
                <button @click="show = false"><i class="fas fa-times text-green-500"></i></button>
            </div>
        </div>
        @endif
        @if(session('error'))
        <div class="mx-4 sm:mx-6 mt-4" x-data="{ show: true }" x-show="show">
            <div class="bg-red-50 border border-red-200 text-red-800 rounded-lg px-4 py-3 flex items-center justify-between text-sm">
                <span><i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}</span>
                <button @click="show = false"><i class="fas fa-times text-red-500"></i></button>
            </div>
        </div>
        @endif

        {{-- Content --}}
        <main class="flex-1 p-4 sm:p-6">
            @yield('content')
        </main>

        <footer class="text-center text-xs text-gray-400 py-4 border-t border-gray-200">
            &copy; {{ date('Y') }} AdamService Admin
        </footer>
    </div>
</div>

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
@stack('scripts')
</body>
</html>
