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

     <!-- pre-rendered navbar inserted -->
<style>
  .pay-label {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 6px;
    color: #fff;
    width: 50px !important;
  }

  .pay-label.card {
    background-color: #3b82f6;
  }

  .pay-label.wallet {
    background-color: #10b981;
  }

  .pay-label.cash {
    background-color: #f59e0b;
  }

  .badge {
    background-color: #6366f1;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
  }
</style>

<script src="/js/pagination.js"></script>
 

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

    <%- include('../../partials/utils/title.ejs', {title: "Drivers Ride Requests"}) %>

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

    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>
    <div style="display: flex; justify-content: space-between; align-items: center;">

      <%- include('../../partials/utils/export-buttons.ejs') %>
      <!-- Offcanvas for Search Filter Panel -->
      <%- include('../../partials/utils/searchFilter-withApi.ejs') %>
    </div>


    <div class="card basic-data-table" style="margin-top: 20px;">
      <div class="card-header">
        <h5 class="card-title mb-0">Total Drivers: <span id="totalRows"></span> </h5>
      </div>

      <%- include('../../partials/globalSearch.ejs') %>


      <div style="padding-inline: 20px; overflow-x: auto;">
        <div class="table-responsive bordered-table">
          <table id="tripsTable" class="table table-striped table-bordered">
            <thead>

              <th data-sort="driver_id">ID <span class="sort-icons">
                  <i class="fa fa-sort sort-neutral"></i>
                  <i class="fa fa-sort-up sort-asc"></i>
                  <i class="fa fa-sort-down sort-desc"></i>
                </span></th>
              <th>Driver Detail</th>
              <th>Trips</th>
              <th>Payments</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>


      <div class="pagination">
        <div id="pagination"></div>
      </div>

    </div>


  </div>

</main>



<script>
let city_cur = "<%= city_cur %>";

// --- Export config with masking ---
window.exportConfig = {
  csv: {
    headers: ["Driver ID", "Driver Name", "Email", "Phone", "Trip Count", "Card", "Wallet", "Cash", "Total Paid"],
    dataMapper: (driver) => [
      driver.driver_id,
      maskName(driver.d_fname || "N/A", driver.d_lname || ""),
      maskEmail(driver.d_email || "N/A"),
      maskPhone(driver.d_phone || "N/A"),
      driver.trip_count || 0,
      driver.card_amount > 0 ? `${driver.card_amount.toFixed(2)}` : "0.00",
      driver.wallet_amount > 0 ? `${driver.wallet_amount.toFixed(2)}` : "0.00",
      driver.cash_amount > 0 ? `${driver.cash_amount.toFixed(2)}` : "0.00",
      `${(driver.total_paid || 0).toFixed(2)}`
    ],
    filename: 'driver_rides.csv'
  },
  pdf: {
    headers: ["Driver ID", "Driver Name", "Email", "Phone", "Trip Count", "Card", "Wallet", "Cash", "Total Paid"],
    dataMapper: (driver) => [
      driver.driver_id,
      maskName(driver.d_fname || "N/A", driver.d_lname || ""),
      maskEmail(driver.d_email || "N/A"),
      maskPhone(driver.d_phone || "N/A"),
      driver.trip_count || 0,
      driver.card_amount > 0 ? `${city_cur}${driver.card_amount.toFixed(2)}` : `${city_cur}0.00`,
      driver.wallet_amount > 0 ? `${city_cur}${driver.wallet_amount.toFixed(2)}` : `${city_cur}0.00`,
      driver.cash_amount > 0 ? `${city_cur}${driver.cash_amount.toFixed(2)}` : `${city_cur}0.00`,
      `${city_cur}${(driver.total_paid || 0).toFixed(2)}`
    ],
    title: 'Driver Rides Report',
    filename: 'driver_rides.pdf'
  },
  fetchAllUrl: '/admin/ridesDriver?limit=99999',
  currentData: []
};

window.globalSearchInput = '#globalSearch';

// --- Pagination table rows with masking ---
const pagination = new Pagination({
  fetchUrl: '/admin/ridesDriver',
  defaultSort: { column: 'driver_id', order: 'DESC' },
  dataMapper: (driver) => {
    const maskedName = maskName(driver.d_fname || "N/A", driver.d_lname || "");
    const maskedEmail = maskEmail(driver.d_email || "N/A");
    const maskedPhone = maskPhone(driver.d_phone || "N/A");

    let payments = "";
    if (driver?.card_amount > 0) payments += `<div><span class="pay-label card">Card</span> ${city_cur}${driver.card_amount.toFixed(2)}</div>`;
    if (driver?.wallet_amount > 0) payments += `<div><span class="pay-label wallet">Wallet</span> ${city_cur}${driver.wallet_amount.toFixed(2)}</div>`;
    if (driver?.cash_amount > 0) payments += `<div><span class="pay-label cash">Cash</span> ${city_cur}${driver.cash_amount.toFixed(2)}</div>`;

    return `
      <tr>
        <td><strong>${driver.driver_id}</strong></td>

        <td>
          <div style="line-height: 1.4">
            <a href="/admin/driver-detailed-report/${driver.driver_id}" style="font-weight: 600; color: #1d4ed8;">
              ${maskedName}
            </a><br />
            <small><i class="fas fa-envelope"></i> ${maskedEmail}</small><br />
            <small><i class="fas fa-phone"></i> ${maskedPhone}</small>
          </div>
        </td>

        <td><span class="badge badge-info">${driver.trip_count || 0} Trips</span></td>

        <td>
          <div style="line-height: 1.5">
            ${payments || '<span style="color: #999;">No payments</span>'}
            <hr style="margin: 4px 0;" />
            <strong>Total:</strong> ${city_cur}${(driver.total_paid || 0).toFixed(2)}
          </div>
        </td>
      </tr>
    `;
  }
});

// --- Toast notifications ---
function showToast(message, type = 'error') {
  Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
  }).fire({ icon: type, title: message });
}

$(document).ready(function() {
  const defaultLimit = $("#pageLength").val();
  pagination.loadData(1, defaultLimit);

  $("#pageLength").change(function() {
    const newLimit = $(this).val();
    pagination.loadData(1, newLimit);
  });
});
</script>

<%- footer %>