<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Painel') · Mangolê</title>
    <link rel="icon" type="image/png" href="{{ asset('images/logo-mangole.png') }}">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>
        body { font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; background-color: #f1f5f9; color: #0f172a; }
        .glass { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(6px); border: 1px solid rgba(226, 232, 240, 0.95); box-shadow: 0 6px 18px rgba(2,6,23,0.06); }
        .sidebar-link { display: flex; align-items: center; padding: 0.75rem 0.95rem; border-radius: 0.85rem; transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 700; font-size: 0.875rem; color: #64748b; letter-spacing: 0.01em; white-space: nowrap; position: relative; }
        .sidebar-link:hover { background: #eef2f8; color: #00477D; padding-left: 1.2rem; transform: translateX(2px); }
        .sidebar-link.active { background: #00477D; color: white !important; box-shadow: 0 8px 20px -8px rgba(0, 71, 125, 0.35); }
        .sidebar-link.active::after { content: ''; position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #FFCC00; }
        .sidebar-link svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; transition: all 0.18s ease; }
        .sidebar-link:hover svg { opacity: 1; transform: scale(1.05); }
        .sidebar-link.active svg { stroke: white !important; opacity: 1; }
        .custom-scrollbar::-webkit-scrollbar { width: 5px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
        #sidebar { transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; }
        @media (max-width: 768px) {
            #sidebar { position: fixed; width: 16rem; transform: translateX(-100%); z-index: 50; }
            #sidebar.open { transform: translateX(0); }
            #sidebar-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; }
            #sidebar-overlay.open { opacity: 1; pointer-events: auto; }
        }
        @media (min-width: 769px) {
            #sidebar { position: relative; width: 16rem; }
            #sidebar.collapsed { width: 0; overflow: hidden; }
            #sidebar-overlay { display: none !important; }
        }
        #sidebar-inner { width: 16rem; }
    </style>
    @stack('styles')
</head>
<body class="bg-slate-50">
    <div class="h-[3px] bg-gradient-to-r from-brand via-accent to-danger shrink-0"></div>
    <div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-40" onclick="toggleSidebar()" style="display:none"></div>

    <div class="flex h-screen overflow-hidden">
        <aside id="sidebar" class="glass border-r border-slate-200 flex flex-col h-full shrink-0">
            <div id="sidebar-inner" class="flex flex-col h-full">
                <div class="p-6 flex items-center justify-between">
                    <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-2">
                        <img src="{{ asset('images/logo-mangole.png') }}" alt="Mangolê" class="h-8 w-auto">
                        <span class="text-xl font-black tracking-tight uppercase text-brand">Mangolê</span>
                    </a>
                    <button class="hidden md:flex p-1.5 rounded-lg hover:bg-slate-100 transition" onclick="toggleSidebar()" aria-label="Expandir ou recolher menu">
                        <svg class="w-5 h-5 text-slate-500" id="sidebar-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
                        </svg>
                    </button>
                </div>
                <p class="text-[9px] uppercase tracking-[0.3em] font-bold mt-0 mb-2 px-6 text-slate-400">Painel Administrativo</p>

                <nav class="flex-1 px-4 space-y-1 overflow-y-auto custom-scrollbar">
                <p class="px-4 mt-4 mb-2 text-[9px] font-bold text-slate-400 uppercase tracking-widest opacity-60 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-brand shrink-0"></span>Principal</p>

                <a href="{{ route('admin.dashboard') }}" class="sidebar-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                    <svg class="mr-3 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6" />
                    </svg>
                    Dashboard
                </a>

                @if(auth()->user()?->is_admin)
                <a href="{{ route('admin.users.index') }}" class="sidebar-link {{ request()->routeIs('admin.users.*') ? 'active' : '' }}">
                    <svg class="mr-3 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                    </svg>
                    Utilizadores
                </a>
                @endif

                <p class="px-4 mt-6 mb-2 text-[9px] font-bold text-slate-400 uppercase tracking-widest opacity-60 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-accent shrink-0"></span>Conteúdo</p>

                <a href="{{ route('admin.products.index') }}" class="sidebar-link {{ request()->routeIs('admin.products.*') ? 'active' : '' }}">
                    <svg class="mr-3 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                    </svg>
                    Produtos
                </a>

                <a href="{{ route('admin.categories.index') }}" class="sidebar-link {{ request()->routeIs('admin.categories.*') ? 'active' : '' }}">
                    <svg class="mr-3 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
                    </svg>
                    Categorias
                </a>

                <a href="{{ route('admin.stores.index') }}" class="sidebar-link {{ request()->routeIs('admin.stores.*') ? 'active' : '' }}">
                    <svg class="mr-3 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72l1.189-1.19A1.5 1.5 0 015.378 3h13.243a1.5 1.5 0 011.06.44l1.19 1.189a3 3 0 01-.621 4.72M13.5 14.25H21m-2.25 0h.008v.008H18.75v-.008z" />
                    </svg>
                    Lojas
                </a>

                <a href="{{ route('admin.campaigns.index') }}" class="sidebar-link {{ request()->routeIs('admin.campaigns.*') ? 'active' : '' }}">
                    <svg class="mr-3 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38a.477.477 0 01-.476-.002 8.18 8.18 0 01-3.448-5.302m1.723-3.251c0-1.147.125-2.266.362-3.335M18.25 12.75a.75.75 0 100-1.5.75.75 0 000 1.5z" />
                    </svg>
                    Campanhas
                </a>

                <a href="{{ route('admin.news.index') }}" class="sidebar-link {{ request()->routeIs('admin.news.*') ? 'active' : '' }}">
                    <svg class="mr-3 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" />
                    </svg>
                    Notícias
                </a>

                <a href="{{ route('admin.slides.index') }}" class="sidebar-link {{ request()->routeIs('admin.slides.*') ? 'active' : '' }}">
                    <svg class="mr-3 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.41a2.25 2.25 0 013.182 0l2.909 2.91m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5z" />
                    </svg>
                    Slides Hero
                </a>

                <p class="px-4 mt-6 mb-2 text-[9px] font-bold text-slate-400 uppercase tracking-widest opacity-60 flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-danger shrink-0"></span>Recebidos</p>

                <a href="{{ route('admin.inquiries.index') }}" class="sidebar-link {{ request()->routeIs('admin.inquiries.*') ? 'active' : '' }}">
                    <svg class="mr-3 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
                    </svg>
                    Mensagens
                </a>

                <a href="{{ route('admin.supplier-applications.index') }}" class="sidebar-link {{ request()->routeIs('admin.supplier-applications.*') ? 'active' : '' }}">
                    <svg class="mr-3 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.468 48.468 0 00-6.413-.45 48.468 48.468 0 00-6.413.45c-1.069.16-1.837 1.094-1.837 2.175v3.783c0 .652.283 1.25.75 1.661m16.5 0a2.18 2.18 0 01-.75 1.661m0 0l-.75 1.661M3 12l.75-1.661M3 12l.75 1.661m11.25-5.572h.008v.008h-.008v-.008z" />
                    </svg>
                    Candidaturas
                </a>

                <a href="{{ route('admin.card-requests.index') }}" class="sidebar-link {{ request()->routeIs('admin.card-requests.*') ? 'active' : '' }}">
                    <svg class="mr-3 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
                    </svg>
                    Cartão Cliente
                </a>
            </nav>

            <div class="p-4 border-t border-slate-100 bg-slate-50/50">
                @auth
                <div class="flex flex-col gap-3">
                    <div class="flex items-center gap-3 px-2">
                        <div class="w-10 h-10 rounded-2xl bg-gradient-to-tr from-brand to-brand-800 flex items-center justify-center font-bold text-white text-xs shadow-lg overflow-hidden border-2 border-white">
                            {{ substr(Auth::user()->name ?? 'A', 0, 1) }}
                        </div>
                        <div class="flex flex-col overflow-hidden">
                            <span class="text-[11px] font-bold text-slate-900 truncate">{{ Auth::user()->name }}</span>
                            <span class="text-[9px] font-bold text-green-500 uppercase tracking-tighter">Sessão Ativa</span>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('admin.logout') }}">
                        @csrf
                        <button type="submit" class="w-full flex items-center justify-center gap-2 py-3 px-4 rounded-xl font-bold text-[10px] uppercase tracking-widest transition-all shadow-sm bg-white text-brand border border-brand-200 hover:bg-brand hover:text-white">
                            Sair do Painel
                        </button>
                    </form>
                </div>
                @endauth
            </div>
            </div>
        </aside>

        <main class="flex-1 flex flex-col h-full overflow-hidden">
            <header class="h-16 glass border-b border-slate-200 flex items-center justify-between px-6 lg:px-10 shrink-0">
                <div class="flex items-center gap-4">
                    <button class="p-2 rounded-lg hover:bg-slate-100 transition" onclick="toggleSidebar()" aria-label="Abrir ou fechar menu">
                        <svg class="w-6 h-6 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                    <h2 class="text-lg font-bold tracking-tight uppercase italic text-brand">Mangolê <span class="text-slate-300">Admin</span></h2>
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ now()->format('d . M . Y') }}</span>
                </div>
            </header>

            <div class="flex-1 overflow-y-auto p-6 lg:p-10 custom-scrollbar">
                @if(session('success'))
                <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-2xl">
                    <p class="text-sm font-semibold text-green-700">{{ session('success') }}</p>
                </div>
                @endif
                @if(session('error'))
                <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-2xl">
                    <p class="text-sm font-semibold text-red-700">{{ session('error') }}</p>
                </div>
                @endif
                <div class="max-w-7xl mx-auto pb-24">
                    @yield('content')
                </div>
            </div>
        </main>
    </div>

    <script>
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('sidebar-overlay');
            if (!sidebar) return;
            if (window.innerWidth < 768) {
                sidebar.classList.toggle('open');
                overlay.style.display = sidebar.classList.contains('open') ? 'block' : 'none';
            } else {
                sidebar.classList.toggle('collapsed');
            }
        }
        document.querySelectorAll('#sidebar .sidebar-link').forEach(link => {
            link.addEventListener('click', () => {
                if (window.innerWidth < 768) {
                    const sidebar = document.getElementById('sidebar');
                    const overlay = document.getElementById('sidebar-overlay');
                    if (sidebar) sidebar.classList.remove('open');
                    if (overlay) overlay.style.display = 'none';
                }
            });
        });
        window.addEventListener('resize', () => {
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('sidebar-overlay');
            if (!sidebar) return;
            if (window.innerWidth >= 768) {
                sidebar.classList.remove('open');
                if (overlay) overlay.style.display = 'none';
            } else {
                sidebar.classList.remove('collapsed');
            }
        });
    </script>
    @stack('scripts')
</body>
</html>