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

  let city_cur= "<%= city_cur %>"
  // 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 Earning",
      "Tax Amount", "Adjustment Amount", "Promo Amount"
    ],
    dataMapper: (trans) => {
      const damt =
        (Number(trans.d_wallet) || 0) +
        (Number(trans.d_cash) || 0) +
        (Number(trans.d_card) || 0);

      return [
        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_status_name || "N/A",
        trans.trans_pay_mode || "0",
        trans.trans_desc || "0",
        trans.total_amt || "0",
        trans.c_comm || "0",
        damt || "0",
        trans.tax_amt || "0",
        trans.adjust_amt || "0",
        trans.promo_amt || "0"
      ];
    },
    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 Earning",
      "Tax Amount", "Adjustment Amount", "Promo Amount"
    ],
    dataMapper: (trans) => {
      const damt =
        (Number(trans.d_wallet) || 0) +
        (Number(trans.d_cash) || 0) +
        (Number(trans.d_card) || 0);

      return [
        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_status_name || "N/A",
        trans.trans_pay_mode || "N/A",
        trans.trans_desc || "N/A",
        trans.total_amt || "N/A",
        trans.c_comm || "N/A",
        damt || "0",
        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/transData?limit=99999",
  currentData: []
};


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

  // Initialize pagination
  const pagination = new Pagination({
    fetchUrl: '/admin/transData',
    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 ? formatDate(new Date(trans.trans_date)) : "0"}</td>
          <td>${trans.trans_type || "N/A"}</td>
          <td><strong>${driverName}</strong></td>
          <td><strong>${userName}</strong></td>
          <td>${trans.trip_status_name || "N/A"}</td>
          <td>${trans.trans_pay_mode || "N/A"}</td>
          <td>${trans.trans_desc || "N/A"}</td>
          <td>${city_cur}${trans.total_amt || "0"}</td>
          <td>${city_cur}${trans.c_comm || "0"}</td>
          <td>${city_cur}${damt.toFixed(2) || "0"}</td>
          <td>${city_cur}${trans.tax_amt || "0"}</td>
          <td>${city_cur}${trans.adjust_amt || "0"}</td>
          <td>${city_cur}${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 %>

