<!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', 'Dashboard'); ?> - <?php echo e(\App\Models\AttendanceSetting::get('company_name', config('app.name', 'Sistem Absensi'))); ?></title>

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

    <link rel="stylesheet" href="<?php echo e(asset('mazer/assets/css/bootstrap.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('mazer/assets/vendors/iconly/bold.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('mazer/assets/vendors/perfect-scrollbar/perfect-scrollbar.css')); ?>">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="<?php echo e(asset('mazer/assets/vendors/bootstrap-icons/bootstrap-icons.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('mazer/assets/vendors/sweetalert2/sweetalert2.min.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('mazer/assets/vendors/toastify/toastify.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('mazer/assets/css/app.css')); ?>">
    <link rel="shortcut icon" href="<?php echo e(asset('mazer/assets/images/favicon.svg')); ?>" type="image/x-icon">

    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #7c3aed 100%);
            --secondary-gradient: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
            --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
            --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            --danger-gradient: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
            
            --theme-primary: #4f46e5;
            --bg-canvas: #f4f6fb;
            --card-surface: #ffffff;
            --text-heading: #0f172a;
            --text-body: #334155;
            --text-muted: #64748b;
            --border-soft: #edf2f7;
            --elevation-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
            --elevation-hover: 0 12px 30px -5px rgba(0, 0, 0, 0.08);
        }

        * {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            letter-spacing: -0.15px;
        }

        body {
            background-color: var(--bg-canvas);
            color: var(--text-body);
            font-size: 0.92rem;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        /* Layout & Main Container */
        #main {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: var(--bg-canvas);
        }

        #main-content {
            flex: 1;
            padding: 1.75rem 2.25rem;
            animation: fadeInPage 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes fadeInPage {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Page Titles */
        .page-heading h3 {
            font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
            font-weight: 800;
            color: var(--text-heading);
            font-size: 1.55rem;
            letter-spacing: -0.5px;
            margin-bottom: 0.25rem;
        }

        .page-heading .text-subtitle {
            font-size: 0.88rem;
            color: var(--text-muted);
            margin-bottom: 0;
        }

        /* Materialize-Inspired Gradient Topbar */
        .luxury-topbar {
            background: var(--primary-gradient);
            padding: 0.75rem 1.75rem;
            box-shadow: 0 4px 20px 0 rgba(79, 70, 229, 0.25);
            position: sticky;
            top: 0;
            z-index: 99;
        }

        .topbar-search {
            position: relative;
            max-width: 320px;
            width: 100%;
        }

        .topbar-search input {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 999px;
            padding: 0.45rem 1rem 0.45rem 2.4rem;
            color: #ffffff;
            font-size: 0.85rem;
            width: 100%;
            transition: all 0.2s ease;
        }

        .topbar-search input::placeholder {
            color: rgba(255, 255, 255, 0.65);
        }

        .topbar-search input:focus {
            background: rgba(255, 255, 255, 0.25);
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
        }

        .topbar-search .search-icon {
            position: absolute;
            left: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            pointer-events: none;
        }

        .topbar-pill-btn {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffffff;
            padding: 0.4rem 0.9rem;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            backdrop-filter: blur(8px);
        }

        /* Materialize Sidebar Styling */
        .sidebar-wrapper {
            background: #ffffff;
            border-right: 1px solid var(--border-soft);
            box-shadow: 2px 0 15px rgba(0, 0, 0, 0.02);
        }

        .sidebar-wrapper .sidebar-header {
            padding: 1.5rem 1.5rem 0.85rem 1.5rem;
        }

        .sidebar-wrapper .menu .sidebar-title {
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: #94a3b8;
            padding: 0 1.25rem;
            margin-top: 1.25rem;
            margin-bottom: 0.35rem;
        }

        .sidebar-wrapper .menu .sidebar-item .sidebar-link {
            padding: 0.65rem 1rem;
            margin: 0.15rem 0.5rem;
            border-radius: 10px;
            font-weight: 500;
            font-size: 0.88rem;
            color: #475569;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .sidebar-wrapper .menu .sidebar-item .sidebar-link i {
            font-size: 1.15rem;
            color: #64748b;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .sidebar-wrapper .menu .sidebar-item.active .sidebar-link {
            background: var(--primary-gradient);
            color: #ffffff !important;
            box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
            font-weight: 600;
        }

        .sidebar-wrapper .menu .sidebar-item.active .sidebar-link i {
            color: #ffffff !important;
        }

        .sidebar-wrapper .menu .sidebar-item .sidebar-link:hover {
            background-color: #f1f5f9;
            color: var(--theme-primary);
            transform: translateX(3px);
        }

        .sidebar-wrapper .menu .sidebar-item .sidebar-link:hover i {
            color: var(--theme-primary);
        }

        /* Materialize Luxury Cards */
        .card {
            border: none;
            background: var(--card-surface);
            border-radius: 16px;
            box-shadow: var(--elevation-shadow);
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            margin-bottom: 1.5rem;
        }

        .card-header {
            background: transparent;
            border-bottom: 1px solid var(--border-soft);
            padding: 1.25rem 1.5rem;
        }

        .card-header h5, .card-header h4 {
            font-weight: 800;
            color: var(--text-heading);
            letter-spacing: -0.4px;
        }

        .card-body {
            padding: 1.5rem;
        }

        .card-footer {
            background: #fafbfc;
            border-top: 1px solid var(--border-soft);
            padding: 1rem 1.5rem;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
        }

        /* Vibrant Stat Cards */
        .material-stat-card {
            background: #ffffff;
            border-radius: 16px;
            padding: 1.35rem 1.5rem;
            box-shadow: var(--elevation-shadow);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 1.25rem;
            height: 100%;
        }

        .material-stat-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--elevation-hover);
        }

        .stat-icon-glow {
            width: 54px;
            height: 54px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #ffffff;
            flex-shrink: 0;
        }

        .stat-icon-purple {
            background: var(--primary-gradient);
            box-shadow: 0 8px 18px rgba(79, 70, 229, 0.35);
        }

        .stat-icon-green {
            background: var(--success-gradient);
            box-shadow: 0 8px 18px rgba(16, 185, 129, 0.35);
        }

        .stat-icon-orange {
            background: var(--warning-gradient);
            box-shadow: 0 8px 18px rgba(245, 158, 11, 0.35);
        }

        .stat-icon-rose {
            background: var(--danger-gradient);
            box-shadow: 0 8px 18px rgba(244, 63, 94, 0.35);
        }

        .stat-info-box {
            overflow: hidden;
        }

        .stat-info-label {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.2rem;
        }

        .stat-info-val {
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--text-heading);
            line-height: 1.1;
            letter-spacing: -0.8px;
            margin: 0;
        }

        /* Tables */
        .table {
            color: var(--text-body);
            vertical-align: middle;
        }

        .table th {
            font-weight: 700;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #64748b;
            background-color: #f8fafc;
            border-bottom: 1px solid var(--border-soft);
            padding: 0.95rem 1.15rem;
        }

        .table td {
            padding: 0.95rem 1.15rem;
            border-bottom: 1px solid var(--border-soft);
        }

        .table-hover tbody tr:hover {
            background-color: #f8fafc;
        }

        /* Buttons */
        .btn {
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.88rem;
            padding: 0.55rem 1.25rem;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }

        .btn-primary {
            background: var(--primary-gradient);
            border: none;
            box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
            color: #ffffff;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
            box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
            transform: translateY(-1px);
            color: #ffffff;
        }

        .btn-success {
            background: var(--success-gradient);
            border: none;
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
            color: #ffffff;
        }

        .btn-success:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
            color: #ffffff;
        }

        /* Badges */
        .badge {
            font-weight: 600;
            padding: 0.38rem 0.75rem;
            border-radius: 999px;
            letter-spacing: 0.2px;
        }

        /* Pulsing dot */
        .pulse-live {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #10b981;
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            animation: pulseRadar 1.8s infinite;
        }

        @keyframes pulseRadar {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }

        /* Responsive Breakpoints */
        @media (max-width: 991px) {
            #main-content {
                padding: 1.25rem 1rem;
            }
            .luxury-topbar {
                padding: 0.65rem 1rem;
            }
        }

        @media (max-width: 576px) {
            #main-content {
                padding: 1rem 0.75rem;
            }
            .material-stat-card {
                padding: 1.15rem;
                gap: 1rem;
            }
            .stat-icon-glow {
                width: 44px;
                height: 44px;
                font-size: 1.25rem;
                border-radius: 12px;
            }
            .stat-info-val {
                font-size: 1.45rem;
            }
        }
    </style>

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

