document.addEventListener("DOMContentLoaded", function () {
  var yearSelect = document.getElementById("year-select");

  var chartOptions = {
      chart: {
          height: 510,
          type: 'line',
          fontFamily: 'Plus Jakarta Sans, sans-serif',
          foreColor: '#6E729B',
          toolbar: { show: false },
      },
      stroke: {
          curve: 'smooth',
          width: 2,
      },
      colors: ['#2A8F47'],
      series: [{
          name: 'Pengajuan Surat',
          data: Array(12).fill(0) 
      }],
      markers: {
          size: 6,
          strokeWidth: 0,
          hover: { size: 9 },
      },
      grid: {
          show: true,
          borderColor: '#D9DBF3',
          padding: { bottom: 0 },
          lines: { show: true },
      },
      labels: ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'],
      xaxis: {
          tooltip: { enabled: false },
      },
      legend: {
          position: 'top',
          horizontalAlign: 'right',
          offsetY: -10,
          labels: { colors: '#373d3f' },
      },
  };

  var lineChart = new ApexCharts(document.querySelector("#line-chart"), chartOptions);
  lineChart.render();

  function fetchMonthlyData(year) {
      fetch(`/getMonthlyData?year=${year}`)
          .then(response => response.json())
          .then(data => {
              lineChart.updateSeries([{ name: 'Pengajuan Surat', data: data }]);
          })
          .catch(error => console.error("Error fetching data:", error));
  }

  yearSelect.addEventListener("change", function () {
      var selectedYear = this.value;
      fetchMonthlyData(selectedYear);
  });

  if (yearSelect.value) {
      fetchMonthlyData(yearSelect.value);
  }
});