@props(['revenueByProduct'])
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
    <div class="p-6">
        <div class=" ">
            <div class="pb-6">
                <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                    Faturamento por Serviço
                </h2>
                <p class="mt-1 text-gray-500 text-theme-sm dark:text-gray-400">Faturamento por cliente no período</p>
            </div>
            <canvas id="revenueByProduct" style="max-height: 400px;"></canvas>
        </div>
    </div>
</div>
<!-- Horizontal Bar Chart for Revenue by Product -->
<script>
    const revenueByProductCtx = document.getElementById('revenueByProduct');

    new Chart(revenueByProductCtx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($revenueByProduct['labels']) !!},
            datasets: [{
                label: 'Faturamento',
                data: {!! json_encode($revenueByProduct['data']) !!},
                backgroundColor: 'rgba(59, 130, 246, 0.8)',
                borderColor: 'rgb(59, 130, 246)',
                borderWidth: 0,
                borderRadius: 4,
            }]
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: true,
            aspectRatio: 1,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    displayColors: false,
                    callbacks: {
                        label: function(context) {
                            const value = context.parsed.x || 0;
                            return 'R$ ' + value.toFixed(2).replace('.', ',').replace(
                                /\B(?=(\d{3})+(?!\d))/g, '.');
                        }
                    }
                }
            },
            scales: {
                x: {
                    beginAtZero: true,
                    grid: {
                        borderDash: [3, 3],
                        color: 'rgba(148, 163, 184, 0.1)',
                        drawBorder: false
                    },
                    ticks: {
                        color: '#64748b',
                        callback: function(value) {
                            return 'R$ ' + value.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                        }
                    }
                },
                y: {
                    grid: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        color: '#64748b'
                    }
                }
            }
        }
    });
</script>