<body>
    <div id="app">
        <?php echo $__env->make('layouts.partials.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

        <div id="main" class="layout-navbar">
            <?php echo $__env->make('layouts.partials.navbar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

            <div id="main-content">
                <div class="page-heading">
                    <div class="page-title mb-4">
                        <div class="row align-items-center">
                            <div class="col-12 col-md-6 order-md-1 order-last">
                                <h3><?php echo $__env->yieldContent('page-title', 'Dashboard'); ?></h3>
                                <?php if (! empty(trim($__env->yieldContent('page-subtitle')))): ?>
                                    <p class="text-subtitle"><?php echo $__env->yieldContent('page-subtitle'); ?></p>
                                <?php endif; ?>
                            </div>
                            <div class="col-12 col-md-6 order-md-2 order-first text-md-end mb-3 mb-md-0">
                                <?php echo $__env->yieldContent('page-actions'); ?>
                            </div>
                        </div>
                    </div>

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

                <?php echo $__env->make('layouts.partials.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
            </div>
        </div>
    </div>

    <script src="<?php echo e(asset('mazer/assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js')); ?>"></script>
    <script src="<?php echo e(asset('mazer/assets/js/bootstrap.bundle.min.js')); ?>"></script>
    <script src="<?php echo e(asset('mazer/assets/vendors/sweetalert2/sweetalert2.all.min.js')); ?>"></script>
    <script src="<?php echo e(asset('mazer/assets/vendors/toastify/toastify.js')); ?>"></script>
    <script src="<?php echo e(asset('mazer/assets/js/main.js')); ?>"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            <?php if(session('success')): ?>
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: "<?php echo e(session('success')); ?>",
                    timer: 3000,
                    showConfirmButton: false,
                    customClass: { popup: 'rounded-4 shadow' }
                });
            <?php endif; ?>

            <?php if(session('error')): ?>
                Swal.fire({
                    icon: 'error',
                    title: 'Perhatian',
                    text: "<?php echo e(session('error')); ?>",
                    customClass: { popup: 'rounded-4 shadow' }
                });
            <?php endif; ?>
        });
    </script>

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

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