<section>
    <div class="section-title mt-8 mb-4 mx-0 lg:mx-0 pb-2 border-b">
        <div class="text-primary uppercase font-semibold">Cronologia Prezzi</div>
    </div>


    <div class="lg:max-w-[668px] mb-12">
        <canvas id="priceHistory"></canvas>
    </div>


{% if not user_agent.is_pagespeed %} 
    <script src="/scripts/lib/chart.umd.js"></script>
    <script>
        const ctx = document.getElementById('priceHistory');

        // Parsare il JSON passato da Twig
        const salesData = JSON.parse('{{ product.price_history|json_encode|raw }}');
        console.log('Raw sales data:', salesData);
        
        // Prendiamo solo gli ultimi 10 elementi
        const recentSalesData = salesData.slice(-10);
        console.log('Recent sales data:', recentSalesData);
        
        // Estrae le etichette (giorni) e i dati (prezzi)
        const labels = recentSalesData.map(entry => new Date(entry.date).toLocaleString('it-IT', { day: 'numeric', month: 'short' }));
        const data = recentSalesData.map(entry => entry.price);
        console.log('Labels:', labels);
        console.log('Data:', data);
        
        // Calcola il totale delle vendite degli ultimi 12 mesi
        const totalSales = recentSalesData.reduce((total, entry) => total + entry.price, 0);
        
        console.log('Canvas element:', ctx);
        console.log('Chart.js available:', typeof Chart !== 'undefined');

        
        // Crea il grafico
        new Chart(ctx, {
          type: 'line',
          data: {
            labels: labels,
            datasets: [{
              fill: true,
              label: '', // Rimuoviamo la legenda
              data: data, // Dati dinamici
              borderWidth: 3, // Inspessisce la linea
              borderColor: '#06b6d4', // Colore della linea
              backgroundColor: 'rgba(228, 240, 248, 0.5)', // Colore del riempimento con trasparenza
              tension: 0.4 // Aggiunge una leggera curvatura alla linea (opzionale)
            }]
          },
          options: {
            responsive: true,
            plugins: {
              legend: {
                display: false // Nasconde la label in alto
              },
              tooltip: {
                callbacks: {
                  label: function(context) {
                    return 'Prezzo: ' + context.raw + '&euro;';
                  }
                },
                displayColors: false // Rimuove i colori dai tooltip
              }
            },
            scales: {
              x: {
                grid: {
                  display: false // Rimuove la griglia sull'asse X
                },
                ticks: {
                  font: {
                    size: 12 // Rimpicciolisce il font delle etichette dell'asse X
                  },
                  rotation: -45, // Ruota le etichette di 45 gradi
                  padding: 10
                },
                offset: false
              },
              y: {
                grid: {
                  display: true // Rimuove la griglia sull'asse Y
                },
                beginAtZero: false,
                ticks: {
                  font: {
                    size: 12 // Rimpicciolisce il font delle etichette dell'asse Y (opzionale)
                  },
                  //stepSize: 50 // Mostra valori ogni 10 unità
                }
              }
            }
          }
        });
        
    </script>
{% endif %}

</section>