<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <meta name="theme-color" content="#f59e0b">
    
    <title><?php echo $__env->yieldContent('title', config('app.name', 'LokaFurniture')); ?> - <?php echo e(config('app.name', 'LokaFurniture')); ?></title>
    <meta name="description" content="<?php echo $__env->yieldContent('meta_description', 'Toko Furniture Online Terlengkap untuk Rumah Impian Anda'); ?>">
    
    <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@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
    <?php echo $__env->yieldPushContent('styles'); ?>
    
    <style>
        /* ----- RESET & VARIABLES (OREN + COKLAT THEME) ----- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            /* Warna Oren */
            --primary-50: #fffbeb;
            --primary-100: #fef3c7;
            --primary-200: #fde68a;
            --primary-300: #fcd34d;
            --primary-400: #fbbf24;
            --primary-500: #f59e0b;
            --primary-600: #d97706;
            --primary-700: #b45309;
            --primary-800: #92400e;
            --primary-900: #78350f;
            
            /* Warna Coklat */
            --brown-50: #faf7f2;
            --brown-100: #f0e9df;
            --brown-200: #e0d3c2;
            --brown-300: #c9b59b;
            --brown-400: #b08f6e;
            --brown-500: #8c6a4a;
            --brown-600: #6b4c31;
            --brown-700: #4a321f;
            --brown-800: #2c1a0e;
            --brown-900: #1a0f08;
            
            --bg-primary: #faf7f2;
            --bg-secondary: #faf7f2;
            --bg-elevated: #ffffff;
            --text-primary: #2c1a0e;
            --text-secondary: #6b4c31;
            --text-tertiary: #8c6a4a;
            --border-light: #e0d3c2;
            --border-medium: #c9b59b;
            
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08);
            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08);
            
            --transition-base: all 0.2s ease;
            --transition-smooth: all 0.3s ease;
            
            --radius-sm: 0.5rem;
            --radius-md: 0.75rem;
            --radius-lg: 1rem;
            --radius-xl: 1.25rem;
        }
        
        [data-theme="dark"] {
            --bg-primary: #1a0f08;
            --bg-secondary: #2c1a0e;
            --bg-elevated: #3d2514;
            --text-primary: #faf7f2;
            --text-secondary: #e0d3c2;
            --text-tertiary: #c9b59b;
            --border-light: #4a321f;
            --border-medium: #6b4c31;
        }
        
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            transition: background-color 0.3s ease, color 0.2s ease;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        main#main-content {
            flex: 1;
        }
        
        .container-custom { 
            max-width: 1280px; 
            margin: 0 auto; 
            padding: 0 1.5rem; 
            width: 100%;
        }
        
        @media (max-width: 768px) {
            .container-custom { padding: 0 1.25rem; }
        }
        @media (max-width: 480px) {
            .container-custom { padding: 0 1rem; }
        }
        
        /* Navbar - Oren + Coklat */
        .navbar { 
            background: rgba(255, 251, 235, 0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-light);
            position: sticky; 
            top: 0; 
            z-index: 100; 
            transition: var(--transition-smooth);
        }
        [data-theme="dark"] .navbar { 
            background: rgba(26, 15, 8, 0.95);
        }
        
        /* Footer */
        .footer { 
            background: var(--bg-secondary); 
            border-top: 1px solid var(--border-light);
            margin-top: auto;
            width: 100%;
        }
        
        .footer-link { 
            color: var(--text-secondary); 
            text-decoration: none; 
            font-size: 0.875rem; 
            transition: var(--transition-base);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .footer-link:hover { 
            color: var(--primary-600); 
            transform: translateX(4px);
        }
        
        /* Button Icon */
        .btn-icon { 
            width: 2.75rem; 
            height: 2.75rem; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            border-radius: var(--radius-xl); 
            background: var(--bg-elevated); 
            border: 1px solid var(--border-light); 
            cursor: pointer; 
            transition: var(--transition-base); 
            color: var(--text-secondary);
            box-shadow: var(--shadow-sm);
        }
        .btn-icon:hover { 
            background: var(--primary-50); 
            color: var(--primary-600); 
            border-color: var(--primary-300);
            transform: scale(1.02);
        }
        
        /* Back to Top - Oren */
        #back-to-top { 
            position: fixed; 
            bottom: 1.5rem; 
            right: 1.5rem; 
            width: 3rem; 
            height: 3rem; 
            border-radius: var(--radius-lg); 
            background: var(--primary-500);
            border: none;
            color: white;
            cursor: pointer; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            transition: var(--transition-smooth); 
            opacity: 0; 
            visibility: hidden; 
            z-index: 90; 
            box-shadow: var(--shadow-md);
        }
        #back-to-top.visible { 
            opacity: 1; 
            visibility: visible; 
        }
        #back-to-top:hover { 
            background: var(--primary-600); 
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }
        
        /* Theme Selector */
        .theme-selector { 
            position: fixed; 
            bottom: 6rem; 
            right: 1.5rem; 
            z-index: 90; 
        }
        .theme-menu { 
            position: absolute; 
            bottom: 100%; 
            right: 0; 
            margin-bottom: 0.75rem; 
            background: var(--bg-elevated); 
            border: 1px solid var(--border-light); 
            border-radius: var(--radius-xl); 
            padding: 0.5rem; 
            box-shadow: var(--shadow-lg); 
            display: none;
            min-width: 140px;
        }
        .theme-selector:hover .theme-menu { 
            display: block; 
            animation: fadeInUp 0.2s ease;
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .theme-option { 
            display: flex; 
            align-items: center; 
            gap: 0.75rem; 
            padding: 0.75rem 1.25rem; 
            width: 100%; 
            border: none; 
            background: none; 
            color: var(--text-primary); 
            font-size: 0.875rem; 
            font-weight: 500;
            border-radius: var(--radius-md); 
            cursor: pointer; 
            transition: var(--transition-base);
        }
        .theme-option:hover { background: var(--primary-50); color: var(--primary-700); }
        .theme-option.active { background: var(--primary-100); color: var(--primary-700); }
        
        /* Breadcrumb */
        .breadcrumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.25rem;
            font-size: 0.8125rem;
        }
        .breadcrumb a { color: var(--text-tertiary); transition: var(--transition-base); }
        .breadcrumb a:hover { color: var(--primary-600); }
        
        /* Skip Link */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: var(--primary-600);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: var(--radius-md);
            z-index: 200;
            transition: top 0.2s;
        }
        .skip-link:focus { top: 1rem; left: 1rem; }
        
        /* Utility */
        .text-gradient-primary {
            background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        /* Additional Oren + Coklat Styles */
        .btn-primary {
            background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
            border: none;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-md);
            font-weight: 600;
            transition: var(--transition-base);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary-500);
            color: var(--primary-600);
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-md);
            font-weight: 600;
            transition: var(--transition-base);
        }
        
        .btn-outline:hover {
            background: var(--primary-500);
            color: white;
        }
        
        /* Card Style */
        .card {
            background: var(--bg-elevated);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            transition: var(--transition-base);
        }
        
        .card:hover {
            box-shadow: var(--shadow-lg);
            border-color: var(--primary-200);
        }
        
        /* Badge Oren */
        .badge-orange {
            background: var(--primary-100);
            color: var(--primary-700);
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <body class="splash-active"> <a href="#main-content" class="skip-link">Langsung ke konten utama</a>
    <?php if (isset($component)) { $__componentOriginal1cf7ddb08d3976da931ed0aee29f0761 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal1cf7ddb08d3976da931ed0aee29f0761 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.splash-screen','data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('splash-screen'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal1cf7ddb08d3976da931ed0aee29f0761)): ?>
<?php $attributes = $__attributesOriginal1cf7ddb08d3976da931ed0aee29f0761; ?>
<?php unset($__attributesOriginal1cf7ddb08d3976da931ed0aee29f0761); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal1cf7ddb08d3976da931ed0aee29f0761)): ?>
<?php $component = $__componentOriginal1cf7ddb08d3976da931ed0aee29f0761; ?>
<?php unset($__componentOriginal1cf7ddb08d3976da931ed0aee29f0761); ?>
<?php endif; ?>
    <nav class="navbar">
        <?php echo $__env->make('layouts.navigation', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
    </nav>
    
    <?php if(!request()->routeIs('home') && !request()->routeIs('landing') && !request()->is('/')): ?>
        <?php if (! empty(trim($__env->yieldContent('header')))): ?>
            <header style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light);">
                <div class="container-custom py-6 md:py-8">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
                        <div>
                            <nav class="breadcrumb mb-2" aria-label="Breadcrumb">
                                <a href="<?php echo e(route('dashboard')); ?>" class="inline-flex items-center gap-1">
                                    <i class="fas fa-home text-xs"></i> Dashboard
                                </a>
                                <i class="fas fa-chevron-right text-[10px] mx-1" style="color: var(--text-tertiary);"></i>
                                <span class="font-semibold" style="color: var(--primary-600);"><?php echo $__env->yieldContent('header'); ?></span>
                            </nav>
                            <h1 class="text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight" style="color: var(--text-primary);">
                                <?php echo $__env->yieldContent('header'); ?>
                            </h1>
                        </div>
                        <?php if (! empty(trim($__env->yieldContent('header_actions')))): ?>
                            <div class="flex-shrink-0">
                                <?php echo $__env->yieldContent('header_actions'); ?>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </header>
        <?php endif; ?>
    <?php endif; ?>
    
    <main id="main-content" style="background-color: #faf7f2; flex: 1;">
        <?php echo e($slot); ?>

        <?php if (! empty(trim($__env->yieldContent('content')))): ?>
            <?php echo $__env->yieldContent('content'); ?>
        <?php endif; ?>
    </main>
    
    <button id="back-to-top" onclick="scrollToTop()" aria-label="Kembali ke atas">
        <i class="fas fa-arrow-up"></i>
    </button>
    
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3200,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer);
                toast.addEventListener('mouseleave', Swal.resumeTimer);
            }
        });

        <?php if(session('success')): ?>
            if (!window._toastShown) {
                window._toastShown = true;
                Toast.fire({ icon: 'success', title: "<?php echo e(session('success')); ?>" });
            }
        <?php endif; ?>

        <?php if(session('error')): ?>
            if (!window._errorToastShown) {
                window._errorToastShown = true;
                Toast.fire({ icon: 'error', title: "<?php echo e(session('error')); ?>" });
            }
        <?php endif; ?>

        <?php if(session('warning')): ?>
            if (!window._warningToastShown) {
                window._warningToastShown = true;
                Toast.fire({ icon: 'warning', title: "<?php echo e(session('warning')); ?>" });
            }
        <?php endif; ?>

        <?php if(session('info')): ?>
            if (!window._infoToastShown) {
                window._infoToastShown = true;
                Toast.fire({ icon: 'info', title: "<?php echo e(session('info')); ?>" });
            }
        <?php endif; ?>
        
        function setTheme(theme) {
            document.documentElement.setAttribute('data-theme', theme);
            localStorage.setItem('theme', theme);
            document.querySelectorAll('.theme-option').forEach(btn => {
                if(btn.getAttribute('data-theme-value') === theme) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
            const paletteIcon = document.querySelector('#themeToggleBtn i');
            if(paletteIcon) {
                if(theme === 'dark') paletteIcon.className = 'fas fa-moon';
                else paletteIcon.className = 'fas fa-sun';
            }
        }
        
        (function initTheme() {
            const savedTheme = localStorage.getItem('theme');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            let defaultTheme = savedTheme || (prefersDark ? 'dark' : 'light');
            setTheme(defaultTheme);
        })();
        
        document.querySelectorAll('.theme-option').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const themeVal = btn.getAttribute('data-theme-value');
                if(themeVal) setTheme(themeVal);
            });
        });
        
        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
        
        window.addEventListener('scroll', function() {
            const btn = document.getElementById('back-to-top');
            if (window.scrollY > 400) {
                btn.classList.add('visible');
            } else {
                btn.classList.remove('visible');
            }
        });
        
        if (typeof window.Livewire !== 'undefined') {
            document.addEventListener('livewire:init', () => {
                Livewire.on('notify', (data) => {
                    if(data && data.message && !window[`_notify_${data.type}`]) {
                        window[`_notify_${data.type}`] = true;
                        Toast.fire({ icon: data.type || 'info', title: data.message });
                        setTimeout(() => { delete window[`_notify_${data.type}`]; }, 1000);
                    }
                });
            });
        }
        
        window.showToast = function(icon, title) {
            Toast.fire({ icon: icon, title: title });
        };
        
        if (typeof Chart !== 'undefined') {
            Chart.defaults.font.family = "'Plus Jakarta Sans', sans-serif";
            const observer = new MutationObserver(() => {
                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
                Chart.defaults.color = isDark ? '#e0d3c2' : '#6b4c31';
            });
            observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
        }

        window.addEventListener('load', function() {
            // Menghapus class splash-active agar user bisa scroll kembali
            setTimeout(() => {
                document.body.classList.remove('splash-active');
            }, 1500); 
        });
    </script>
    
    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html><?php /**PATH C:\laragon\www\LokaPustaka\resources\views/layouts/app.blade.php ENDPATH**/ ?>