(function ($) {
    "use strict";
  

    $(document).ready(function () {

      // Nice Select
      $('select').niceSelect();

      const orderDataElement = document.getElementById('order-data');
      const year = orderDataElement.getAttribute('data-year');
      const dataTotalPrice = parseFloat(orderDataElement.getAttribute('data-total-price'));
      const dataTodayPrice = parseFloat(orderDataElement.getAttribute('data-today-price'));
      const dataLowPrice = parseFloat(orderDataElement.getAttribute('data-total-low-price'));
      const dataBestPrice = parseFloat(orderDataElement.getAttribute('data-total-best-price'));
      const monthsData = JSON.parse(orderDataElement.getAttribute('data-months'));
      var xValues = [];
      var yValues = [];
      for (const month in monthsData) {
        const monthData = monthsData[month];
        xValues.push(monthData.month_name);
        yValues.push(monthData.total_price);
      }

      // Bar Chart
      new Chart("myChart", {
        type: "bar",
        data: {
          labels: xValues,
          datasets: [
            {
              backgroundColor: "#1d0bce",
              data: yValues,
              borderRadius: 8,
              barThickness: 35,
            },
          ],
        },
        options: {
          plugins: {
            legend: {
              display: false, 
            },
          },
          scales: {
            y: {
              beginAtZero: false,
              grid: {
                display: false,
              },
              min: 10,
              max: dataTotalPrice,
              ticks: {
                stepSize: 10,
                callback: function (value) {
                  return "$" + value;
                },
              },
            },
            x: {
              grid: {
                display: false,
              },
            },
          },
          elements: {
            rectangle: {
              backgroundColor: "rgba(240, 240, 240, 0.3)", // Light background behind bars
            },
          },
          responsive: true,
          maintainAspectRatio: false,
        },
      });

      // Doughnut Chart
      const ctx = document.getElementById('priceChart').getContext('2d');
      const priceChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['Total', 'Today', 'Best', 'Low'],
          datasets: [{
            data: [dataTotalPrice, dataTodayPrice, dataBestPrice, dataLowPrice],
            backgroundColor: ['#1D0BCE', '#403CEF', '#080566', '#010019'],
            hoverOffset: 1,
            offset: 9,
            borderRadius: 10,
          }]
        },
        options: {
          responsive: true,
          cutout: 85,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false, // Hide default legend
            },
          }
        }
      });


    });
  })(jQuery);
  