<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<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') - Admin Panel</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
    
    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    
    <!-- Feather Icons -->
    <script src="https://unpkg.com/feather-icons"></script>

    <!-- Alpine Plugins -->
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>

    <style>
        body { font-family: 'Inter', sans-serif; }
        .font-serif { font-family: 'Playfair Display', serif; }
        [x-cloak] { display: none !important; }
        
        /* Scrollbar styles for the sidebar */
        .sidebar-scroll::-webkit-scrollbar {
            width: 4px;
        }
        .sidebar-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        .sidebar-scroll::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 antialiased" x-data="{ sidebarOpen: false }">

    <!-- Flash Messages -->
    @if (session('success'))
        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)" 
             class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-xl shadow-lg z-50 flex items-center gap-3">
            <i data-feather="check-circle" class="w-5 h-5"></i>
            {{ session('success') }}
        </div>
    @endif
    @if (session('error'))
        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)" 
             class="fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-xl shadow-lg z-50 flex items-center gap-3">
            <i data-feather="alert-circle" class="w-5 h-5"></i>
            {{ session('error') }}
        </div>
    @endif

    <div class="flex h-screen overflow-hidden">
        
        <!-- Sidebar -->
        <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" 
               class="fixed inset-y-0 left-0 z-50 w-64 bg-[#0c2340] text-white transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0 flex flex-col shadow-2xl">
            
            <!-- Sidebar Header -->
            <div class="flex items-center justify-between h-20 px-6 bg-[#0c2340] border-b border-white/10 shrink-0">
                <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-3">
                    @if($siteLogo)
                        <img src="{{ asset('storage/' . $siteLogo) }}" 
                             alt="Logo" 
                             class="h-9 w-auto max-w-[140px] object-contain brightness-0 invert"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                        <div class="w-8 h-8 rounded-lg bg-[#c9a84c] items-center justify-center text-[#0c2340] hidden">
                            <i data-feather="compass" class="w-5 h-5"></i>
                        </div>
                    @else
                        <div class="w-8 h-8 rounded-lg bg-[#c9a84c] flex items-center justify-center text-[#0c2340]">
                            <i data-feather="compass" class="w-5 h-5"></i>
                        </div>
                        <span class="font-serif text-xl font-bold tracking-wide">Tourism Admin</span>
                    @endif
                </a>
                <button @click="sidebarOpen = false" class="lg:hidden text-white/70 hover:text-white">
                    <i data-feather="x" class="w-5 h-5"></i>
                </button>
            </div>
            
            <!-- Sidebar Navigation -->
            <nav class="flex-1 px-4 py-6 space-y-1 overflow-y-auto sidebar-scroll">
                
                <a href="{{ route('admin.dashboard') }}" 
                   class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors
                          {{ request()->routeIs('admin.dashboard') ? 'bg-[#c9a84c] text-[#0c2340]' : 'text-white/70 hover:bg-white/10 hover:text-white' }}">
                    <i data-feather="grid" class="w-5 h-5"></i>
                    Dashboard
                </a>

                <div class="pt-4 pb-2">
                    <p class="px-4 text-xs font-semibold text-white/40 uppercase tracking-wider">Management</p>
                </div>
                
                <a href="{{ route('admin.packages') }}" 
                   class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors
                          {{ request()->routeIs('admin.packages*') ? 'bg-[#c9a84c] text-[#0c2340]' : 'text-white/70 hover:bg-white/10 hover:text-white' }}">
                    <i data-feather="map" class="w-5 h-5"></i>
                    Packages
                </a>
                
                <a href="{{ route('admin.bookings') }}" 
                   class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors
                          {{ request()->routeIs('admin.bookings*') ? 'bg-[#c9a84c] text-[#0c2340]' : 'text-white/70 hover:bg-white/10 hover:text-white' }}">
                    <i data-feather="calendar" class="w-5 h-5"></i>
                    Bookings
                </a>
                
                <a href="{{ route('admin.payments') }}" 
                   class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors
                          {{ request()->routeIs('admin.payments*') ? 'bg-[#c9a84c] text-[#0c2340]' : 'text-white/70 hover:bg-white/10 hover:text-white' }}">
                    <i data-feather="dollar-sign" class="w-5 h-5"></i>
                    Payments
                </a>
                
                <div class="pt-4 pb-2">
                    <p class="px-4 text-xs font-semibold text-white/40 uppercase tracking-wider">Content</p>
                </div>

                <a href="{{ route('admin.banners') }}" 
                   class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors
                          {{ request()->routeIs('admin.banners*') ? 'bg-[#c9a84c] text-[#0c2340]' : 'text-white/70 hover:bg-white/10 hover:text-white' }}">
                    <i data-feather="image" class="w-5 h-5"></i>
                    Banners
                </a>

                <a href="{{ route('admin.destinations.index') }}" 
                   class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors
                          {{ request()->routeIs('admin.destinations*') ? 'bg-[#c9a84c] text-[#0c2340]' : 'text-white/70 hover:bg-white/10 hover:text-white' }}">
                    <i data-feather="map-pin" class="w-5 h-5"></i>
                    Destinations
                </a>

                <a href="{{ route('admin.testimonials.index') }}" 
                   class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors
                          {{ request()->routeIs('admin.testimonials*') ? 'bg-[#c9a84c] text-[#0c2340]' : 'text-white/70 hover:bg-white/10 hover:text-white' }}">
                    <i data-feather="star" class="w-5 h-5"></i>
                    Testimonials
                </a>

                <a href="{{ route('admin.posts.index') }}" 
                   class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors
                          {{ request()->routeIs('admin.posts*') ? 'bg-[#c9a84c] text-[#0c2340]' : 'text-white/70 hover:bg-white/10 hover:text-white' }}">
                    <i data-feather="edit-3" class="w-5 h-5"></i>
                    Stories
                </a>

                <a href="{{ route('admin.features.index') }}" 
                   class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors
                          {{ request()->routeIs('admin.features*') ? 'bg-[#c9a84c] text-[#0c2340]' : 'text-white/70 hover:bg-white/10 hover:text-white' }}">
                    <i data-feather="award" class="w-5 h-5"></i>
                    Features
                </a>

                <div class="pt-4 pb-2">
                    <p class="px-4 text-xs font-semibold text-white/40 uppercase tracking-wider">System</p>
                </div>

                <a href="{{ route('admin.users') }}" 
                   class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors
                          {{ request()->routeIs('admin.users*') ? 'bg-[#c9a84c] text-[#0c2340]' : 'text-white/70 hover:bg-white/10 hover:text-white' }}">
                    <i data-feather="users" class="w-5 h-5"></i>
                    Users
                </a>

                <a href="{{ route('admin.settings') }}" 
                   class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors
                          {{ request()->routeIs('admin.settings*') ? 'bg-[#c9a84c] text-[#0c2340]' : 'text-white/70 hover:bg-white/10 hover:text-white' }}">
                    <i data-feather="settings" class="w-5 h-5"></i>
                    Settings
                </a>

                <a href="{{ route('admin.seo') }}" 
                   class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors
                          {{ request()->routeIs('admin.seo*') ? 'bg-[#c9a84c] text-[#0c2340]' : 'text-white/70 hover:bg-white/10 hover:text-white' }}">
                    <i data-feather="search" class="w-5 h-5"></i>
                    SEO Settings
                </a>
            </nav>
            
            <!-- Sidebar Footer / Logout -->
            <div class="p-4 border-t border-white/10 shrink-0">
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl w-full text-white/70 hover:bg-red-500/10 hover:text-red-400 transition-colors">
                        <i data-feather="log-out" class="w-5 h-5"></i>
                        Sign Out
                    </button>
                </form>
            </div>
        </aside>

        <!-- Main Content Wrapper -->
        <div class="flex-1 flex flex-col overflow-hidden bg-[#f5f1ea]">
            
            <!-- Topbar -->
            <header class="h-20 bg-white/80 backdrop-blur border-b border-gray-200 flex items-center justify-between px-6 z-10 shrink-0 shadow-sm">
                <div class="flex items-center gap-4">
                    <button @click="sidebarOpen = true" class="lg:hidden text-gray-500 hover:text-[#0c2340]">
                        <i data-feather="menu" class="w-6 h-6"></i>
                    </button>
                    <h1 class="text-xl font-serif text-[#0c2340] hidden sm:block">@yield('title')</h1>
                </div>

                <div class="flex items-center gap-6">
                    <a href="{{ route('home') }}" target="_blank" class="hidden md:flex items-center gap-2 text-sm text-gray-500 hover:text-[#c9a84c] transition-colors">
                        <i data-feather="external-link" class="w-4 h-4"></i>
                        View Site
                    </a>
                    
                    <!-- Profile Dropdown -->
                    <div class="relative" x-data="{ open: false }" @click.away="open = false">
                        <button @click="open = !open" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
                            <div class="w-10 h-10 rounded-full bg-[#0c2340] text-white flex items-center justify-center font-bold font-serif shadow-md border-2 border-white">
                                {{ substr(auth()->user()->name, 0, 1) }}
                            </div>
                            <div class="hidden md:block text-left">
                                <p class="text-sm font-semibold text-gray-800">{{ auth()->user()->name }}</p>
                                <p class="text-xs text-gray-500">Administrator</p>
                            </div>
                            <i data-feather="chevron-down" class="w-4 h-4 text-gray-400 hidden md:block"></i>
                        </button>
                        
                        <div x-show="open" x-cloak
                             x-transition:enter="transition ease-out duration-100"
                             x-transition:enter-start="transform opacity-0 scale-95"
                             x-transition:enter-end="transform opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="transform opacity-100 scale-100"
                             x-transition:leave-end="transform opacity-0 scale-95"
                             class="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-gray-100 py-1 z-50">
                            
                            <a href="{{ route('user.profile') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-[#0c2340]">
                                <div class="flex items-center gap-2"><i data-feather="user" class="w-4 h-4"></i> Profile</div>
                            </a>
                            <div class="border-t border-gray-100 my-1"></div>
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">
                                    <div class="flex items-center gap-2"><i data-feather="log-out" class="w-4 h-4"></i> Sign out</div>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </header>
            
            <!-- Main Content Area -->
            <main class="flex-1 overflow-x-hidden overflow-y-auto bg-transparent p-6 lg:p-8">
                @yield('content')
            </main>
        </div>
    </div>

    <!-- Chart.js for Admin Dashboard -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Initialize Feather Icons -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            feather.replace();
        });
    </script>
    @stack('scripts')
</body>
</html>
