   <%- 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: "Inactive Drivers Manager"}) %>

       <% 
    const breadcrumbs = [
      { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
       { label: "Inactive Drivers 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 -->
         <div style="display: flex; justify-content: space-between; align-items: center; gap: 10px;">
           <button data-tooltip="Delete selected drivers" id="deleteSelected" class="btn shadow btn-danger" style="padding-block: 6px;">
             <i class="fas fa-trash"></i>
           </button>
           <div style="display: flex; justify-content: end;">
             <%- include('../../partials/utils/searchFilter-withApi.ejs') %>
           </div>
         </div>
       </div>

       <div class="card basic-data-table" style="margin-top: 20px;">
         <div class="card-header">
           <h5 class="card-title mb-0">Total Inactive 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 scope="col">
                   <div class="form-check style-check d-flex align-items-center">
                     <input id="selectAll" class="form-check-input" type="checkbox">
                   </div>
                 </th>
                 <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 Details</th>
                 <th data-sort="d_rating">Rating (Avg) <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>
                 <% if (user && user.group_id !== 5) { %>
                 <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>
                 <% } %>
                 <th>Verified</th>
                 <th>Actions</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 %>"
     const userGroupId = <%= user && user.group_id ? user.group_id : 0 %>;


     // Configure the export component
     window.exportConfig = {
       csv: {
         headers: ["Driver ID", "First Name", "Last Name", "Email", "Country Code", "Phone", "Rating", "Wallet"],
         dataMapper: (driver) => [
           driver.driver_id,
           maskName(driver.d_fname || 'N/A'),
           maskName(driver.d_lname || ''),
           maskEmail(driver.d_email || 'N/A'),
           driver.c_code || "N/A",
           maskPhone(driver.d_phone || 'N/A'),
           Math.round(driver.d_rating || 0),
           `${(driver.d_wallet || 0).toFixed(2)}`
         ],
         filename: 'inactive_drivers.csv'
       },
       pdf: {
         headers: ["Driver ID", "First Name", "Last Name", "Email", "Country Code", "Phone", "Rating", "Wallet"],
         dataMapper: (driver) => [
           driver.driver_id,
           maskName(driver.d_fname || 'N/A'),
           maskName(driver.d_lname || ''),
           maskEmail(driver.d_email || 'N/A'),
           driver.c_code || "N/A",
           maskPhone(driver.d_phone || 'N/A'),
           Math.round(driver.d_rating || 0),
           `${(driver.d_wallet || 0).toFixed(2)}`
         ],
         title: 'Inactive Drivers Report',
         filename: 'inactive_drivers.pdf'
       },
       fetchAllUrl: '/admin/inactiveDrivers?limit=99999',
       currentData: []
     };

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

     // Initialize pagination
     const pagination = new Pagination({
       fetchUrl: '/admin/inactiveDrivers',
       defaultSort: {
         column: 'driver_id',
         order: 'DESC'
       },
       dataMapper: (driver) => {
         const rating = Math.round(driver.d_rating || 0);
         let ratingStars = '';

         for (let i = 1; i <= 5; i++) {
           ratingStars += i <= rating ?
             '<i class="fa fa-star text-warning"></i>' :
             '<i class="fa fa-star text-muted"></i>';
         }

         const phoneNumber = driver.c_code ?
           `${driver.c_code} ${maskPhone(driver.d_phone || 'N/A')}` :
           maskPhone(driver.d_phone || 'N/A');

         const walletAmount = driver.d_wallet ?
           parseFloat(driver.d_wallet).toFixed(2) :
           "0.00";

         return `
           <tr>
          
             <td>
                        <div class="form-check style-check d-flex align-items-center">
                            <input class="select-driver form-check-input" type="checkbox" value="${driver.driver_id}">
                        </div>
                    </td>
          <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>${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>
            </div>
          </td>
          <td>${ratingStars}</td>
            ${userGroupId !== 5 ? `<td style="color:${ walletAmount < 0 ? 'red' : 'green' }">${city_cur}${walletAmount}</td>` : ''}
           <td>
            <button class="btn btn-sm ${driver.d_is_verified ? '' : 'text-[#FF9F29]'} change-astatus" 
                    style="
      ${
        driver.d_is_verified ? 'background: var(--success-focus) !important; color:#45B369; border-radius:20px' : 'background: #ffb150; color:white; border-radius:20px'
      }
      "

                    data-id="${driver.driver_id}" 
                    data-value="${driver.d_is_verified}"
                    data-type="verify">
              ${driver.d_is_verified ? 'Verified' : 'Unverified'}
  
          </td>
  <td>
  <button data-tooltip="Click to activate driver"  class="btn btn-sm change-status" 
          data-value="${driver.d_active}"
          data-id="${driver.driver_id}"
          style="background: transparent; border: none; padding: 0.25rem;">
    <iconify-icon icon="${driver.d_active ? 'mdi:account-check' : 'mdi:account-remove'}" 
                  style="font-size: 1.5rem;"
                  class="${driver.d_active ? 'text-success' : 'text-danger'}">
    </iconify-icon>
  </button>
  
  <button data-tooltip="Edit driver"  class="edit-driver" 
          data-id="${driver.driver_id}"
          style="background: transparent; border: none; padding: 0.25rem; margin-left: 0.5rem;">
    <a href="javascript:void(0)" class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center">
      <iconify-icon icon="lucide:edit"></iconify-icon>
    </a>
  </button>
</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);
       });

       // Edit driver handler
       $(document).on("click", ".edit-driver", function() {
         const driverId = $(this).data("id");
         window.location.href = `/admin/edit-driver/${driverId}`;
       });
     });
   </script>
   <script src="/js/driverScript/update-driver
-status.js"></script>

   <%- footer %>