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




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

       <%- include('../../partials/utils/title.ejs', {title: "Deleted Trip Manager"}) %>
       <% 
    const breadcrumbs = [
    { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
    { label: "Deleted Trip 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 Trips: <span id="totalRows"></span> </h5>
         </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 data-sort="trip_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>
                   <th>Trip Type</th>
                   <th data-sort="user_id" onclick="pagination.setSort('user_id')">Passenger <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="driver_id" onclick="pagination.setSort('driver_id')">Driver <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="trip_date" onclick="pagination.setSort('trip_date')">Trip Date <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 style="width: 300px">From Location</th>
                   <th style="width: 300px">To Location</th>
                   <th data-sort="trip_distance" onclick="pagination.setSort('trip_distance')">Distance (km) <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>Cancelled by</th>
                   <th data-sort="trip_pay_amount" onclick="pagination.setSort('trip_pay_amount')">Amount ($) <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>Status</th>
                 </tr>
               </thead>
               <tbody></tbody>
             </table>
           </div>
         </div>


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

       </div>

   </main>


   <script>
     // Configure the export component
     window.exportConfig = {
       csv: {
         headers: [
           "Trip ID", "Trip Type", "User Name", "Driver Name",
           "Trip Date", "From Location", "To Location",
           "Distance", "Amount", "Cancelled By", "Status"
         ],
         dataMapper: (trip) => [
           trip.trip_id,
           trip.trip_type,
           maskName(trip.user?.u_name || "N/A"),
           maskName(trip.driver?.d_name || "N/A"),
           new Date(trip.trip_date).toLocaleString(),
           trip.trip_from_loc || "N/A",
           trip.trip_to_loc || "N/A",
           trip.trip_distance,
           trip.trip_pay_amount,
           trip.cancelled_by,
           trip.trip_status_name
         ],
         filename: 'cancelled-trips.csv'
       },
       pdf: {
         headers: [
           "Trip ID", "Trip Type", "User Name", "Driver Name",
           "Trip Date", "From Location", "To Location",
           "Distance", "Amount", "Cancelled By", "Status"
         ],
         dataMapper: (trip) => [
           trip.trip_id,
           trip.trip_type,
           maskName(trip.user?.u_name || "N/A"),
           maskName(trip.driver?.d_name || "N/A"),
           new Date(trip.trip_date).toLocaleString(),
           trip.trip_from_loc || "N/A",
           trip.trip_to_loc || "N/A",
           trip.trip_distance,
           trip.trip_pay_amount,
           trip.cancelled_by,
           trip.trip_status_name
         ],
         title: 'Cancelled Trips Report',
         filename: 'cancelled-trips.pdf'
       },
       fetchAllUrl: '/admin/getDeletedTrips?limit=99999',
       currentData: []
     };

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

     // Initialize pagination
     const pagination = new Pagination({
       fetchUrl: '/admin/getDeletedTrips',
       defaultSort: {
         column: 'trip_id',
         order: 'DESC'
       },
       dataMapper: (trip) => `
      <tr>
        <td>${trip.trip_id}</td>
        <td>${trip.trip_type == "normal" && trip.is_ride_later == 1 ? "scheduled ride" : trip.trip_type}</td>
        <td>${trip.user ? maskName(trip.user.u_name) : "N/A"}</td>
        <td>${trip.driver ? maskName(trip.driver.d_name) : "N/A"}</td>
        <td>${trip.trip_date ? formatDate(trip.trip_date) : "N/A"}</td>
        <td class="textleft">${trip.trip_from_loc}</td>
        <td class="textleft">${trip.trip_to_loc}</td>
        <td>${trip.trip_distance || "N/A"}${trip.trip_dunit}</td>
        <td>${trip.cancelled_by || "N/A"}</td>
        <td>${trip.trip_currency}${trip.trip_pay_amount || "0"}</td>
        <td>${trip.trip_status == "completed" && trip.trip_pay_status == null ? "payment awaited" : trip.trip_status_name}</td>
      </tr>
    `
     });

     $(document).ready(function() {
       const filterOffcanvasEl = document.getElementById('filterOffcanvas');
       const filterOffcanvas = bootstrap.Offcanvas.getOrCreateInstance(filterOffcanvasEl);

       $(document).on('shown.bs.offcanvas hidden.bs.offcanvas', function() {
         const backdrops = $('.offcanvas-backdrop');
         if (backdrops.length > 1) {
           backdrops.slice(1).remove(); // Keep only one
         }
       });

       $("#applyFilters").click(function() {
         let filters = {};
         $("#searchForm").find("input, select").each(function() {
           const key = $(this).attr("name");
           const value = $(this).val().trim();
           if (value) filters[key] = value;
         });

         $(window.globalSearchInput).val('');
         pagination.searchTerm = '';

         pagination.loadData(1, filters);
         filterOffcanvas.hide();
       });

       $("#resetForm").click(function() {
         $("#searchForm")[0].reset();
         $(window.globalSearchInput).val('');
         pagination.searchTerm = '';

         pagination.loadData(1, {});
         filterOffcanvas.hide();
       });

       $('.offcanvas-backdrop').remove();

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


   <%- footer %>