   <%- header %>
   <!-- pre-rendered navbar inserted -->
   <main class="dashboard-main">
     <%- navbar %>
     <!-- pre-rendered navbar inserted -->


  <div class="container   pt-20 w-full my-4">

    <%- include('../../partials/utils/title.ejs', {title: "View Transactions"}) %>

    <% 
       const breadcrumbs = [
         { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
           { label: "View Transactions" }
       ];
     %>

    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>

<div class=" flex flex-col gap-3">


<style>
  sup {
    font-size: 60% !important;
    top: -0.8rem !important;
  }
</style>
 
  <div class="bg-white p-2 rounded-xl">
    <!-- Title with gradient accent -->
    <div class="flex items-center gap-3 mb-3">
      <div class="w-2 h-8 bg-gradient-to-b from-blue-500 to-purple-600 rounded-full"></div>
      <h2 class="text-2xl font-bold text-gray-900">Trip Transactions</h2>
    </div>

    <!-- Description with modern typography -->
    <p class="text-gray-600 max-w-md">
      Track, analyze, and optimize your trips spending with smart insights and real-time updates.
    </p>
  </div>
  <!-- Grid of Cards -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <h2 class="text-xl font-semibold text-gray-700 mb-2">Cash</h2>
      <p id="cash_count" class="text-3xl font-bold transaction_cash">$ 0</p>
      <!-- <p class="text-sm text-gray-500 mt-2">↑ 12% from last month</p> -->
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <h2 class="text-xl font-semibold text-gray-700 mb-2">Card</h2>
      <p id="card_count" class="text-3xl font-bold transaction_card">$ 0</p>
      <!-- <p class="text-sm text-gray-500 mt-2">↓ 2 from last month</p> -->
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <h2 class="text-xl font-semibold text-gray-700 mb-2">Wallet</h2>
      <p id="wallet_count" class="text-3xl font-bold transaction_wallet">$ 0</p>
      <!-- <p class="text-sm text-gray-500 mt-2">↑ 8% from last month</p> -->
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <h2 class="text-xl font-semibold text-gray-700 mb-2">Total</h2>
      <p id="total_count" class="text-3xl font-bold transaction_total">$ 0</p>
      <!-- <p class="text-sm text-gray-500 mt-2">↑ 18% from last month</p> -->
    </div>
  </div>
  <div class="grid md:grid-cols-1 lg:grid-cols-1 gap-3">
    <div id="total"></div>
    <!-- <div id="earning"></div> -->
  </div>

  <div id="transactionMainTab" class="grid md:grid-cols-1 lg:grid-cols-2 gap-3">
    <div id="daily"></div>
    <div id="weekly"></div>
    <div id="monthly"></div>
    <div id="weekwise"></div>
  </div>


  <!-- Main modal -->
  <div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full">
    <div class="relative p-2 w-full h-full">
      <!-- Modal content -->
      <div class="relative bg-white rounded-lg shadow-sm h-full">
        <!-- Modal header -->
        <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
          <h3 class="text-xl font-semibold text-gray-900 ">
            Graph
          </h3>
          <button id="closeModalButton" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center " data-modal-hide="default-modal">
            <!-- <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
            </svg> -->
            close
            <span class="sr-only">Close modal</span>
          </button>
        </div>
        <!-- Modal body -->
        <div id="modalChart" class="p-4 md:p-5 space-y-4">
        </div>
      </div>
    </div>
  </div>

</div>

 <script>
  const transactionTotal = <%- JSON.stringify(transactionTotal) %>;
  const transactionDaily = <%- JSON.stringify(transactionDaily) %>;
  const transactionMonthly = <%- JSON.stringify(transactionMonthly) %>;
  const transactionWeekly = <%- JSON.stringify(transactionWeekly) %>;
  const transactionWeekWise = <%- JSON.stringify(transactionWeekWise) %>;
  const monthValue = <%- JSON.stringify(monthValue) %>;
  const transactionTotalEarning = <%- JSON.stringify(transactionTotalEarning) %>;
  let modelChart = null;
    let curr = "<%= city_cur %>";


  let modal = document.getElementById('default-modal');

  let closeModalButton = document.getElementById('closeModalButton');
  closeModalButton.addEventListener('click', () => {
    modal.classList.add('hidden')
    document.getElementById("modalChart").innerHTML = "";
  })


  const handleDailyChart = (options) => {
    if (modelChart) {
      modelChart.destroy();
      modelChart = null;
    }
    if (options?.chart?.events) {
      delete options.chart.events;
    }
    if (options?.chart?.height) {
      options.chart.height = 420;
    }
    document.querySelector("#modalChart").innerHTML = "";
    modal.classList.remove('hidden');
    modelChart = new ApexCharts(document.querySelector("#modalChart"), options);
    modelChart.render();
  }


  const handleColor = (type) => {
    const rootColor = document.querySelector(':root');
    const rs = getComputedStyle(rootColor);
    return rs.getPropertyValue(type)
  }


  if (Array.isArray(transactionTotal) && transactionTotal.length > 0) {

    //     var totalOptions = {
    //   series: [
    //     parseFloat(transactionTotal[0]?.cash_amount),
    //     parseFloat(transactionTotal[0]?.card_amount),
    //     parseFloat(transactionTotal[0]?.wallet_amount)
    //   ],
    //   chart: {
    //     height: 350,
    //     type: 'pie',
    //   },
    //   title: {
    //     text: 'Total',
    //     align: 'left'
    //   },
    //   labels: ['Cash', 'Card', 'Wallet'],
    //   colors: [
    //     handleColor('--color-cash'),
    //     handleColor('--color-card'),
    //     handleColor('--color-wallet')
    //   ],
    //   tooltip: {
    //     y: {
    //       formatter: function (value) {
    //         return `${curr} ${value.toFixed(2)}`;
    //       }
    //     }
    //   }
    // };

    var totalOptions = {
      series: [
        parseFloat(transactionTotal[0]?.cash_amount),
        parseFloat(transactionTotal[0]?.card_amount),
        parseFloat(transactionTotal[0]?.wallet_amount)
      ],
      chart: {
        height: 400,
        type: 'pie',
      },
      title: {
        text: 'Transaction Overview',
        align: 'center',
        style: {
          fontSize: '20px',
          fontWeight: 'bold',
          color: '#333'
        }
      },
      subtitle: {
        text: 'Transaction split by payment mode.',
        align: 'center',
        offsetY: 30,
        style: {
          fontSize: '14px',
          color: '#666'
        }
      },
      labels: ['Cash', 'Card', 'Wallet'],
      colors: [
        handleColor('--color-cash'),
        handleColor('--color-card'),
        handleColor('--color-wallet')
      ],
      tooltip: {
        y: {
          formatter: function(value) {
            return `${curr} ${value.toFixed(2)}`;
          }
        }
      },
      dataLabels: {
        enabled: true,
        // formatter: function (val, opts) {
        //   const amount = opts.w.config.series[opts.seriesIndex];
        //   return `$${amount.toFixed(2)}`;
        // },
        style: {
          fontSize: '12px',
          fontWeight: 'bold',
          colors: ['#fff']
        }
      },
      legend: {
        position: 'bottom',
        horizontalAlign: 'center'
      },
      plotOptions: {
        pie: {
          dataLabels: {
            offset: -5
          },
          expandOnClick: true
        }
      }
    };


    var totalChart = new ApexCharts(document.querySelector("#total"), totalOptions);
    totalChart.render();

    const formatAmountWithSup = (amount) => {
      const [intPart, decimalPart] = parseFloat(amount).toFixed(2).split('.');
      return `${curr} ${intPart}<sup>.${decimalPart}</sup>`;
    };

    document.getElementById('cash_count').innerHTML = formatAmountWithSup(transactionTotal[0]?.cash_amount);
    document.getElementById('card_count').innerHTML = formatAmountWithSup(transactionTotal[0]?.card_amount);
    document.getElementById('wallet_count').innerHTML = formatAmountWithSup(transactionTotal[0]?.wallet_amount);
    document.getElementById('total_count').innerHTML = formatAmountWithSup(transactionTotal[0]?.total);

  }


  if (Array.isArray(transactionDaily) && transactionDaily.length > 0) {


    const allData = [
      ...transactionDaily.map((v) => v.total_payment_amount),
      ...transactionDaily.map((v) => v.card_amount),
      ...transactionDaily.map((v) => v.cash_amount),
      ...transactionDaily.map((v) => v.wallet_amount)
    ];

    const maxY = Math.max(...allData, 0); // Ensures at least 0
    const roundedMax = Math.ceil(maxY / 10) * 10 || 10;


    var dailyOptions = {
      series: [{
          name: 'Total Amount',
          data: transactionDaily.map((value) => value.total_payment_amount),
          color: handleColor('--color-total')
        },
        {
          name: 'Card',
          data: transactionDaily.map((value) => value.card_amount),
          color: handleColor('--color-card'),
        },
        {
          name: 'Cash',
          data: transactionDaily.map((value) => value.cash_amount),
          color: handleColor('--color-cash'),
        },
        {
          name: 'Wallet',
          data: transactionDaily.map((value) => value.wallet_amount),
          color: handleColor('--color-wallet')
        }
      ],
      colors: [],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'daily_transaction_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'daily_transaction_counts_chart'
            },
            png: {
              filename: 'daily_transaction_counts_chart'
            }
          }
        },
        events: {
          click: function(event, chartContext, config) {
            const clickedElement = event.target;

            // Check if the clicked element is a dataPoint or graph area (e.g., not axes or labels)
            if (!clickedElement.matches('.apexcharts-subtitle-text') && !clickedElement.matches('.apexcharts-title-text') && !clickedElement.matches(".apexcharts-legend") && !clickedElement.matches('.apexcharts-menu-icon') && !clickedElement.matches('.apexcharts-menu-item') && !clickedElement.matches('.apexcharts-legend-text')) {
              // When the chart's plot area is clicked, trigger the modal and show the chart

              handleDailyChart(dailyOptions) // Pass the same options to render inside the modal
            }
          }
        }
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 5,
          borderRadiusApplication: 'end'
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },
      xaxis: {
        categories: transactionDaily.map((value) => moment(value.trip_date).format('DD MMM')),
      },
      yaxis: {
        title: {
          text: 'Counts'
        },
        min: 0,
        max: roundedMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // ensure it only shows integers
          },
        },
      },
      fill: {
        opacity: 1
      },
      title: {
        text: '💰 Daily Transaction Breakdown',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 600,
          fontFamily: 'Inter, sans-serif',
          color: '#212529'
        }
      },
      subtitle: {
        text: 'Distribution of total payments by method (Card, Cash, Wallet) per day',
        align: 'left',
        style: {
          fontSize: '13px',
          fontWeight: 400,
          fontFamily: 'Inter, sans-serif',
          color: '#6c757d'
        }
      },
      tooltip: {
        shared: true,
        intersect: false
      }
    };

    var dailyChart = new ApexCharts(document.querySelector("#daily"), dailyOptions);
    dailyChart.render();
  }

  if (Array.isArray(transactionWeekly) && transactionWeekly.length > 0) {

    const allData = [
      ...transactionWeekly.map((v) => v.total_payment_amount),
      ...transactionWeekly.map((v) => v.card_amount),
      ...transactionWeekly.map((v) => v.cash_amount),
      ...transactionWeekly.map((v) => v.wallet_amount)
    ];

    const maxY = Math.max(...allData, 0); // Ensures at least 0
    const roundedMax = Math.ceil(maxY / 10) * 10 || 10;

    var weeklyOptions = {
      series: [{
          name: 'Total Amount',
          data: transactionWeekly.map((value) => value.total_payment_amount),
          color: handleColor('--color-total')
        },
        {
          name: 'Card',
          data: transactionWeekly.map((value) => value.card_amount),
          color: handleColor('--color-card')
        },
        {
          name: 'Cash',
          data: transactionWeekly.map((value) => value.cash_amount),
          color: handleColor('--color-cash')
        },
        {
          name: 'Wallet',
          data: transactionWeekly.map((value) => value.wallet_amount),
          color: handleColor('--color-wallet')
        }
      ],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'current_week_transactions',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'current_week_transactions_chart'
            },
            png: {
              filename: 'current_week_transactions_chart'
            }
          }
        },
        events: {
          click: function(event, chartContext, config) {
            const clickedElement = event.target;

            // Check if the clicked element is a dataPoint or graph area (e.g., not axes or labels)
            if (!clickedElement.matches('.apexcharts-subtitle-text') && !clickedElement.matches('.apexcharts-title-text') && !clickedElement.matches(".apexcharts-legend") && !clickedElement.matches('.apexcharts-menu-icon') && !clickedElement.matches('.apexcharts-menu-item') && !clickedElement.matches('.apexcharts-legend-text')) {
              // When the chart's plot area is clicked, trigger the modal and show the chart

              handleDailyChart(weeklyOptions) // Pass the same options to render inside the modal
            }
          }
        },
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 5,
          borderRadiusApplication: 'end'
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },
      xaxis: {
        categories: transactionWeekly.map((value) => moment(value.trip_date).format('DD MMM')),
      },
      yaxis: {
        title: {
          text: 'Counts'
        },
        min: 0,
        max: roundedMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // ensure it only shows integers
          },
        },
      },
      fill: {
        opacity: 1
      },
      title: {
        text: '📈 Weekly Transaction Overview',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 600,
          fontFamily: 'Inter, sans-serif',
          color: '#212529'
        }
      },
      subtitle: {
        text: 'Breakdown of payments by method (Card, Cash, Wallet) for the current week',
        align: 'left',
        style: {
          fontSize: '13px',
          fontWeight: 400,
          fontFamily: 'Inter, sans-serif',
          color: '#6c757d'
        }
      },
      tooltip: {
        shared: true,
        intersect: false
      },
    };

    var weeklyChart = new ApexCharts(document.querySelector("#weekly"), weeklyOptions);
    weeklyChart.render();
  }


  if (Array.isArray(transactionMonthly) && transactionMonthly.length > 0) {


    const allData = [
      ...transactionMonthly.map((v) => v.total_payment_amount),
      ...transactionMonthly.map((v) => v.card_amount),
      ...transactionMonthly.map((v) => v.cash_amount),
      ...transactionMonthly.map((v) => v.wallet_amount)
    ];

    const maxY = Math.max(...allData, 0); // Ensures at least 0
    const roundedMax = Math.ceil(maxY / 10) * 10 || 10;

    var monthlyOptions = {
      series: [{
          name: 'Total Amount',
          data: transactionMonthly.map((value) => value.total_payment_amount),
          color: handleColor('--color-total')
        },
        {
          name: 'Card',
          data: transactionMonthly.map((value) => value.card_amount),
          color: handleColor('--color-card'),
        },
        {
          name: 'Cash',
          data: transactionMonthly.map((value) => value.cash_amount),
          color: handleColor('--color-cash')
        },
        {
          name: 'Wallet',
          data: transactionMonthly.map((value) => value.wallet_amount),
          color: handleColor('--color-wallet')
        }
      ],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'monthly_transaction_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'monthly_transaction_counts_chart'
            },
            png: {
              filename: 'monthly_transaction_counts_chart'
            }
          }
        },
        events: {
          click: function(event, chartContext, config) {
            const clickedElement = event.target;

            // Check if the clicked element is a dataPoint or graph area (e.g., not axes or labels)
            if (!clickedElement.matches('.apexcharts-subtitle-text') && !clickedElement.matches('.apexcharts-title-text') && !clickedElement.matches(".apexcharts-legend") && !clickedElement.matches('.apexcharts-menu-icon') && !clickedElement.matches('.apexcharts-menu-item') && !clickedElement.matches('.apexcharts-legend-text')) {
              // When the chart's plot area is clicked, trigger the modal and show the chart

              handleDailyChart(monthlyOptions) // Pass the same options to render inside the modal
            }
          }
        }
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 5,
          borderRadiusApplication: 'end'
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },
      xaxis: {
        categories: transactionMonthly.map((value) => monthValue[value.month]),
      },
      yaxis: {
        title: {
          text: 'Counts'
        },
        min: 0,
        max: roundedMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // ensure it only shows integers
          },
        },
      },
      fill: {
        opacity: 1
      },
      title: {
        text: '📆 Monthly Transaction Overview',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 600,
          fontFamily: 'Inter, sans-serif',
          color: '#212529'
        }
      },
      subtitle: {
        text: 'Monthly totals categorized by payment method: Card, Cash, Wallet',
        align: 'left',
        style: {
          fontSize: '13px',
          fontWeight: 400,
          fontFamily: 'Inter, sans-serif',
          color: '#6c757d'
        }
      },
      tooltip: {
        shared: true,
        intersect: false
      }
    };

    var monthlyChart = new ApexCharts(document.querySelector("#monthly"), monthlyOptions);
    monthlyChart.render();
  }




  if (Array.isArray(transactionWeekWise) && transactionWeekWise.length > 0) {

    const allData = [
      ...transactionWeekWise.map((v) => v.total_payment_amount),
      ...transactionWeekWise.map((v) => v.card_amount),
      ...transactionWeekWise.map((v) => v.cash_amount),
      ...transactionWeekWise.map((v) => v.wallet_amount)
    ];

    const maxY = Math.max(...allData, 0); // Ensures at least 0
    const roundedMax = Math.ceil(maxY / 10) * 10 || 10;


    var weekWiseOptions = {
      series: [{
          name: 'Total Amount',
          data: transactionWeekWise.map((value) => value.total_payment_amount),
          color: handleColor('--color-total')
        },
        {
          name: 'Card',
          data: transactionWeekWise.map((value) => value.card_amount),
          color: handleColor('--color-card'),
        },
        {
          name: 'Cash',
          data: transactionWeekWise.map((value) => value.cash_amount),
          color: handleColor('--color-cash')
        },
        {
          name: 'Wallet',
          data: transactionWeekWise.map((value) => value.wallet_amount),
          color: handleColor('--color-wallet')
        }
      ],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'weekly_transaction_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'weekly_transaction_counts_chart'
            },
            png: {
              filename: 'weekly_transaction_counts_chart'
            }
          }
        },
        events: {
          click: function(event, chartContext, config) {
            const clickedElement = event.target;

            // Check if the clicked element is a dataPoint or graph area (e.g., not axes or labels)
            if (!clickedElement.matches('.apexcharts-subtitle-text') && !clickedElement.matches('.apexcharts-title-text') && !clickedElement.matches(".apexcharts-legend") && !clickedElement.matches('.apexcharts-menu-icon') && !clickedElement.matches('.apexcharts-menu-item') && !clickedElement.matches('.apexcharts-legend-text')) {
              // When the chart's plot area is clicked, trigger the modal and show the chart

              handleDailyChart(weekWiseOptions) // Pass the same options to render inside the modal
            }
          }
        }
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 5,
          borderRadiusApplication: 'end'
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },
      xaxis: {
        categories: transactionWeekWise.map(({
          week_number,
          year
        }) => {
          const getDateRangeOfWeek = (week, year) => {
            const simple = new Date(year, 0, 1 + (week - 1) * 7);
            const dow = simple.getDay();
            const ISOweekStart = new Date(simple);
            if (dow <= 4)
              ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
            else
              ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
            const ISOweekEnd = new Date(ISOweekStart);
            ISOweekEnd.setDate(ISOweekStart.getDate() + 6);

            const formatDate = (date) =>
              date.toLocaleDateString('en-GB', {
                day: '2-digit',
                month: 'short'
              });

            return `${formatDate(ISOweekStart)} - ${formatDate(ISOweekEnd)}`;
          };

          return getDateRangeOfWeek(week_number, year);
        }),
      },
      yaxis: {
        title: {
          text: 'Counts'
        },
        min: 0,
        max: roundedMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      title: {
        text: '📅 Week-by-Week Transaction Summary',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 600,
          fontFamily: 'Inter, sans-serif',
          color: '#212529'
        }
      },
      subtitle: {
        text: 'Weekly totals split by payment method: Card, Cash, and Wallet',
        align: 'left',
        style: {
          fontSize: '13px',
          fontWeight: 400,
          fontFamily: 'Inter, sans-serif',
          color: '#6c757d'
        }
      },
      tooltip: {
        shared: true,
        intersect: false
      }
    };

    var weekWiseChart = new ApexCharts(document.querySelector("#weekwise"), weekWiseOptions);
    weekWiseChart.render();
  }


  document.addEventListener('DOMContentLoaded', () => {
    let openModalButton = document.getElementById('openModal');
    let modal = document.getElementById('default-modal');
    let closeModalButton = document.getElementById('closeModalButton'); // Updated ID

    // Open modal
    openModalButton.addEventListener('click', function() {
      modal.classList.remove('hidden');
    });

    // Close modal when close button is clicked
    closeModalButton.addEventListener('click', function() {
      // console.log(`Check Main Case`);
      modal.classList.add('hidden');
      document.getElementById("modalChart").innerHTML = "";
    });

    // Close modal if user clicks outside of modal content
    window.addEventListener('click', function(event) {
      if (event.target === modal) {
        modal.classList.add('hidden');
        document.getElementById("modalChart").innerHTML = "";
      }
    });

    // Handle modal close function
    const handleCloseModal = () => {
      // console.log(`Check Graph Close`);
      modal.classList.add('hidden');
      document.getElementById("modalChart").innerHTML = "";
    }

    // Attach handleCloseModal to the button via the event listener
    closeModalButton.addEventListener('click', handleCloseModal);
  });

  // Show the loader when the page is loading
  const showLoader = () => {
    document.getElementById("loaderContainer").style.display = "flex"; // Show loader
  };

  // Hide the loader after 3 seconds (simulating data loading)
  const hideLoader = () => {
    document.getElementById("loaderContainer").style.display = "none"; // Hide loader
  };

  // Customize toastr options (optional)
  toastr.options = {
    positionClass: "toast-top-right",
    timeOut: "5000", // Toast will disappear after 5 seconds
    closeButton: true,
  };
</script>
<!-- footer -->
  </div>
</main>

<%- footer %>
 