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

    <% 
      const breadcrumbs = [
        { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
        { label: "Driver 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>Driver ID:</strong> <%= driver?.driver_id %></div>
              <div><strong>Driver Name:</strong> <%= maskName(driver?.d_name) %></div>
              <div><strong>Driver Phone:</strong> <%= maskPhone(driver?.d_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">Driver 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 style="display: none;" class="pagination">
           <div id="pagination"></div>
         </div>
        </div>
      </div>
    </div>
  </div>

  <script>

    let driver_id = "<%= driver?.driver_id %>";

    // Initialize pagination
    const pagination = new Pagination({
      fetchUrl: `/admin/getloyaltyDetailedData?driver_id=${driver_id}`,
      defaultSort: { column: 'loyality_point_id', order: 'DESC' },
      dataMapper: (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() {
      pagination.loadData(1, 10); // default load 10 records
    });
  </script>

<%- footer %>
