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

    
    <% 
    const breadcrumbs = [
    { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
    { label: " Transaction 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 Transactions: <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="transaction_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 data-sort="trip_id">
                  Trip 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>Detail</th>
            <th>Date</th>
            <th>Type</th>
            <th>Driver</th>
            <th>Passenger</th>
            <th>Trip Status</th>
            <th>Pay Mode</th>
            <th>Description</th>
            <th>Total</th>
            <th>Company Amt</th>
            <th>Driver Amt</th>
            <th>TAX</th>
            <th>Adjust Amt</th>
            <th>Promo Amt</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: [
        "Transaction ID", "Trip ID", "Transaction Date", "Transaction Type", "Driver Name",
        "User Name", "Trip Status", "Payment Mode", "Transaction Description",
        "Total Amount", "Company Commission", "Driver Wallet", "Tax Amount", "Adjustment Amount", "Promo Amount"
      ],
      dataMapper: (trans) => [
        trans.transaction_id || "N/A",
        trans.trip_id || "N/A",
        trans.trans_date ? new Date(trans.trans_date).toLocaleString('en-US') : "N/A",
        trans.trans_type || "N/A",
        maskName(trans.driver?.d_name || "N/A"),
        maskName(trans.user?.u_name || "N/A"),
        trans.trip?.trip_status || "N/A",
        trans.trans_pay_mode || "N/A",
        trans.trans_desc || "N/A",
        trans.total_amt || "N/A",
        trans.c_comm || "N/A",
        trans.d_wallet || "N/A",
        trans.tax_amt || "N/A",
        trans.adjust_amt || "N/A",
        trans.promo_amt || "N/A"
      ],
      filename: 'transactions.csv'
    },
    pdf: {
      headers: [
        "Transaction ID", "Trip ID", "Transaction Date", "Transaction Type", "Driver Name",
        "User Name", "Trip Status", "Payment Mode", "Transaction Description",
        "Total Amount", "Company Commission", "Driver Wallet", "Tax Amount", "Adjustment Amount", "Promo Amount"
      ],
      dataMapper: (trans) => [
        trans.transaction_id || "N/A",
        trans.trip_id || "N/A",
        trans.trans_date ? formatDate(trans.trans_date) : "N/A",
        trans.trans_type || "N/A",
        maskName(trans.driver?.d_name || "N/A"),
        maskName(trans.user?.u_name || "N/A"),
        trans.trip?.trip_status || "N/A",
        trans.trans_pay_mode || "N/A",
        trans.trans_desc || "N/A",
        trans.total_amt || "N/A",
        trans.c_comm || "N/A",
        trans.d_wallet || "N/A",
        trans.tax_amt || "N/A",
        trans.adjust_amt || "N/A",
        trans.promo_amt || "N/A"
      ],
      title: 'Transactions Report',
      filename: 'transactions.pdf',
      pageSize: 'A4',
      margin: {
        top: 20,
        right: 10,
        bottom: 20,
        left: 10
      },
      fontSize: 10
    },
    fetchAllUrl: '/admin/deletedtransData?limit=99999',
    currentData: []
  };

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

  // Initialize pagination
  const pagination = new Pagination({
    fetchUrl: '/admin/deletedtransData',
    defaultSort: {
      column: 'transaction_id',
      order: 'DESC'
    },
    dataMapper: (trans) => {
      const driverName = maskName(trans.driver?.d_name || "N/A");
      const userName = maskName(trans.user?.u_name || "N/A");
      const rating = Math.round(trans.user?.rating || 0);
      let ratingStars = "";
      let damt;

      if (trans.d_wallet < 0 && trans.trans_type == "Trip") {
        damt = trans.d_wallet + trans.d_cash + trans.d_card;
      } else {
        damt = trans.d_wallet + trans.d_cash + trans.d_card;
      }

      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>';
      }

      function formatToCustom(dateString) {
        const { DateTime } = luxon;
        return DateTime.fromISO(dateString)
          .setZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
          .toFormat("dd-MM-yyyy hh:mm a");
      }

      return `
        <tr>
          <td>${trans.transaction_id || "0"}</td>
          <td>${trans.trip_id || "N/A"}</td>
          <td>
            <a href="/admin/transaction-detail/${trans.transaction_id}" title="View Details">
              <i class="ri-file-list-3-line"></i>
            </a>
          </td>
          <td>${trans.trans_date ? formatToCustom(new Date(trans.trans_date).toISOString()) : "0"}</td>
          <td>${trans.trans_type || "N/A"}</td>
          <td><strong>${driverName}</strong></td>
          <td><strong>${userName}</strong></td>
          <td>${trans.trip?.trip_status || "N/A"}</td>
          <td>${trans.trans_pay_mode || "N/A"}</td>
          <td>${trans.trans_desc || "N/A"}</td>
          <td>${trans.d_curr || '$'}${trans.total_amt || "0"}</td>
          <td>${trans.d_curr || '$'}${trans.c_comm || "0"}</td>
          <td>${trans.d_curr || '$'}${damt.toFixed(2) || "0"}</td>
          <td>${trans.d_curr || '$'}${trans.tax_amt || "0"}</td>
          <td>${trans.d_curr || '$'}${trans.adjust_amt || "0"}</td>
          <td>${trans.d_curr || '$'}${trans.promo_amt || "0"}</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);
    });
  });
</script>

<%- footer %>
