<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Admin Dashboard') | ECS</title>
    <link rel="icon" type="image/png" href="{{ asset('ecs-favicon.png') }}">
    
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Quill Editor -->
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: { primary: '#2D2B55', accent: '#3A3875', light: '#EEEDF7' }
                    }
                }
            }
        }
    </script>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
        [x-cloak] { display: none !important; }
        
        :root {
            --brand-primary: #0F172A; /* Slate 900 for Sidebar */
            --brand-accent: #38bdf8; /* Sky 400 for highlights */
        }
        .bg-brand-primary { background-color: var(--brand-accent); }
        .text-brand-primary { color: var(--brand-accent); }
        .border-brand-primary { border-color: var(--brand-accent); }
        .shadow-brand-primary\/20 { box-shadow: 0 4px 6px -1px rgba(56, 189, 248, 0.2), 0 2px 4px -1px rgba(56, 189, 248, 0.1); }
        .custom-scrollbar::-webkit-scrollbar { width: 5px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
        .custom-scrollbar:hover::-webkit-scrollbar-thumb { background: #475569; }
    </style>
    @stack('extra_head')
</head>
<body class="bg-gray-100 flex h-screen text-slate-900 overflow-hidden" x-data="{ sidebarOpen: window.innerWidth >= 1024 }">
    
    <!-- Mobile Sidebar Backdrop -->
    <div x-show="sidebarOpen" x-transition.opacity class="fixed inset-0 z-20 bg-slate-900/80 backdrop-blur-sm lg:hidden" @click="sidebarOpen = false" x-cloak></div>

    <!-- Sidebar -->
    <aside :class="sidebarOpen ? 'translate-x-0 ml-0' : '-translate-x-full lg:-ml-72'" class="fixed inset-y-0 left-0 z-40 w-72 bg-slate-900 text-white transition-all duration-300 lg:static lg:inset-0 flex flex-col shadow-2xl lg:shadow-none shrink-0">
        <!-- Sidebar Header (Brand) -->
        <div class="flex items-center justify-center h-20 border-b border-slate-800 shrink-0 bg-slate-950/20">
            <a href="{{ route('admin.dashboard') }}" class="flex items-center justify-center px-6">
                <img src="{{ asset('ecs-logo.png') }}" alt="ECS Logo" class="h-10 w-auto object-contain">
            </a>
        </div>

        <!-- Sidebar Navigation -->
        <div class="flex-1 overflow-y-auto py-6 px-4 space-y-1 custom-scrollbar">
            @php
            $user = Auth::guard('admin')->user();
            $allNavs = [
                ['route' => 'admin.dashboard', 'label' => 'Dashboard', 'match' => 'admin/dashboard*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>', 'roles' => ['superadmin', 'editor', 'viewer']],
                ['route' => 'admin.divisions.index', 'label' => 'Divisions', 'match' => 'admin/divisions*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>', 'roles' => ['superadmin', 'editor']],
                ['route' => 'admin.portfolio.index', 'label' => 'Portfolio', 'match' => 'admin/portfolio*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>', 'roles' => ['superadmin', 'editor']],
                ['route' => 'admin.team.index', 'label' => 'Team', 'match' => 'admin/team*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>', 'roles' => ['superadmin', 'editor', 'hr']],
                ['route' => 'admin.testimonials.index', 'label' => 'Testimonials', 'match' => 'admin/testimonials*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>', 'roles' => ['superadmin', 'editor']],
                ['route' => 'admin.messages.index', 'label' => 'Messages', 'match' => 'admin/messages*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>', 'roles' => ['superadmin', 'editor', 'viewer', 'manager']],
                ['route' => 'admin.posts.index', 'label' => 'Blog / News', 'match' => 'admin/posts*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>', 'roles' => ['superadmin', 'editor', 'manager']],
                ['route' => 'admin.media.index', 'label' => 'Media Library', 'match' => 'admin/media*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>', 'roles' => ['superadmin', 'editor', 'viewer']],
                ['route' => 'admin.hero-slides.index', 'label' => 'Hero Slides', 'match' => 'admin/hero-slides*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>', 'roles' => ['superadmin', 'editor']],
                ['route' => 'admin.partners.index', 'label' => 'Partners', 'match' => 'admin/partners*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>', 'roles' => ['superadmin', 'editor', 'hr']],
                ['route' => 'admin.faqs.index', 'label' => 'FAQs', 'match' => 'admin/faqs*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>', 'roles' => ['superadmin', 'editor', 'manager']],
                ['route' => 'admin.seo.index', 'label' => 'SEO Management', 'match' => 'admin/seo*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>', 'roles' => ['superadmin']],
                ['route' => 'admin.settings.index', 'label' => 'Site Settings', 'match' => 'admin/settings*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>', 'roles' => ['superadmin']],
                ['route' => 'admin.users.index', 'label' => 'Admins', 'match' => 'admin/users*', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>', 'roles' => ['superadmin']],
            ];
            @endphp

            @foreach($allNavs as $nav)
                @if(in_array($user->role, $nav['roles']))
                <a href="{{ route($nav['route']) }}" 
                   class="flex items-center gap-3 px-4 py-3.5 rounded-xl font-medium transition-all group {{ request()->is($nav['match']) ? 'bg-brand-primary text-white shadow-md shadow-brand-primary/20' : 'text-slate-400 hover:bg-slate-800 hover:text-white' }}">
                    <svg class="w-5 h-5 shrink-0 opacity-80 group-hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        {!! $nav['icon'] !!}
                    </svg>
                    {{ $nav['label'] }}
                </a>
                @endif
            @endforeach
        </div>
        
        <!-- Sidebar Footer -->
        <div class="p-4 border-t border-slate-800">
            <a href="{{ route('home') }}" target="_blank" class="flex items-center justify-center gap-2 w-full py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white rounded-xl text-sm font-bold transition">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
                View Live Site
            </a>
        </div>
    </aside>

    <!-- Main Content Wrapper -->
    <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
        
        <!-- Top Header -->
        <header class="h-20 bg-white shadow-sm border-b border-slate-100 flex items-center justify-between px-6 lg:px-10 shrink-0 z-10 transition-all duration-300">
            <div class="flex items-center gap-4">
                <button @click="sidebarOpen = !sidebarOpen" class="text-slate-500 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-brand-primary rounded-lg p-2 transition">
                    <svg class="w-6 h-6" 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>
                <h1 class="text-xl md:text-2xl font-bold text-slate-800 capitalize hidden sm:block">
                    @yield('title', 'Dashboard')
                </h1>
            </div>

             <!-- Profile / Logout -->
             <div class="flex items-center gap-6">
                  <div class="flex items-center gap-3 pl-6 border-l border-slate-200">
                     <a href="{{ route('admin.profile.edit') }}" class="hidden md:block text-right group">
                         <p class="text-sm font-bold text-slate-700 group-hover:text-brand-accent transition-colors">{{ Auth::guard('admin')->user()->username ?? 'Admin User' }}</p>
                         <p class="text-xs text-slate-500">Administrator</p>
                     </a>
                     <a href="{{ route('admin.profile.edit') }}" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 font-bold border border-slate-200 hover:bg-brand-primary hover:text-white transition-colors hover:border-brand-primary">
                         {{ strtoupper(substr(Auth::guard('admin')->user()->username ?? 'A', 0, 1)) }}
                     </a>
                     <form method="POST" action="{{ route('admin.logout') }}" class="inline ml-2">
                         @csrf
                         <button type="submit" title="Logout" class="text-slate-400 hover:text-red-500 transition p-2 rounded-full hover:bg-red-50">
                             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
                         </button>
                     </form>
                 </div>
             </div>
        </header>

        <!-- Page Content Scrollable Area -->
        <main class="flex-1 overflow-y-auto p-6 md:p-10 relative">
            
            <!-- Global Flash Messages -->
            @if (session('success'))
            <div class="mb-8" x-data="{ show: true }" x-show="show" x-transition.duration.300ms>
                <div class="p-4 rounded-xl bg-green-50 text-green-800 border-l-4 border-green-500 flex items-center justify-between shadow-sm">
                    <div class="flex items-center gap-4">
                        <div class="w-8 h-8 rounded-full bg-green-100/50 flex items-center justify-center shrink-0">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        </div>
                        <span class="font-medium">{{ session('success') }}</span>
                    </div>
                    <button @click="show = false" class="text-slate-400 hover:text-slate-600 focus:outline-none p-1 rounded-md hover:bg-slate-200/50 transition">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
            </div>
            @endif

            @if (session('error') || $errors->any())
            <div class="mb-8" x-data="{ show: true }" x-show="show" x-transition.duration.300ms>
                <div class="p-4 rounded-xl bg-red-50 text-red-800 border-l-4 border-red-500 flex items-center justify-between shadow-sm">
                    <div class="flex items-center gap-4 text-sm font-medium">
                        <div class="w-8 h-8 rounded-full bg-red-100/50 flex items-center justify-center shrink-0 mb-auto">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                        </div>
                        <div>
                            @if(session('error'))
                                <p>{{ session('error') }}</p>
                            @endif
                            @foreach ($errors->all() as $err)
                                <p>{{ $err }}</p>
                            @endforeach
                        </div>
                    </div>
                    <button @click="show = false" class="text-slate-400 hover:text-slate-600 focus:outline-none p-1 rounded-md hover:bg-slate-200/50 transition">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
            </div>
            @endif

            @yield('content')
            
        </main>
    </div>

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