<?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-3 sm:mr-4 transition mb-2 sm:mb-0">
            <i class="fas fa-arrow-left text-lg sm:text-xl"></i>
        </a>
        <div>
            <h2 class="text-xl sm:text-2xl font-bold text-slate-800">Breakdown Kategori</h2>
            <p class="text-slate-500 mt-1 text-sm">Lihat distribusi <?php echo e(($type ?? 'expense') === 'expense' ? 'pengeluaran' : 'pemasukan'); ?> per kategori</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 shadow-sm mb-6">
        <form action="<?php echo e(route('reports.category-breakdown')); ?>" 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">Dari</label>
                <input type="date" name="date_from"
                       value="<?php echo e($dateFrom ?? now()->startOfMonth()->format('Y-m-d')); ?>"
                       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">
            </div>
            <div class="w-full sm:w-auto">
                <label class="block text-xs font-medium text-slate-500 mb-1">Sampai</label>
                <input type="date" name="date_to"
                       value="<?php echo e($dateTo ?? now()->format('Y-m-d')); ?>"
                       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">
            </div>
            <div class="w-full sm:w-auto">
                <label class="block text-xs font-medium text-slate-500 mb-1">Tipe</label>
                <select name="type" 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="expense" <?php echo e(($type ?? 'expense') === 'expense' ? 'selected' : ''); ?>>Pengeluaran</option>
                    <option value="income" <?php echo e(($type ?? '') === 'income' ? 'selected' : ''); ?>>Pemasukan</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>

    <!-- Total Card -->
    <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-5 shadow-sm mb-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs sm:text-sm text-slate-500">Total <?php echo e(($type ?? 'expense') === 'expense' ? 'Pengeluaran' : 'Pemasukan'); ?></p>
                <p class="text-lg sm:text-2xl font-bold <?php echo e(($type ?? 'expense') === 'expense' ? 'text-rose-600' : 'text-emerald-600'); ?> mt-1">
                    Rp <?php echo e(number_format($grandTotal ?? 0, 0, ',', '.')); ?>

                </p>
            </div>
            <div class="w-10 h-10 sm:w-12 sm:h-12 <?php echo e(($type ?? 'expense') === 'expense' ? 'bg-rose-100' : 'bg-emerald-100'); ?> rounded-xl flex items-center justify-center">
                <i class="fas fa-chart-pie <?php echo e(($type ?? 'expense') === 'expense' ? 'text-rose-600' : 'text-emerald-600'); ?> text-base sm:text-xl"></i>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
        <!-- Pie Chart -->
        <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm">
            <h3 class="text-base sm:text-lg font-semibold text-slate-800 mb-4">Distribusi</h3>
            <?php if(($data ?? collect())->isNotEmpty()): ?>
                <div class="h-56 sm:h-80">
                    <canvas id="categoryChart"></canvas>
                </div>
            <?php else: ?>
                <div class="h-56 sm:h-64 flex items-center justify-center text-slate-400">
                    <div class="text-center">
                        <i class="fas fa-chart-pie text-3xl sm:text-4xl mb-4"></i>
                        <p class="text-sm">Tidak ada data</p>
                    </div>
                </div>
            <?php endif; ?>
        </div>

        <!-- Category List -->
        <div class="bg-white border border-slate-100 rounded-xl sm: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 text-sm sm:text-base">Kategori</h3>
            </div>
            <div class="divide-y divide-slate-100 max-h-96 overflow-y-auto">
                <?php $__empty_1 = true; $__currentLoopData = $data ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <div class="px-4 sm:px-6 py-4">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
                                     style="background-color: <?php echo e($item['category_color'] ?? '#14b8a6'); ?>15; color: <?php echo e($item['category_color'] ?? '#14b8a6'); ?>;">
                                    <i class="fas fa-<?php echo e($item['category_icon'] ?? 'tag'); ?>"></i>
                                </div>
                                <span class="ml-3 font-medium text-slate-800 truncate"><?php echo e($item['category_name']); ?></span>
                            </div>
                            <span class="font-semibold text-slate-800 flex-shrink-0 ml-2">
                                Rp <?php echo e(number_format($item['total'], 0, ',', '.')); ?>

                            </span>
                        </div>
                        <div class="flex items-center">
                            <div class="flex-1 bg-slate-100 rounded-full h-2">
                                <div class="h-2 rounded-full transition-all" style="width: <?php echo e(min($item['percentage'] ?? 0, 100)); ?>%; background-color: <?php echo e($item['category_color'] ?? '#14b8a6'); ?>;"></div>
                            </div>
                            <span class="ml-3 text-sm text-slate-500 flex-shrink-0"><?php echo e(number_format($item['percentage'] ?? 0, 1)); ?>%</span>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <div class="px-6 py-12 text-center text-slate-400">
                        <i class="fas fa-chart-pie text-4xl mb-4"></i>
                        <p>Tidak ada data untuk periode yang dipilih</p>
                    </div>
                <?php endif; ?>
            </div>
            <?php if(($grandTotal ?? 0) > 0): ?>
                <div class="px-4 sm:px-6 py-4 bg-slate-50 border-t border-slate-100">
                    <div class="flex justify-between font-semibold text-slate-800">
                        <span>Total</span>
                        <span>Rp <?php echo e(number_format($grandTotal ?? 0, 0, ',', '.')); ?></span>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <?php $__env->startPush('scripts'); ?>
    <script>
        <?php if(($data ?? collect())->isNotEmpty()): ?>
        const ctx = document.getElementById('categoryChart').getContext('2d');
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: <?php echo json_encode(collect($data ?? [])->pluck('category_name')); ?>,
                datasets: [{
                    data: <?php echo json_encode(collect($data ?? [])->pluck('total')); ?>,
                    backgroundColor: <?php echo json_encode(collect($data ?? [])->pluck('category_color')); ?>,
                    borderWidth: 0,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 15,
                            usePointStyle: true,
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': Rp ' + context.raw.toLocaleString('id-ID');
                            }
                        }
                    }
                }
            }
        });
        <?php endif; ?>
    </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\category-breakdown.blade.php ENDPATH**/ ?>