<?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([]); ?>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center mb-6">
        <a href="<?php echo e(route('reports.index')); ?>" class="text-slate-400 hover:text-teal-600 mr-4 transition mb-2 sm:mb-0">
            <i class="fas fa-arrow-left text-xl"></i>
        </a>
        <div>
            <h2 class="text-xl sm:text-2xl font-bold text-slate-800">Kekayaan Bersih</h2>
            <p class="text-slate-500 mt-1 text-sm">Pantau total kekayaan bersih Anda</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white border border-slate-100 rounded-2xl p-4 shadow-sm mb-6">
        <form action="<?php echo e(route('reports.net-worth')); ?>" method="GET" class="flex flex-col sm:flex-row flex-wrap items-start sm:items-end gap-4">
            <div class="w-full sm:w-auto">
                <label class="block text-xs font-medium text-slate-500 mb-1">Periode</label>
                <select name="months" class="w-full sm:w-auto bg-slate-50 border-slate-200 text-slate-800 rounded-lg focus:border-teal-500 focus:ring-teal-500">
                    <option value="6" <?php echo e(($months ?? 12) == 6 ? 'selected' : ''); ?>>6 bulan terakhir</option>
                    <option value="12" <?php echo e(($months ?? 12) == 12 ? 'selected' : ''); ?>>12 bulan terakhir</option>
                    <option value="24" <?php echo e(($months ?? 12) == 24 ? 'selected' : ''); ?>>24 bulan terakhir</option>
                </select>
            </div>
            <button type="submit" class="w-full sm:w-auto px-4 py-2 bg-teal-500 hover:bg-teal-600 text-white font-medium rounded-lg transition">
                <i class="fas fa-filter mr-2"></i>Terapkan
            </button>
        </form>
    </div>

    <!-- Current Net Worth -->
    <div class="bg-gradient-to-r from-teal-500 to-emerald-500 rounded-xl sm:rounded-2xl shadow-lg p-5 sm:p-8 mb-6 text-white">
        <p class="text-teal-100 mb-2 text-sm sm:text-base">Kekayaan Bersih Saat Ini</p>
        <p class="text-2xl sm:text-4xl font-bold">Rp <?php echo e(number_format($currentNetWorth ?? 0, 0, ',', '.')); ?></p>
        <?php if(isset($change) && $change != 0): ?>
            <p class="mt-3 flex flex-wrap items-center text-sm <?php echo e($change >= 0 ? 'text-emerald-200' : 'text-rose-200'); ?>">
                <i class="fas fa-<?php echo e($change >= 0 ? 'arrow-up' : 'arrow-down'); ?> mr-2"></i>
                Rp <?php echo e(number_format(abs($change), 0, ',', '.')); ?>

                <?php if(isset($changePercentage)): ?>
                    (<?php echo e(number_format(abs($changePercentage), 1)); ?>%)
                <?php endif; ?>
                <span class="text-teal-100 ml-2">vs bulan lalu</span>
            </p>
        <?php endif; ?>
    </div>

    <!-- Stats Summary -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <?php
            $dataValues = collect($data ?? [])->pluck('net_worth');
            $minValue = $dataValues->min() ?? 0;
            $maxValue = $dataValues->max() ?? 0;
            $avgValue = $dataValues->avg() ?? 0;
        ?>
        <div class="bg-white border border-slate-100 rounded-2xl p-4 sm:p-5 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm text-slate-500">Tertinggi</p>
                    <p class="text-lg sm:text-xl font-bold text-emerald-500 mt-1">Rp <?php echo e(number_format($maxValue, 0, ',', '.')); ?></p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-emerald-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-arrow-up text-emerald-600 text-lg sm:text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white border border-slate-100 rounded-2xl p-4 sm:p-5 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm text-slate-500">Rata-rata</p>
                    <p class="text-lg sm:text-xl font-bold text-teal-500 mt-1">Rp <?php echo e(number_format($avgValue, 0, ',', '.')); ?></p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-equals text-teal-600 text-lg sm:text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white border border-slate-100 rounded-2xl p-4 sm:p-5 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm text-slate-500">Terendah</p>
                    <p class="text-lg sm:text-xl font-bold text-rose-500 mt-1">Rp <?php echo e(number_format($minValue, 0, ',', '.')); ?></p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-rose-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-arrow-down text-rose-600 text-lg sm:text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Net Worth History Chart -->
    <div class="bg-white border border-slate-100 rounded-2xl p-4 sm:p-6 shadow-sm mb-6">
        <h3 class="text-base sm:text-lg font-semibold text-slate-800 mb-4">Riwayat Kekayaan Bersih</h3>
        <?php if(count($data ?? []) > 0): ?>
            <div class="h-64 sm:h-80">
                <canvas id="netWorthChart"></canvas>
            </div>
        <?php else: ?>
            <div class="h-64 flex items-center justify-center text-slate-400">
                <div class="text-center">
                    <i class="fas fa-chart-area text-4xl mb-4"></i>
                    <p>Tidak ada data untuk periode ini</p>
                </div>
            </div>
        <?php endif; ?>
    </div>

    <!-- Data Table -->
    <div class="bg-white border border-slate-100 rounded-2xl shadow-sm overflow-hidden">
        <div class="px-4 sm:px-6 py-4 border-b border-slate-100">
            <h3 class="font-semibold text-slate-800">Detail per Bulan</h3>
        </div>

        <!-- Mobile View -->
        <div class="block sm:hidden divide-y divide-slate-100">
            <?php $__empty_1 = true; $__currentLoopData = $data ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <?php
                    $prevNetWorth = $index > 0 ? $data[$index - 1]['net_worth'] ?? 0 : 0;
                    $monthChange = $row['net_worth'] - $prevNetWorth;
                ?>
                <div class="p-4">
                    <div class="flex items-center justify-between">
                        <span class="font-semibold text-slate-800"><?php echo e($row['label']); ?></span>
                        <span class="font-bold <?php echo e($row['net_worth'] >= 0 ? 'text-emerald-600' : 'text-rose-600'); ?>">
                            Rp <?php echo e(number_format($row['net_worth'], 0, ',', '.')); ?>

                        </span>
                    </div>
                    <?php if($index > 0): ?>
                        <p class="text-xs mt-1 <?php echo e($monthChange >= 0 ? 'text-emerald-600' : 'text-rose-600'); ?>">
                            <i class="fas fa-<?php echo e($monthChange >= 0 ? 'arrow-up' : 'arrow-down'); ?> mr-1"></i>
                            <?php echo e($monthChange >= 0 ? '+' : ''); ?>Rp <?php echo e(number_format($monthChange, 0, ',', '.')); ?>

                        </p>
                    <?php endif; ?>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="p-8 text-center text-slate-400">
                    <i class="fas fa-chart-area text-4xl mb-4"></i>
                    <p>Tidak ada data</p>
                </div>
            <?php endif; ?>
        </div>

        <!-- Desktop Table -->
        <div class="hidden sm:block overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Periode</th>
                        <th class="px-6 py-3 text-right text-xs font-semibold text-slate-600 uppercase tracking-wider">Kekayaan Bersih</th>
                        <th class="px-6 py-3 text-right text-xs font-semibold text-slate-600 uppercase tracking-wider">Perubahan</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <?php $__empty_1 = true; $__currentLoopData = $data ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <?php
                            $prevNetWorth = $index > 0 ? $data[$index - 1]['net_worth'] ?? 0 : 0;
                            $monthChange = $row['net_worth'] - $prevNetWorth;
                        ?>
                        <tr class="hover:bg-slate-50 transition">
                            <td class="px-6 py-4 text-sm font-medium text-slate-800"><?php echo e($row['label']); ?></td>
                            <td class="px-6 py-4 text-sm text-right <?php echo e($row['net_worth'] >= 0 ? 'text-emerald-600' : 'text-rose-600'); ?> font-semibold">
                                Rp <?php echo e(number_format($row['net_worth'], 0, ',', '.')); ?>

                            </td>
                            <td class="px-6 py-4 text-sm text-right <?php echo e($monthChange >= 0 ? 'text-emerald-600' : 'text-rose-600'); ?>">
                                <?php if($index > 0): ?>
                                    <i class="fas fa-<?php echo e($monthChange >= 0 ? 'arrow-up' : 'arrow-down'); ?> mr-1"></i>
                                    <?php echo e($monthChange >= 0 ? '+' : ''); ?>Rp <?php echo e(number_format($monthChange, 0, ',', '.')); ?>

                                <?php else: ?>
                                    <span class="text-slate-400">-</span>
                                <?php endif; ?>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="3" class="px-6 py-8 text-center text-slate-400">
                                Tidak ada data
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

    <?php $__env->startPush('scripts'); ?>
    <script>
        const ctx = document.getElementById('netWorthChart');
        if (ctx) {
            const chartData = <?php echo json_encode($data ?? [], 15, 512) ?>;

            new Chart(ctx.getContext('2d'), {
                type: 'line',
                data: {
                    labels: chartData.map(row => row.label),
                    datasets: [{
                        label: 'Kekayaan Bersih',
                        data: chartData.map(row => row.net_worth),
                        borderColor: 'rgb(20, 184, 166)',
                        backgroundColor: 'rgba(20, 184, 166, 0.1)',
                        fill: true,
                        tension: 0.3,
                        pointBackgroundColor: 'rgb(20, 184, 166)',
                        pointRadius: 4,
                        pointHoverRadius: 6,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            ticks: {
                                callback: function(value) {
                                    return 'Rp ' + value.toLocaleString('id-ID');
                                }
                            }
                        }
                    }
                }
            });
        }
    </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\reports\net-worth.blade.php ENDPATH**/ ?>