<!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', 'Admin'); ?> - Golden Ark</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <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=Alan+Sans:wght@300..900&display=swap" rel="stylesheet">
    <style>
        :root {
            --sidebar-width: 260px;
            --topbar-height: 64px;
            --clr-sidebar: #0f0c29;
            --clr-sidebar-hover: rgba(255,255,255,.06);
            --clr-accent: #780045;
            --clr-accent-light: rgba(120,0,69,.15);
        }

        body { background: #f0f2f5; font-family: 'Alan Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; }

        /* ── Sidebar ── */
        .admin-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: var(--sidebar-width);
            height: 100vh;
            background: linear-gradient(180deg, #0f0c29 0%, #1a1640 50%, #302b63 100%);
            z-index: 1040;
            display: flex;
            flex-direction: column;
            transition: transform .3s ease;
        }

        .sidebar-brand {
            padding: 24px 24px 20px;
            border-bottom: 1px solid rgba(255,255,255,.06);
        }
        .sidebar-brand-icon {
            width: 42px;
            height: 42px;
            background: linear-gradient(135deg, #780045, #F54927);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .sidebar-brand-icon i { font-size: 1.2rem; color: #fff; }
        .sidebar-brand-title {
            color: #fff;
            font-size: 1.05rem;
            font-weight: 800;
            letter-spacing: .5px;
        }
        .sidebar-brand-sub {
            color: rgba(255,255,255,.35);
            font-size: .7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .sidebar-nav {
            flex: 1;
            padding: 16px 12px;
            overflow-y: auto;
        }
        .sidebar-nav-label {
            color: rgba(255,255,255,.25);
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 12px 16px 8px;
        }
        .sidebar-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 16px;
            border-radius: 10px;
            color: rgba(255,255,255,.55);
            text-decoration: none;
            font-size: .9rem;
            font-weight: 500;
            transition: all .2s ease;
            margin-bottom: 2px;
        }
        .sidebar-link:hover {
            background: var(--clr-sidebar-hover);
            color: #fff;
        }
        .sidebar-link.active {
            background: var(--clr-accent-light);
            color: #fff;
        }
        .sidebar-link.active i {
            color: #e84393;
        }
        .sidebar-link i {
            font-size: 1.15rem;
            width: 22px;
            text-align: center;
        }

        .sidebar-footer {
            padding: 16px 20px;
            border-top: 1px solid rgba(255,255,255,.06);
        }
        .sidebar-user-name { color: #fff; font-size: .9rem; font-weight: 600; }
        .sidebar-user-role { color: rgba(255,255,255,.35); font-size: .75rem; }
        .sidebar-user-avatar {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #780045, #F54927);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 700;
            font-size: .85rem;
            flex-shrink: 0;
        }

        /* ── Topbar ── */
        .admin-topbar {
            position: fixed;
            top: 0;
            left: var(--sidebar-width);
            right: 0;
            height: var(--topbar-height);
            background: #fff;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 28px;
            z-index: 1030;
        }
        .topbar-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #1a1a2e;
        }

        /* ── Main Content ── */
        .admin-main {
            margin-left: var(--sidebar-width);
            margin-top: var(--topbar-height);
            padding: 28px;
            min-height: calc(100vh - var(--topbar-height));
        }

        /* ── Mobile toggle ── */
        .sidebar-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 1.4rem;
            color: #1a1a2e;
            cursor: pointer;
        }
        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.5);
            z-index: 1035;
        }

        @media (max-width: 991.98px) {
            .admin-sidebar { transform: translateX(-100%); }
            .admin-sidebar.show { transform: translateX(0); }
            .sidebar-overlay.show { display: block; }
            .sidebar-toggle { display: block; }
            .admin-topbar { left: 0; }
            .admin-main { margin-left: 0; }
        }

        /* ── Premium Card Style ── */
        .premium-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,.04);
            transition: box-shadow .2s ease;
        }
        .premium-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,.08);
        }

        <?php echo $__env->yieldPushContent('admin-styles'); ?>
    </style>
