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

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

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

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


  <!-- 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">Created</h2>
      <p id="total_count" class="text-3xl font-bold driver_created">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">Active</h2>
      <p id="active_count" class="text-3xl font-bold driver_active">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">Inactive</h2>
      <p id="inactive_count" class="text-3xl font-bold driver_inactive">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">Verified</h2>
      <p id="verified_count" class="text-3xl font-bold driver_verified">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">Unverified</h2>
      <p id="unverified_count" class="text-3xl font-bold driver_unverified">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">Available</h2>
      <p id="available_count" class="text-3xl font-bold driver_available">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">Unavailable</h2>
      <p id="unavailable_count" class="text-3xl font-bold driver_unavailable">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">Deleted</h2>
      <p id="deleted_count" class="text-3xl font-bold driver_deleted">0</p>
      <!-- <p class="text-sm text-gray-500 mt-2">↑ 18% from last month</p> -->
    </div>
  </div>
  <div id="total"></div>

  <div id="driverMainTab" 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 driverTotal = <%- JSON.stringify(driverTotal) %>;
  const driverDaily = <%- JSON.stringify(driverDaily) %>;
  const driverMonthly = <%- JSON.stringify(driverMonthly) %>;
  const driverWeekly = <%- JSON.stringify(driverWeekly) %>;
  const driverWeekWise = <%- JSON.stringify(driverWeekWise) %>;
  const monthValue = <%- JSON.stringify(monthValue) %>;
  let modelChart = null;

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

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


  const handleColor = (type) => {

    const rootColor = document.querySelector(':root');
    const rs = getComputedStyle(rootColor);
    return rs.getPropertyValue(type)
  }
  // Close modal if user clicks outside of modal content
  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);
  });

  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(driverTotal) && driverTotal.length > 0) {
    // var totalOptions = {
    //   series: [parseInt(driverTotal[0]?.totalActivePartners), parseInt(driverTotal[0]?.totalInactivePartners), parseInt(driverTotal[0]?.totalDeletedPartners)],
    //   chart: {
    //     height: 350,
    //     type: 'pie',
    //   },
    //   title: {
    //     text: 'Total',
    //     align: 'left'
    //   },
    //   labels: ['Active', 'Inactive', 'Deleted'],
    //   colors: [handleColor('--color-driver-active'), handleColor('--color-driver-inactive'), handleColor('--color-driver-deleted')],
    // };

    var totalOptions = {
      series: [
        parseInt(driverTotal[0]?.totalActivePartners),
        parseInt(driverTotal[0]?.totalInactivePartners),
        parseInt(driverTotal[0]?.totalDeletedPartners),
        parseInt(driverTotal[0]?.totalVerifiedPartners),
        parseInt(driverTotal[0]?.totalUnverifiedPartners),
        parseInt(driverTotal[0]?.totalAvailablePartners),
        parseInt(driverTotal[0]?.totalUnavailablePartners)
      ],
      chart: {
        height: 400,
        type: 'pie',
      },
      title: {
        text: 'Driver Status Overview',
        align: 'center',
        style: {
          fontSize: '20px',
          fontWeight: 'bold',
          color: '#333'
        }
      },
      subtitle: {
        text: 'Breakdown of all driver account statuses.',
        align: 'center',
        offsetY: 30,
        style: {
          fontSize: '14px',
          color: '#666'
        }
      },
      labels: ['Active', 'Inactive', 'Deleted', 'Verified', 'Unverified', 'Available', 'Unavailable'],
      colors: [
        handleColor('--color-driver-active'),
        handleColor('--color-driver-inactive'),
        handleColor('--color-driver-deleted'),
        handleColor('--color-driver-verified'),
        handleColor('--color-driver-unverified'),
        handleColor('--color-driver-available'),
        handleColor('--color-driver-unavailable'),
      ],
      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 + " drivers";
          }
        }
      }
    };



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

    document.getElementById('total_count').innerHTML = parseInt(driverTotal[0]?.totalDrivers)
    document.getElementById('active_count').innerHTML = parseInt(driverTotal[0]?.totalActivePartners)
    document.getElementById('inactive_count').innerHTML = parseInt(driverTotal[0]?.totalInactivePartners)
    document.getElementById('deleted_count').innerHTML = parseInt(driverTotal[0]?.totalDeletedPartners)
    document.getElementById('verified_count').innerHTML = parseInt(driverTotal[0]?.totalVerifiedPartners)
    document.getElementById('unverified_count').innerHTML = parseInt(driverTotal[0]?.totalUnverifiedPartners)
    document.getElementById('available_count').innerHTML = parseInt(driverTotal[0]?.totalAvailablePartners)
    document.getElementById('unavailable_count').innerHTML = parseInt(driverTotal[0]?.totalUnavailablePartners)
  }

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

    const allData = [
      ...driverDaily.map(v => v.driver_count),
    ];
    const maxY = Math.max(...allData, 0); // Ensures at least 0
    const roundedMax = Math.ceil(maxY / 10) * 10 || 10;

    var dailyOptions = {
      series: [{
        name: 'New',
        data: driverDaily.map((value) => value.driver_count),
        color: handleColor('--color-driver-created'),
      }, {
        name: 'Deleted',
        data: driverDaily.map((value) => value.deleted_count),
        color: handleColor('--color-driver-deleted'),
      }],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'daily_driver_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'daily_driver_counts_chart'
            },
            png: {
              filename: 'daily_driver_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: driverDaily.map((value) => moment(value.date).format('DD MMM')),
      },
      yaxis: {
        title: {
          text: 'Number of Drivers'
        },
        min: 0,
        max: roundedMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      title: {
        text: '📅 Daily Driver Activity: New and Deleted',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          fontFamily: 'Arial, sans-serif',
          color: '#263238'
        }
      },
      subtitle: {
        text: 'Tracking daily additions and removals of drivers',
        align: 'left',
        style: {
          fontSize: '14px',
          fontWeight: 'normal',
          fontFamily: 'Arial, sans-serif',
          color: '#546E7A'
        }
      }
    };
    // var dailyOptions = {
    //   series: [{
    //     name: "Count",
    //     data: driverDaily.map((value) => value.driver_count)
    //   }],
    //   chart: {
    //     height: 350,
    //     type: 'line',
    //     zoom: {
    //       enabled: false
    //     }
    //   },
    //   dataLabels: {
    //     enabled: false
    //   },
    //   stroke: {
    //     curve: 'straight'
    //   },
    //   title: {
    //     text: 'Daily(Created)',
    //     align: 'left'
    //   },
    //   grid: {
    //     row: {
    //       colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
    //       opacity: 0.5
    //     },
    //   },
    //   xaxis: {
    //     categories: driverDaily.map((value) => value.date),
    //   }
    // };

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

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

    const allData = [
      ...driverMonthly.map(v => v.driver_count),
    ];
    const maxY = Math.max(...allData, 0); // Ensures at least 0
    const roundedMax = Math.ceil(maxY / 10) * 10 || 10;

    var monthlyOptions = {
      series: [{
        name: 'New',
        data: driverMonthly.map((value) => value.driver_count),
        color: handleColor('--color-driver-created'),
      }, {
        name: 'Deleted',
        data: driverMonthly.map((value) => value.deleted_count),
        color: handleColor('--color-driver-deleted'),
      }],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'monthly_driver_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'monthly_driver_counts_chart'
            },
            png: {
              filename: 'monthly_driver_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: driverMonthly.map((value) => monthValue[value.month]),
      },
      yaxis: {
        title: {
          text: 'Number of Drivers'
        },
        min: 0,
        max: roundedMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      title: {
        text: '📆 Monthly Driver Activity: New and Deleted',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          fontFamily: 'Arial, sans-serif',
          color: '#263238'
        }
      },
      subtitle: {
        text: 'Tracking monthly additions and removals of drivers',
        align: 'left',
        style: {
          fontSize: '14px',
          fontWeight: 'normal',
          fontFamily: 'Arial, sans-serif',
          color: '#546E7A'
        }
      }
    };
    // var monthlyOptions = {
    //   series: [{
    //     name: "Count",
    //     data: driverMonthly.map((value) => value.driver_count)
    //   }],
    //   chart: {
    //     height: 350,
    //     type: 'line',
    //     zoom: {
    //       enabled: false
    //     }
    //   },
    //   dataLabels: {
    //     enabled: false
    //   },
    //   stroke: {
    //     curve: 'straight'
    //   },
    //   title: {
    //     text: 'Monthly(Created)',
    //     align: 'left'
    //   },
    //   grid: {
    //     row: {
    //       colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
    //       opacity: 0.5
    //     },
    //   },
    //   xaxis: {
    //     categories: driverMonthly.map((value) => monthValue[value.month]),
    //   }
    // };

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

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

    const allData = [
      ...driverWeekly.map(v => v.driver_count),
    ];
    const maxY = Math.max(...allData, 0); // Ensures at least 0
    const roundedMax = Math.ceil(maxY / 10) * 10 || 10;

    var WeeklyOptions = {
      series: [{
        name: 'New',
        data: driverWeekly.map((value) => value.driver_count),
        color: handleColor('--color-driver-created'),
      }, {
        name: 'Deleted',
        data: driverWeekly.map((value) => value.deleted_count),
        color: handleColor('--color-driver-deleted'),
      }],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'current_week_driver_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'current_week_driver_counts_chart'
            },
            png: {
              filename: 'current_week_driver_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: driverWeekly.map((value) => moment(value.date).format('DD MMM')),
      },
      yaxis: {
        title: {
          text: 'Number of Drivers'
        },
        min: 0,
        max: roundedMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      title: {
        text: '📅 Current Week Driver Activity: New and Deleted',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          fontFamily: 'Arial, sans-serif',
          color: '#263238'
        }
      },
      subtitle: {
        text: 'Tracking current week additions and removals of drivers',
        align: 'left',
        style: {
          fontSize: '14px',
          fontWeight: 'normal',
          fontFamily: 'Arial, sans-serif',
          color: '#546E7A'
        }
      }
    };
    // var WeeklyOptions = {
    //   series: [{
    //     name: "Count",
    //     data: driverWeekly.map((value) => value.driver_count)
    //   }],
    //   chart: {
    //     height: 350,
    //     type: 'line',
    //     zoom: {
    //       enabled: false
    //     }
    //   },
    //   dataLabels: {
    //     enabled: false
    //   },
    //   stroke: {
    //     curve: 'straight'
    //   },
    //   title: {
    //     text: 'Current Week(Created)',
    //     align: 'left'
    //   },
    //   grid: {
    //     row: {
    //       colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
    //       opacity: 0.5
    //     },
    //   },
    //   xaxis: {
    //     categories: driverWeekly.map((value) => value.date),
    //   }
    // };

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


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


    const allData = [
      ...driverWeekWise.map(v => v.driver_count),
    ];
    const maxY = Math.max(...allData, 0); // Ensures at least 0
    const roundedMax = Math.ceil(maxY / 10) * 10 || 10;

    var weekWiseOptions = {
      series: [{
        name: 'New',
        data: driverWeekWise.map((value) => value.driver_count),
        color: handleColor('--color-driver-created'),
      }, {
        name: 'Deleted',
        data: driverWeekWise.map((value) => value.deleted_count),
        color: handleColor('--color-driver-deleted'),
      }],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'weekly_driver_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'weekly_driver_counts_chart'
            },
            png: {
              filename: 'weekly_driver_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: driverWeekWise.map(({
          week,
          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, year);
        }),
      },
      yaxis: {
        title: {
          text: 'Number of Drivers'
        },
        min: 0,
        max: roundedMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      title: {
        text: '📊 Weekly Driver Activity: New and Deleted',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          fontFamily: 'Arial, sans-serif',
          color: '#263238'
        }
      },
      subtitle: {
        text: 'Tracking Weekly additions and removals of drivers',
        align: 'left',
        style: {
          fontSize: '14px',
          fontWeight: 'normal',
          fontFamily: 'Arial, sans-serif',
          color: '#546E7A'
        }
      }
    };
    // var weekWiseOptions = {
    //   series: [{
    //     name: "Count",
    //     data: driverWeekWise.map((value) => value.driver_count)
    //   }],
    //   chart: {
    //     height: 350,
    //     type: 'line',
    //     zoom: {
    //       enabled: false
    //     }
    //   },
    //   dataLabels: {
    //     enabled: false
    //   },
    //   stroke: {
    //     curve: 'straight'
    //   },
    //   title: {
    //     text: 'Weekly(Created)',
    //     align: 'left'
    //   },
    //   grid: {
    //     row: {
    //       colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
    //       opacity: 0.5
    //     },
    //   },
    //   xaxis: {
    //     categories: driverWeekWise.map((value) => `Week ${value.week}`),
    //   }
    // };

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


  // 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 %>
 