<%- header %>
<main class="dashboard-main">
  <%- navbar %>
  <%- include('../../partials/utils/mask.ejs') %>

  <style>
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
      gap: 24px;
      align-items: stretch;
      width: 100%;
    }

    .card {
      display: flex;
      flex-direction: column;
    }

    .fwh {
      font-size: 14px !important;
    }
  


    .lb {
      font-size: 14px !important;
      margin-bottom: -10px !important;
    }
  </style>

  <div class="container flex-1 pt-20 w-full my-4">
    <%- include('../../partials/utils/title.ejs', {title: "Dashboard"}) %>


    <!-- Loading spinner -->
    <div id="loadingSpinner" class="text-center py-8">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <p class="mt-2">Loading dashboard data...</p>
    </div>

    <!-- Dashboard content (initially hidden) -->
    <div id="dashboardContent" style="display: none;">
      <!-- Trip Statistics Section -->
      <div class="row gy-4">
        <div class="col-12">
          <div class="card radius-12">
            <div class="card-header border-bottom">
              <h6 class="text-lg fw-semibold mb-0">TRIPS</h6>
            </div>
            <div class="card-body p-16">
              <div class="row gy-4" id="tripStatsContainer"></div>
              <div class="mt-40 d-flex flex-wrap gap-4 align-items-start" id="timePeriodStats"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Payments Section -->
      <div class="row gy-4 mt-40">
        <div class="col-xxl-12">
          <div class="card h-100 radius-8 border">
            <div class="card-header border-bottom">
              <h6 class="text-lg fw-semibold mb-0">TOTAL PAYMENTS</h6>
            </div>
            <div class="card-body p-24">
              <div class="row gy-4" id="paymentStatsContainer"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Drivers Section -->
      <% if (user.group_id !== 6) { %>
      <div class="row gy-4 mt-40">
        <div class="col-xxl-12">
          <div class="card h-100 radius-8 border">
            <div class="card-header border-bottom">
              <h6 class="text-lg fw-semibold mb-0">Drivers</h6>
            </div>
            <div class="card-body p-24">
              <div class="row g-3">
                <div class="col-md-12">
                  <div class="row g-3" id="driverStatsContainer"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <% } %>

      <!-- Passengers Section -->
      <% if (user.group_id !== 5) { %>
      <div class="row gy-4 mt-40">
        <div class="col-xxl-12">
          <div class="card h-100 radius-8 border">
            <div class="card-header border-bottom">
              <h6 class="text-lg fw-semibold mb-0">Passengers</h6>
            </div>
            <div class="card-body p-20">
              <div class="row g-3">
                <div class="col-md-12">
                  <div class="row g-3" id="passengerStatsContainer"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <% } %>

      <!-- Top Drivers Table -->
      <% if (user.group_id !== 6) { %>
      <div class="card basic-data-table mt-60">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="card-title mb-0">Top 10 Drivers</h5>

          <form id="filterForm" class="row g-2 align-items-center mb-0">
            <div class="col-auto">
              <label><input type="radio" name="filterType" class="form-check-input" value="daily" > Daily</label>
              <label><input type="radio" name="filterType" class="form-check-input" value="weekly"> Weekly</label>
              <label><input type="radio" name="filterType" class="form-check-input" value="monthly" checked> Monthly</label>
            </div>

            <div class="col-auto d-none" id="monthSelector">
              <input type="hidden" id="monthInput" name="month" value="">
              <span id="monthDisplay">Current Month Selected</span>
            </div>
          </form>
        </div>

        <div class="card-body">
          <div class="table-responsive test">
            <table class="table table-striped table-bordered mb-0">
              <thead>
                <tr>
                  <th>S. No.</th>
                  <th>Driver Name</th>
                  <th>Total Trips</th>
                  <th>Total Amount</th>
                </tr>
              </thead>
              <tbody id="resultArea">
                <tr>
                  <td colspan="4" class="text-center">Loading...</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <% } %>



      <!-- Drivers Map -->
      <% if (user.group_id !== 6) { %>
      <div class="row gy-4 mt-40">
        <div class="col-xxl-12">
          <div class="card h-100 radius-8 border">
            <div class="card-header border-bottom">
              <h6 class="text-lg fw-semibold mb-0">
                Drivers On Map (Note - The updated location of the driver will only be displayed on the map if it is available on the server.)
              </h6>
            </div>
            <div class="card-body p-20">
              <div class="mt-4">
                <div class="bg-white shadow-md rounded-lg">
                  <div id="driversMap" style="height: 500px; width: 100%;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <% } %>
    </div>
  </div>
</main>

<script>
  // Configuration objects
  const CONFIG = {
    city_cur: "<%= city_cur %>",
    tripSummaryIcons: {
      total_trips: "ri-map-pin-fill",
      total_completed_trips: "ri-check-double-line",
      total_cancel_trips: "ri-close-circle-line",
      total_expired_trips: "ri-timer-line",
      total_ongoing_trips: "ri-loader-4-line",
      total_deleted_trips: "ri-delete-bin-6-line",
      total_request_trips: "ri-question-answer-line",
      total_assigned_trips: "ri-user-follow-line",
    },
    statusColors: {
      total_completed_trips: {
        label: "Completed",
        bg: "bg-success-100",
        text: "text-success-600",
        iconBg: "bg-success-200",
        line: "line-bg-success",
        url: "/admin/trips?trip_status=completed"
      },
      total_cancel_trips: {
        label: "Cancelled",
        bg: "bg-danger-100",
        text: "text-danger-600",
        iconBg: "bg-danger-200",
        line: "line-bg-danger",
        url: "/admin/cancelled-trip"
      },
      total_expired_trips: {
        label: "Expired",
        bg: "bg-warning-100",
        text: "text-warning-600",
        iconBg: "bg-warning-200",
        line: "line-bg-warning",
        url: "/admin/trips?trip_status=expired"

      },
      total_ongoing_trips: {
        label: "Ongoing",
        bg: "bg-info-100",
        text: "text-info-600",
        iconBg: "bg-info-200",
        line: "line-bg-info",
        url: "/admin/trips?trip_status=begin&trip_status=payment_awaited&trip_status=accept&trip_status=arrive"

      },
      total_deleted_trips: {
        label: "Deleted",
        bg: "bg-danger-200",
        text: "text-danger-500",
        iconBg: "bg-danger-300",
        line: "line-bg-danger",
        url: "/admin/deleted-trip"

      },
      total_request_trips: {
        label: "Request",
        bg: "bg-lilac-100",
        text: "text-lilac-600",
        iconBg: "bg-lilac-200",
        line: "line-bg-lilac",
        url: "/admin/trips?trip_status=request"

      },
      total_assigned_trips: {
        label: "Assigned",
        bg: "bg-primary-100",
        text: "text-primary-600",
        iconBg: "bg-primary-200",
        line: "line-bg-primary",
        url: "/admin/trips?trip_status=assigned"

      },
      total_trips: {
        label: "Total Created",
        bg: "bg-primary-100",
        text: "text-primary-600",
        iconBg: "bg-primary-200",
        line: "line-bg-primary",
       }
    },
    partnerStats: {
      totalDrivers: {
        label: "Total Drivers",
        icon: "ri-steering-2-fill",
        bg: "bg-purple-light",
        iconBg: "bg-lilac-200",
        iconColor: "text-lilac-600",
        border: "border-lilac-400",
 
      },
      totalActivePartners: {
        label: "Active",
        icon: "ri-user-smile-line",
        bg: "bg-success-100",
        iconBg: "bg-success-200",
        iconColor: "text-success-600",
        border: "border-success-400",
        url: "/admin/active-drivers"

      },
      totalInactivePartners: {
        label: "Inactive",
        icon: "ri-user-unfollow-line",
        bg: "bg-warning-100",
        iconBg: "bg-warning-200",
        iconColor: "text-warning-600",
        border: "border-warning-400",
        url: "/admin/inactive-drivers"
      },
      totalVerifiedPartners: {
        label: "Verified",
        icon: "ri-shield-user-line",
        bg: "bg-info-focus",
        iconBg: "bg-info-200",
        iconColor: "text-info-600",
        border: "border-info-400",
        url: "/admin/active-drivers?d_is_verified=1"


      },
      totalUnverifiedPartners: {
        label: "Unverified",
        icon: "ri-shield-keyhole-line",
        bg: "bg-warning-focus",
        iconBg: "text-warning-600",
        iconColor: "line-bg-warning",
        border: "border-warning-400",
        url: "/admin/active-drivers?d_is_verified=0"

      },
      totalAvailablePartners: {
        label: "Available",
        icon: "ri-checkbox-circle-line",
        bg: "bg-success-50",
        iconBg: "bg-success-100",
        iconColor: "text-success-500",
        border: "border-success-200",
        url: "/admin/active-drivers?d_is_available=1&d_is_verified=1"
      },
      totalUnavailablePartners: {
        label: "Unavailable",
        icon: "ri-close-circle-line",
        bg: "bg-danger-100",
        iconBg: "bg-danger-200",
        iconColor: "text-danger-600",
        border: "border-danger-400",
        url: "/admin/active-drivers?d_is_available=0&d_is_verified=1"

      },
      totalDeletedPartners: {
        label: "Deleted",
        icon: "ri-delete-bin-line",
        bg: "bg-danger-100",
        iconBg: "bg-danger-200",
        iconColor: "text-danger-600",
        border: "border-danger-400",
        url: "/admin/delete-drivers"
      }
    },
    userStats: {
      total_users: {
        label: "Total Passengers",
        icon: "ri-user-3-fill",
        bg: "bg-primary-100",
        iconBg: "bg-primary-200",
        iconColor: "text-primary-600",
        border: "border-primary-400",
 
      },
      active_users: {
        label: "Active",
        icon: "ri-user-smile-line",
        bg: "bg-success-100",
        iconBg: "bg-success-200",
        iconColor: "text-success-600",
        border: "border-success-400",
        url: "/admin/active-users"
      },
      inactive_users: {
        label: "Inactive",
        icon: "ri-user-unfollow-line",
        bg: "bg-warning-100",
        iconBg: "bg-warning-200",
        iconColor: "text-warning-600",
        border: "border-warning-400",
        url: "/admin/inactive-users"
      },
      deleted_users: {
        label: "Deleted",
        icon: "ri-delete-bin-line",
        bg: "bg-danger-100",
        iconBg: "bg-danger-200",
        iconColor: "text-danger-600",
        border: "border-danger-400",
        url: "/admin/delete-users"
      }
    },
    amountIcons: {
      total_payment_amount: {
        label: "Total",
        icon: "ri-bar-chart-2-fill",
        gradient: "gradient-deep-4",
        line: "line-bg-warning",
        bg: "bg-warning-focus",
        text: "text-warning-600",

      },
      cash_amount: {
        label: "Cash",
        icon: "ri-money-rupee-circle-line",
        gradient: "gradient-deep-1",
        line: "line-bg-primary",
        bg: "bg-primary-100",
        text: "text-primary-600",
      },
      card_amount: {
        label: "Card",
        icon: "ri-bank-card-line",
        gradient: "gradient-deep-2",
        line: "line-bg-lilac",
        bg: "bg-lilac-200",
        text: "text-lilac-600",
      },
      wallet_amount: {
        label: "Wallet",
        icon: "ri-wallet-3-line",
        gradient: "gradient-deep-3",
        line: "line-bg-success",
        bg: "bg-success-200",
        text: "text-success-600",
      },
    }
  };

  // Utility functions
  const Utils = {
    formatCurrency: (amount) => `${CONFIG.city_cur}${parseFloat(amount || 0).toFixed(2)}`,
    createCardHTML: (config, count, index) => `
<div class="col-xxl-3 col-xl-3 col-sm-6" style="height: 100px;">
  <div 
    class="px-20 py-16 radius-8 shadow-sm h-100 ${config.bg} ${config.line} position-relative overflow-hidden"
    style="cursor: ${config.url ? 'pointer' : ''};"
    ${config.url ? `onclick="window.open('${config.url}', '_blank')"` : ''}
  >
    
    <div class="d-flex align-items-start justify-content-between gap-2 h-100">
      <div>
        <span class="mb-2 fw-medium text-secondary-light text-md d-block" style="font-size:12px;">${config.label}</span>
         <h6 class="fw-semibold mb-1 ${config.text} hwh" style="font-size:12px position:relative">        
                     ${formatShortNumberWithoutZero(Number(count))}
            <span class="tooltip">${formatFullNumberWithoutZero(Number(count))}</span></h6>
      </div>
      <span class="w-44-px h-44-px radius-8 d-inline-flex justify-content-center align-items-center text-2xl ${config.iconBg} ${config.text} flex-shrink-0">
        <i class="${CONFIG.tripSummaryIcons[index] || 'ri-bar-chart-line'}"></i>
      </span>
    </div>

  </div>
</div>


    `,
    createStatCard: (item, isTimePeriod = false) => {
      if (isTimePeriod) {
        return `
     <div class="stat-card card p-3 shadow-none radius-8 border ${item.cardBg}" style="cursor:pointer; min-width: 135px; flex: 1 1 135px;">
        <div class="card-body p-0">
          <div class="d-flex flex-nowrap align-items-center gap-2">
            <span class="mb-0 w-24-px h-24-px ${item.iconBg} text-white flex-shrink-0 d-flex justify-content-center align-items-center rounded-circle h6 mb-0">
              <iconify-icon icon="${item.icon}" class="icon" style="font-size: 14px;"></iconify-icon>
            </span>
            <div class="">
              <span class="fw-medium text-secondary-light text-sm d-block text-nowrap" style="font-size:12px">${item.label}</span>
                            <p class="fw-semibold text-nowrap lwh" style="font-size:12px ; position: relative;">
                                 ${formatShortNumberWithoutZero(Number(item.value))}
            <span class="tooltip">${formatFullNumberWithoutZero(Number(item.value))}</span>
                 </p>
            </div>
          </div>
        </div>
      </div>
        `;
      }

      return `
        <div class="col-xxl-3 col-sm-6" >
          <div   class="card p-3 shadow-2 radius-8 border input-form-light h-100 ${item.cardBg}">
            <div class="card-body p-0">
              <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mb-8">
                <div class="d-flex align-items-center gap-2">
                  <span class="mb-0 w-48-px h-48-px ${item.iconBg} text-white flex-shrink-0 d-flex justify-content-center align-items-center rounded-circle h6">
                    <iconify-icon icon="${item.icon}" class="icon"></iconify-icon>
                  </span>
                  <div>
                    <span class="mb-2 fw-medium text-secondary-light text-sm">
                      ${item.label === "cash_amount" ? "Cash" : 
                        item.label === "card_amount" ? "Card" : 
                        item.label === "wallet_amount" ? "Wallet" : "Total Amount"} 
                    </span>
                 <br/>   <h6 class="fw-semibold lwh" style=" position: relative;">
                                ${CONFIG.city_cur}${formatShortNumber(item.amount)}
            <span class="tooltip">${CONFIG.city_cur}${formatFullNumber(item.amount)}</span>
            </h6>
                   </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      `;
    }
  };

  // Dashboard functionality
  const Dashboard = {
    async init() {
      try {
        const isCorporateAdmin = <%= user.group_id %> === 6;
        const isCompanyAdmin = <%= user.group_id %> === 5;
        
        const fetchPromises = [
          fetch('/admin/dashboard/trips'),
          fetch('/admin/dashboard/payments')
        ];
        
        if (!isCorporateAdmin) {
          fetchPromises.push(fetch('/admin/dashboard/drivers'));
        }
        
        if (!isCompanyAdmin) {
          fetchPromises.push(fetch('/admin/dashboard/passengers'));
        }

        const responses = await Promise.all(fetchPromises);
        const dataPromises = responses.map(res => res.json());
        const allData = await Promise.all(dataPromises);
        
        let dataIndex = 0;
        const tripsData = allData[dataIndex++];
        const paymentsData = allData[dataIndex++];
        const driversData = !isCorporateAdmin ? allData[dataIndex++] : null;
        const passengersData = !isCompanyAdmin ? allData[dataIndex++] : null;

        this.renderTripStats(tripsData);
        this.renderPaymentStats(paymentsData);
        
        if (!isCorporateAdmin && driversData) {
          this.renderDriverStats(driversData);
        }
        
        if (!isCompanyAdmin && passengersData) {
          this.renderPassengerStats(passengersData);
        }

        document.getElementById('loadingSpinner').style.display = 'none';
        document.getElementById('dashboardContent').style.display = 'block';

        if (!isCorporateAdmin) {
          this.initTopDriversTable();

          if (window.google && window.google.maps) {
            this.loadDriversOnMap(driversData.driversOnMap || []);
          } else {
            this.loadGoogleMapsAPI().then(() => {
              this.loadDriversOnMap(driversData.driversOnMap || []);
            });
          }
        }
      } catch (error) {
        console.error('Error loading dashboard data:', error);
        document.getElementById('loadingSpinner').innerHTML = `
          <div class="alert alert-danger">
            Failed to load dashboard data. Please try again later.
          </div>
        `;
      }
    },

    renderTripStats(data) {
      const container = document.getElementById('tripStatsContainer');
      const tripsTotalCounts = data.tripsTotalCounts || {};

      function formatNumber(num) {
        return num?.toLocaleString('en-US');
      }

      let html = '';
      Object.keys(tripsTotalCounts).forEach((key) => {
        if (key.endsWith('_percent')) return;

        const percentKey = key.replace('total_', '').replace('_trips', '') + '_percent';
        const percent = tripsTotalCounts[percentKey] || 0;
        const count = tripsTotalCounts[key];
        const colors = CONFIG.statusColors[key] || CONFIG.statusColors.total_trips;
        const url = CONFIG.statusColors[key] || CONFIG.statusColors.url;

        const formattedCount = formatNumber(count);

        html += Utils.createCardHTML(colors, formattedCount, key, url);
      });

      container.innerHTML = html;
      this.renderTimePeriodStats(data);
    },

  renderTimePeriodStats(data) {
  const container = document.getElementById('timePeriodStats');

  const dayData = data.currentDayStats[0] || {};
  const weekData = data.currentWeekStats[0] || {};
  const monthData = data.currentMonthStats[0] || {};

  const readableMonth = monthData.label || new Date().toLocaleString('default', { month: 'short' });

  const createStatsCards = (data, period) => [
    {
      label: "Created",
      value: data.total_trips || 0,
      icon: "ri-map-pin-fill",
      iconBg: "bg-primary-600",
      cardBg: "bg-gradient-end-1",
      url: "/admin/trips?from="
    },
    {
      label: "Completed",
      value: data.total_completed_trips || 0,
      icon: "ri-check-double-line",
      iconBg: "bg-success-main",
      cardBg: "bg-gradient-end-2",
      url: "/admin/trips?trip_status=completed&from="
    },
    {
      label: "Cancelled",
      value: data.total_cancel_trips || 0,
      icon: "ri-close-circle-line",
      iconBg: "bg-yellow",
      cardBg: "bg-gradient-end-3",
      url: "/admin/trips?trip_status=cancel&trip_status=p_cancel_pickup&trip_status=paid_cancel&from="
    },
    {
      label: "Expired",
      value: data.total_expired_trips || 0,
      icon: "ri-timer-line",
      iconBg: "bg-purple",
      cardBg: "bg-gradient-end-4",
      url: "/admin/trips?trip_status=expired&from="
    }
  ];

  container.innerHTML = `
    <div class="stats-grid">

      <div class="card shadow-sm border p-3" data-period="day">
        <div class="card-header border-bottom mb-3">
          <h6 class="text-md fw-semibold text-center mb-0">
            TODAY (${dayData.label || new Date().toISOString().split('T')[0]})
          </h6>
        </div>
        <div class="d-flex flex-wrap gap-3 justify-content-center period-cards">
          ${createStatsCards(dayData, 'day').map(item => Utils.createStatCard(item, true)).join('')}
        </div>
      </div>

      <div class="card shadow-sm border p-3" data-period="week">
        <div class="card-header border-bottom mb-3">
          <h6 class="text-md fw-semibold text-center mb-0">
            THIS WEEK (${weekData.week_label || "Current Week"})
          </h6>
        </div>
        <div class="d-flex flex-wrap gap-3 justify-content-center period-cards">
          ${createStatsCards(weekData, 'week').map(item => Utils.createStatCard(item, true)).join('')}
        </div>
      </div>

      <div class="card shadow-sm border p-3" data-period="month">
        <div class="card-header border-bottom mb-3">
          <h6 class="text-md fw-semibold text-center mb-0">
            THIS MONTH (${readableMonth})
          </h6>
        </div>
        <div class="d-flex flex-wrap gap-3 justify-content-center period-cards">
          ${createStatsCards(monthData, 'month').map(item => Utils.createStatCard(item, true)).join('')}
        </div>
      </div>

    </div>
  `;

  container.querySelectorAll('.period-cards').forEach(group => {
    const period = group.closest('.card').getAttribute('data-period');
    const cardsData = createStatsCards(
      period === 'day' ? dayData : period === 'week' ? weekData : monthData,
      period
    );
    const cards = group.querySelectorAll('.stat-card');

    const formatLocalDate = (date) =>
      new Date(date.getTime() - date.getTimezoneOffset() * 60000)
        .toISOString()
        .split('T')[0];

    cards.forEach((card, i) => {
      card.addEventListener('click', () => {
        const cardData = cardsData[i];
        const today = new Date();

        let fromDate = '';
        let toDate = '';

        if (period === 'day') {
          fromDate = formatLocalDate(today);
          toDate = fromDate;
        } 
        else if (period === 'week') {
          // ✅ Monday → Sunday
          const currentDay = today.getDay(); // 0=Sun, 1=Mon, ...
          const diffToMonday = currentDay === 0 ? -6 : 1 - currentDay;
          const monday = new Date(today);
          monday.setDate(today.getDate() + diffToMonday);
          const sunday = new Date(monday);
          sunday.setDate(monday.getDate() + 6);

          fromDate = formatLocalDate(monday);
          toDate = formatLocalDate(sunday);
        } 
        else if (period === 'month') {
          // ✅ 1st → last day (30 or 31 auto)
          const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
          const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
          fromDate = formatLocalDate(firstDay);
          toDate = formatLocalDate(lastDay);
        }

        const finalUrl = `${window.location.origin}${cardData.url}${fromDate}&to=${toDate}`;
        window.open(finalUrl, '_blank');
      });
    });
  });
}

,
renderPaymentStats(data) {
      const container = document.getElementById('paymentStatsContainer');
      const transactionsTotal = data.transactionsTotalCounts || [];
      const dailyData = data.transactionDailyCounts[0] || {};
      const weeklyData = data.transactionWeeklyCounts[0] || {};
      const monthlyData = data.transactionMonthlyCounts[0] || {};
      // Helper function to format date as "15 Sep"
      const formatDateLabel = (dateString) => {
        if (!dateString) return '';
        const date = new Date(dateString);
        const options = {
          day: 'numeric',
          month: 'short'
        }; // no year
        return new Intl.DateTimeFormat('en-US', options).format(date);
      };

      const paymentModeConfig = {

        card_amount: {
          icon: "solar:card-bold",
          iconBg: "bg-yellow",
          cardBg: "bg-gradient-end-3",
          // url: "/admin/transaction-manager?trans_pay_mode=Card"

        },
        wallet_amount: {
          icon: "material-symbols:account-balance-wallet",
          iconBg: "bg-purple",
          cardBg: "bg-gradient-end-4",
          // url: "/admin/transaction-manager?trans_pay_mode=Wallet"

        },
        cash_amount: {
          icon: "tabler:currency-dollar",
          iconBg: "bg-success-main",
          cardBg: "bg-gradient-end-2",
          // url: "/admin/transaction-manager?trans_pay_mode=Cash"


        },
        total: {
          icon: "mdi:bank-transfer",
          iconBg: "bg-cyan",
          cardBg: "bg-gradient-end-6",
          // url: "/admin/transaction-manager"

        }
      };

      // Format numbers
      const formatNumber = (num) => {
        if (num === null || num === undefined) return '0';
        const nfObject = new Intl.NumberFormat('en-US');
        return nfObject.format(parseFloat(num));
      };

      const transCards = transactionsTotal.map(item => ({
        label: item.mode,
        amount: item.amount || 0,
        percentage: item.percentage || 0,
        ...paymentModeConfig[item.mode]
      }));

      const renderAmountSection = (data, periodLabel) =>
        Object.keys(CONFIG.amountIcons).map(key => {
          const info = CONFIG.amountIcons[key];
          const value = data[key] || 0;
          return `
<div class="period-card">
  <div class="px-20 py-16 shadow-none radius-8 h-100 ${info.gradient} left-line ${info.line} position-relative overflow-hidden">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mb-8">
      <div>
        <span class="mb-4 fw-medium text-secondary-light" style="font-size:12px">${info.label}</span>
        <div class="d-flex align-items-center gap-2">
          <span class="w-24-px h-24-px radius-8 justify-content-center align-items-center text-2xl mb-12 ${info.bg} ${info.text}">
            <i class="${info.icon}"></i>
          </span>
          <!-- Number with tooltip -->
          <h6 class="fw-semibold mb-1 fwh" style="font-size:12px; position: relative;">
            ${CONFIG.city_cur}${formatShortNumber(value)}
            <span class="tooltip">${CONFIG.city_cur}${formatFullNumber(value)}</span>
          </h6>
        </div>
      </div>
    </div>
  </div>
</div>



 
      `;
        }).join('');

      // Inject CSS for layout
      const style = document.createElement('style');
      style.textContent = `
 .periods-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 sections in a row */
  gap: 24px;
  margin-top: 24px;
}

.period-section {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
}

.period-section h6 {
  font-size: 14px;
  margin-bottom: 12px;
}

.period-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 2 cards per row */
  gap: 12px;
  flex: 1;
}

.period-card {
  display: flex;
  min-width: 0; /* prevent overflow */
  flex: 1 1 auto;
}
  @media (max-width: 2300px) {
.period-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
  gap: 12px;
  flex: 1;
}
}


/* Responsive adjustments */
@media (max-width: 992px) {
  .periods-row {
    grid-template-columns: repeat(2, 1fr); /* 2 sections per row */
  }
}

@media (max-width: 768px) {
  .periods-row {
    grid-template-columns: repeat(1, 1fr); /* 2 sections per row */
  }

  .period-cards {
    grid-template-columns: repeat(3, 1fr); /* 1 card per row */
  }
 
}

 @media (max-width: 480px) {
  .periods-row {
    grid-template-columns: repeat(1, 1fr); /* 2 sections per row */
  }

  .period-cards {
    grid-template-columns: repeat(2, 1fr); /* 1 card per row */
  }
 
}

.period-card div {
   width: 100%; /* Allow cards to grow */
 }
  `;
      document.head.appendChild(style);

      container.innerHTML = `
    <!-- Top total cards -->
    <div class="row gy-4">
      ${transCards.reverse().map(item => {
        const cardHtml = Utils.createStatCard(item);
        return cardHtml.replace(item.amount, formatNumber(item.amount));
      }).join('')}
    </div>

    <!-- Daily | Weekly | Monthly in same row -->
    <div class="periods-row">
      <div class="period-section">
        <p class="fw-semibold mb-3 lb" style="font-size:14px; padding-bottom:20px">TODAY (${dailyData.label || 'Today'})</p>
        <div class="period-cards">
          ${renderAmountSection(dailyData, dailyData.label || 'Today')}
        </div>
      </div>
      
      <div class="period-section">
        <p class="fw-semibold mb-3 lb" style="font-size:14px; padding-bottom:20px">THIS WEEK (${weeklyData.label || 'This Week'})</p>
        <div class="period-cards">
          ${renderAmountSection(weeklyData, weeklyData.label || 'This Week')}
        </div>
      </div>
      
      <div class="period-section">
        <p class="fw-semibold mb-3 lb" style="font-size:14px; padding-bottom:20px">THIS MONTH (${monthlyData.label || 'This Month'})</p>
        <div class="period-cards">
          ${renderAmountSection(monthlyData, monthlyData.label || 'This Month')}
        </div>
      </div>
    </div>
  `;
  // Add click functionality to payment cards
 // Add click functionality to payment cards
// container.querySelectorAll('.period-card').forEach(card => {
//   card.addEventListener('click', () => {
//     const periodSection = card.closest('.period-section');
//     let period = 'day';

//     if (periodSection.textContent.includes('TODAY')) period = 'day';
//     else if (periodSection.textContent.includes('THIS WEEK')) period = 'week';
//     else if (periodSection.textContent.includes('THIS MONTH')) period = 'month';

//     // Get label text and map to key
//     const labelText = card.querySelector('span.mb-4').textContent.trim().toLowerCase();
//     let key = '';
//     if (labelText === 'card') key = 'card_amount';
//     else if (labelText === 'wallet') key = 'wallet_amount';
//     else if (labelText === 'cash') key = 'cash_amount';
//     else if (labelText === 'total') key = 'total';
//     else return; // unknown label

//     const info = paymentModeConfig[key];
//     if (!info || !info.url) return;

//     // Compute fromDate
//     const today = new Date();
//     let fromDate = '';
//     if (period === 'day') fromDate = today.toISOString().split('T')[0];
//     else if (period === 'week') {
//       const firstDayOfWeek = new Date(today);
//       firstDayOfWeek.setDate(today.getDate() - today.getDay());
//       fromDate = firstDayOfWeek.toISOString().split('T')[0];
//     } else if (period === 'month') {
//       const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
//       fromDate = firstDayOfMonth.toISOString().split('T')[0];
//     }

//     // Build URL
//     let finalUrl = `${window.location.origin}${info.url}`;
//     // Only append from= for daily/weekly/monthly
//     if (fromDate) finalUrl += info.url.includes('?') ? `&from=${fromDate}` : `?from=${fromDate}`;

//     window.open(finalUrl, '_blank');
//   });
// });

    }


    ,


    renderDriverStats(data) {
      const container = document.getElementById('driverStatsContainer');
      const driverCounts = data.driversTotalCounts[0] || {};

      let html = '';
      for (let key in driverCounts) {
        const stat = CONFIG.partnerStats[key];
        if (!stat) continue;

        const value = Number(driverCounts[key]) || 0;
        html += `
<div class="col-sm-6 col-xs-6 col-md-3">
  <div 
    class="radius-8 h-100 text-center p-20 ${stat.bg}" 
    style="cursor: ${stat.url ? 'pointer' : ''};"
    ${stat.url ? `onclick="window.open('${stat.url}', '_blank')"` : ''}
  >
    <span class="w-44-px h-44-px radius-8 d-inline-flex justify-content-center align-items-center text-xl mb-12 ${stat.iconBg} ${stat.border} ${stat.iconColor}">
      <i class="${stat.icon}"></i>
    </span>
    <span class="text-neutral-700 d-block">${stat.label}</span>

                 <h6 class="mb-0 mt-4 lwh" style=" position: relative;">
                                ${formatShortNumberWithoutZero(value)}
            <span class="tooltip">${formatFullNumberWithoutZero(value)}</span>
            </h6>
   </div>
</div>
        `;
      }

      container.innerHTML = html || `<div class="col-12 text-center text-danger">No driver data available</div>`;
    },

    renderPassengerStats(data) {
      const container = document.getElementById('passengerStatsContainer');
      const passengerCounts = data.userTotalCounts[0] || {};

      let html = '';
      for (let key in passengerCounts) {
        const stat = CONFIG.userStats[key];
        if (!stat) continue;

        html += `
 <div class="col-sm-6 col-xs-6 col-md-3">
  <div 
    class="radius-8 h-100 text-center p-20 ${stat.bg}"
    style="cursor: ${stat.url ? 'pointer' : ''};"
    ${stat.url ? `onclick="window.open('${stat.url}', '_blank')"` : ''}
  >
    <span class="w-44-px h-44-px radius-8 d-inline-flex justify-content-center align-items-center text-xl mb-12 ${stat.iconBg} ${stat.border} ${stat.iconColor}">
      <i class="${stat.icon}"></i>
    </span>
    <span class="text-neutral-700 d-block">${stat.label}</span>

              <h6 class="mb-0 mt-4 lwh" style=" position: relative;">
                                ${formatShortNumberWithoutZero(Number(passengerCounts[key]))}
            <span class="tooltip">${formatFullNumberWithoutZero(Number(passengerCounts[key]))}</span>
            </h6>
   </div>
</div>

        `;
      }

      container.innerHTML = html;
    },

initTopDriversTable() {
  const typeRadios = document.querySelectorAll('input[name="filterType"]');
  const monthSelector = document.getElementById('monthSelector');
  const monthInput = document.getElementById('monthInput');

  // Pre-select monthly
  const monthlyRadio = document.querySelector('input[name="filterType"][value="monthly"]');
  if (monthlyRadio) {
    monthlyRadio.checked = true;
    monthSelector.classList.remove('d-none');
    monthInput.value = new Date().getMonth() + 1; // set current month
  }

  typeRadios.forEach(radio => {
    radio.addEventListener('change', () => {
      const selectedType = document.querySelector('input[name="filterType"]:checked').value;
      monthSelector.classList.toggle('d-none', selectedType !== 'monthly');

      if (selectedType === 'monthly') {
        monthInput.value = new Date().getMonth() + 1;
      } else {
        monthInput.value = '';
      }

      this.fetchTopDrivers();
    });
  });

  // Initial fetch
  this.fetchTopDrivers();
},

    async fetchTopDrivers() {
      const resultArea = document.getElementById('resultArea');
      const monthInput = document.getElementById('monthInput');
      const selectedType = document.querySelector('input[name="filterType"]:checked').value;
      const month = monthInput.value;

      try {
        resultArea.innerHTML = `<tr><td colspan="4" class="text-center">Loading...</td></tr>`;

        let url = `/admin/dashboard/top-drivers?type=${selectedType}`;
        if (selectedType === 'monthly') url += `&month=${month}`;

        const res = await fetch(url);
        
        if (!res.ok) {
          throw new Error(`Server error: ${res.status}`);
        }

        const drivers = await res.json();

        if (!Array.isArray(drivers) || drivers.length === 0) {
          resultArea.innerHTML = `<tr><td colspan="4" class="text-center text-muted">No drivers found for selected period.</td></tr>`;
          return;
        }

        resultArea.innerHTML = drivers.map((d, i) => `
      <tr>
        <td>${i + 1}</td>
        <td>${maskName(d.driver_name) || 'N/A'}</td>
        <td>${d.total_trips || 0}</td>
        <td>${Utils.formatCurrency(d.total_amt)}</td>
      </tr>
    `).join('');
      } catch (error) {
        console.error('Error fetching top drivers:', error);
        resultArea.innerHTML = `
      <tr>
        <td colspan="4" class="text-center text-muted">
          No data available
        </td>
      </tr>
    `;
      }
    },
  
  
    loadDriversOnMap(drivers) {
      const center = drivers.length > 0 ? {
        lat: parseFloat(drivers[0].d_lat),
        lng: parseFloat(drivers[0].d_lng)
      } : {
        lat: 28.6139,
        lng: 77.2090
      };

      const map = new google.maps.Map(document.getElementById("driversMap"), {
        center,
        zoom: 11,
      });

      const infoWindow = new google.maps.InfoWindow();
      const markers = [];

      drivers.forEach(driver => {
        const marker = new google.maps.Marker({
          position: {
            lat: parseFloat(driver.d_lat),
            lng: parseFloat(driver.d_lng)
          },
          title: driver.d_name,
        });

        const content = `
      <div style="font-size:14px; line-height:1.4;">
        <strong>${maskName(driver.d_name)} (ID: ${driver.driver_id})</strong><br>
        📞 +${driver.c_code} ${maskPhone(driver.d_phone)}<br>
        🚗 ${driver.car?.car_reg_no || 'N/A'}
      </div>
    `;

        marker.addListener("click", () => {
          infoWindow.setContent(content);
          infoWindow.open(map, marker);
        });

        markers.push(marker);
      });

      // cluster with counts
      new markerClusterer.MarkerClusterer({
        map,
        markers
      });
    },
    loadGoogleMapsAPI() {
      return new Promise((resolve, reject) => {
        if (window.google && window.google.maps) {
          resolve();
          return;
        }

        const script = document.createElement('script');
        script.src = `https://maps.googleapis.com/maps/api/js?key=<%= GoogleMapsAPIKey %>&callback=initMap`;
        script.async = true;
        script.defer = true;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);

        window.initMap = resolve;
      });
    }


  };

  // Initialize dashboard when DOM is loaded
  document.addEventListener('DOMContentLoaded', () => Dashboard.init());
