<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo $__env->yieldContent('title', 'LynX Admin'); ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        /* ═══════════════════════════════════════════════════════
           🎨 CSS VARIABLES — Neon Glassmorphism Design Tokens
           ═══════════════════════════════════════════════════════ */
        :root {
            --bg-primary: #07070F;
            --bg-surface: #0D0D1A;
            --bg-card: #13132A;
            --bg-elevated: #1A1A3E;
            --primary: #6C3AED;
            --primary-light: #8B5CF6;
            --primary-glow: rgba(108, 58, 237, 0.3);
            --secondary: #00D4FF;
            --tertiary: #FF3B9A;
            --accent: #FF6B35;
            --success: #34C759;
            --warning: #FF9500;
            --danger: #FF3B30;
            --text: #FFFFFF;
            --text-muted: rgba(255,255,255,0.5);
            --text-dim: rgba(255,255,255,0.25);
            --border: rgba(255,255,255,0.06);
            --border-light: rgba(255,255,255,0.10);
            --glass: rgba(255,255,255,0.03);
            --glass-hover: rgba(108, 58, 237, 0.08);
            --sidebar-width: 260px;
        }

        /* ═══════════════════════════════════════════════════════
           🏗️ BASE
           ═══════════════════════════════════════════════════════ */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-primary);
            color: var(--text);
            display: flex;
            min-height: 100vh;
            overflow-x: hidden;
        }

        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 2px; }

        /* ═══════════════════════════════════════════════════════
           📂 SIDEBAR
           ═══════════════════════════════════════════════════════ */
        .sidebar {
            width: var(--sidebar-width);
            background: var(--bg-surface);
            position: fixed;
            top: 0; left: 0;
            height: 100vh;
            overflow-y: auto;
            z-index: 100;
            border-right: 1px solid var(--border);
            backdrop-filter: blur(20px);
        }
        .sidebar-header {
            padding: 28px 24px 20px;
            text-align: center;
            border-bottom: 1px solid var(--border);
            position: relative;
        }
        .sidebar-header::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 10%;
            width: 80%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
            opacity: 0.5;
        }
        .sidebar-header h2 {
            font-size: 28px;
            font-weight: 900;
            letter-spacing: 8px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .sidebar-header small {
            color: var(--text-dim);
            letter-spacing: 3px;
            font-size: 10px;
            text-transform: uppercase;
            margin-top: 4px;
            display: block;
        }

        .sidebar-nav { padding: 12px 0; }
        .nav-section {
            padding: 20px 24px 8px;
            color: var(--text-dim);
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
        }
        .nav-item {
            display: flex;
            align-items: center;
            padding: 12px 24px;
            color: var(--text-muted);
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-left: 3px solid transparent;
            font-size: 14px;
            gap: 12px;
            position: relative;
        }
        .nav-item:hover {
            color: var(--text);
            background: var(--glass-hover);
            border-left-color: var(--primary);
        }
        .nav-item.active {
            color: var(--text);
            background: linear-gradient(90deg, rgba(108,58,237,0.12), transparent);
            border-left-color: var(--primary);
        }
        .nav-item.active::before {
            content: '';
            position: absolute;
            left: -1px;
            top: 50%;
            transform: translateY(-50%);
            width: 2px;
            height: 40%;
            background: linear-gradient(180deg, var(--primary), var(--secondary));
            border-radius: 0 2px 2px 0;
        }
        .nav-item .icon { font-size: 18px; width: 24px; text-align: center; }
        .nav-item .badge {
            margin-left: auto;
            background: linear-gradient(135deg, var(--danger), var(--tertiary));
            color: white;
            padding: 2px 9px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(255,59,48,0.3);
        }
        .nav-item .badge-success {
            background: linear-gradient(135deg, var(--success), #30D158);
            box-shadow: 0 2px 8px rgba(52,199,89,0.3);
        }
        .nav-item .badge-warning {
            background: linear-gradient(135deg, var(--warning), #FF9F0A);
            box-shadow: 0 2px 8px rgba(255,149,0,0.3);
        }

        /* Sidebar nav item hover glow */
        .nav-item:not(.active):hover {
            box-shadow: inset 3px 0 0 var(--primary);
        }

        /* ═══════════════════════════════════════════════════════
           📄 MAIN CONTENT
           ═══════════════════════════════════════════════════════ */
        .main-content {
            margin-left: var(--sidebar-width);
            flex: 1;
            padding: 28px 36px;
            min-height: 100vh;
            position: relative;
        }
        .main-content::before {
            content: '';
            position: fixed;
            top: 0; right: 0;
            width: 60%;
            height: 100%;
            background: radial-gradient(ellipse at 80% 20%, rgba(108,58,237,0.04) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
        }

        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32px;
            position: relative;
            z-index: 1;
        }
        .page-title {
            font-size: 26px;
            font-weight: 700;
            color: var(--text);
            letter-spacing: -0.5px;
        }
        .page-title::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 28px;
            background: linear-gradient(180deg, var(--primary), var(--secondary));
            border-radius: 2px;
            margin-right: 14px;
            vertical-align: middle;
        }
        .top-bar-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .admin-avatar {
            width: 38px;
            height: 38px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 15px;
            box-shadow: 0 0 15px var(--primary-glow);
            transition: all 0.3s;
        }
        .admin-avatar:hover {
            transform: scale(1.05);
            box-shadow: 0 0 25px var(--primary-glow);
        }

        /* ═══════════════════════════════════════════════════════
           🃏 GLASS CARD
           ═══════════════════════════════════════════════════════ */
        .glass-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 24px;
            border: 1px solid var(--border);
            backdrop-filter: blur(12px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        .glass-card:hover {
            border-color: var(--border-light);
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
        }

        /* ═══════════════════════════════════════════════════════
           📊 STATS GRID
           ═══════════════════════════════════════════════════════ */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 32px;
            position: relative;
            z-index: 1;
        }
        .stat-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 20px;
            border: 1px solid var(--border);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            opacity: 0;
            transition: opacity 0.3s;
        }
        .stat-card:hover::before { opacity: 1; }
        .stat-card:hover {
            transform: translateY(-2px);
            border-color: var(--border-light);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }
        .stat-card .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .stat-card .value {
            font-size: 30px;
            font-weight: 800;
            letter-spacing: -1px;
        }
        .stat-card .label {
            color: var(--text-muted);
            font-size: 13px;
            margin-top: 4px;
        }
        .stat-card .icon { font-size: 32px; }

        /* ═══════════════════════════════════════════════════════
           📋 TABLES
           ═══════════════════════════════════════════════════════ */
        .table-container {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 20px;
            border: 1px solid var(--border);
            overflow-x: auto;
            position: relative;
            z-index: 1;
        }
        table { width: 100%; border-collapse: collapse; }
        th {
            text-align: left;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
            color: var(--text-muted);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }
        td {
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
            font-size: 14px;
            color: var(--text);
        }
        tr:last-child td { border-bottom: none; }
        tr:hover td { background: rgba(108,58,237,0.03); }

        /* ═══════════════════════════════════════════════════════
           🔘 BUTTONS
           ═══════════════════════════════════════════════════════ */
        .btn {
            padding: 8px 18px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-family: 'Inter', sans-serif;
            position: relative;
        }
        .btn:active { transform: scale(0.98); }
        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            box-shadow: 0 4px 15px var(--primary-glow);
        }
        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px var(--primary-glow);
        }
        .btn-danger { background: linear-gradient(135deg, var(--danger), #FF453A); color: white; box-shadow: 0 4px 15px rgba(255,59,48,0.3); }
        .btn-danger:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,59,48,0.4); }
        .btn-success { background: linear-gradient(135deg, var(--success), #30D158); color: white; box-shadow: 0 4px 15px rgba(52,199,89,0.3); }
        .btn-success:hover { transform: translateY(-1px); }
        .btn-warning { background: linear-gradient(135deg, var(--warning), #FF9F0A); color: white; }
        .btn-outline {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
        }
        .btn-outline:hover { border-color: var(--primary); color: var(--primary); background: rgba(108,58,237,0.05); }
        .btn-sm { padding: 6px 14px; font-size: 12px; }

        /* ═══════════════════════════════════════════════════════
           🏷️ STATUS BADGES
           ═══════════════════════════════════════════════════════ */
        .status-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            display: inline-block;
        }
        .status-active { background: rgba(52,199,89,0.12); color: var(--success); border: 1px solid rgba(52,199,89,0.2); }
        .status-pending { background: rgba(255,149,0,0.12); color: var(--warning); border: 1px solid rgba(255,149,0,0.2); }
        .status-danger { background: rgba(255,59,48,0.12); color: var(--danger); border: 1px solid rgba(255,59,48,0.2); }
        .status-info { background: rgba(108,58,237,0.12); color: var(--primary-light); border: 1px solid rgba(108,58,237,0.2); }

        /* ═══════════════════════════════════════════════════════
           ⚡ ANIMATIONS
           ═══════════════════════════════════════════════════════ */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-10px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes glow {
            0%, 100% { box-shadow: 0 0 10px var(--primary-glow); }
            50% { box-shadow: 0 0 25px var(--primary-glow), 0 0 50px rgba(108,58,237,0.1); }
        }
        .animate-in {
            animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
        }
        .animate-in-delay-1 { animation-delay: 0.1s; }
        .animate-in-delay-2 { animation-delay: 0.2s; }
        .animate-in-delay-3 { animation-delay: 0.3s; }
        .animate-in-delay-4 { animation-delay: 0.4s; }

        /* ═══════════════════════════════════════════════════════
           🛡️ ALERT MESSAGES
           ═══════════════════════════════════════════════════════ */
        .alert {
            padding: 16px 20px;
            border-radius: 12px;
            margin-bottom: 24px;
            font-size: 14px;
            animation: slideIn 0.3s ease;
            position: relative;
            z-index: 1;
        }
        .alert-success { background: rgba(52,199,89,0.1); color: var(--success); border: 1px solid rgba(52,199,89,0.2); }
        .alert-danger { background: rgba(255,59,48,0.1); color: var(--danger); border: 1px solid rgba(255,59,48,0.2); }
        .alert-warning { background: rgba(255,149,0,0.1); color: var(--warning); border: 1px solid rgba(255,149,0,0.2); }

        /* ═══════════════════════════════════════════════════════
           📐 GRID HELPERS
           ═══════════════════════════════════════════════════════ */
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
        .gap-12 { gap: 12px; }
        .mt-16 { margin-top: 16px; }
        .mt-24 { margin-top: 24px; }
        .mb-16 { margin-bottom: 16px; }
        .flex-center { display: flex; align-items: center; }
        .flex-between { display: flex; justify-content: space-between; align-items: center; }
        .flex-wrap { flex-wrap: wrap; }

        /* ═══════════════════════════════════════════════════════
           🔗 PAGINATION
           ═══════════════════════════════════════════════════════ */
        .pagination { display: flex; gap: 4px; margin-top: 24px; justify-content: center; }
        .pagination a, .pagination span {
            padding: 10px 16px; border-radius: 10px; background: var(--bg-card);
            color: var(--text-muted); text-decoration: none; font-size: 13px;
            border: 1px solid var(--border); transition: all 0.2s;
        }
        .pagination a:hover { border-color: var(--primary); color: var(--primary); }
        .pagination .active { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: white; border-color: transparent; }

        /* ═══════════════════════════════════════════════════════
           📱 RESPONSIVE
           ═══════════════════════════════════════════════════════ */
        @media (max-width: 768px) {
            .sidebar { width: 100%; height: auto; position: relative; border-right: none; border-bottom: 1px solid var(--border); }
            .main-content { margin-left: 0; padding: 20px; }
            .stats-grid { grid-template-columns: 1fr 1fr; }
            .grid-2, .grid-3 { grid-template-columns: 1fr; }
            .page-title { font-size: 22px; }
        }

        /* Glowing dot for active status indicators */
        .glowing-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            display: inline-block;
            animation: pulse 2s infinite;
        }
        .glowing-dot.active { background: var(--success); box-shadow: 0 0 8px rgba(52,199,89,0.5); }
        .glowing-dot.danger { background: var(--danger); box-shadow: 0 0 8px rgba(255,59,48,0.5); }
        .glowing-dot.warning { background: var(--warning); box-shadow: 0 0 8px rgba(255,149,0,0.5); }

        /* Form inputs */
        .form-input {
            width: 100%;
            padding: 12px 16px;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            transition: all 0.3s;
            outline: none;
        }
        .form-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(108,58,237,0.1);
        }
        .form-input::placeholder { color: var(--text-dim); }
        .form-select {
            width: 100%;
            padding: 12px 16px;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            outline: none;
            cursor: pointer;
            appearance: auto;
        }
    </style>
</head>
<body>
    <!-- ═══════════════════════════════════════════════════════ -->
    <!-- 📂 SIDEBAR -->
    <!-- ═══════════════════════════════════════════════════════ -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <h2>LYNX</h2>
            <small>Administrator Panel</small>
        </div>
        <nav class="sidebar-nav">
            <div class="nav-section">Main</div>
            <a href="<?php echo e(route('admin.dashboard')); ?>"
               class="nav-item <?php echo e(request()->routeIs('admin.dashboard') ? 'active' : ''); ?>">
                <span class="icon">📊</span> Dashboard
            </a>

            <div class="nav-section">Management</div>
            <a href="<?php echo e(route('admin.users')); ?>"
               class="nav-item <?php echo e(request()->routeIs('admin.users*') ? 'active' : ''); ?>">
                <span class="icon">👥</span> Users
            </a>
            <a href="<?php echo e(route('admin.drivers')); ?>"
               class="nav-item <?php echo e(request()->routeIs('admin.drivers') ? 'active' : ''); ?>">
                <span class="icon">🚗</span> Drivers
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(\App\Models\Driver::where('is_verified', false)->where('is_active', true)->count()): ?>
                    <span class="badge badge-warning"><?php echo e(\App\Models\Driver::where('is_verified', false)->where('is_active', true)->count()); ?></span>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </a>
            <a href="#" class="nav-item">
                <span class="icon">🛵</span> Rides
            </a>
            <a href="#" class="nav-item">
                <span class="icon">📦</span> Parcels
            </a>
            <a href="#" class="nav-item">
                <span class="icon">🍽️</span> Restaurants
            </a>

            <div class="nav-section">Safety</div>
            <a href="<?php echo e(route('admin.gods-eye')); ?>"
               class="nav-item <?php echo e(request()->routeIs('admin.gods-eye*') ? 'active' : ''); ?>">
                <span class="icon">👁️</span> <span style="font-style: italic;">God's Eye</span>™
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(\App\Models\RouteDeviation::whereIn('status', ['detected', 'escalated'])->count()): ?>
                    <span class="badge"><?php echo e(\App\Models\RouteDeviation::whereIn('status', ['detected', 'escalated'])->count()); ?></span>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </a>
            <a href="#" class="nav-item">
                <span class="icon">🆘</span> SOS Alerts
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(\App\Models\SOSAlert::where('status', 'active')->count()): ?>
                    <span class="badge"><?php echo e(\App\Models\SOSAlert::where('status', 'active')->count()); ?></span>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </a>
            <a href="<?php echo e(route('admin.heat-map')); ?>"
               class="nav-item <?php echo e(request()->routeIs('admin.heat-map') ? 'active' : ''); ?>">
                <span class="icon">🗺️</span> Heat Map
            </a>

            <div class="nav-section">System</div>
            <a href="#" class="nav-item">
                <span class="icon">💰</span> Payments
            </a>
            <a href="#" class="nav-item">
                <span class="icon">📈</span> Analytics
            </a>
            <a href="#" class="nav-item">
                <span class="icon">⚙️</span> Settings
            </a>

            <div class="nav-section">Account</div>
            <form method="POST" action="<?php echo e(route('admin.logout')); ?>" style="display: inline;">
                <?php echo csrf_field(); ?>
                <button type="submit" class="nav-item" style="width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px;">
                    <span class="icon">🚪</span> Logout
                </button>
            </form>
        </nav>
    </aside>

    <!-- ═══════════════════════════════════════════════════════ -->
    <!-- 📄 MAIN CONTENT -->
    <!-- ═══════════════════════════════════════════════════════ -->
    <main class="main-content">
        <div class="top-bar">
            <h1 class="page-title"><?php echo $__env->yieldContent('page-title', 'Dashboard'); ?></h1>
            <div class="top-bar-right">
                <span style="color: var(--text-muted); font-size: 14px; font-weight: 500;">
                    <?php echo e(auth()->user()?->full_name ?? 'Admin'); ?>

                </span>
                <div class="admin-avatar">
                    <?php echo e(strtoupper(substr(auth()->user()?->full_name ?? 'A', 0, 1))); ?>

                </div>
            </div>
        </div>

        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session('success')): ?>
            <div class="alert alert-success animate-in">✅ <?php echo e(session('success')); ?></div>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session('error')): ?>
            <div class="alert alert-danger animate-in">❌ <?php echo e(session('error')); ?></div>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

        <div style="position: relative; z-index: 1;">
            <?php echo $__env->yieldContent('content'); ?>
        </div>
    </main>
</body>
</html>
<?php /**PATH /Users/macbook/Documents/Freebuff/lynx_admin/resources/views/admin/layouts/master.blade.php ENDPATH**/ ?>