@props(['stats' => []])

<div class="chart-container">
    <canvas id="intradayChart"></canvas>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const intradayData = @json($stats);
    const intradayCtx = document.getElementById('intradayChart').getContext('2d');
    
    new Chart(intradayCtx, {
        type: 'line',
        data: {
            labels: Array.from({length: 24}, (_, i) => `${i}:00`),
            datasets: [{
                label: '{{ __('all.median_aciertos') }} (%)',
                data: Object.values(intradayData),
                borderColor: '#F68563',
                backgroundColor: 'rgba(246, 133, 99, 0.2)',
                fill: false,
                tension: 0.1,
                pointRadius: 4,
                pointHoverRadius: 6,
                spanGaps: true,
                borderWidth: 2,
                lineTension: 0.3
            }]
        },
        options: {
            responsive: true,
            spanGaps: true, // Conecta los puntos aunque falten datos
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    grid: {
                        color: 'rgba(29, 31, 51, 0.1)'
                    }
                },
                x: {
                    grid: {
                        color: 'rgba(29, 31, 51, 0.1)'
                    }
                }
            },
            plugins: {
                legend: {
                    labels: {
                        font: {
                            family: 'Roboto'
                        }
                    }
                }
            }
        }
    });
});
</script>
@endpush