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

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

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

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

     <%
       // Super admin (group_id 1) has all permissions
       const isSuperAdmin = user?.group_id === 1;
       const canEdit = isSuperAdmin || hasPermission('Passenger.UserDelete', 'can_edit');
       const canDelete = isSuperAdmin || hasPermission('Passenger.UserDelete', 'can_delete');
       const canCreate = isSuperAdmin || hasPermission('Passenger.UserCreate', 'can_create');
     %>


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

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

       <% 
    const breadcrumbs = [
      { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
       { label: " Delete Passengers 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;">
           <% if (canEdit) { %>
           <div style="display: flex; justify-content: end;">
             <button data-tooltip="Restore selected users" id="restoreSelected" class="p-2 bg-green-600 shadow-sm w-10 text-center text-white rounded-full hover:bg-green-700" title="Restore">
               <i class="fas fa-undo"></i>
             </button>
           </div>
           <% } %>

           <div style="display: flex; justify-content: end;">
             <%- include('../../partials/utils/searchFilter-withApi.ejs') %>
           </div>
         </div>
       </div>

       <!-- Global Search -->
       <!-- <div style="display: flex; justify-content: end;">
      <button id="restoreSelected" class="px-6 py-4 bg-green-600 shadow text-white rounded hover:bg-green-700">
        Restore
      </button>
    </div> -->

       <div class="card basic-data-table" style="margin-top: 20px;">
         <div class="card-header">
           <h5 class="card-title mb-0">Total Deleted Passengers: <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>
                 <tr>
                   <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="user_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>Passenger Details</th>
                   <th data-sort="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>
                   <th data-sort="u_wallet">
                     Wallet
                     <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 (canEdit || canDelete) { %>
                   <th>Actions</th>
                   <% } %>
                 </tr>
               </thead>
               <tbody></tbody>
             </table>
           </div>
         </div>


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

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





   <!-- Restore Confirmation Modal -->
   <div id="restoreConfirmModal" class="fixed inset-0 flex items-center justify-center z-50 hidden bg-black bg-opacity-50">
     <div class="bg-white rounded-lg p-6 max-w-sm w-full shadow-xl">
       <h2 class="text-lg font-semibold mb-4 text-gray-800">Restore Confirmation</h2>
       <p class="text-gray-600 mb-6">Are you sure you want to restore the selected passenger(s)?</p>
       <div class="flex justify-end space-x-3">
         <button id="cancelRestore" class="px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400">Cancel</button>
         <button id="confirmRestore" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Restore</button>
       </div>
     </div>
   </div>

<script>
  let city_cur = "<%= city_cur %>";
  const canEdit = <%= canEdit %>;
  const canDelete = <%= canDelete %>;
     // Set global search input for pagination
     window.globalSearchInput = '#globalSearch';
  // --- Export config ---
  window.exportConfig = {
    csv: {
      headers: ["User ID", "Name", "Email", "Country Code", "Phone", "Rating", "Wallet"],
      dataMapper: (u) => [
        u.user_id,
        maskName(u.u_fname || 'N/A', u.u_lname || ''),
        maskEmail(u.u_email || 'N/A'),
        u.c_code || "N/A",
        maskPhone(u.u_phone || 'N/A'),
        Math.round(u.rating || 0),
        `${(u.u_wallet || 0).toFixed(2)}`
      ],
      filename: 'active_users.csv'
    },
    pdf: {
      headers: ["User ID", "Name", "Email", "Country Code", "Phone", "Rating", "Wallet"],
      dataMapper: (u) => [
        u.user_id,
        maskName(u.u_fname || 'N/A', u.u_lname || ''),
        maskEmail(u.u_email || 'N/A'),
        u.c_code || "N/A",
        maskPhone(u.u_phone || 'N/A'),
        Math.round(u.rating || 0),
        `${(u.u_wallet || 0).toFixed(2)}`
      ],
      title: 'Active User Report',
      filename: 'active_users.pdf'
    },
    fetchAllUrl: '/admin/get-deleteusers?limit=99999',
    currentData: []
  };

  // --- Pagination table rows (uses same mask functions) ---
  const pagination = new Pagination({
    fetchUrl: '/admin/get-deleteusers',
    defaultSort: { column: 'user_id', order: 'DESC' },
    dataMapper: (user) => {
      let rating = Math.round(user.rating || 0);
      const fullStars = Math.floor(rating);
      const hasHalfStar = rating % 1 >= 0.5;
      let ratingStars = '';

      for (let i = 1; i <= 5; i++) {
        if (i <= fullStars) {
          ratingStars += '<i class="fa fa-star text-warning"></i>';
        } else if (i === fullStars + 1 && hasHalfStar) {
          ratingStars += '<i class="fa fa-star-half-alt text-warning"></i>';
        } else {
          ratingStars += '<i class="fa fa-star text-muted"></i>';
        }
      }

      // Determine admin type label
      let adminTypeLabel = '';
      if (user.companyAdmin && user.companyAdmin.group_id) {
        if (user.companyAdmin.group_id === 6) {
          adminTypeLabel = '<span class="badge bg-info text-white">Corporate</span>';
        } else if (user.companyAdmin.group_id === 5) {
          adminTypeLabel = '<span class="badge bg-primary text-white">Company</span>';
        } else {
          adminTypeLabel = '<span class="badge bg-secondary text-white">Normal</span>';
        }
      } else {
        adminTypeLabel = '<span class="badge bg-secondary text-white">Normal</span>';
      }

      return `
        <tr>
          <td>
            <div class="form-check style-check d-flex align-items-center">
              <input class="select-driver form-check-input" type="checkbox" value="${user?.user_id}">
            </div>
          </td>
          <td>${user.user_id}</td>
          <td>
            <div class="d-flex align-items-center">
              <img 
                src="<%= IMAGE_FOLDER_PATH %>${user.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/user-detailed-report/${user.user_id}">
                  <strong>${maskName(user?.u_fname || "N/A", user?.u_lname || "")}</strong>
                </a><br />
                <strong>${maskEmail(user?.u_email || "N/A")}</strong><br />
                <span>${user.c_code ? (user.c_code + " " + maskPhone(user?.u_phone || 'N/A')) : maskPhone(user?.u_phone || 'N/A')}</span>
              </div>
            </div>
          </td>
          <td>${ratingStars}</td>
          <td style="color:${ (user?.u_wallet || 0).toFixed(2) < 0 ? 'red' : 'green' }">${city_cur}${(user?.u_wallet || 0).toFixed(2)}</td>
          ${canEdit || canDelete ? `<td>
            <button class="change-status">
              <iconify-icon

              data-tooltip="${user.active == 1 ? 'Click to deactivate user' : 'Click to activate user'}"
                data-id="${user.user_id}"
                data-fname="${user.u_fname || ''}"
                data-lname="${user.u_lname || ''}"
                data-email="${user.u_email || ''}"
                data-phone="${user.u_phone || ''}"
                data-code="${user.c_code || ''}"
                data-key="${user.api_key || ''}"
                data-gender="${user.u_gender || ''}"
                data-active="${user.active}"
                data-img="${user.image?.img_path || ''}"
                icon="${user.active == 1 ? 'mdi:account-check' : 'mdi:account-remove'}"
                style="font-size: 1.5rem;"
                class="${user.active == 1 ? 'text-success change-status' : 'text-danger change-status'}">
              </iconify-icon>
            </button>
      
          </td>` : ''}
        </tr>
      `;
    }
  });

  $(document).ready(function() {
    pagination.loadData(1);
  });
</script>

   <script src="/js/update-user-status.js"></script>

   <%- footer %>