<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

        <title><?php echo e(config('app.name', 'MyMoney')); ?></title>

        <!-- 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">

        <!-- Icons -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

        <!-- Chart.js -->
        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

        <!-- Scripts -->
        <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>

        <style>
            [x-cloak] { display: none !important; }
            body {
                font-family: 'Plus Jakarta Sans', sans-serif;
                -webkit-font-smoothing: antialiased;
            }
            
            /* Custom Scrollbar */
            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
            ::-webkit-scrollbar-track {
                background: transparent;
            }
            ::-webkit-scrollbar-thumb {
                background: #cbd5e1;
                border-radius: 3px;
            }
            ::-webkit-scrollbar-thumb:hover {
                background: #94a3b8;
            }

            /* Glass Effect for Sidebar/Header */
            .glass {
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(10px);
            }
        </style>

        <?php echo $__env->yieldPushContent('styles'); ?>
    </head>
    <body class="bg-slate-50 text-slate-900 antialiased" x-data="{ sidebarOpen: false }">
        
        <div class="min-h-screen flex flex-col lg:flex-row">

            <!-- Mobile Sidebar Overlay -->
            <div x-show="sidebarOpen"
                 x-transition:enter="transition-opacity ease-linear duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition-opacity ease-linear duration-300"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 @click="sidebarOpen = false"
                 class="fixed inset-0 bg-slate-900/60 z-40 lg:hidden glass"
                 x-cloak>
            </div>

            <!-- Sidebar -->
            <aside class="fixed inset-y-0 left-0 z-50 w-72 bg-slate-900 text-white shadow-xl transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:shadow-none"
                   :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
                
                <!-- Logo -->
                <div class="flex items-center justify-between h-20 px-6 border-b border-slate-800">
                    <a href="<?php echo e(route('dashboard')); ?>" class="flex items-center space-x-3">
                        <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">
                            <i class="fas fa-wallet text-lg"></i>
                        </div>
                        <div>
                            <span class="block text-lg font-bold tracking-tight text-white">MyMoney</span>
                            <span class="block text-xs text-slate-400 font-medium">Personal Finance</span>
                        </div>
                    </a>
                    <button @click="sidebarOpen = false" class="lg:hidden text-slate-400 hover:text-white transition-colors">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>

                <!-- Navigation -->
                <nav class="px-4 py-6 space-y-1 overflow-y-auto h-[calc(100vh-160px)]">
                    <p class="px-4 text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Menu Utama</p>
                    
                    <a href="<?php echo e(route('dashboard')); ?>"
                       class="group flex items-center px-4 py-3 rounded-xl transition-all duration-200 <?php echo e(request()->routeIs('dashboard') ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20' : 'text-slate-400 hover:bg-slate-800 hover:text-white'); ?>">
                        <i class="fas fa-chart-pie w-6 <?php echo e(request()->routeIs('dashboard') ? 'text-white' : 'text-slate-500 group-hover:text-white'); ?> transition-colors"></i>
                        <span class="font-medium">Dashboard</span>
                    </a>

                    <a href="<?php echo e(route('accounts.index')); ?>"
                       class="group flex items-center px-4 py-3 rounded-xl transition-all duration-200 <?php echo e(request()->routeIs('accounts.*') ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20' : 'text-slate-400 hover:bg-slate-800 hover:text-white'); ?>">
                        <i class="fas fa-wallet w-6 <?php echo e(request()->routeIs('accounts.*') ? 'text-white' : 'text-slate-500 group-hover:text-white'); ?> transition-colors"></i>
                        <span class="font-medium">Akun Saya</span>
                    </a>

                    <a href="<?php echo e(route('transactions.index')); ?>"
                       class="group flex items-center px-4 py-3 rounded-xl transition-all duration-200 <?php echo e(request()->routeIs('transactions.*') ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20' : 'text-slate-400 hover:bg-slate-800 hover:text-white'); ?>">
                        <i class="fas fa-exchange-alt w-6 <?php echo e(request()->routeIs('transactions.*') ? 'text-white' : 'text-slate-500 group-hover:text-white'); ?> transition-colors"></i>
                        <span class="font-medium">Transaksi</span>
                    </a>

                    <p class="px-4 text-xs font-semibold text-slate-500 uppercase tracking-wider mt-6 mb-2">Perencanaan</p>

                    <a href="<?php echo e(route('budgets.index')); ?>"
                       class="group flex items-center px-4 py-3 rounded-xl transition-all duration-200 <?php echo e(request()->routeIs('budgets.*') ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20' : 'text-slate-400 hover:bg-slate-800 hover:text-white'); ?>">
                        <i class="fas fa-bullseye w-6 <?php echo e(request()->routeIs('budgets.*') ? 'text-white' : 'text-slate-500 group-hover:text-white'); ?> transition-colors"></i>
                        <span class="font-medium">Anggaran</span>
                    </a>

                    <a href="<?php echo e(route('goals.index')); ?>"
                       class="group flex items-center px-4 py-3 rounded-xl transition-all duration-200 <?php echo e(request()->routeIs('goals.*') ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20' : 'text-slate-400 hover:bg-slate-800 hover:text-white'); ?>">
                        <i class="fas fa-flag-checkered w-6 <?php echo e(request()->routeIs('goals.*') ? 'text-white' : 'text-slate-500 group-hover:text-white'); ?> transition-colors"></i>
                        <span class="font-medium">Target</span>
                    </a>

                    <p class="px-4 text-xs font-semibold text-slate-500 uppercase tracking-wider mt-6 mb-2">Sistem</p>

                    <a href="<?php echo e(route('reports.index')); ?>"
                       class="group flex items-center px-4 py-3 rounded-xl transition-all duration-200 <?php echo e(request()->routeIs('reports.*') ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20' : 'text-slate-400 hover:bg-slate-800 hover:text-white'); ?>">
                        <i class="fas fa-chart-bar w-6 <?php echo e(request()->routeIs('reports.*') ? 'text-white' : 'text-slate-500 group-hover:text-white'); ?> transition-colors"></i>
                        <span class="font-medium">Laporan</span>
                    </a>

                    <a href="<?php echo e(route('categories.index')); ?>"
                       class="group flex items-center px-4 py-3 rounded-xl transition-all duration-200 <?php echo e(request()->routeIs('categories.*') ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20' : 'text-slate-400 hover:bg-slate-800 hover:text-white'); ?>">
                        <i class="fas fa-tags w-6 <?php echo e(request()->routeIs('categories.*') ? 'text-white' : 'text-slate-500 group-hover:text-white'); ?> transition-colors"></i>
                        <span class="font-medium">Kategori</span>
                    </a>
                </nav>

                <!-- User Profile -->
                <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-slate-800 bg-slate-900">
                    <div x-data="{ open: false }" class="relative">
                        <button @click="open = !open" class="flex items-center w-full p-2 rounded-xl hover:bg-slate-800 transition-colors">
                            <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center text-white font-bold border-2 border-slate-600">
                                <?php echo e(strtoupper(substr(auth()->user()->name, 0, 1))); ?>

                            </div>
                            <div class="ml-3 text-left flex-1 min-w-0">
                                <p class="text-sm font-medium text-white truncate"><?php echo e(auth()->user()->name); ?></p>
                                <p class="text-xs text-slate-400 truncate"><?php echo e(auth()->user()->email); ?></p>
                            </div>
                            <i class="fas fa-chevron-up text-slate-500 transition-transform duration-200" :class="open ? '' : 'rotate-180'"></i>
                        </button>

                        <div x-show="open" @click.away="open = false" x-cloak
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 translate-y-2"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="absolute bottom-full left-0 right-0 mb-3 bg-white rounded-xl shadow-xl border border-slate-100 overflow-hidden py-1">
                            <a href="<?php echo e(route('profile.edit')); ?>" class="flex items-center px-4 py-2.5 text-sm text-slate-600 hover:bg-slate-50 hover:text-emerald-600 transition-colors">
                                <i class="fas fa-user-cog w-5 mr-2"></i> Pengaturan
                            </a>
                            <div class="h-px bg-slate-100 my-1"></div>
                            <form method="POST" action="<?php echo e(route('logout')); ?>">
                                <?php echo csrf_field(); ?>
                                <button type="submit" class="flex items-center w-full px-4 py-2.5 text-sm text-rose-600 hover:bg-rose-50 transition-colors">
                                    <i class="fas fa-sign-out-alt w-5 mr-2"></i> Keluar
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- Main Content -->
            <div class="flex-1 flex flex-col min-h-screen transition-all duration-300">
                <!-- Top Header -->
                <header class="h-20 bg-white/80 backdrop-blur-md sticky top-0 z-30 border-b border-slate-200 shadow-sm px-6 flex items-center justify-between">
                    <div class="flex items-center">
                        <button @click="sidebarOpen = true" class="lg:hidden p-2 -ml-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors mr-3">
                            <i class="fas fa-bars text-xl"></i>
                        </button>
                        
                        <!-- Page Title or Breadcrumb could go here -->
                        <h2 class="text-xl font-bold text-slate-800 hidden sm:block">
                            <?php echo $__env->yieldContent('header'); ?>
                        </h2>
                    </div>

                    <div class="flex items-center space-x-3 sm:space-x-4">
                        <!-- Date Time -->
                        <div class="hidden md:flex flex-col items-end mr-2">
                            <span class="text-sm font-semibold text-slate-700" x-data="{ date: new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }" x-text="date"></span>
                            <span class="text-xs text-slate-500" x-data="{ time: new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) }" x-init="setInterval(() => time = new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' }), 1000)" x-text="time"></span>
                        </div>

                        <!-- Add Transaction Button -->
                        <a href="<?php echo e(route('transactions.create')); ?>" class="flex items-center justify-center px-4 py-2.5 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 transition-all shadow-lg shadow-emerald-500/20 active:scale-95">
                            <i class="fas fa-plus sm:mr-2"></i>
                            <span class="hidden sm:inline font-medium">Transaksi Baru</span>
                        </a>
                    </div>
                </header>

                <main class="flex-1 p-4 sm:p-6 lg:p-8 w-full mx-auto">
                    <!-- Flash Messages -->
                     <?php if(session('success')): ?>
                        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
                             class="mb-6 bg-emerald-50 border border-emerald-100 text-emerald-700 px-4 py-3 rounded-xl flex items-center justify-between shadow-sm">
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-xl mr-3"></i>
                                <span class="font-medium"><?php echo e(session('success')); ?></span>
                            </div>
                            <button @click="show = false" class="text-emerald-500 hover:text-emerald-700">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    <?php endif; ?>

                    <?php if(session('error')): ?>
                        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
                             class="mb-6 bg-rose-50 border border-rose-100 text-rose-700 px-4 py-3 rounded-xl flex items-center justify-between shadow-sm">
                            <div class="flex items-center">
                                <i class="fas fa-exclamation-circle text-xl mr-3"></i>
                                <span class="font-medium"><?php echo e(session('error')); ?></span>
                            </div>
                            <button @click="show = false" class="text-rose-500 hover:text-rose-700">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    <?php endif; ?>

                    <?php echo e($slot); ?>

                </main>

                <!-- Footer -->
                <footer class="p-6 text-center text-sm text-slate-400 border-t border-slate-100 bg-white/50">
                    <p>&copy; <?php echo e(date('Y')); ?> MyMoney. All rights reserved.</p>
                </footer>
            </div>
        </div>
        
        <?php echo $__env->yieldPushContent('scripts'); ?>
    </body>
</html>
<?php /**PATH C:\xampp\htdocs\mymoney-app\resources\views\layouts\app.blade.php ENDPATH**/ ?>