   <%- 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: "Cancelled Trip Manager"}) %>
    <% 
    const breadcrumbs = [
    { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
    { label: "Cancelled 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 Cancelled 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 <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/getCancelledTrips?limit=99999',
    currentData: []
  };

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

  // Initialize pagination
  const pagination = new Pagination({
    fetchUrl: '/admin/getCancelledTrips',
    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 || "N/A"}</td>
        <td class="textleft">${trip.trip_to_loc || "N/A"}</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();
      }
    });

    // Apply Filters button
    $("#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();
    });

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

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

    $('.offcanvas-backdrop').remove(); // use cautiously

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


<%- footer %>