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

     <script src="/js/pagination.js"></script>
<% 
  const isMasking = typeof enableMasking !== "undefined" ? enableMasking : true;

function maskName(fname, lname) {
  // If both are empty or null
  if ((!fname || fname.trim() === '') && (!lname || lname.trim() === '')) {
    return 'N/A';
  }

  // Only first name exists (may contain multiple words)
  if (fname && (!lname || lname.trim() === '')) {
    if (enableMasking) {
      return fname
        .split(' ')
        .map(part => (part.length > 3 ? part.substring(0, 3) + '***' : part + '***'))
        .join(' ');
    } else {
      return fname;
    }
  }

  // Only last name exists
  if ((!fname || fname.trim() === '') && lname) {
    return enableMasking ? lname.charAt(0) + '***' : lname;
  }

  // Both exist
  return enableMasking
    ? fname.substring(0, 3) + '*** ' + lname.charAt(0) + '***'
    : fname + ' ' + lname;
}

  function maskEmail(email) {
    if (!email) return "N/A";
    if (!isMasking) return email;

    const parts = email.split("@");
    if (parts.length < 2) return email;

    const user = parts[0].slice(0, 2) + "***";
    const domain = "******." + parts[1].split(".").pop();
    return user + "@" + domain;
  }

  function maskPhone(phone) {
    if (!phone) return "N/A";
    if (!isMasking) return phone;

    const visible = phone.slice(0, 2);
    const masked = "*".repeat(phone.length - 2);
    return visible + masked;
  }
%>
 


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

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

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

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


       <div class=" mt-4">

         <div class="p-4 bg-white shadow-md rounded-lg">
           <h4 class="text-lg font-semibold p-10">General Info</h4>
           <hr class="my-2 " />

           <div class="row mt-3">
             <!-- Transaction Type -->
             <div class="col-md-12 mb-4">

               <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pl-4 text-gray-700">
                 <div><strong>Driver ID:</strong><%= driver?.driver_id %></div>
                 <div><strong>Driver Name:</strong><%= maskName(driver?.d_fname, driver.d_lname) %></div>
                 <div><strong>Driver Phone:</strong><%= maskPhone(driver?.d_phone) %></div>
               </div>
             </div>
           </div>
         </div>

       </div>
                             

       <div class="  mt-4">


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


           <div style="padding-inline: 20px; padding-top: 10px; overflow-x: auto;">
             <div class="table-responsive bordered-table">
               <table id="tripsTable" class="table table-striped table-bordered">
                 <thead>
                   <tr>
                     <th class="px-4 py-2 border">ID</th>
                     <th class="px-4 py-2 border">Date</th>
                     <th class="px-4 py-2 border">Type</th>
                     <th class="px-4 py-2 border">Wallet Amount</th>
                     <th class="px-4 py-2 border">Current Bal.</th>
                   </tr>
                 </thead>
                 <tbody>

                 </tbody>

               </table>


             </div>
           </div>
         </div>

       </div>
     </div>
     </div>



     <script>
       // Configure the export component
       window.exportConfig = {
         csv: {
           headers: ["Driver ID", "Name", "Email", "Phone", "Wallet Balance", "Last Transaction"],
           dataMapper: (tx) => [
             tx.transaction_id,
             `${new Date(tx.trans_date).toLocaleString()}`,
             tx.trans_type || "N/A",
             `${tx?.d_curr}${tx.total_amt.toFixed(2)}`,
             `${tx?.d_curr}${tx.d_cur_bal ? tx.d_cur_bal.toFixed(2) : '-'}`
           ],
           filename: 'driver_wallet_statements.csv'
         },
         pdf: {
           headers: ["Driver ID", "Name", "Email", "Phone", "Wallet Balance", "Last Transaction"],
           dataMapper: (tx) => [
             tx.transaction_id,
             `${new Date(tx.trans_date).toLocaleString()}`,
             tx.trans_type || "N/A",
             driver.d_phone || "N/A",
             `${tx?.d_curr}${tx.total_amt.toFixed(2)}`,
             `${tx?.d_curr}${tx.d_cur_bal ? tx.d_cur_bal.toFixed(2) : '-'}`
           ],
           title: 'Driver Wallet Statements Report',
           filename: 'driver_wallet_statements.pdf'
         },
         fetchAllUrl: '/admin/walletDriversSummary?limit=99999',
         currentData: []
       };

       // Set global search input for pagination
       window.globalSearchInput = '#globalSearch';
       let driver_id = "<%= driver?.driver_id %>"

       // Initialize pagination
       const pagination = new Pagination({

         fetchUrl: `/admin/walletDriversSummary?driver_id=${driver_id}`,
         defaultSort: {
           column: 'transaction_id',
           order: 'DESC'
         },
         dataMapper: (tx) => {

           console.log("test", tx);

           return `
      <tr>
      <td class="px-4 py-2 border">${tx.transaction_id}</td>
<td class="px-4 py-2 border">
  ${formatDate(tx.trans_date)}
</td>
      <td class="px-4 py-2 border">${tx.trans_type}</td>
      <td class="px-4 py-2 border font-semibold ${
        tx.total_amt < 0 ? 'text-red-600' : 'text-green-600'
      }">${tx.total_amt.toFixed(2)}</td>
      <td class="px-4 py-2 border">${tx.d_cur_bal ? tx.d_cur_bal.toFixed(2) : '-'}</td>
      </tr>
      `;
         }
       });

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

         Toast.fire({
           icon: type,
           title: message
         });
       }

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

         // Handle page length change
         $("#pageLength").change(function() {
           const newLimit = $(this).val();
           pagination.loadData(1, newLimit);
         });

       });
     </script>


     <%- footer %>