document.addEventListener("DOMContentLoaded", async () => {
     const querySnapshot = await db.collection('sale')
    .where('created', '>=', new Date(new Date().getFullYear(), new Date().getMonth(), 1))
    .where('created', '<=', new Date())
    .get();

  const mobildata = [];
  const motordata = [];
  const busdata = [];
  const elfdata = [];
  const categories = [];

  querySnapshot.forEach(doc => {
    const data = doc.data();
    const date = data.date.toDate();
    const formattedDate = date.toISOString().split('T')[0];

    if (!categories.includes(formattedDate)) {
      categories.push(formattedDate);
      mobildata.push(0);
      motordata.push(0);
      busdata.push(0);
      elfdata.push(0);
    }

    const index = categories.indexOf(formattedDate);
    if (data.vehicle_type === 'Mobil') mobildata[index] += data.total_fare;
    if (data.vehicle_type === 'Motor') motordata[index] += data.total_fare;
    if (data.vehicle_type === 'Bus') busdata[index] += data.total_fare;
    if (data.vehicle_type === 'Elf') elfdata[index] += data.total_fare;
  });

  new ApexCharts(document.querySelector("#reportsChart"), {
    series: [{
      name: 'Mobil',
      data: mobildata,
    }, {
      name: 'Motor',
      data: motordata
    }, {
      name: 'Bus',
      data: busdata
    }, {
      name: 'Elf',
      data: elfdata
    }],
    chart: {
      height: 350,
      type: 'area',
      toolbar: {
        show: false
      },
    },
    markers: {
      size: 4
    },
    colors: ['#4154f1', '#2eca6a', '#ff771d', '#f542b0'],
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.3,
        opacityTo: 0.4,
        stops: [0, 90, 100]
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth',
      width: 2
    },
    xaxis: {
      type: 'datetime',
      categories: categories.map(date => new Date(date).toISOString()),
    },
    tooltip: {
      x: {
        format: 'dd/MM/yy'
      },
    }
  }).render();
});