<div>
    <h3>Pengeluaran per Outlet</h3>
    <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
        <canvas id="outletExpenseChart" width="400" height="200"></canvas>
    </flux:card>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
    <script>
        document.addEventListener('livewire:navigated', function() {
            var ctx = document.getElementById('outletExpenseChart').getContext('2d');
            var outletExpenseChart = new Chart(ctx, {
                type: 'polarArea',
                data: {
                    labels: @json($outlets),
                    datasets: [{
                        data: @json($expenses),
                        backgroundColor: @json($backgroundColors),
                        borderColor: @json($borderColors),
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true
                }
            });
        });
    </script>
</div>
