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

<style>
  .badge {
    display: inline-block;
    padding: 0.3em 0.6em;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.5rem;
    text-transform: uppercase;
  }

  .badge-success {
    background-color: #16a34a;
    color: white;
  }

  .badge-warning {
    background-color: #facc15;
    color: #000;
  }
</style>
 
  <div class="container flex-1 pt-20 w-full my-4">

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

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

    <%- 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 Deleted 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>Vehicle Detail</th>
              <th>Profile Photo</th>
              <th>Vehicle Photo</th>
              <th>Documents</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>


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

    </div>


  </div>

</main>
<script>
  // Configure the export component
  window.exportConfig = {
    csv: {
      headers: [
        "Driver ID", "Name", "Email", "Phone",
        "Car Name", "Car Model", "Car Make Year", "Car Reg No",
        "Profile Status", "Car Image Status", "Document Status"
      ],
      dataMapper: (driver) => {
        let profileStatus = driver.image_id ? 'Done' : 'Pending';
        let carImageStatus = driver.car && driver.car.image_id ? 'Done' : 'Pending';
        let documentStatus = driver.driverAssets ? 'Done' : 'Pending';

        return [
          driver.driver_id || "N/A",
                 maskName(driver.d_fname || 'N/A', driver.d_lname || ''),
        maskEmail(driver.d_email || 'N/A'),
         maskPhone(driver.d_phone || 'N/A'),
      
          driver.car?.car_name || "N/A",
          driver.car?.car_model || "N/A",
          driver.car?.car_make || "N/A",
          driver.car?.car_reg_no || "N/A",
          profileStatus,
          carImageStatus,
          documentStatus
        ];
      },
      filename: 'drivers_info.csv'
    },
    pdf: {
      headers: [
        "Driver ID", "Name", "Email", "Phone",
        "Car Name", "Car Model", "Car Make Year", "Car Reg No",
        "Profile Status", "Car Image Status", "Document Status"
      ],
      dataMapper: (driver) => {
        let profileStatus = driver.image_id ? 'Done' : 'Pending';
        let carImageStatus = driver.car && driver.car.image_id ? 'Done' : 'Pending';
        let documentStatus = driver.driverAssets ? 'Done' : 'Pending';

        return [
          driver.driver_id || "N/A",
                   maskName(driver.d_fname || 'N/A', driver.d_lname || ''),
        maskEmail(driver.d_email || 'N/A'),
         maskPhone(driver.d_phone || 'N/A'),
          driver.car?.car_name || "N/A",
          driver.car?.car_model || "N/A",
          driver.car?.car_make || "N/A",
          driver.car?.car_reg_no || "N/A",
          profileStatus,
          carImageStatus,
          documentStatus
        ];
      },
      title: 'Drivers Info Report',
      filename: 'drivers_info.pdf'
    },
    fetchAllUrl: '/admin/getDriversInfo?limit=99999',
    currentData: []
  };

  // Set global search input for pagination
  window.globalSearchInput = '#globalSearch';

  // Initialize pagination
  const pagination = new Pagination({
    fetchUrl: '/admin/getDriversInfo',
    defaultSort: {
      column: 'driver_id',
      order: 'DESC'
    },
    dataMapper: (driver) => {
      const profileStatus = driver.image_id ? '✅ Done' : '⏳ Pending';
      const carImageStatus = driver.car?.image_id ? '✅ Done' : '⏳ Pending';
      const documentStatus = driver.driverAssets ? '✅ Done' : '⏳ Pending';
 const phoneNumber = driver.c_code ?
        `${driver.c_code} ${maskPhone(driver.d_phone || 'N/A')}` :
        maskPhone(driver.d_phone || 'N/A');

      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}">
                  <strong>${maskName(driver.d_fname || 'N/A', driver.d_lname || '')}</strong>
                </a><br>
                <strong>${maskEmail(driver.d_email || 'N/A')}</strong><br>
                <span>${phoneNumber}</span>
              </div>
        </td>

        <td>
          ${driver.car
            ? `<div style="line-height: 1.4">
                <strong>Name:${driver.car.car_name}</strong><br/>
                <small>Model:</small> ${driver.car.car_model}<br/>
                <small>Year:</small> ${driver.car.car_make || "N/A"}<br/>
                <small>Reg No:</small> ${driver.car.car_reg_no}
              </div>`
            : 'N/A'}
        </td>

        <td><span class="badge ${driver.image_id ? 'badge-success' : 'badge-warning'}">${profileStatus}</span></td>
        <td><span class="badge ${driver.car?.image_id ? 'badge-success' : 'badge-warning'}">${carImageStatus}</span></td>
        <td><span class="badge ${driver.driverAssets ? 'badge-success' : 'badge-warning'}">${documentStatus}</span></td>
      </tr>
    `;
    }
  });

  $(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 %>