   <%- header %>
   <!-- pre-rendered navbar inserted -->
   <main class="dashboard-main">
     <%- navbar %>
     <!-- pre-rendered navbar inserted -->

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

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

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

    <%- include('../../partials/utils/title.ejs', {title: "Driver Wallet Statement"}) %>

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

    <%- 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>Wallet Detail</th>

              <th data-sort="d_wallet">Wallet Balance <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>





              </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", "Name", "Email", "Phone", "Wallet Balance", "Last Transaction"],
    dataMapper: (driver) => [
      driver.driver_id,
      maskName(driver.d_fname || "N/A", driver.d_lname || "")[0],
      maskEmail(driver.d_email || "N/A"),
      maskPhone(driver.d_phone || "N/A"),
      `${(driver.d_wallet || 0).toFixed(2)}`,
      driver.last_transaction_date || "N/A"
    ],
    filename: 'driver_wallet_statements.csv'
  },
  pdf: {
    headers: ["Driver ID", "Name", "Email", "Phone", "Wallet Balance", "Last Transaction"],
    dataMapper: (driver) => [
      driver.driver_id,
      maskName(driver.d_fname || "N/A", driver.d_lname || "")[0],
      maskEmail(driver.d_email || "N/A"),
      maskPhone(driver.d_phone || "N/A"),
      `${(driver.d_wallet || 0).toFixed(2)}`,
      driver.last_transaction_date || "N/A"
    ],
    title: 'Driver Wallet Statements Report',
    filename: 'driver_wallet_statements.pdf'
  },
  fetchAllUrl: '/admin/walletDrivers?limit=99999',
  currentData: []
};

window.globalSearchInput = '#globalSearch';

// --- Pagination table rows with masking ---
const pagination = new Pagination({
  fetchUrl: '/admin/walletDrivers',
  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");

    return `
      <tr>
        <td>${driver.driver_id}</td>
        <td>
          <div class="d-flex align-items-center">
            <img 
              src="<%= IMAGE_FOLDER_PATH %>${driver.image?.img_path || '/placeholder.jpg'}" 
              alt="Profile Image" 
              class="pi-css rounded-circle me-2" 
              width="40" 
              height="40"
              onerror="this.onerror=null; this.src='/placeholder.jpg';"
            >
            <div>
              <a href="/admin/driver-detailed-report/${driver.driver_id}">
                <strong>${maskedName}</strong>
              </a><br />
              <strong>${maskedEmail}</strong><br />
              <span>${maskedPhone}</span>
            </div>
          </div>
        </td>
        <td data-tooltip="View wallet details" style="text-align:left; padding-left:25px; font-size:26px">
          <a href="/admin/driver-wallet-details/${driver.driver_id}" >
            <i class="fas fa-file-invoice"></i>
          </a>
        </td>
        <td class="${driver.d_wallet < 0 ? 'text-danger' : 'text-success'}">
          ${city_cur} ${(driver.d_wallet || 0).toFixed(2)}
        </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 %>