<%- header %>
<main class="dashboard-main">
  <%- navbar %>
<% 
  const isMasking = typeof enableMasking !== "undefined" ? enableMasking : true;

  function maskName(name) {
    if (!name) return "N/A";
    if (!isMasking) return name;
    return name.substring(0, 3) + "***";
  }

  function maskEmail(email) {
    if (!email) return "N/A";
    if (!isMasking) return email;

    const parts = email.split("@");
    if (parts.length < 2) return email;

    const user = parts[0].slice(0, 2) + "***";
    const domain = "******." + parts[1].split(".").pop();
    return user + "@" + domain;
  }

  function maskPhone(phone) {
    if (!phone) return "N/A";
    if (!isMasking) return phone;

    const visible = phone.slice(0, 2);
    const masked = "*".repeat(phone.length - 2);
    return visible + masked;
  }
%>

  <script src="/js/pagination.js"></script>

  <div class="container flex-1 pt-20 w-full my-4">
    <%- include('../../partials/utils/title.ejs', {title: "Passenger Loyalty Detail"}) %>

    <% 
      const breadcrumbs = [
        { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
        { label: "Passenger Loyalty Detail" }
      ];
    %>
    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>

    <!-- General Info -->
    <div class="mt-4">
      <div class="p-4 bg-white shadow-md rounded-lg">
        <h4 class="text-lg font-semibold p-4">General Info</h4>
        <hr class="my-2" />

        <div class="row mt-3">
          <div class="col-md-12 mb-4">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pl-4 text-gray-700">
              <div><strong>Passenger ID:</strong> <%= driver?.user_id %></div>
              <div><strong>Passenger Name:</strong> <%= maskName(driver?.u_name) %></div>
              <div><strong>Passenger Phone:</strong> <%= maskPhone(driver?.u_phone) %></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Loyalty Points Table -->
    <div class="mt-4">
      <div class="card basic-data-table">
        <div class="card-header">
          <h5 class="card-title mb-0">Passenger Loyalty Transactions <span id="totalRows"></span></h5>
        </div>
        <div style="padding-inline: 20px; padding-top: 10px; overflow-x: auto;">
          <div class="table-responsive bordered-table">
            <table id="loyaltyTable" class="table table-striped table-bordered">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Trip ID</th>
                  <th>Type</th>
                  <th>Description</th>
                  <th>Conversion Amount</th>
                  <th>Points</th>
                  <th>Points Used</th>
                  <th>Points Left</th>
                  <th>Date</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
            
          </div>
   
        </div>
                        <div style="display: none;" class="pagination">
           <div id="pagination"></div>
         </div>
      </div>
    </div>
  </div>

  

     <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",
           trans.driver?.d_name || "N/A",
           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 ? new Date(trans.trans_date).toLocaleString('en-US') : "N/A",
           trans.trans_type || "N/A",
           trans.driver?.d_name || "N/A",
           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/getloyaltyDetailedData?limit=99999',
       currentData: []
     };

     // Set global search input for pagination
     window.globalSearchInput = '#globalSearch';
   let driver_id = "<%= driver?.user_id %>";

     // Initialize pagination
     const pagination = new Pagination({
      fetchUrl: `/admin/getloyaltyDetailedData?user_id=${driver_id}`,
       defaultSort: {
         column: 'loyality_point_id',
         order: 'DESC'
       },
       dataMapper: (tx) => {

        console.log(tx)
         
         return `
        <tr>
            <td>${tx.loyality_point_id}</td>
            <td>${tx.trip_id || "N/A"}</td>
            <td>${tx.type || "N/A"}</td>
            <td>${tx.trans_desc || "N/A"}</td>
            <td>${tx.conversion_amount?.toFixed(2) || "0.00"}</td>
            <td>${tx.points?.toFixed(2) || "0.00"}</td>
            <td>${tx.points_used?.toFixed(2) || "0.00"}</td>
            <td>${tx.points_left?.toFixed(2) || "0.00"}</td>
            <td>${formatDate(tx.created)}</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 %>
