<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<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', 'Dashboard'); ?> — ESP32 Smart Dashboard</title>

    <!-- Bootstrap 5.3 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --sidebar-width: 250px;
            --accent: #0d6efd;
            --accent-glow: rgba(13, 110, 253, 0.25);
            --surface: #1a1d21;
            --surface-2: #212529;
            --surface-3: #2a2e33;
            --border: rgba(255,255,255,0.08);
            --text-muted: #8b949e;
        }

        * { box-sizing: border-box; }

        body {
            font-family: 'Inter', sans-serif;
            background: #111318;
            color: #e6edf3;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* ─── Sidebar ─────────────────────────────── */
        .sidebar {
            width: var(--sidebar-width);
            min-height: 100vh;
            background: var(--surface);
            border-right: 1px solid var(--border);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
        }

        .sidebar-brand {
            padding: 1.5rem 1.25rem 1rem;
            border-bottom: 1px solid var(--border);
        }

        .sidebar-brand .brand-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #0d6efd, #6610f2);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            box-shadow: 0 4px 15px var(--accent-glow);
        }

        .sidebar-brand .brand-name {
            font-size: 0.9rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .sidebar-brand .brand-sub {
            font-size: 0.72rem;
            color: var(--text-muted);
        }

        .sidebar-nav {
            flex: 1;
            padding: 1rem 0.75rem;
        }

        .nav-label {
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            padding: 0.5rem 0.5rem 0.25rem;
        }

        .nav-item-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.65rem 0.85rem;
            border-radius: 10px;
            color: #adb5bd;
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s ease;
            margin-bottom: 2px;
        }

        .nav-item-link i { font-size: 1rem; }

        .nav-item-link:hover {
            background: var(--surface-3);
            color: #fff;
        }

        .nav-item-link.active {
            background: linear-gradient(135deg, rgba(13,110,253,0.2), rgba(102,16,242,0.1));
            color: #fff;
            border: 1px solid rgba(13,110,253,0.3);
        }

        .nav-item-link.active i { color: var(--accent); }

        .sidebar-footer {
            padding: 0.75rem;
            border-top: 1px solid var(--border);
        }

        /* ─── Main Content ─────────────────────────── */
        .main-content {
            margin-left: var(--sidebar-width);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .topbar {
            background: rgba(17,19,24,0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border);
            padding: 0.85rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 50;
        }

        .topbar-title {
            font-size: 1.1rem;
            font-weight: 600;
        }

        .topbar-user {
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        .user-avatar {
            width: 34px;
            height: 34px;
            background: linear-gradient(135deg, #0d6efd, #6610f2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .page-body {
            flex: 1;
            padding: 2rem;
        }

        /* ─── Cards ─────────────────────────────────── */
        .glass-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .glass-card:hover {
            border-color: rgba(255,255,255,0.14);
            box-shadow: 0 8px 30px rgba(0,0,0,0.3);
        }

        .stat-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem;
            transition: all 0.25s ease;
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.35);
            border-color: rgba(13,110,253,0.3);
        }

        .stat-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            margin-bottom: 1rem;
        }

        .stat-value {
            font-size: 1.35rem;
            font-weight: 700;
            color: #fff;
        }

        .stat-label {
            font-size: 0.8rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        /* ─── Forms ─────────────────────────────────── */
        .form-control, .form-select {
            background: var(--surface-3) !important;
            border: 1px solid var(--border) !important;
            color: #e6edf3 !important;
            border-radius: 10px !important;
            padding: 0.65rem 1rem !important;
            font-size: 0.875rem !important;
            transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--accent) !important;
            box-shadow: 0 0 0 3px var(--accent-glow) !important;
            outline: none !important;
        }

        .form-label {
            font-size: 0.82rem;
            font-weight: 600;
            color: #adb5bd;
            margin-bottom: 0.4rem;
        }

        .form-control::placeholder { color: #555d65 !important; }

        /* ─── Buttons ────────────────────────────────── */
        .btn-primary {
            background: linear-gradient(135deg, #0d6efd, #0a58ca);
            border: none;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.875rem;
            padding: 0.65rem 1.5rem;
            transition: all 0.2s ease;
            box-shadow: 0 4px 15px rgba(13,110,253,0.35);
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(13,110,253,0.5);
        }

        .btn-outline-danger {
            border-radius: 10px;
            font-size: 0.875rem;
            font-weight: 600;
        }

        /* ─── Range Slider ───────────────────────────── */
        .form-range::-webkit-slider-thumb { background: var(--accent); }

        /* ─── Status Badge ───────────────────────────── */
        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }

        .status-online { background: #28a745; box-shadow: 0 0 6px #28a745; }
        .status-offline { background: #6c757d; }

        /* ─── Page Header ────────────────────────────── */
        .page-header {
            margin-bottom: 1.75rem;
        }

        .page-header h1 {
            font-size: 1.6rem;
            font-weight: 700;
            margin-bottom: 0.2rem;
        }

        .page-header p {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin: 0;
        }

        /* ─── Alert Override ─────────────────────────── */
        .alert {
            border-radius: 12px;
            border: 1px solid transparent;
            font-size: 0.875rem;
        }

        /* ─── Responsive ─────────────────────────────── */
        @media (max-width: 768px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.show { transform: translateX(0); }
            .main-content { margin-left: 0; }
        }
    </style>
    <?php echo $__env->yieldPushContent('styles'); ?>
</head>
<body>
    <!-- ─── Sidebar ─────────────────────────────────────── -->
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-brand">
            <div class="brand-icon">
                <i class="bi bi-cpu-fill text-white"></i>
            </div>
            <div class="brand-name">ESP32 Smart</div>
            <div class="brand-sub">Admin Dashboard</div>
        </div>

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

            <div class="nav-label mt-3">Account</div>
            <a href="<?php echo e(route('settings.index')); ?>"
               class="nav-item-link <?php echo e(request()->routeIs('settings.*') ? 'active' : ''); ?>">
                <i class="bi bi-gear-fill"></i>
                Settings
            </a>
        </nav>

        <div class="sidebar-footer">
            <form action="<?php echo e(route('logout')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <button type="submit" class="nav-item-link w-100 border-0 bg-transparent text-danger">
                    <i class="bi bi-box-arrow-left"></i>
                    Logout
                </button>
            </form>
        </div>
    </aside>

    <!-- ─── Main Content ────────────────────────────────── -->
    <div class="main-content">
        <header class="topbar">
            <div class="d-flex align-items-center gap-3">
                <button class="btn btn-sm btn-outline-secondary d-md-none" id="sidebarToggle">
                    <i class="bi bi-list"></i>
                </button>
                <span class="topbar-title"><?php echo $__env->yieldContent('page-title', 'Dashboard'); ?></span>
            </div>
            <div class="topbar-user">
                <div class="user-avatar">
                    <?php echo e(strtoupper(substr(auth()->user()->name, 0, 2))); ?>

                </div>
                <div class="d-none d-sm-block">
                    <div style="font-size:0.82rem;font-weight:600;"><?php echo e(auth()->user()->name); ?></div>
                    <div style="font-size:0.72rem;color:var(--text-muted);">Administrator</div>
                </div>
            </div>
        </header>

        <main class="page-body">
            <?php if(session('success')): ?>
                <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                    <i class="bi bi-check-circle-fill me-2"></i><?php echo e(session('success')); ?>

                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            <?php endif; ?>

            <?php if(session('error')): ?>
                <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i><?php echo e(session('error')); ?>

                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            <?php endif; ?>

            <?php echo $__env->yieldContent('content'); ?>
        </main>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Mobile sidebar toggle
        document.getElementById('sidebarToggle')?.addEventListener('click', () => {
            document.getElementById('sidebar').classList.toggle('show');
        });
    </script>
    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH C:\xampp\htdocs\ESP 32\resources\views/layouts/app.blade.php ENDPATH**/ ?>