<div>
    <h3>Pengeluaran per Outlet</h3>
    <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
        <canvas id="outletRevenueExpenseChart" 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('outletRevenueExpenseChart').getContext('2d');
            var outletRevenueExpenseChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: @json($outlets),
                    datasets: [{
                            label: 'Pendapatan',
                            data: @json($revenues),
                            backgroundColor: 'rgba(75, 192, 192, 0.5)',
                            borderColor: 'rgba(0, 128, 0, 1)',
                            borderWidth: 1
                        },
                        {
                            label: 'Pengeluaran',
                            data: @json($expenses),
                            backgroundColor: 'rgba(255, 99, 132, 0.5)',
                            borderColor: 'rgba(255, 0, 0, 1)',
                            borderWidth: 1
                        }
                    ]

                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                }
            });
        });
    </script>
</div>
