<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>METRO DROP - Admin Portal</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
    <style>
        :root { --primary: #013C7B; --bg: #0A0A0A; --card: #151515; --sidebar: #0F0F0F; --text: #FFFFFF; --text-muted: #888; }
        body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); margin: 0; display: flex; }
        
        /* Sidebar */
        aside { width: 280px; background: var(--sidebar); height: 100vh; border-right: 1px solid #222; padding: 30px; box-sizing: border-box; position: fixed; left: 0; top: 0; }
        .logo { font-weight: 800; font-size: 24px; color: var(--primary); margin-bottom: 40px; letter-spacing: 1px; }
        .nav-section { margin-bottom: 30px; }
        .nav-label { font-size: 10px; text-transform: uppercase; color: #444; letter-spacing: 2px; margin-bottom: 15px; display: block; }
        .nav-link { display: block; padding: 12px 15px; color: var(--text-muted); text-decoration: none; border-radius: 12px; margin-bottom: 5px; transition: 0.3s; font-weight: 600; font-size: 14px; }
        .nav-link:hover { color: var(--text); background: #222; }
        .nav-link.active { background: var(--primary); color: #fff; }
        
        /* Main Content */
        main { flex: 1; margin-left: 280px; padding: 40px; box-sizing: border-box; min-height: 100vh; }
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
        
        /* Components */
        .card { background: var(--card); border-radius: 25px; border: 1px solid #222; padding: 30px; }
        .btn { padding: 10px 20px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: 0.3s; border: none; font-size: 14px; }
        .btn-primary { background: var(--primary); color: #fff; }
        .btn-outline { background: transparent; border: 1px solid #333; color: var(--text-muted); }
        .btn-outline:hover { border-color: #ff4d4d; color: #ff4d4d; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #333; }
    </style>
    @yield('styles')
</head>
<body>
    <aside>
        <div class="logo">METRO DROP</div>
        
        <div class="nav-section">
            <span class="nav-label">Core</span>
            <a href="{{ route('admin.dashboard') }}" class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">Dashboard</a>
        </div>

        <div class="nav-section">
            <span class="nav-label">Management</span>
            <a href="#" class="nav-link">Riders</a>
            <a href="#" class="nav-link">Drivers</a>
            <a href="#" class="nav-link">Transport Hub</a>
        </div>

        <div class="nav-section">
            <span class="nav-label">System</span>
            <a href="#" class="nav-link">Transactions</a>
            <a href="#" class="nav-link">Rides</a>
            <a href="#" class="nav-link">Settings</a>
        </div>

        <div style="position: absolute; bottom: 30px; left: 30px; right: 30px;">
            <form action="{{ route('admin.logout') }}" method="POST">
                @csrf
                <button type="submit" class="btn btn-outline" style="width: 100%">Logout</button>
            </form>
        </div>
    </aside>

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

    @yield('scripts')
</body>
</html>