</script>
<style>
  /* Ensure tooltip parent is relative */
  h6.fwh, h6.hwh, h6.lwh, p.lwh {
    position: relative;
    display: inline-block;
    overflow: visible !important; /* ensure tooltip is not clipped */
  }

  /* Override parent cards that clip tooltips */
  .card, .radius-8, .p-3, .p-20, .p-24 {
    overflow: visible !important;
  }

  /* Tooltip styling */
  .tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0d6efd;
    color: #fff;
    text-align: center;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 99999;
    transition: opacity 0.25s ease-in-out;
  }

  /* Arrow */
  .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border-width: 4px;
    border-style: solid;
    border-color: #5642ef transparent transparent transparent;
  }

  /* Show on hover */
  h6:hover .tooltip,
  p:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }
</style>


<script>
  // Format numbers with shorthand (k, M, B) and 2 decimal places
  function formatShortNumber(num) {
    if (num >= 1e9) return (num / 1e9).toFixed(2) + 'B';
    if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M';
    if (num >= 1e3) return (num / 1e3).toFixed(2) + 'k';
    return num.toFixed(2); // always 2 decimal places
  }

  // Format full number with 2 decimal places
  function formatFullNumber(num) {
    return num.toFixed(2);
  }

function formatShortNumberWithoutZero(num) {
  if (isNaN(num) || num === null) return "0";
  if (num >= 1e9) return (num / 1e9).toFixed(2) + 'B';
  if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M';
  if (num >= 1e3) return (num / 1e3).toFixed(2) + 'k';
  return Math.round(num); // return whole number for counts
}

// Full number format but without unnecessary .00
// (e.g. 1234 → "1,234", 1234.5 → "1,234.5", 1234.56 → "1,234.56")
function formatFullNumberWithoutZero(num) {
  if (isNaN(num) || num === null) return "0";
  const n = Number(num);
  // Show decimals only if needed
  return n % 1 === 0
    ? n.toLocaleString('en-US', { maximumFractionDigits: 0 })
    : n.toLocaleString('en-US', { maximumFractionDigits: 2 });
}
</script>
<%- footer %>