const allData = {
    jual: [
        { x: new Date('2025-12-13'), y: 2318000 },
    { x: new Date('2025-12-15'), y: 2318000 },
    { x: new Date('2025-12-16'), y: 2325000 },
    { x: new Date('2025-12-17'), y: 2325000 },
    { x: new Date('2025-12-18'), y: 2338000 },
    { x: new Date('2025-12-19'), y: 2338000 },
    { x: new Date('2025-12-20'), y: 2342000 },
    { x: new Date('2025-12-22'), y: 2342000 },
    { x: new Date('2025-12-23'), y: 2420000 },
    { x: new Date('2025-12-24'), y: 2442000 },
    { x: new Date('2025-12-25'), y: 2423000 },
    { x: new Date('2025-12-26'), y: 2436000 },
    { x: new Date('2025-12-29'), y: 2450000 },
    { x: new Date('2025-12-30'), y: 2441000 },
    { x: new Date('2025-12-31'), y: 2371000 },
    { x: new Date('2026-01-02'), y: 2371000 },
    { x: new Date('2026-01-03'), y: 2371000 },
    { x: new Date('2026-01-04'), y: 2357000 },
    { x: new Date('2026-01-05'), y: 2378000 },
    { x: new Date('2026-01-06'), y: 2388000 },
    { x: new Date('2026-01-07'), y: 2412000 },
    { x: new Date('2026-01-08'), y: 2427000 },
    { x: new Date('2026-01-09'), y: 2418000 },
    { x: new Date('2026-01-10'), y: 2450000 },
    { x: new Date('2026-01-11'), y: 2485000 },
    { x: new Date('2026-01-13'), y: 2499000 },
    { x: new Date('2026-01-14'), y: 2513000 },
    { x: new Date('2026-01-15'), y: 2513000 },
    { x: new Date('2026-01-16'), y: 2503000 },
    { x: new Date('2026-01-17'), y: 2510000 },
    { x: new Date('2026-01-19'), y: 2544000 },
    { x: new Date('2026-01-20'), y: 2552000 },
    { x: new Date('2026-01-21'), y: 2583000 },
    { x: new Date('2026-01-22'), y: 2665000 },
    { x: new Date('2026-01-23'), y: 2720000 },
    { x: new Date('2026-01-24'), y: 2729000 },
    { x: new Date('2026-01-26'), y: 2767000 },
    { x: new Date('2026-01-27'), y: 2757000 },
    { x: new Date('2026-01-28'), y: 2822000 },
    { x: new Date('2026-01-29'), y: 3039000 },
    { x: new Date('2026-01-30'), y: 2987000 },
    { x: new Date('2026-01-31'), y: 2652000 },
    { x: new Date('2026-02-02'), y: 2657000 },
    { x: new Date('2026-02-03'), y: 2680000 },
    { x: new Date('2026-02-04'), y: 2770000 },
    { x: new Date('2026-02-05'), y: 2760000 },
    { x: new Date('2026-02-06'), y: 2668000 },
    { x: new Date('2026-02-07'), y: 2717000 },
    { x: new Date('2026-02-09'), y: 2765000 },
    { x: new Date('2026-02-10'), y: 2773000 },
    { x: new Date('2026-02-11'), y: 2773000 },
    { x: new Date('2026-02-12'), y: 2773000 },
    { x: new Date('2026-02-13'), y: 2728000 },
    { x: new Date('2026-02-14'), y: 2767000 },
    { x: new Date('2026-02-16'), y: 2772000 },
    { x: new Date('2026-02-17'), y: 2747000 },
    { x: new Date('2026-02-18'), y: 2722000 },
    { x: new Date('2026-02-19'), y: 2740000 },
    { x: new Date('2026-02-20'), y: 2750000 },
    { x: new Date('2026-02-21'), y: 2810000 }    ],
    beli: [
        { x: new Date('2025-12-13'), y: 2403000 },
    { x: new Date('2025-12-15'), y: 2403000 },
    { x: new Date('2025-12-16'), y: 2410000 },
    { x: new Date('2025-12-17'), y: 2410000 },
    { x: new Date('2025-12-18'), y: 2423000 },
    { x: new Date('2025-12-19'), y: 2423000 },
    { x: new Date('2025-12-20'), y: 2427000 },
    { x: new Date('2025-12-22'), y: 2427000 },
    { x: new Date('2025-12-23'), y: 2508000 },
    { x: new Date('2025-12-24'), y: 2531000 },
    { x: new Date('2025-12-25'), y: 2511000 },
    { x: new Date('2025-12-26'), y: 2525000 },
    { x: new Date('2025-12-29'), y: 2539000 },
    { x: new Date('2025-12-30'), y: 2530000 },
    { x: new Date('2025-12-31'), y: 2458000 },
    { x: new Date('2026-01-02'), y: 2458000 },
    { x: new Date('2026-01-03'), y: 2458000 },
    { x: new Date('2026-01-04'), y: 2443000 },
    { x: new Date('2026-01-05'), y: 2465000 },
    { x: new Date('2026-01-06'), y: 2475000 },
    { x: new Date('2026-01-07'), y: 2500000 },
    { x: new Date('2026-01-08'), y: 2516000 },
    { x: new Date('2026-01-09'), y: 2506000 },
    { x: new Date('2026-01-10'), y: 2539000 },
    { x: new Date('2026-01-11'), y: 2576000 },
    { x: new Date('2026-01-13'), y: 2590000 },
    { x: new Date('2026-01-14'), y: 2605000 },
    { x: new Date('2026-01-15'), y: 2605000 },
    { x: new Date('2026-01-16'), y: 2601000 },
    { x: new Date('2026-01-17'), y: 2602000 },
    { x: new Date('2026-01-19'), y: 2637000 },
    { x: new Date('2026-01-20'), y: 2645000 },
    { x: new Date('2026-01-21'), y: 2677000 },
    { x: new Date('2026-01-22'), y: 2762000 },
    { x: new Date('2026-01-23'), y: 2819000 },
    { x: new Date('2026-01-24'), y: 2829000 },
    { x: new Date('2026-01-26'), y: 2868000 },
    { x: new Date('2026-01-27'), y: 2857000 },
    { x: new Date('2026-01-28'), y: 2925000 },
    { x: new Date('2026-01-29'), y: 3150000 },
    { x: new Date('2026-01-30'), y: 3096000 },
    { x: new Date('2026-01-31'), y: 2883000 },
    { x: new Date('2026-02-02'), y: 2857000 },
    { x: new Date('2026-02-03'), y: 2852000 },
    { x: new Date('2026-02-04'), y: 2886000 },
    { x: new Date('2026-02-05'), y: 2876000 },
    { x: new Date('2026-02-06'), y: 2824000 },
    { x: new Date('2026-02-07'), y: 2860000 },
    { x: new Date('2026-02-09'), y: 2881000 },
    { x: new Date('2026-02-10'), y: 2889000 },
    { x: new Date('2026-02-11'), y: 2889000 },
    { x: new Date('2026-02-12'), y: 2889000 },
    { x: new Date('2026-02-13'), y: 2842000 },
    { x: new Date('2026-02-14'), y: 2868000 },
    { x: new Date('2026-02-16'), y: 2873000 },
    { x: new Date('2026-02-17'), y: 2847000 },
    { x: new Date('2026-02-18'), y: 2821000 },
    { x: new Date('2026-02-19'), y: 2840000 },
    { x: new Date('2026-02-20'), y: 2850000 },
    { x: new Date('2026-02-21'), y: 2912000 }    ]
};

  const chartOptions = {
    chart: {
      type: 'area',
      height: '300',
      zoom: { enabled: false },
      toolbar: { show: false },
      offsetX: 0
    },
    colors: ['#008FFB', '#DFBD69'],
    dataLabels: { enabled: false },
    stroke: { curve: 'smooth', width: 2 },
    series: [],
    xaxis: {
      type: 'datetime',
      labels: { datetimeUTC: false },
      min: undefined,
      max: undefined
    },
    yaxis: {
      tickAmount: 4,
      labels: {
        style: { fontSize: '12px' },
        offsetX: -15,
        formatter: function (value) {
          const text = value.toLocaleString('id-ID');
          return text.length > 5 ? text.slice(0, 5) + '…' : text;
        }
      }
    },
    title: {
        text: 'Tring Pegadaian',
        align: 'left',
        floating: true,
        offsetX: -10,
        offsetY: 7,
        style: {
            fontSize: '13px',
            fontWeight: 600,
            color: '#888'
        }
    },
    grid: {
      padding: {
        left: -10,
        right: 0
      }
    },
    tooltip: {
      x: { format: 'dd MMM yyyy' },
      y: {
        formatter: value => new Intl.NumberFormat('id-ID', {
          style: 'currency',
          currency: 'IDR',
          maximumFractionDigits: 0
        }).format(value)
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.4,
        opacityTo: 0.05,
        stops: [0, 90, 100]
      }
    },
    legend: {
      position: 'top',
      horizontalAlign: 'right'
    }
  };

  const chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
  chart.render();

  function padIfTooFew(data, cutoff, now) {
    if (data.length === 1) {
      return [
        { x: cutoff.getTime(), y: null },
        ...data,
        { x: now.getTime(), y: null }
      ];
    }
    return data;
  }

  function filterData(months) {
    const now = new Date();
    let cutoff;

    if (months === 'all') {
      cutoff = new Date('2000-01-01');
    } else {
      cutoff = new Date();
      cutoff.setMonth(cutoff.getMonth() - parseInt(months));
    }

    let filteredJual = allData.jual.filter(d => d.x >= cutoff.getTime());
    let filteredBeli = allData.beli.filter(d => d.x >= cutoff.getTime());

    filteredJual = padIfTooFew(filteredJual, cutoff, now);
    filteredBeli = padIfTooFew(filteredBeli, cutoff, now);

    chart.updateSeries([
      { name: 'Jual', data: filteredJual },
      { name: 'Beli', data: filteredBeli }
    ]);

    chart.updateOptions({
      xaxis: {
        min: cutoff.getTime(),
        max: now.getTime()
      }
    });
  }

  document.querySelectorAll(".filter-btn").forEach(btn => {
    btn.addEventListener("click", function () {
      document.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active"));
      this.classList.add("active");
      const months = this.getAttribute("data-months");
      if (months) {
        filterData(months);
      }
    });
  });

  // Initial load (1 Bulan)
  filterData('1');