   <%- 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: "Analytic Dashboard"}) %>

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

    <%- 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">Total Trips</h2>
      <p id="trips_count" class="text-3xl font-bold text-blue-600">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">Total Users</h2>
      <p id="users_count" class="text-3xl font-bold text-green-600">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 Drivers</h2>
      <p id="drivers_count" class="text-3xl font-bold text-purple-600">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">Total Revenue</h2>
      <p id="revenue" class="text-3xl font-bold text-orange-600">$ 0</p>
      <!-- <p class="text-sm text-gray-500 mt-2">↑ 18% from last month</p> -->
    </div>
  </div>
  <div class="grid grid-cols-1 gap-3">
    <div id="triptotal"></div>
  </div>
  <div class="grid md:grid-cols-1 lg:grid-cols-2 gap-3">
    <div class="relative overflow-x-auto shadow-md sm:rounded-lg  ">
      <!-- Dropdowns for title -->
      <div class="flex justify-between items-center mb-4 p-2">
        <div>
          <h2 class="text-xl font-semibold text-gray-900 ">Top 10 Drivers</h2>
        </div>
        <div class="flex space-x-6">
          <select id="driverMonthDropdown" class="hidden bg-white text-gray-900 border border-gray-300 rounded-md p-2 ">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
          </select>

          <select id="driverDropdown" class="bg-white text-gray-900 border border-gray-300 rounded-md p-2 ">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
          </select>
        </div>

      </div>
      <!-- Table -->
      <table class="w-full text-sm text-left rtl:text-right text-gray-500 ">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50  ">
          <tr>
            <th scope="col" class="px-6 py-3">Name</th>
            <th scope="col" class="px-6 py-3">No. of Trips</th>
            <th scope="col" class="px-6 py-3">Turnover</th>
          </tr>
        </thead>
        <tbody id="driverTableBody">
        </tbody>
      </table>
    </div>


    <div class="relative overflow-x-auto shadow-md sm:rounded-lg  ">
      <!-- Dropdowns for title -->
      <div class="flex justify-between items-center mb-4 p-2">
        <div>
          <h2 class="text-xl font-semibold text-gray-900 ">Top 10 Users</h2>
        </div>
        <div class="flex space-x-6">
          <select id="userMonthDropdown" class="hidden bg-white text-gray-900 border border-gray-300 rounded-md p-2 ">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
          </select>
          <select id="userDropdown" class="bg-white text-gray-900 border border-gray-300 rounded-md p-2 ">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
          </select>
        </div>
      </div>

      <!-- Table -->
      <table class="w-full text-sm text-left rtl:text-right text-gray-500 ">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50  ">
          <tr>
            <th scope="col" class="px-6 py-3">Name</th>
            <th scope="col" class="px-6 py-3">No. of Trips</th>
            <th scope="col" class="px-6 py-3">Turnover</th>
          </tr>
        </thead>
        <tbody id="userTableBody">
        </tbody>
      </table>
    </div>
  </div>

</div>