</head>
<body>

    
    <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>

    
    <aside class="admin-sidebar" id="adminSidebar">
        <div class="sidebar-brand">
            <div class="d-flex align-items-center gap-3">
                <div class="sidebar-brand-icon">
                    <i class="bi bi-speedometer2"></i>
                </div>
                <div>
                    <div class="sidebar-brand-title">Golden Ark</div>
                    <div class="sidebar-brand-sub">Admin Panel</div>
                </div>
            </div>
        </div>

        <nav class="sidebar-nav">
            <div class="sidebar-nav-label">Main</div>
            <a href="<?php echo e(route('admin.dashboard')); ?>" class="sidebar-link <?php echo e(request()->routeIs('admin.dashboard') ? 'active' : ''); ?>">
                <i class="bi bi-grid-1x2-fill"></i>
                <span>Dashboard</span>
            </a>

            <a href="<?php echo e(route('admin.sessions.index')); ?>" class="sidebar-link <?php echo e(request()->routeIs('admin.sessions.*') ? 'active' : ''); ?>">
                <i class="bi bi-clock-history"></i>
                <span>Machine Sessions</span>
            </a>

            <div class="sidebar-nav-label mt-2">Management</div>
            <a href="<?php echo e(route('admin.operators.index')); ?>" class="sidebar-link <?php echo e(request()->routeIs('admin.operators.*') ? 'active' : ''); ?>">
                <i class="bi bi-people-fill"></i>
                <span>Operators</span>
            </a>
            <a href="<?php echo e(route('admin.operators.create')); ?>" class="sidebar-link <?php echo e(request()->routeIs('admin.operators.create') ? 'active' : ''); ?>">
                <i class="bi bi-person-plus-fill"></i>
                <span>Add Operator</span>
            </a>

            <div class="sidebar-nav-label mt-2">Account</div>
            <a href="<?php echo e(route('admin.profile.edit')); ?>" class="sidebar-link <?php echo e(request()->routeIs('admin.profile.*') ? 'active' : ''); ?>">
                <i class="bi bi-person-gear"></i>
                <span>My Profile</span>
            </a>
        </nav>

        <div class="sidebar-footer">
            <div class="d-flex align-items-center gap-3">
                <div class="sidebar-user-avatar">
                    <?php echo e(strtoupper(substr(auth()->user()->name, 0, 1))); ?>

                </div>
                <div class="flex-grow-1">
                    <div class="sidebar-user-name"><?php echo e(auth()->user()->name); ?></div>
                    <div class="sidebar-user-role">Administrator</div>
                </div>
                <form action="<?php echo e(route('logout')); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <button type="submit" class="btn btn-sm p-0 border-0" title="Logout" style="color:rgba(255,255,255,.35);">
                        <i class="bi bi-box-arrow-right fs-5"></i>
                    </button>
                </form>
            </div>
        </div>
    </aside>

    
    <header class="admin-topbar">
        <div class="d-flex align-items-center gap-3">
            <button class="sidebar-toggle" onclick="toggleSidebar()">
                <i class="bi bi-list"></i>
            </button>
            <span class="topbar-title"><?php echo $__env->yieldContent('page-title', 'Dashboard'); ?></span>
        </div>
        <div class="d-flex align-items-center gap-3">
            <span class="text-muted small" id="adminClock"></span>
        </div>
    </header>

    
    <main class="admin-main">
        <?php echo $__env->yieldContent('content'); ?>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function toggleSidebar() {
            document.getElementById('adminSidebar').classList.toggle('show');
            document.getElementById('sidebarOverlay').classList.toggle('show');
        }
        // Topbar clock
        function updateAdminClock() {
            const now = new Date();
            document.getElementById('adminClock').textContent = now.toLocaleDateString('en-US', {
                weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'
            }) + '  ' + now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
        }
        updateAdminClock();
        setInterval(updateAdminClock, 30000);
    </script>
    <?php echo $__env->yieldPushContent('admin-scripts'); ?>
</body>
</html>
<?php /**PATH /home/electorade/machine.goldenarkbd.com/resources/views/layouts/admin.blade.php ENDPATH**/ ?>