@props(['topCustomers'])
<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">
                    Top 3 Clientes
                </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="doughnutChart" style="max-height: 400px;"></canvas>
        </div>
    </div>
</div>

<!-- Doughnut Chart Script -->
<script>
    const doughnutCtx = document.getElementById('doughnutChart');

    new Chart(doughnutCtx, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($topCustomers['labels']) !!},
            datasets: [{
                label: 'Faturamento',
                data: {!! json_encode($topCustomers['data']) !!},
                backgroundColor: [
                    'rgba(59, 130, 246, 0.8)',
                    'rgba(96, 165, 250, 0.8)',
                    'rgba(147, 197, 253, 0.8)'
                ],
                borderColor: [
                    'rgb(59, 130, 246)',
                    'rgb(96, 165, 250)',
                    'rgb(147, 197, 253)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            aspectRatio: 1,
            plugins: {
                legend: {
                    display: true,
                    position: 'bottom',
                    labels: {
                        color: '#64748b',
                        padding: 15,
                        font: {
                            size: 12
                        }
                    }
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    displayColors: true,
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.parsed || 0;
                            return 'R$ ' + value.toFixed(2).replace('.', ',').replace(
                                /\B(?=(\d{3})+(?!\d))/g, '.');
                        }
                    }
                }
            }
        }
    });
</script>