<script>
  const totalCounts = <%- JSON.stringify(totalCounts) %>;
  const tripTotal = <%- JSON.stringify(tripTotal) %>;
  let dailyTop10Driver = <%- JSON.stringify(dailyDrivers) %>;
  let monthlyTop10Driver = <%- JSON.stringify(monthlyDrivers) %>;
  let weeklyTop10Driver = <%- JSON.stringify(weeklyDrivers) %>;
  let dailyTop10Users = <%- JSON.stringify(dailyUsers) %>;
  let weeklyTop10Users = <%- JSON.stringify(weeklyUsers) %>;
  let monthlyTop10Users = <%- JSON.stringify(monthlyUsers) %>;
  let curr = "<%= city_cur %>";

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

  const driverTableBody = document.getElementById('driverTableBody');
  const driverValue = Array.isArray(dailyTop10Driver) && dailyTop10Driver.length > 0;
  let driverContent = "";

  if (driverValue) {
    dailyTop10Driver.forEach((driver) => {
      driverContent += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${driver?.driver_name}</th>
                        <td class="px-6 py-4">${driver?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${driver?.total_amt}</td>
                    </tr>
                `;
    });
  }

  // If there is no data, show the "No Data Found" message
  driverTableBody.innerHTML = driverValue ? driverContent : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;

  const userTableBody = document.getElementById('userTableBody');
  const userValue = Array.isArray(dailyTop10Users) && dailyTop10Users.length > 0;
  let userContent = "";

  if (userValue) {
    dailyTop10Users.forEach((user) => {
      userContent += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${user?.user_name}</th>
                        <td class="px-6 py-4">${user?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${user?.total_payment_amount}</td>
                    </tr>
                `;
    });
  }

  // If there is no data, show the "No Data Found" message
  userTableBody.innerHTML = userValue ? userContent : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;

  if (Array.isArray(totalCounts) && totalCounts.length > 0) {
    document.getElementById('trips_count').innerHTML = parseFloat(totalCounts[0]?.total_trips)
    document.getElementById('users_count').innerHTML = parseFloat(totalCounts[0]?.total_users)
    document.getElementById('drivers_count').innerHTML = parseFloat(totalCounts[0]?.total_drivers)
    document.getElementById('revenue').innerHTML = `${curr} ${parseFloat(totalCounts[0]?.total_amt)}`
  }

  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 Trips',
    //     align: 'center'
    //   },
    //   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("#triptotal"), totalOptions);
    totalChart.render();
  }

  document.getElementById('driverDropdown').addEventListener('change', async function() {
    const selectedValue = this.value;
    const tableBody = document.getElementById('driverTableBody');
    const driverMonthDropdown = document.getElementById('driverMonthDropdown');

    if (selectedValue === 'monthly') {
      driverMonthDropdown.classList.remove('hidden');
      driverMonthDropdown.value = new Date().getMonth() + 1; // Reset to January by default
    } else {
      driverMonthDropdown.classList.add('hidden');
    }

    // Clear existing table rows
    // tableBody.innerHTML = '';

    const response = await axios.get(`/admin/top10drivers`)

    if (Object.keys(response?.data).length > 0) {
      const value = response?.data;
      dailyTop10Driver = response?.data?.dailyDrivers || [];
      weeklyTop10Driver = response?.data?.weeklyDrivers || [];
      monthlyTop10Driver = response?.data?.monthlyDrivers || [];
    }

    // Populate table based on selected dropdown value
    if (selectedValue === 'daily') {
      const value = Array.isArray(dailyTop10Driver) && dailyTop10Driver.length > 0;
      let content = "";

      if (value) {
        dailyTop10Driver.forEach((driver) => {
          content += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${driver?.driver_name}</th>
                        <td class="px-6 py-4">${driver?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${driver?.total_amt}</td>
                    </tr>
                `;
        });
      }

      // If there is no data, show the "No Data Found" message
      tableBody.innerHTML = value ? content : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;
    } else if (selectedValue === 'weekly') {

      const value = Array.isArray(weeklyTop10Driver) && weeklyTop10Driver.length > 0;
      let content = "";

      if (value) {
        weeklyTop10Driver.forEach((driver) => {
          content += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${driver?.driver_name}</th>
                        <td class="px-6 py-4">${driver?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${driver?.total_amt}</td>
                    </tr>
                `;
        });
      }

      // If there is no data, show the "No Data Found" message
      tableBody.innerHTML = value ? content : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;
    } else if (selectedValue === 'monthly') {

      const value = Array.isArray(monthlyTop10Driver) && monthlyTop10Driver.length > 0;
      let content = "";

      if (value) {
        monthlyTop10Driver.forEach((driver) => {
          content += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${driver?.driver_name}</th>
                        <td class="px-6 py-4">${driver?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${driver?.total_amt}</td>
                    </tr>
                `;
        });
      }

      // If there is no data, show the "No Data Found" message
      tableBody.innerHTML = value ? content : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;
    }
  });



  document.getElementById('driverMonthDropdown').addEventListener('change', async function() {
    const selectedValue = this.value;
    const tableBody = document.getElementById('driverTableBody');
    const driverMonthDropdown = document.getElementById('driverMonthDropdown');
    const driverDropdown = document.getElementById('driverDropdown');
    const selectDropdownValue = driverDropdown.value;

    // Clear existing table rows
    // tableBody.innerHTML = '';

    const response = await axios.post(`/admin/top10drivers`, {
      month: selectedValue
    })

    if (Object.keys(response?.data).length > 0) {
      const value = response?.data;
      dailyTop10Driver = response?.data?.dailyDrivers || [];
      weeklyTop10Driver = response?.data?.weeklyDrivers || [];
      monthlyTop10Driver = response?.data?.monthlyDrivers || [];
    }

    // Populate table based on selected dropdown value
    if (selectDropdownValue === 'daily') {
      const value = Array.isArray(dailyTop10Driver) && dailyTop10Driver.length > 0;
      let content = "";

      if (value) {
        dailyTop10Driver.forEach((driver) => {
          content += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${driver?.driver_name}</th>
                        <td class="px-6 py-4">${driver?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${driver?.total_amt}</td>
                    </tr>
                `;
        });
      }

      // If there is no data, show the "No Data Found" message
      tableBody.innerHTML = value ? content : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;
    } else if (selectDropdownValue === 'weekly') {

      const value = Array.isArray(weeklyTop10Driver) && weeklyTop10Driver.length > 0;
      let content = "";

      if (value) {
        weeklyTop10Driver.forEach((driver) => {
          content += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${driver?.driver_name}</th>
                        <td class="px-6 py-4">${driver?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${driver?.total_amt}</td>
                    </tr>
                `;
        });
      }

      // If there is no data, show the "No Data Found" message
      tableBody.innerHTML = value ? content : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;
    } else if (selectDropdownValue === 'monthly') {

      const value = Array.isArray(monthlyTop10Driver) && monthlyTop10Driver.length > 0;
      let content = "";

      if (value) {
        monthlyTop10Driver.forEach((driver) => {
          content += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${driver?.driver_name}</th>
                        <td class="px-6 py-4">${driver?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${driver?.total_amt}</td>
                    </tr>
                `;
        });
      }

      // If there is no data, show the "No Data Found" message
      tableBody.innerHTML = value ? content : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;
    }
  });

  document.getElementById('userDropdown').addEventListener('change', async function() {
    const selectedValue = this.value;
    const tableBody = document.getElementById('userTableBody');
    const userMonthDropdown = document.getElementById('userMonthDropdown');

    if (selectedValue === 'monthly') {
      userMonthDropdown.classList.remove('hidden');
      userMonthDropdown.value = new Date().getMonth() + 1; // Reset to January by default
    } else {
      userMonthDropdown.classList.add('hidden');
    }

    const response = await axios.get(`/admin/top10users`)

    if (Object.keys(response?.data).length > 0) {
      const value = response?.data;
      dailyTop10Users = response?.data?.dailyUsers || [];
      weeklyTop10Users = response?.data?.weeklyUsers || [];
      monthlyTop10Users = response?.data?.monthlyUsers || [];
    }

    // Clear existing table rows
    // tableBody.innerHTML = '';

    // Populate table based on selected dropdown value
    if (selectedValue === 'daily') {
      const value = Array.isArray(dailyTop10Users) && dailyTop10Users.length > 0;
      let content = "";

      // console.log(dailyTop10DUsers)

      if (value) {
        dailyTop10Users.forEach((user) => {
          content += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${user?.user_name}</th>
                        <td class="px-6 py-4">${user?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${user?.total_payment_amount}</td>
                    </tr>
                `;
        });
      }

      // If there is no data, show the "No Data Found" message
      tableBody.innerHTML = value ? content : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;
    } else if (selectedValue === 'weekly') {
      const value = Array.isArray(weeklyTop10Users) && weeklyTop10Users.length > 0;
      let content = "";

      if (value) {
        weeklyTop10Users.forEach((user) => {
          content += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${user?.user_name}</th>
                        <td class="px-6 py-4">${user?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${user?.total_payment_amount}</td>
                    </tr>
                `;
        });
      }

      // If there is no data, show the "No Data Found" message
      tableBody.innerHTML = value ? content : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;
    } else if (selectedValue === 'monthly') {
      const value = Array.isArray(monthlyTop10Users) && monthlyTop10Users.length > 0;
      let content = "";

      if (value) {
        monthlyTop10Users.forEach((user) => {
          content += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${user?.user_name}</th>
                        <td class="px-6 py-4">${user?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${user?.total_payment_amount}</td>
                    </tr>
                `;
        });
      }

      // If there is no data, show the "No Data Found" message
      tableBody.innerHTML = value ? content : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;
    }
  });

  document.getElementById('userMonthDropdown').addEventListener('change', async function() {
    const selectedValue = this.value;
    const tableBody = document.getElementById('userTableBody');
    const userDropdown = document.getElementById('userDropdown');
    const selectDropdownValue = userDropdown.value;

    const response = await axios.post(`/admin/top10users`, {
      month: selectedValue
    })

    if (Object.keys(response?.data).length > 0) {
      const value = response?.data;
      dailyTop10Users = response?.data?.dailyUsers || [];
      weeklyTop10Users = response?.data?.weeklyUsers || [];
      monthlyTop10Users = response?.data?.monthlyUsers || [];
    }

    // Clear existing table rows
    // tableBody.innerHTML = '';

    // Populate table based on selected dropdown value
    if (selectDropdownValue === 'daily') {
      const value = Array.isArray(dailyTop10Users) && dailyTop10Users.length > 0;
      let content = "";

      // console.log(dailyTop10DUsers)

      if (value) {
        dailyTop10Users.forEach((user) => {
          content += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${user?.user_name}</th>
                        <td class="px-6 py-4">${user?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${user?.total_payment_amount}</td>
                    </tr>
                `;
        });
      }

      // If there is no data, show the "No Data Found" message
      tableBody.innerHTML = value ? content : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;
    } else if (selectDropdownValue === 'weekly') {
      const value = Array.isArray(weeklyTop10Users) && weeklyTop10Users.length > 0;
      let content = "";

      if (value) {
        weeklyTop10Users.forEach((user) => {
          content += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${user?.user_name}</th>
                        <td class="px-6 py-4">${user?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${user?.total_payment_amount}</td>
                    </tr>
                `;
        });
      }

      // If there is no data, show the "No Data Found" message
      tableBody.innerHTML = value ? content : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;
    } else if (selectDropdownValue === 'monthly') {
      const value = Array.isArray(monthlyTop10Users) && monthlyTop10Users.length > 0;
      let content = "";

      if (value) {
        monthlyTop10Users.forEach((user) => {
          content += `
                    <tr class="bg-white border-b  border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">${user?.user_name}</th>
                        <td class="px-6 py-4">${user?.total_trips}</td>
                        <td class="px-6 py-4">${curr} ${user?.total_payment_amount}</td>
                    </tr>
                `;
        });
      }

      // If there is no data, show the "No Data Found" message
      tableBody.innerHTML = value ? content : `
            <tr class="text-center bg-white border-b  border-gray-200">
                <th colspan="3" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">No Data Found</th>
            </tr>
        `;
    }
  });

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

 