<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin - @yield('title', 'Dashboard') | Golden Musk Freight</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Alpine.js -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
        }
        .sidebar-item {
            transition: all 0.2s;
        }
        .sidebar-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        .sidebar-item.active {
            background-color: rgba(59, 130, 246, 0.8);
            color: white;
        }
        .content-area {
            transition: margin-left 0.3s ease;
        }
        @media (min-width: 1024px) {
            .sidebar-open {
                transform: translateX(0) !important;
            }
            .content-shifted {
                margin-left: 16rem !important;
            }
        }
    </style>
    @yield('head')
</head>
<body class="bg-gray-50">
    <div x-data="{ sidebarOpen: window.innerWidth >= 1024 }">
        <!-- Overlay for clicking outside to close sidebar on mobile -->
        <div 
            @click="sidebarOpen = false" 
            x-show="sidebarOpen" 
            x-transition:enter="transition-opacity ease-linear duration-300" 
            x-transition:enter-start="opacity-0" 
            x-transition:enter-end="opacity-100" 
            x-transition:leave="transition-opacity ease-linear duration-300" 
            x-transition:leave-start="opacity-100" 
            x-transition:leave-end="opacity-0" 
            class="fixed inset-0 bg-gray-600 bg-opacity-50 z-30 lg:hidden">
        </div>
        
        <!-- Sidebar -->
        <div class="fixed inset-y-0 left-0 z-40 w-64 bg-gradient-to-b from-blue-800 to-blue-900 shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0" 
             :class="{ '-translate-x-full': !sidebarOpen, 'translate-x-0': sidebarOpen }">
            
            <!-- Logo and Brand with Close Button -->
            <div class="flex items-center justify-between h-16 px-6 border-b border-blue-700">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-truck-fast text-2xl text-white"></i>
                    <h1 class="text-xl font-bold text-white">GMF Admin</h1>
                </div>
                <!-- X Button to close sidebar on mobile -->
                <button 
                    @click="sidebarOpen = false" 
                    class="text-white hover:text-blue-200 focus:outline-none lg:hidden">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- Navigation Menu -->
            <div class="px-2 py-4 space-y-1 overflow-y-auto max-h-[calc(100vh-4rem)]">
                <div class="px-4 py-2 text-xs font-semibold text-blue-100 uppercase tracking-wider">
                    Main
                </div>
                
                <a href="{{ route('admin.dashboard') }}" 
                   class="sidebar-item flex items-center px-4 py-3 text-white rounded-lg {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                    <i class="fas fa-tachometer-alt w-6"></i>
                    <span class="ml-3">Dashboard</span>
                </a>
                
                <a href="{{ route('admin.shipments.index') }}" 
                   class="sidebar-item flex items-center px-4 py-3 text-white rounded-lg {{ request()->routeIs('admin.shipments.*') ? 'active' : '' }}">
                    <i class="fas fa-boxes w-6"></i>
                    <span class="ml-3">Shipments</span>
                </a>
                
                <div class="px-4 py-2 mt-6 text-xs font-semibold text-blue-100 uppercase tracking-wider">
                    Settings
                </div>
                
                <a href="{{ route('admin.settings.general') }}" 
                   class="sidebar-item flex items-center px-4 py-3 text-white rounded-lg {{ request()->routeIs('admin.settings.general') ? 'active' : '' }}">
                    <i class="fas fa-cog w-6"></i>
                    <span class="ml-3">General Settings</span>
                </a>
                
                <a href="{{ route('admin.settings.email') }}" 
                   class="sidebar-item flex items-center px-4 py-3 text-white rounded-lg {{ request()->routeIs('admin.settings.email') ? 'active' : '' }}">
                    <i class="fas fa-envelope w-6"></i>
                    <span class="ml-3">Email Settings</span>
                </a>
                
                <a href="{{ route('admin.profile') }}" 
                   class="sidebar-item flex items-center px-4 py-3 text-white rounded-lg {{ request()->routeIs('admin.profile') ? 'active' : '' }}">
                    <i class="fas fa-user-circle w-6"></i>
                    <span class="ml-3">My Profile</span>
                </a>
                
                <div class="pt-6 mt-6 border-t border-blue-700">
                    <form method="POST" action="{{ route('logout') }}" class="px-2">
                        @csrf
                        <button type="submit" 
                                class="sidebar-item flex w-full items-center px-4 py-3 text-white rounded-lg hover:bg-red-700 hover:bg-opacity-20">
                            <i class="fas fa-sign-out-alt w-6"></i>
                            <span class="ml-3">Logout</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="content-area min-h-screen transition-all duration-300" 
             :class="{'lg:ml-64': sidebarOpen}">
            
            <!-- Top Navigation Bar -->
            <header class="bg-white shadow-sm">
                <div class="flex items-center justify-between h-16 px-4 md:px-6">
                    <button @click="sidebarOpen = !sidebarOpen" class="p-2 text-gray-600 hover:text-blue-600 focus:outline-none">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                    
                    <div class="flex items-center space-x-4">
                        <!-- Notifications Dropdown -->
                        <div x-data="{ notificationsOpen: false }" class="relative">
                            <button @click="notificationsOpen = !notificationsOpen" class="p-2 text-gray-600 hover:text-blue-600 focus:outline-none">
                                <i class="fas fa-bell"></i>
                            </button>
                            
                            <div x-show="notificationsOpen" 
                                 @click.away="notificationsOpen = false"
                                 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-80 bg-white rounded-lg shadow-xl py-1 z-50"
                                 style="display: none;">
                                <div class="px-4 py-3 text-sm text-gray-900 border-b">
                                    <div class="font-medium">Notifications</div>
                                </div>
                                <div class="max-h-64 overflow-y-auto">
                                    <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 border-b">
                                        <div class="font-medium">New shipment created</div>
                                        <div class="text-xs text-gray-500">10 minutes ago</div>
                                    </a>
                                </div>
                                <a href="#" class="block text-center px-4 py-2 text-sm text-blue-600 bg-gray-50 hover:bg-gray-100">
                                    View all notifications
                                </a>
                            </div>
                        </div>
                        
                        <!-- User Dropdown -->
                        <div x-data="{ userMenuOpen: false }" class="relative">
                            <button @click="userMenuOpen = !userMenuOpen" class="flex items-center space-x-2 focus:outline-none">
                                <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
                                    {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                                </div>
                                <div class="hidden md:block text-left">
                                    <div class="text-sm font-medium text-gray-900">{{ Auth::user()->name }}</div>
                                    <div class="text-xs text-gray-500">Administrator</div>
                                </div>
                                <i class="fas fa-chevron-down text-xs text-gray-400"></i>
                            </button>
                            
                            <div x-show="userMenuOpen" 
                                 @click.away="userMenuOpen = false"
                                 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-lg shadow-xl py-1 z-50"
                                 style="display: none;">
                                <a href="{{ route('admin.profile') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    <i class="fas fa-user-circle mr-2"></i> My Profile
                                </a>
                                <a href="{{ route('admin.settings.general') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    <i class="fas fa-cog mr-2"></i> Settings
                                </a>
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                        <i class="fas fa-sign-out-alt mr-2"></i> Logout
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Page Content -->
            <main class="p-4 md:p-6">
                @yield('content')
            </main>
            
            <!-- Footer -->
            <footer class="bg-white p-4 text-center text-xs text-gray-500 border-t">
                &copy; {{ date('Y') }} Golden Musk Freight. All rights reserved.
            </footer>
        </div>
    </div>
    
    @yield('scripts')
</body>
</html>