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

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

     <div class="container flex-1 pt-20 w-full ">
       <%- include('../../partials/utils/title.ejs', {title: "Inactive Corporates"}) %>

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

       <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>
       <div style="display: flex; justify-content: space-between; align-items: center;">
         <!-- Offcanvas for Search Filter Panel -->
         <div style="display: flex; justify-content: space-between; align-items: center; gap: 10px;">
           <button id="deleteSelected" class="btn shadow btn-danger" style="padding-block: 6px;">
             <i class="fas fa-trash"></i>
           </button>

         </div>
       </div>

       <div class="card basic-data-table" style="margin-top: 20px;">
         <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
           <h5 class="card-title">Total Inactive Corporates: <span id="totalRows"></span> </h5>

           <!-- Include Heroicons or your icon set -->
           <!-- Example: Add Icon (Plus Icon from Heroicons) -->
           <button onclick="window.location.href='/admin/add-corporate'" class="bg-green-600 hover:bg-green-700 text-white font-semibold py-[10px] px-[12px] rounded-lg flex items-center justify-center" title="Add Corporate">
             <!-- Reusable Icon Component -->
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
               <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
             </svg>
           </button>

         </div>



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

         <!-- Responsive Table -->
         <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 class="px-4 py-2 text-left text-sm font-medium text-gray-600">Contact Detail</th>
                   <th class="px-4 py-2 text-left text-sm font-medium text-gray-600">Other Detail</th>
                   <th class="px-4 py-2 text-left text-sm font-medium text-gray-600">Status</th>
                   <th class="">Options</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: ["ID", "Name", "Address", "Radius", "Created"],
         dataMapper: (t) => [
           t.id,
           t.name,
           t.location,
           t.radius,
           new Date(t.created).toLocaleString(),
         ],
         filename: 'pages.csv'
       },
       pdf: {
         headers: ["ID", "Name", "Address", "Radius", "Created"],
         dataMapper: (t) => [
           t.id,
           t.name,
           t.location,
           t.radius,
           new Date(t.created).toLocaleString(),
         ],
         title: 'Audience Report',
         filename: 'pages.pdf'
       },
       fetchAllUrl: '/admin/getPageData?limit=99999',
       currentData: []
     };

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


     // Initialize pagination
     const pagination = new Pagination({
       fetchUrl: '/admin/inactiveCorporatesData',
       defaultSort: {
         column: 'user_id',
         order: 'DESC'
       },
       dataMapper: (location) => {
         let tripPerm = {};
         try {
           tripPerm = location.trip_perm ? (typeof location.trip_perm === 'string' ? JSON.parse(location.trip_perm) : location.trip_perm) : {};
         } catch(e) {
           tripPerm = {};
         }
         
         const createTripBadge = tripPerm.create_trip == "1" 
           ? '<span class="badge bg-success">Create Trip: Yes</span>' 
           : '<span class="badge bg-secondary">Create Trip: No</span>';
         
         return `
      <tr class="bg-white border-b hover:bg-gray-100">
        <td><input type="checkbox" class="select-user form-check-input" value="${location?.user_id}"></td>
        <td class="px-4 py-3 text-sm text-gray-700">${location.user_id}</td>
        <td class="px-4 py-3">
          <div class="d-flex align-items-center">
            <img 
              src="<%= CATEGORY_BASE_URL %>${location.profile_image || '/placeholder.jpg'}" 
              alt="Profile" 
              class="me-2 rounded" 
              width="50" 
              height="50"
              style="object-fit: cover;"
              onerror="this.onerror=null; this.src='/placeholder.jpg';"
            >
            <div>
              <strong>${location.u_name}</strong><br>
              <small><i class="fas fa-envelope"></i> ${location.u_email}</small><br>
              <small><i class="fas fa-phone"></i> ${location.c_code || ''} ${location.u_phone || ''}</small>
            </div>
          </div>
        </td>
        <td class="px-4 py-3">
          <div>
            <small><i class="fas fa-user-check text-success"></i> Active User: <strong>${location.active_users || 0}</strong></small><br>
            <small><i class="fas fa-user-times text-danger"></i> Inactive User: <strong>${location.inactive_users || 0}</strong></small><br>
            <small><i class="fas fa-car text-info"></i> Total Rides: <strong>${location.total_trips || 0}</strong></small><br>
            <small><i class="fas fa-wallet text-primary"></i> Wallet: <strong><%= city_cur || 'INR' %> ${(location.u_wallet || 0).toFixed(2)}</strong></small>
          </div>
        </td>
   
        <td class="px-4 py-3">
          <span class="badge bg-danger">inactive</span>
        </td>
        <td class="px-4 py-3">
          <a href="/admin/corporate/details/${location.user_id}" class="w-32-px h-32-px bg-info-focus text-info-main rounded-circle d-inline-flex align-items-center justify-content-center" data-tooltip="View Details" style="margin-right: 5px;">
            <iconify-icon icon="mdi:eye"></iconify-icon>
          </a>
          <button 
            class="toggle-status w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center" 
            data-id="${location.user_id}" 
            data-active="0"
            data-tooltip="Make Active"
            style="border: none; cursor: pointer; margin-right: 5px; min-height:20px !important; margin-top: -8px;">
            <iconify-icon icon="mdi:account-check" style="font-size: 1.2rem;"></iconify-icon>
          </button>
          <a href="/admin/corporates/edit/${location.user_id}" class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center" data-tooltip="Edit">
            <iconify-icon icon="lucide:edit"></iconify-icon>
          </a>
        </td>
      </tr>
    `;
       }
     });

     $(document).ready(function() {
       // Event delegation for toggle status buttons
       $(document).on('click', '.toggle-status', function() {
         const button = $(this);
         const id = button.data('id');
         const currentStatus = parseInt(button.data('active'), 10);
         const newStatus = currentStatus === 1 ? 0 : 1;

         // Show loading state
         button.prop('disabled', true);

         // Send AJAX request to update status
         $.ajax({
           url: `/admin/update-corporate-status/${id}`,
           method: 'POST',
           contentType: 'application/json',
           data: JSON.stringify({
             active: newStatus
           }),
           success: function(response) {
             if (response.success) {
               // Show success message
               Swal.fire({
                 icon: 'success',
                 title: 'Success!',
                 text: response.message || 'Status updated successfully',
                 toast: true,
                 position: 'top-end',
                 showConfirmButton: false,
                 timer: 3000,
                 timerProgressBar: true
               });
               // Reload the page to show updated data
               pagination.loadData(pagination.currentPage);
             } else {
               Swal.fire('Error!', response.message || 'Failed to update status', 'error');
             }
           },
           error: function(xhr) {
             const errorMessage = xhr.responseJSON?.message || 'Something went wrong';
             Swal.fire('Error!', errorMessage, 'error');
           },
           complete: function() {
             button.prop('disabled', false);
           }
         });
       });

       // Select/Deselect all checkboxes
       $("#selectAll").on("click", function() {
         $(".select-user").prop("checked", this.checked);
       });

       // Delete selected users with SweetAlert2
       $("#deleteSelected").on("click", function() {
         const selectedUsers = $(".select-user:checked").map(function() {
           return $(this).val();
         }).get();

         if (selectedUsers.length === 0) {
           Swal.fire({
             icon: 'warning',
             title: 'No id selected',
             text: 'Please select at least one id to delete.',
             toast: true,
             position: 'top-end',
             showConfirmButton: false,
             timer: 3000
           });
           return;
         }

         Swal.fire({
           title: 'Are you sure?',
           text: "Selected id will be permanently deleted.",
           icon: 'warning',
           showCancelButton: true,
           confirmButtonColor: '#d33',
           cancelButtonColor: '#3085d6',
           confirmButtonText: 'Yes, delete'
         }).then((result) => {
           if (result.isConfirmed) {
             $.ajax({
               url: "/admin/delete-corporates",
               type: "POST",
               contentType: "application/json",
               data: JSON.stringify({
                 ids: selectedUsers
               }),
               success: function(response) {
                 Swal.fire({
                   icon: 'success',
                   title: response.message || 'Deleted successfully!',
                   toast: true,
                   position: 'top-end',
                   showConfirmButton: false,
                   timer: 3000
                 });
                 pagination.loadData(1);
               },
               error: function() {
                 Swal.fire({
                   icon: 'error',
                   title: 'Error deleting redzone.',
                   toast: true,
                   position: 'top-end',
                   showConfirmButton: false,
                   timer: 3000
                 });
               }
             });
           }
         });
       });

       pagination.loadData(1);
     });
   </script>

   <%- footer %>