<!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 e(config('app.name')); ?> - <?php echo $__env->yieldContent('title'); ?></title>

    <!-- Google Fonts -->
    <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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Bootstrap 5.3 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">

    <style>
        :root {
            /* Light Mode Variables */
            --primary-blue: #0066ff;
            --bg-body: #f8fafc;
            --bg-navbar: rgba(255, 255, 255, 0.8);
            --bg-card: #ffffff;
            --bg-glass: rgba(255, 255, 255, 0.7);
            --border-color: rgba(0, 0, 0, 0.05);
            --text-main: #1e293b;
            --text-muted: #64748b;
            --card-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            --card-hover-shadow: 0 20px 40px -10px rgba(0, 102, 255, 0.15);
            --clamp-h1: clamp(2rem, 5vw, 3.5rem);
            --clamp-h2: clamp(1.5rem, 4vw, 2.5rem);
            --transition: all 0.3s ease;
        }

        [data-theme="dark"] {
            /* Dark Mode Variables */
            --bg-body: #0f172a;
            --bg-navbar: rgba(15, 23, 42, 0.8);
            --bg-card: #1e293b;
            --bg-glass: rgba(30, 41, 59, 0.7);
            --border-color: rgba(255, 255, 255, 0.1);
            --text-main: #f1f5f9;
            --text-muted: #94a3b8;
            --card-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
            --card-hover-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--bg-body);
            color: var(--text-main);
            overflow-x: hidden;
            transition: var(--transition);
        }

        /* Navbar Enhancements */
        .navbar {
            background-color: var(--bg-navbar) !important;
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-color);
            padding: 0.8rem 0;
            transition: var(--transition);
        }

        .navbar-brand {
            font-weight: 800;
            font-size: 1.4rem;
            color: var(--primary-blue) !important;
            letter-spacing: -0.5px;
        }

        .nav-link {
            font-weight: 600;
            color: var(--text-main) !important;
            padding: 0.5rem 1rem !important;
            border-radius: 8px;
            transition: var(--transition);
        }

        .nav-link:hover {
            color: var(--primary-blue) !important;
            background: rgba(0, 102, 255, 0.05);
        }

        .nav-link.active {
            color: var(--primary-blue) !important;
            background: rgba(0, 102, 255, 0.08);
        }

        /* Dark mode specific pill colors */
        [data-theme="dark"] .nav-pill-custom {
            background: #1e293b;
            border-color: #334155;
            color: #94a3b8;
        }

        [data-theme="dark"] .hero-section {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-color: rgba(255, 255, 255, 0.05);
        }

        [data-theme="dark"] .app-card {
            background: var(--bg-card);
            border-color: var(--border-color);
        }

        [data-theme="dark"] .app-stats-bar {
            background: #0f172a;
        }

        [data-theme="dark"] .stat-value {
            color: #f1f5f9;
        }

        [data-theme="dark"] footer {
            background-color: #1e293b !important;
            border-top-color: var(--border-color) !important;
        }

        /* Content spacing */
        main {
            min-height: calc(100vh - 72px);
            padding-top: 2rem;
        }

        /* Global Typography with clamp */
        h1 { font-size: var(--clamp-h1); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; }
        h2 { font-size: var(--clamp-h2); font-weight: 700; letter-spacing: -1px; }

        /* Modern Utility Classes */
        .glass-card {
            background: var(--bg-glass);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
            box-shadow: var(--card-shadow);
        }

        .rounded-4 { border-radius: 1.25rem !important; }

        .btn-primary {
            background-color: var(--primary-blue);
            border: none;
            padding: 0.75rem 1.5rem;
            font-weight: 700;
            border-radius: 12px;
            transition: var(--transition);
            box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3);
            background-color: #0052cc;
        }

        /* Theme Toggle */
        .theme-toggle {
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            background: rgba(0, 102, 255, 0.05);
            color: var(--text-main);
            border: none;
        }

        .theme-toggle:hover {
            background: rgba(0, 102, 255, 0.1);
            color: var(--primary-blue);
        }

        @media (max-width: 991.98px) {
            .navbar-collapse {
                background: var(--bg-card);
                margin-top: 1rem;
                padding: 1rem;
                border-radius: 16px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            }
        }
    </style>
    <?php echo $__env->yieldPushContent('styles'); ?>

    <!-- Theme Check Script (Prevent flash) -->
    <script>
        (function() {
            const savedTheme = localStorage.getItem('theme') || 'light';
            document.documentElement.setAttribute('data-theme', savedTheme);
        })();
    </script>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light sticky-top">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center" href="<?php echo e(route('home')); ?>">
            <img src="<?php echo e(asset('hbu.png')); ?>" alt="<?php echo e(config('app.name')); ?>" height="40" class="me-2" style="border-radius: 50%;">
            <?php echo e(config('app.name')); ?>

        </a>

        <div class="d-flex align-items-center order-lg-3 gap-2">
            <button id="themeToggle" class="theme-toggle" title="Toggle Day/Night Mode">
                <i class="bi bi-sun-fill"></i>
            </button>

            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="navbarMain">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link <?php echo e(request()->routeIs('home') ? 'active' : ''); ?>" href="<?php echo e(route('home')); ?>">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?php echo e(request()->is('platform/Android') ? 'active' : ''); ?>" href="<?php echo e(route('platform.show', 'Android')); ?>">
                        <i class="bi bi-android2 me-1"></i> Android
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?php echo e(request()->is('platform/PC') ? 'active' : ''); ?>" href="<?php echo e(route('platform.show', 'PC')); ?>">
                        <i class="bi bi-windows me-1"></i> PC
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?php echo e(request()->is('platform/iOS') ? 'active' : ''); ?>" href="<?php echo e(route('platform.show', 'iOS')); ?>">
                        <i class="bi bi-apple me-1"></i> iOS
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?php echo e(request()->is('platform/macOS') ? 'active' : ''); ?>" href="<?php echo e(route('platform.show', 'macOS')); ?>">
                        <i class="bi bi-laptop me-1"></i> macOS
                    </a>
                </li>
            </ul>

            <div class="d-flex align-items-center">
                <?php if(Session::get('admin_logged_in')): ?>
                    <a href="<?php echo e(route('admin.dashboard')); ?>" class="btn btn-sm btn-outline-primary rounded-pill px-3 me-2">Dashboard</a>
                    <a href="<?php echo e(route('admin.change_password')); ?>" class="btn btn-sm btn-outline-secondary rounded-pill px-3 me-2">Password</a>
                    <form method="POST" action="<?php echo e(route('admin.logout')); ?>" class="d-inline">
                        <?php echo csrf_field(); ?>
                        <button class="btn btn-sm btn-dark rounded-pill px-3">Logout</button>
                    </form>
                <?php endif; ?>
            </div>
        </div>
    </div>
