   <%- 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: "Loyalty Points"}) %>


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

       <%- 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 Loyalties: <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="loyality_point_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>Ref Type</th>
                   <th>Type</th>
                   <th>Description</th>
                   <th>Conversion Amount</th>
                   <th>Points Earned</th>
                   <th>Points Used</th>
                   <th>Points Left</th>
                   <th>Date</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 ? 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"
      ],
      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/getloyaltyData?limit=99999',
    currentData: []
  };

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

  // Initialize pagination
  const pagination = new Pagination({
    fetchUrl: '/admin/getloyaltyData',
    defaultSort: {
      column: 'loyality_point_id',
      order: 'DESC'
    },
    dataMapper: (trans) => {
      function formatToCustom(dateString) {
        const { DateTime } = luxon;
        return DateTime.fromISO(dateString)
          .setZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
          .toFormat("dd-MM-yyyy hh:mm a");
      }

      let name, phone;
      if (trans.ref_type === "User") {
        name = maskName(trans?.trip?.user?.u_name || "N/A");
        phone = maskPhone(trans?.trip?.user?.u_phone || "N/A");
      } else {
        name = maskName(trans?.trip?.driver?.d_name || "N/A");
        phone = maskPhone(trans?.trip?.driver?.d_phone || "N/A");
      }

      return `
        <tr>
          <td><strong>${trans.loyality_point_id || "0"}</strong></td>
          <td>${trans.trip_id || "N/A"}</td>
          <td>
            <span class="badge bg-primary">${trans.ref_type || "N/A"}</span><br/>
            <small><b>ID:</b> 
              <a href="/admin/${trans.ref_type.toLowerCase()}s/loyalty/${trans.ref_id}" class="text-decoration-none">
                ${trans.ref_id || "N/A"}
              </a>
            </small><br/>
            <small><b>Name:</b> 
              <a href="/admin/${trans.ref_type.toLowerCase()}s/loyalty/${trans.ref_id}" class="fw-bold text-dark">
                ${name}
              </a>
            </small><br/>
            <small><b>Phone:</b> ${phone}</small>
          </td>
          <td>
            <span class="badge ${trans.type === "CR" ? "bg-success" : "bg-danger"}">
              ${trans.type || "N/A"}
            </span>
          </td>
          <td>${trans.trans_desc}</td>
          <td><%= city_cur %>${(trans.conversion_amount ?? 0).toFixed(2)}</td>
          <td>${(trans.points ?? 0).toFixed(2)}</td>
          <td>${(trans.points_used ?? 0).toFixed(2)}</td>
          <td>${(trans.points_left ?? 0).toFixed(2)}</td>
          <td>
            ${trans?.created ? formatDate(new Date(trans.created)) : "N/A"}
          </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 %>