@props(['revenueByYear'])
<!-- Chart.js Bar Chart -->
<div class="py-3">
    <div class="max-w-7xl ">
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900 dark:text-gray-100">
                <div class="pb-6">
                    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                        Faturamento por ano
                    </h2>
                    <p class="mt-1 text-gray-500 text-theme-sm dark:text-gray-400">Total de requisições nos últimos 12 meses</p>
                </div>
                <canvas id="revenueByYear" style="max-height: 300px;"></canvas>
            </div>
        </div>
    </div>
</div>
<!-- Line Chart Script -->
<script>
    const ctx = document.getElementById('revenueByYear');

    // Create gradient
    const gradient = ctx.getContext('2d').createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'rgba(59, 130, 246, 0.3)');
    gradient.addColorStop(1, 'rgba(59, 130, 246, 0)');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: {!! json_encode($revenueByYear['labels']) !!},
            datasets: [{
                label: 'Yearly Revenue',
                data: {!! json_encode($revenueByYear['data']) !!},
                backgroundColor: gradient,
                borderColor: 'rgb(59, 130, 246)',
                borderWidth: 2,
                fill: true,

                pointRadius: 0,
                pointHoverRadius: 5,
                pointBackgroundColor: 'rgb(59, 130, 246)',
                pointBorderColor: '#fff',
                pointBorderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            aspectRatio: 2,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    displayColors: false,
                    callbacks: {
                        label: function(context) {
                            return 'R$ ' + context.parsed.y.toLocaleString('pt-BR');
                        }
                    }
                }
            },
            interaction: {
                intersect: false,
                mode: 'index'
            },
            scales: {
                x: {
                    grid: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        color: '#64748b'
                    }
                },
                y: {
                    beginAtZero: true,
                    grid: {
                        borderDash: [3, 3],
                        color: 'rgba(148, 163, 184, 0.1)',
                        drawBorder: false
                    },
                    ticks: {
                        color: '#64748b',
                        callback: function(value) {
                            return 'R$ ' + value.toLocaleString('pt-BR');
                        }
                    }
                }
            }
        }
    });
</script>