</nav>

<main>
    <div class="container">
        <?php if(session('success')): ?>
            <div class="alert alert-success d-flex align-items-center" role="alert">
                <i class="bi bi-check-circle-fill me-2"></i>
                <?php echo e(session('success')); ?>

            </div>
        <?php endif; ?>

        <?php if(session('error')): ?>
            <div class="alert alert-danger d-flex align-items-center" role="alert">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                <?php echo e(session('error')); ?>

            </div>
        <?php endif; ?>

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

<footer class="py-5 mt-5 border-top bg-white">
    <div class="container text-center">
        <p class="text-muted mb-0">© <?php echo e(date('Y')); ?> <?php echo e(config('app.name')); ?>. Built with precision for all devices.</p>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const themeToggle = document.getElementById('themeToggle');
        const html = document.documentElement;
        const icon = themeToggle.querySelector('i');

        // Initial icon state
        function updateIcon(theme) {
            if (theme === 'dark') {
                icon.className = 'bi bi-moon-stars-fill';
            } else {
                icon.className = 'bi bi-sun-fill';
            }
        }

        updateIcon(html.getAttribute('data-theme'));

        themeToggle.addEventListener('click', () => {
            const currentTheme = html.getAttribute('data-theme');
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';

            html.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
            updateIcon(newTheme);
        });
    });
</script>

<?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH C:\xampp\htdocs\resources\views/layouts/app.blade.php ENDPATH**/ ?>