   <%- 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 Trips"}) %>

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

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

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


  <!-- Grid of Cards -->
  <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-4 gap-4 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">Created</h2>
      <p id="total_count" class="text-3xl font-bold created_trip">0</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">Request</h2>
      <p id="request_count" class="text-3xl font-bold request_trip">0</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">Assigned</h2>
      <p id="assigned_count" class="text-3xl font-bold assigned_trip">0</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">ON-Going</h2>
      <p id="ongoing_count" class="text-3xl font-bold ongoing_trip">0</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">Completed</h2>
      <p id="complete_count" class="text-3xl font-bold completed_trip">0</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">Cancelled</h2>
      <p id="cancel_count" class="text-3xl font-bold cancelled_trip">0</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">Expired</h2>
      <p id="expired_count" class="text-3xl font-bold expired_trip">0</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">Deleted</h2>
      <p id="deleted_count" class="text-3xl font-bold deleted_trip">0</p>
    </div>
  </div>
  <div id="total"></div>

  <div id="tripMainTab" class="grid lg:grid-cols-2 md:grid-cols-1 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 tripTotal = <%- JSON.stringify(tripTotal) %>;
  const monthValue = <%- JSON.stringify(monthValue) %>;
  const tripNewDaily = <%- JSON.stringify(tripNewDaily) %>;
  const tripNewWeekly = <%- JSON.stringify(tripNewWeekly) %>;
  const tripNewMonthly = <%- JSON.stringify(tripNewMonthly) %>;
  const tripNewWeekWise = <%- JSON.stringify(tripNewWeekWise) %>;
  let modelChart = null;

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

  const handleColor = (type) => {

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

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

  if (Array.isArray(tripTotal) && tripTotal.length > 0) {
    // var totalOptions = {
    //   series: [parseInt(tripTotal[0]?.total_completed_trips), parseInt(tripTotal[0]?.total_cancel_trips), parseInt(tripTotal[0]?.total_expired_trips)],
    //   chart: {
    //     height: 350,
    //     type: 'pie',
    //   },
    //   title: {
    //     text: 'Total',
    //     align: 'left'
    //   },
    //   labels: ['Completed', 'Cancelled', 'Expired'],
    //   colors: [handleColor('--color-completed'), handleColor('--color-cancelled'), handleColor('--color-expired')],
    // };


    var totalOptions = {
      series: [
        parseInt(tripTotal[0]?.total_completed_trips),
        parseInt(tripTotal[0]?.total_cancel_trips),
        parseInt(tripTotal[0]?.total_expired_trips),
        parseInt(tripTotal[0]?.total_ongoing_trips),
        parseInt(tripTotal[0]?.total_request_trips),
        parseInt(tripTotal[0]?.total_assigned_trips),
        parseInt(tripTotal[0]?.total_deleted_trips)
      ],
      chart: {
        height: 400,
        type: 'pie',
      },
      title: {
        text: 'Total Trips Overview',
        align: 'center',
        style: {
          fontSize: '20px',
          fontWeight: 'bold',
          color: '#333'
        }
      },
      subtitle: {
        text: 'Breakdown of all trip status categories.',
        align: 'center',
        margin: 10,
        offsetY: 30,
        style: {
          fontSize: '14px',
          color: '#666'
        }
      },
      labels: ['Completed', 'Cancelled', 'Expired', 'ON-Going', 'Request', 'Assigned', 'Deleted'],
      colors: [
        handleColor('--color-completed'),
        handleColor('--color-cancelled'),
        handleColor('--color-expired'),
        handleColor('--color-ongoing'),
        handleColor('--color-request'),
        handleColor('--color-assigned'),
        handleColor('--color-deleted')
      ],
      dataLabels: {
        enabled: true,
        style: {
          fontSize: '14px',
          fontWeight: 'bold',
          colors: ['#fff']
        },
        dropShadow: {
          enabled: true,
          top: 1,
          left: 1,
          blur: 1,
          opacity: 0.5
        }
      },
      legend: {
        position: 'bottom',
        horizontalAlign: 'center'
      },
      plotOptions: {
        pie: {
          dataLabels: {
            offset: -5
          },
          expandOnClick: true
        }
      },
      tooltip: {
        y: {
          formatter: function(val) {
            return val + " trips";
          }
        }
      }
    };

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

    document.getElementById('total_count').innerHTML = parseInt(tripTotal[0]?.total_trips)
    document.getElementById('complete_count').innerHTML = parseInt(tripTotal[0]?.total_completed_trips)
    document.getElementById('cancel_count').innerHTML = parseInt(tripTotal[0]?.total_cancel_trips)
    document.getElementById('expired_count').innerHTML = parseInt(tripTotal[0]?.total_expired_trips)
    document.getElementById('ongoing_count').innerHTML = parseInt(tripTotal[0]?.total_ongoing_trips)
    document.getElementById('request_count').innerHTML = parseInt(tripTotal[0]?.total_request_trips)
    document.getElementById('assigned_count').innerHTML = parseInt(tripTotal[0]?.total_assigned_trips)
    document.getElementById('deleted_count').innerHTML = parseInt(tripTotal[0]?.total_deleted_trips)
  }


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

    // Gather all values into a single array to determine max Y
    const allTripData = [
      ...tripNewDaily.map((v) => v.total_trips),
      ...tripNewDaily.map((v) => v.total_completed_trips),
      ...tripNewDaily.map((v) => v.total_cancel_trips),
      ...tripNewDaily.map((v) => v.total_expired_trips)
    ];

    const maxTripY = Math.max(...allTripData, 0);
    const roundedTripMax = Math.ceil(maxTripY / 10) * 10 || 10; // Ensure at least 10

    var dailyOptions = {
      series: [{
        name: 'Created',
        data: tripNewDaily.map((value) => value.total_trips),
        color: handleColor('--color-created')
      }, {
        name: 'Completed',
        data: tripNewDaily.map((value) => value.total_completed_trips),
        color: handleColor('--color-completed')
      }, {
        name: 'Cancelled',
        data: tripNewDaily.map((value) => value.total_cancel_trips),
        color: handleColor('--color-cancelled')
      }, {
        name: 'Expired',
        data: tripNewDaily.map((value) => value.total_expired_trips),
        color: handleColor('--color-expired')
      }],
      colors: [],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'daily_trip_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'daily_trip_counts_chart'
            },
            png: {
              filename: 'daily_trip_counts_chart'
            }
          }
        },
        events: {
          click: function(event, chartContext, config) {
            const clickedElement = event.target;
            //console.log(clickedElement)

            // 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: tripNewDaily.map((value) => moment(value.trip_date).format('DD MMM')),
      },
      yaxis: {
        title: {
          text: 'Number of Trips'
        },
        min: 0,
        max: roundedTripMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      // title: {
      //   text: 'Daily',
      //   align: 'left'
      // },
      title: {
        text: '📊 Daily Trip Activity Overview',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          color: '#263238'
        },
        floating: false
      },
      subtitle: {
        text: 'Created, Completed, Cancelled, and Expired Trips - Daily Breakdown',
        align: 'left',
        style: {
          fontSize: '14px',
          color: '#546E7A'
        }
      },
      tooltip: {
        shared: true,
        intersect: false
      }
    };

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

  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();
  }

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


    // Gather all values into a single array to determine max Y
    const allTripData = [
      ...tripNewWeekly.map((v) => v.total_trips),
      ...tripNewWeekly.map((v) => v.total_completed_trips),
      ...tripNewWeekly.map((v) => v.total_cancel_trips),
      ...tripNewWeekly.map((v) => v.total_expired_trips)
    ];

    const maxTripY = Math.max(...allTripData, 0);
    const roundedTripMax = Math.ceil(maxTripY / 10) * 10 || 10; // Ensure at least 10

    var weeklyOptions = {
      series: [{
        name: 'Created',
        data: tripNewWeekly.map((value) => value.total_trips),
        color: handleColor('--color-created')
      }, {
        name: 'Completed',
        data: tripNewWeekly.map((value) => value.total_completed_trips),
        color: handleColor('--color-completed')
      }, {
        name: 'Cancelled',
        data: tripNewWeekly.map((value) => value.total_cancel_trips),
        color: handleColor('--color-cancelled')
      }, {
        name: 'Expired',
        data: tripNewWeekly.map((value) => value.total_expired_trips),
        color: handleColor('--color-expired')
      }],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'current_week_trip_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'current_week_trip_counts_chart'
            },
            png: {
              filename: 'current_week_trip_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(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: tripNewWeekly.map((value) => moment(value.trip_date).format('DD MMM')),
      },
      yaxis: {
        title: {
          text: 'Number of Trips'
        },
        min: 0,
        max: roundedTripMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      // title: {
      //   text: 'Current Week',
      //   align: 'left'
      // },
      title: {
        text: '📅 Weekly Trip Performance Snapshot',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          color: '#263238'
        }
      },
      subtitle: {
        text: 'Breakdown of Created, Completed, Cancelled, and Expired Trips by Day',
        align: 'left',
        style: {
          fontSize: '14px',
          color: '#546E7A'
        }
      },
      tooltip: {
        shared: true,
        intersect: false
      }
    };

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


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


    // Gather all values into a single array to determine max Y
    const allTripData = [
      ...tripNewMonthly.map((v) => v.total_trips),
      ...tripNewMonthly.map((v) => v.total_completed_trips),
      ...tripNewMonthly.map((v) => v.total_cancel_trips),
      ...tripNewMonthly.map((v) => v.total_expired_trips)
    ];

    const maxTripY = Math.max(...allTripData, 0);
    const roundedTripMax = Math.ceil(maxTripY / 10) * 10 || 10; // Ensure at least 10

    var monthlyOptions = {
      series: [{
        name: 'Created',
        data: tripNewMonthly.map((value) => value.total_trips),
        color: handleColor('--color-created')
      }, {
        name: 'Completed',
        data: tripNewMonthly.map((value) => value.total_completed_trips),
        color: handleColor('--color-completed')
      }, {
        name: 'Cancelled',
        data: tripNewMonthly.map((value) => value.total_cancel_trips),
        color: handleColor('--color-cancelled')
      }, {
        name: 'Expired',
        data: tripNewMonthly.map((value) => value.total_expired_trips),
        color: handleColor('--color-expired')
      }],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'monthly_trip_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'monthly_trip_counts_chart'
            },
            png: {
              filename: 'monthly_trip_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: tripNewMonthly.map((value) => monthValue[value.month]),
      },
      yaxis: {
        title: {
          text: 'Number of Trips'
        },
        min: 0,
        max: roundedTripMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      // title: {
      //   text: 'Monthly',
      //   align: 'left'
      // },
      title: {
        text: '📆 Monthly Trip Trends Overview',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          color: '#263238'
        }
      },
      subtitle: {
        text: 'Aggregated View of Created, Completed, Cancelled, and Expired Trips by Month',
        align: 'left',
        style: {
          fontSize: '14px',
          color: '#546E7A'
        }
      },
      tooltip: {
        shared: true,
        intersect: false
      }
    };

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




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


    // Gather all values into a single array to determine max Y
    const allTripData = [
      ...tripNewWeekWise.map((v) => v.total_trips),
      ...tripNewWeekWise.map((v) => v.total_completed_trips),
      ...tripNewWeekWise.map((v) => v.total_cancel_trips),
      ...tripNewWeekWise.map((v) => v.total_expired_trips)
    ];

    const maxTripY = Math.max(...allTripData, 0);
    const roundedTripMax = Math.ceil(maxTripY / 10) * 10 || 10; // Ensure at least 10


    var weekWiseOptions = {
      series: [{
        name: 'Created',
        data: tripNewWeekWise.map((value) => value.total_trips),
        color: handleColor('--color-created')
      }, {
        name: 'Completed',
        data: tripNewWeekWise.map((value) => value.total_completed_trips),
        color: handleColor('--color-completed')
      }, {
        name: 'Cancelled',
        data: tripNewWeekWise.map((value) => value.total_cancel_trips),
        color: handleColor('--color-cancelled')
      }, {
        name: 'Expired',
        data: tripNewWeekWise.map((value) => value.total_expired_trips),
        color: handleColor('--color-expired')
      }],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'weekly_trip_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'weekly_trip_counts_chart'
            },
            png: {
              filename: 'weekly_trip_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: tripNewWeekWise.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: 'Number of Trips'
        },
        min: 0,
        max: roundedTripMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      // title: {
      //   text: 'Weekly',
      //   align: 'left'
      // },
      title: {
        text: '📈 Weekly Trip Summary by Week Number',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          color: '#263238'
        }
      },
      subtitle: {
        text: 'Weekly totals for Created, Completed, Cancelled, and Expired Trips',
        align: 'left',
        style: {
          fontSize: '14px',
          color: '#546E7A'
        }
      },
      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>
  </div>
</main>

<%- footer %>
 