<!DOCTYPE html>
<html lang="id">
<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'); ?> - E-Absensi</title>

    <link rel="icon" href="/img/logo.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        /* =====================
           VARIABEL & BASE
        ===================== */
        :root {
            --primary:       #4f46e5;
            --primary-light: #eef2ff;
            --bg:            #f8fafc;
            --sidebar:       #ffffff;
            --text-main:     #1e293b;
            --text-muted:    #64748b;
            --sidebar-w:     280px;
            --transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        *,
        *::before,
        *::after { box-sizing: border-box; }

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

        /* =====================
           LAYOUT WRAPPER
        ===================== */
        #wrapper {
            display: flex;
            min-height: 100vh;
        }

        /* =====================
           SIDEBAR
        ===================== */
        #sidebar-wrapper {
            width: var(--sidebar-w);
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background: var(--sidebar);
            border-right: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            z-index: 1050;
            transition: var(--transition);
        }

        .sidebar-header {
            padding: 2rem 1.5rem;
            text-align: center;
        }

        .sidebar-header img {
            width: 60px;
            margin-bottom: 12px;
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
        }

        .sidebar-header h6 {
            margin: 0;
            font-weight: 800;
            letter-spacing: 1px;
            color: var(--text-main);
        }

        /* Menu label */
        .menu-title {
            margin: 24px 24px 8px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-muted);
        }

        /* Nav item */
        .nav-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 20px;
            margin: 3px 14px;
            border-radius: 12px;
            color: var(--text-muted);
            font-weight: 500;
            font-size: 14px;
            transition: var(--transition);
        }

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

        .nav-link:hover {
            background: var(--primary-light);
            color: var(--primary);
            transform: translateX(4px);
        }

        .nav-link.active {
            background: var(--primary);
            color: #fff;
            box-shadow: 0 8px 18px -4px rgba(79, 70, 229, 0.35);
        }

        /* Tombol logout */
        .btn-logout {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 11px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 14px;
            transition: var(--transition);
        }

        /* =====================
           KONTEN UTAMA
        ===================== */
        #page-content-wrapper {
            margin-left: var(--sidebar-w);
            width: 100%;
            transition: var(--transition);
        }

        /* =====================
           NAVBAR
        ===================== */
        .navbar {
            position: sticky;
            top: 0;
            z-index: 1000;
            padding: 1rem 2rem;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        /* Kotak info pengguna */
        .user-box {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 16px;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
        }

        .user-avatar {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--primary);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* =====================
           KARTU
        ===================== */
        .card {
            border: none;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
        }

        /* =====================
           OVERLAY MOBILE
        ===================== */
        #mobile-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(2px);
            z-index: 1040;
        }

        /* =====================
           RESPONSIVE
        ===================== */
        @media (max-width: 992px) {
            #sidebar-wrapper          { transform: translateX(-100%); }
            #sidebar-wrapper.active   { transform: translateX(0); }
            #page-content-wrapper     { margin-left: 0; }
            #mobile-overlay.active    { display: block; }
            .navbar                   { padding: 0.9rem 1rem; }
        }
    </style>
</head>
<body>


<div id="mobile-overlay" onclick="toggleSidebar()"></div>

<div id="wrapper">

    
    <?php echo $__env->yieldContent('sidebar'); ?>

    
    <div id="page-content-wrapper">

        
        <nav class="navbar d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-3">
                <button class="btn btn-light d-lg-none" onclick="toggleSidebar()" aria-label="Buka menu">
                    <i class="bi bi-list fs-5"></i>
                </button>
                <h5 class="mb-0 fw-bold"><?php echo $__env->yieldContent('page_header'); ?></h5>
            </div>

            <div class="user-box">
                <div class="user-avatar">
                    <?php echo e(strtoupper(substr(auth()->user()->name, 0, 1))); ?>

                </div>
                <span><?php echo e(auth()->user()->name); ?></span>
            </div>
        </nav>

        
        <div class="p-4 p-md-5">
            <?php echo $__env->yieldContent('content'); ?>
        </div>

    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function toggleSidebar() {
        document.getElementById('sidebar-wrapper').classList.toggle('active');
        document.getElementById('mobile-overlay').classList.toggle('active');
    }
</script>

<?php echo $__env->yieldPushContent('scripts'); ?>

</body>
</html><?php /**PATH C:\laragon\www\absensi_muttaqin_v2\resources\views/layouts/app.blade.php ENDPATH**/ ?>