<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin HQ - Instafix24</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <!-- Leaflet CSS (Map ke liye) -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body class="bg-gray-100 flex h-screen overflow-hidden font-sans">
    
    <!-- Sidebar -->
    <aside class="w-64 bg-gray-900 text-white flex-col hidden md:flex z-50 overflow-y-auto">
        <div class="h-20 flex items-center px-6 border-b border-gray-800 shrink-0">
            <i data-lucide="zap" class="text-[#109E38] w-6 h-6 mr-2"></i>
            <span class="text-xl font-black tracking-tight">Instafix<span class="text-[#109E38]">Admin</span></span>
        </div>
        
        <nav class="flex-1 px-4 py-6 space-y-2">
            <!-- Main Links -->
            <a href="/admin" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-gray-800 px-4 py-3 rounded-xl font-bold transition-colors">
                <i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
            </a>
            <a href="/admin/tracking" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-gray-800 px-4 py-3 rounded-xl font-bold transition-colors">
                <i data-lucide="map" class="w-5 h-5"></i> Live Tracking
            </a>
            <a href="/admin/jobs" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-gray-800 px-4 py-3 rounded-xl font-bold transition-colors">
                <i data-lucide="briefcase" class="w-5 h-5"></i> All Jobs
            </a>
            
            <!-- Finance & Control Section -->
            <div class="pt-4 pb-2">
                <p class="px-4 text-xs font-black text-gray-500 uppercase tracking-widest">Finance & Control</p>
            </div>
            
            <a href="/admin/payouts" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-gray-800 px-4 py-3 rounded-xl font-bold transition-colors">
                <i data-lucide="arrow-left-right" class="w-5 h-5"></i> Settlements
            </a>
            <a href="/admin/earnings" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-gray-800 px-4 py-3 rounded-xl font-bold transition-colors">
                <i data-lucide="bar-chart-3" class="w-5 h-5"></i> Analytics & Profit
            </a>
            
            <!-- Other Links -->
            <a href="/admin/technicians" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-gray-800 px-4 py-3 rounded-xl font-bold transition-colors mt-4">
                <i data-lucide="users" class="w-5 h-5"></i> Technicians
            </a>
            <a href="#" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-gray-800 px-4 py-3 rounded-xl font-bold transition-colors">
                <i data-lucide="settings" class="w-5 h-5"></i> App Settings
            </a>
        </nav>
        
        <div class="p-4 border-t border-gray-800 shrink-0">
            <a href="/" class="flex items-center gap-3 text-red-400 hover:text-red-300 px-4 py-2 font-bold transition-colors">
                <i data-lucide="log-out" class="w-5 h-5"></i> Logout
            </a>
        </div>
    </aside>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col h-screen overflow-hidden relative">
        <!-- Header -->
        <header class="h-20 bg-white border-b border-gray-200 flex items-center justify-between px-6 z-10 shadow-sm">
            <h2 class="text-xl font-black text-gray-800">Command Center</h2>
            <div class="flex items-center gap-4">
                <button class="relative p-2 text-gray-400 hover:text-gray-600">
                    <i data-lucide="bell" class="w-6 h-6"></i>
                    <span class="absolute top-1 right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-white"></span>
                </button>
                <div class="flex items-center gap-3 pl-4 border-l border-gray-200">
                    <div class="text-right">
                        <p class="text-sm font-black text-gray-900">Admin Boss</p>
                        <p class="text-xs font-bold text-[#109E38]">Owner</p>
                    </div>
                </div>
            </div>
        </header>

        <!-- Dynamic Page Content -->
        <main class="flex-1 overflow-y-auto p-4 md:p-8 bg-gray-50">
            @yield('content')
        </main>
    </div>
    
    <!-- Scripts -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        // Initialize Lucide Icons
        lucide.createIcons();
    </script>
</body>
</html>