<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Administration') — Artisanal</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: { extend: {
                fontFamily: { serif: ['Playfair Display','serif'], sans: ['Inter','sans-serif'] },
                colors: {
                    primary: { DEFAULT:'#8B5E3C', light:'#A67C5B', dark:'#6B4226' },
                    secondary: { DEFAULT:'#D4A96A', light:'#E8C99A' },
                    cream: { DEFAULT:'#FDF6EC' }
                }
            }}
        }
    </script>
    <style>
        [x-cloak] { display: none !important; }
        body { font-family: 'Inter', sans-serif; }
        .sidebar-link { transition: all 0.2s ease; }
        .sidebar-link:hover, .sidebar-link.active { background: rgba(255,255,255,0.15); border-left: 3px solid #D4A96A; padding-left: calc(1rem - 3px); }
        .sidebar-link.active { color: #E8C99A; }
    </style>
    @stack('styles')
</head>
<body class="bg-gray-50 text-gray-800 antialiased" style="font-family:'Inter',sans-serif">

<div x-data="{ sidebarOpen: false }" class="flex h-screen overflow-hidden">

    {{-- ── Sidebar ── --}}
    <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'"
           class="fixed md:relative z-40 w-64 h-full bg-gradient-to-b from-primary-dark to-primary text-white flex flex-col transition-transform duration-300 ease-in-out">

        <!-- Logo -->
        <div class="p-5 border-b border-white/10">
            <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-2">
                <div class="w-9 h-9 bg-secondary rounded-lg flex items-center justify-center">
                    <i class="fas fa-leaf text-white"></i>
                </div>
                <div>
                    <div class="font-serif font-bold text-lg leading-none">ClaupaArt</div>
                    <div class="text-xs text-white/60">Administration</div>
                </div>
            </a>
        </div>

        <!-- Navigation -->
        <nav class="flex-1 p-4 space-y-1 overflow-y-auto">
            <p class="text-xs text-white/40 uppercase tracking-wider px-3 mb-3">Menu principal</p>

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

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

            <a href="{{ route('admin.orders.index') }}"
               class="sidebar-link flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium {{ request()->routeIs('admin.orders.*') ? 'active' : '' }}">
                <i class="fas fa-shopping-cart w-4"></i> Commandes
                @php $pendingCount = \App\Models\Order::where('status','pending')->count(); @endphp
                @if($pendingCount > 0)
                <span class="ml-auto bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">{{ $pendingCount }}</span>
                @endif
            </a>

            <a href="{{ route('admin.contacts.index') }}"
               class="sidebar-link flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium {{ request()->routeIs('admin.contacts.*') ? 'active' : '' }}">
                <i class="fas fa-envelope w-4"></i> Messages
                @php $unreadCount = \App\Models\Contact::where('is_read',false)->count(); @endphp
                @if($unreadCount > 0)
                <span class="ml-auto bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">{{ $unreadCount }}</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-4 py-2.5 rounded-lg text-sm font-medium">
                    <i class="fas fa-external-link-alt w-4"></i> Voir le site
                </a>
            </div>
        </nav>

        <!-- User info -->
        <div class="p-4 border-t border-white/10">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-9 h-9 bg-secondary/30 rounded-full flex items-center justify-center">
                    <i class="fas fa-user-shield text-secondary-light"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium truncate">{{ auth()->user()->name }}</div>
                    <div class="text-xs text-white/50 truncate">Administrateur</div>
                </div>
            </div>
            <form action="{{ route('admin.logout') }}" method="POST">
                @csrf
                <button type="submit"
                        class="w-full flex items-center justify-center gap-2 text-sm text-white/70 hover:text-white py-2 hover:bg-white/10 rounded-lg transition-colors">
                    <i class="fas fa-sign-out-alt"></i> Déconnexion
                </button>
            </form>
        </div>
    </aside>

    <!-- Sidebar overlay mobile -->
    <div x-show="sidebarOpen" x-cloak @click="sidebarOpen = false"
         class="fixed inset-0 z-30 bg-black/50 md:hidden"></div>

    {{-- ── Main content ── --}}
    <div class="flex-1 flex flex-col overflow-hidden">

        <!-- Top bar -->
        <header class="bg-white shadow-sm z-20 px-4 sm:px-6 py-3 flex items-center justify-between">
            <button @click="sidebarOpen = !sidebarOpen" class="md:hidden p-2 text-gray-500 hover:text-gray-700">
                <i class="fas fa-bars text-xl"></i>
            </button>
            <div class="flex-1 md:flex-none">
                <h1 class="text-lg font-semibold text-gray-800 ml-2 md:ml-0">@yield('page-title', 'Tableau de bord')</h1>
            </div>
            <div class="flex items-center gap-3 text-sm text-gray-500">
                <i class="fas fa-calendar-alt"></i>
                <span>{{ now()->locale('fr')->isoFormat('dddd D MMMM YYYY') }}</span>
            </div>
        </header>

        <!-- Notifications flash -->
        @if(session('success'))
        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
             class="mx-4 mt-4">
            <div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-xl flex items-center gap-2 shadow-sm">
                <i class="fas fa-check-circle text-green-500"></i>
                <span class="text-sm">{{ session('success') }}</span>
                <button @click="show = false" class="ml-auto text-green-400 hover:text-green-600"><i class="fas fa-times text-xs"></i></button>
            </div>
        </div>
        @endif

        @if(session('error'))
        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
             class="mx-4 mt-4">
            <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-xl flex items-center gap-2 shadow-sm">
                <i class="fas fa-exclamation-circle text-red-500"></i>
                <span class="text-sm">{{ session('error') }}</span>
                <button @click="show = false" class="ml-auto text-red-400 hover:text-red-600"><i class="fas fa-times text-xs"></i></button>
            </div>
        </div>
        @endif

        <!-- Page content -->
        <main class="flex-1 overflow-y-auto p-4 sm:p-6">
            @yield('content')
        </main>
    </div>
</div>

@stack('scripts')
</body>
</html>
