<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <?php $__env->startSection('header', 'Dashboard'); ?>

    <!-- Welcome & Quick Stats -->
    <div class="mb-8 animate-fade-in">
        <div class="bg-slate-900 rounded-3xl p-6 sm:p-10 text-white relative overflow-hidden shadow-2xl shadow-slate-900/20">
            <!-- Decorative Background -->
            <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-emerald-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 pointer-events-none"></div>
            <div class="absolute bottom-0 left-0 w-[300px] h-[300px] bg-indigo-500/10 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2 pointer-events-none"></div>

            <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between">
                <div>
                    <h1 class="text-3xl sm:text-4xl font-bold mb-2">Selamat Datang, <?php echo e(explode(' ', auth()->user()->name)[0]); ?>! 👋</h1>
                    <p class="text-slate-400 text-sm sm:text-base max-w-xl">
                        Kelola keuangan Anda lebih cerdas hari ini. Pantau pemasukan, pengeluaran, dan target tabungan Anda dalam satu tempat.
                    </p>
                </div>
                <div class="mt-6 md:mt-0 flex gap-3">
                    <div class="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/10">
                        <p class="text-xs text-slate-400 mb-1">Total Saldo</p>
                        <p class="text-2xl font-bold">Rp <?php echo e(number_format($stats['net_worth'] ?? 0, 0, ',', '.')); ?></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Pemasukan -->
        <div class="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1 animate-slide-up animation-delay-100">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-600">
                    <i class="fas fa-arrow-down text-xl"></i>
                </div>
                <span class="text-xs font-semibold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-lg">+<?php echo e(number_format($stats['income'] > 0 ? 100 : 0)); ?>%</span>
            </div>
            <p class="text-slate-500 text-sm font-medium">Pemasukan Bulan Ini</p>
            <h3 class="text-2xl font-bold text-slate-900 mt-1">Rp <?php echo e(number_format($stats['income'] ?? 0, 0, ',', '.')); ?></h3>
        </div>

        <!-- Pengeluaran -->
        <div class="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1 animate-slide-up animation-delay-200">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-xl bg-rose-50 flex items-center justify-center text-rose-600">
                    <i class="fas fa-arrow-up text-xl"></i>
                </div>
                <span class="text-xs font-semibold text-rose-600 bg-rose-50 px-2 py-1 rounded-lg">-<?php echo e(number_format($stats['expense'] > 0 ? 100 : 0)); ?>%</span>
            </div>
            <p class="text-slate-500 text-sm font-medium">Pengeluaran Bulan Ini</p>
            <h3 class="text-2xl font-bold text-slate-900 mt-1">Rp <?php echo e(number_format($stats['expense'] ?? 0, 0, ',', '.')); ?></h3>
        </div>

        <!-- Tabungan -->
        <div class="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1 animate-slide-up animation-delay-300">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600">
                    <i class="fas fa-piggy-bank text-xl"></i>
                </div>
                <span class="text-xs font-semibold text-indigo-600 bg-indigo-50 px-2 py-1 rounded-lg"><?php echo e(number_format($stats['savings_rate'] ?? 0, 1)); ?>% Saved</span>
            </div>
            <p class="text-slate-500 text-sm font-medium">Rasio Tabungan</p>
            <div class="flex items-center mt-1">
                <h3 class="text-2xl font-bold text-slate-900 mr-3"><?php echo e(number_format($stats['savings_rate'] ?? 0, 1)); ?>%</h3>
                <div class="flex-1 h-3 bg-slate-100 rounded-full overflow-hidden">
                    <div class="h-full bg-indigo-500 rounded-full" style="width: <?php echo e(min(($stats['savings_rate'] ?? 0), 100)); ?>%"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Split -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Left Column (Charts) -->
        <div class="lg:col-span-2 space-y-8">
            <!-- Income vs Expense -->
            <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-100 shadow-sm animate-slide-up animation-delay-400">
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <h3 class="text-lg font-bold text-slate-900">Analisis Keuangan</h3>
                        <p class="text-sm text-slate-500">Pemasukan vs Pengeluaran (6 Bulan Terakhir)</p>
                    </div>
                </div>
                <div class="h-80">
                    <canvas id="incomeExpenseChart"></canvas>
                </div>
            </div>

            <!-- Recent Transactions -->
            <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-100 shadow-sm animate-slide-up animation-delay-500">
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <h3 class="text-lg font-bold text-slate-900">Transaksi Terakhir</h3>
                        <p class="text-sm text-slate-500">Riwayat transaksi terbaru Anda</p>
                    </div>
                    <a href="<?php echo e(route('transactions.index')); ?>" class="text-sm font-medium text-emerald-600 hover:text-emerald-700">Lihat Semua</a>
                </div>
                <div class="space-y-4">
                    <?php $__empty_1 = true; $__currentLoopData = $recentTransactions ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $transaction): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <div class="flex items-center justify-between p-4 rounded-2xl hover:bg-slate-50 transition-colors border border-transparent hover:border-slate-100 group">
                            <div class="flex items-center">
                                <div class="w-12 h-12 rounded-xl flex items-center justify-center text-lg <?php echo e($transaction->type === 'income' ? 'bg-emerald-100 text-emerald-600' : 'bg-rose-100 text-rose-600'); ?>">
                                    <i class="fas fa-<?php echo e($transaction->category->icon ?? ($transaction->type === 'income' ? 'arrow-down' : 'arrow-up')); ?>"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="font-bold text-slate-900 text-sm sm:text-base"><?php echo e($transaction->description ?: $transaction->category->name ?? 'Transaksi'); ?></p>
                                    <p class="text-xs text-slate-500">
                                        <?php echo e($transaction->date ? $transaction->date->format('d M Y') : '-'); ?>

                                        <?php if($transaction->time): ?>
                                            <span class="text-slate-400"><?php echo e(\Carbon\Carbon::parse($transaction->time)->format('H:i:s')); ?></span>
                                        <?php endif; ?>
                                    </p>
                                </div>
                            </div>
                            <span class="font-bold <?php echo e($transaction->type === 'income' ? 'text-emerald-600' : 'text-rose-600'); ?>">
                                <?php echo e($transaction->type === 'income' ? '+' : '-'); ?> Rp <?php echo e(number_format($transaction->amount, 0, ',', '.')); ?>

                            </span>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <?php if (isset($component)) { $__componentOriginal074a021b9d42f490272b5eefda63257c = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal074a021b9d42f490272b5eefda63257c = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.empty-state','data' => ['icon' => 'receipt','title' => 'Belum ada transaksi','description' => 'Transaksi terbaru akan muncul di sini','class' => 'py-8']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('empty-state'); ?>
<?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(['icon' => 'receipt','title' => 'Belum ada transaksi','description' => 'Transaksi terbaru akan muncul di sini','class' => 'py-8']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal074a021b9d42f490272b5eefda63257c)): ?>
<?php $attributes = $__attributesOriginal074a021b9d42f490272b5eefda63257c; ?>
<?php unset($__attributesOriginal074a021b9d42f490272b5eefda63257c); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal074a021b9d42f490272b5eefda63257c)): ?>
<?php $component = $__componentOriginal074a021b9d42f490272b5eefda63257c; ?>
<?php unset($__componentOriginal074a021b9d42f490272b5eefda63257c); ?>
<?php endif; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Right Column (Widgets) -->
        <div class="space-y-8">
            <!-- Budgets -->
            <div class="bg-white rounded-3xl p-6 border border-slate-100 shadow-sm animate-slide-up animation-delay-500">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-bold text-slate-900">Anggaran Saya</h3>
                    <a href="<?php echo e(route('budgets.index')); ?>" class="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors">
                        <i class="fas fa-arrow-right text-sm"></i>
                    </a>
                </div>
                <div class="space-y-5">
                    <?php $__empty_1 = true; $__currentLoopData = $budgets ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $budget): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <?php
                            $percentage = $budget->amount > 0 ? ($budget->spent_amount / $budget->amount) * 100 : 0;
                            $color = $percentage >= 100 ? 'bg-rose-500' : ($percentage >= 80 ? 'bg-amber-500' : 'bg-emerald-500');
                        ?>
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="text-sm font-medium text-slate-700"><?php echo e($budget->category->name ?? 'Kategori'); ?></span>
                                <span class="text-sm font-bold text-slate-900"><?php echo e(number_format($percentage, 0)); ?>%</span>
                            </div>
                            <div class="h-2.5 bg-slate-100 rounded-full overflow-hidden">
                                <div class="h-full <?php echo e($color); ?> rounded-full" style="width: <?php echo e(min($percentage, 100)); ?>%"></div>
                            </div>
                            <p class="text-xs text-slate-400 mt-1">Sisa Rp <?php echo e(number_format(max($budget->amount - $budget->spent_amount, 0), 0, ',', '.')); ?></p>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <?php if (isset($component)) { $__componentOriginal074a021b9d42f490272b5eefda63257c = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal074a021b9d42f490272b5eefda63257c = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.empty-state','data' => ['icon' => 'bullseye','title' => 'Belum ada anggaran','description' => 'Atur anggaran untuk mengontrol pengeluaran','action' => 'Buat Anggaran','actionUrl' => ''.e(route('budgets.create')).'','class' => 'py-4']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('empty-state'); ?>
<?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(['icon' => 'bullseye','title' => 'Belum ada anggaran','description' => 'Atur anggaran untuk mengontrol pengeluaran','action' => 'Buat Anggaran','actionUrl' => ''.e(route('budgets.create')).'','class' => 'py-4']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal074a021b9d42f490272b5eefda63257c)): ?>
<?php $attributes = $__attributesOriginal074a021b9d42f490272b5eefda63257c; ?>
<?php unset($__attributesOriginal074a021b9d42f490272b5eefda63257c); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal074a021b9d42f490272b5eefda63257c)): ?>
<?php $component = $__componentOriginal074a021b9d42f490272b5eefda63257c; ?>
<?php unset($__componentOriginal074a021b9d42f490272b5eefda63257c); ?>
<?php endif; ?>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Categories Donut -->
            <div class="bg-white rounded-3xl p-6 border border-slate-100 shadow-sm animate-slide-up animation-delay-500">
                <div class="mb-6">
                    <h3 class="text-lg font-bold text-slate-900">Pengeluaran per Kategori</h3>
                    <p class="text-xs text-slate-500">Distribusi bulan ini</p>
                </div>
                <div class="h-52 relative flex items-center justify-center">
                    <canvas id="categoryChart"></canvas>
                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                        <div class="text-center">
                            <p class="text-xs text-slate-400">Total</p>
                            <p class="text-sm font-bold text-slate-900 font-mono">100%</p>
                        </div>
                    </div>
                </div>
                <div class="mt-6 space-y-3">
                    <?php $__currentLoopData = ($categoryBreakdown instanceof \Illuminate\Support\Collection ? $categoryBreakdown : collect($categoryBreakdown ?? []))->take(4); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="flex items-center justify-between text-sm">
                            <div class="flex items-center">
                                <span class="w-3 h-3 rounded-full mr-3" style="background-color: <?php echo e($category['color']); ?>"></span>
                                <span class="text-slate-600 truncate max-w-[120px]"><?php echo e($category['name']); ?></span>
                            </div>
                            <span class="font-semibold text-slate-900">Rp <?php echo e(number_format($category['total'], 0, ',', '.')); ?></span>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>

             <!-- Goals -->
             <?php if(count($goals ?? []) > 0): ?>
                <div class="bg-indigo-600 rounded-3xl p-6 text-white relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2"></div>

                    <h3 class="text-lg font-bold mb-4 relative z-10">Target Utama</h3>
                    <?php $goal = $goals[0]; ?>
                    <div class="relative z-10">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center text-xl mr-3">
                                <i class="fas fa-<?php echo e($goal->icon ?? 'flag'); ?>"></i>
                            </div>
                            <div>
                                <p class="font-medium"><?php echo e($goal->name); ?></p>
                                <p class="text-xs text-indigo-200">Rp <?php echo e(number_format($goal->current_amount, 0, ',', '.')); ?> / <?php echo e(number_format($goal->target_amount, 0, ',', '.')); ?></p>
                            </div>
                        </div>
                        <div class="h-2 bg-black/20 rounded-full overflow-hidden mb-2">
                            <div class="h-full bg-white rounded-full" style="width: <?php echo e($goal->progress_percentage); ?>%"></div>
                        </div>
                        <p class="text-right text-xs font-bold"><?php echo e(number_format($goal->progress_percentage, 0)); ?>%</p>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <?php $__env->startPush('scripts'); ?>
    <script>
        // Chart defaults
        Chart.defaults.font.family = "'Plus Jakarta Sans', sans-serif";
        Chart.defaults.color = '#64748b';
        Chart.defaults.scale.grid.color = '#f1f5f9';
        Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(15, 23, 42, 0.9)';
        Chart.defaults.plugins.tooltip.padding = 10;
        Chart.defaults.plugins.tooltip.cornerRadius = 8;

        // Income vs Expense Chart
        const incomeExpenseCtx = document.getElementById('incomeExpenseChart');
        if (incomeExpenseCtx) {
            new Chart(incomeExpenseCtx, {
                type: 'bar',
                data: {
                    labels: <?php echo json_encode($chartData['labels'] ?? []); ?>,
                    datasets: [
                        {
                            label: 'Pemasukan',
                            data: <?php echo json_encode($chartData['income'] ?? []); ?>,
                            backgroundColor: '#10b981',
                            borderRadius: 4,
                            barPercentage: 0.6,
                            categoryPercentage: 0.8
                        },
                        {
                            label: 'Pengeluaran',
                            data: <?php echo json_encode($chartData['expense'] ?? []); ?>,
                            backgroundColor: '#f43f5e',
                            borderRadius: 4,
                            barPercentage: 0.6,
                            categoryPercentage: 0.8
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                padding: 20,
                                font: { size: 12 }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            border: { display: false },
                            ticks: {
                                callback: function(value) {
                                    if (value >= 1000000) return (value / 1000000).toFixed(0) + 'jt';
                                    if (value >= 1000) return (value / 1000).toFixed(0) + 'rb';
                                    return value;
                                }
                            }
                        },
                        x: {
                            grid: { display: false },
                            border: { display: false }
                        }
                    }
                }
            });
        }

        // Category Chart
        const categoryCtx = document.getElementById('categoryChart');
        if (categoryCtx) {
            new Chart(categoryCtx, {
                type: 'doughnut',
                data: {
                    labels: <?php echo json_encode(collect($categoryBreakdown ?? [])->pluck('name')); ?>,
                    datasets: [{
                        data: <?php echo json_encode(collect($categoryBreakdown ?? [])->pluck('total')); ?>,
                        backgroundColor: <?php echo json_encode(collect($categoryBreakdown ?? [])->pluck('color')); ?>,
                        borderWidth: 0,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '75%',
                    plugins: {
                        legend: { display: false }
                    }
                }
            });
        }
    </script>
    <?php $__env->stopPush(); ?>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH C:\xampp\htdocs\mymoney-app\resources\views\dashboard.blade.php ENDPATH**/ ?>