   <%- header %>
   <!-- pre-rendered navbar inserted -->
   <main class="dashboard-main">
     <%- navbar %>
     <!-- pre-rendered navbar inserted -->

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

    <%- include('../../partials/utils/mask.ejs') %>


  <div class="container flex-1 pt-20 w-full my-4">

    <%- include('../../partials/utils/title.ejs', {title: "Referral Manager"}) %>

    <% 
    const breadcrumbs = [
    { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
    { label: "Referral 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.ejs') %>
    </div>

   

    <div class="card basic-data-table" style="margin-top: 20px;">
      <div class="card-header">
        <h5 class="card-title mb-0">Total Referrals: <span id="totalRows"></span> </h5>


      </div>
     
        <%- include('../../partials/globalSearch.ejs') %>

 
      <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="ref_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>Referral Details</th>
                <th data-sort="status">Status <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="created">Created <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>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>


      <div class="pagination">
        <div id="pagination"></div>
      </div>

    </div>
  </div>
</main>


<script>
  // Masking function (if not already globally defined)
   window.exportConfig = {
    csv: {
      headers: [
        "Referral ID", "Referrer Name", "Referrer Type",
        "Referee Name", "Referee Type", "Status", "Created Date"
      ],
      dataMapper: (ref) => [
        ref.ref_id || "N/A",
        ref.from?.user_name ? maskName(ref.from.user_name) : "N/A",
        ref.from?.type || "N/A",
        ref.to?.user_name ? maskName(ref.to.user_name) : "N/A",
        ref.to?.type || "N/A",
        ref.status || "N/A",
        ref.created ? new Date(ref.created).toLocaleString() : "N/A"
      ],
      filename: 'referrals.csv'
    },
    pdf: {
      headers: [
        "Referral ID", "Referrer Name", "Referrer Type",
        "Referee Name", "Referee Type", "Status", "Created Date"
      ],
      dataMapper: (ref) => [
        ref.ref_id || "N/A",
        ref.from?.user_name ? maskName(ref.from.user_name) : "N/A",
        ref.from?.type || "N/A",
        ref.to?.user_name ? maskName(ref.to.user_name) : "N/A",
        ref.to?.type || "N/A",
        ref.status || "N/A",
        ref.created ? formatDate(ref.created) : "N/A"
      ],
      title: 'Referrals Report',
      filename: 'referrals.pdf',
      pageSize: 'A4',
      margin: {
        top: 20,
        right: 10,
        bottom: 20,
        left: 10
      },
      fontSize: 10
    },
    fetchAllUrl: '/admin/getRef?limit=99999',
    currentData: []
  };

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

  // Initialize pagination
  const pagination = new Pagination({
    fetchUrl: '/admin/getRef',
    defaultSort: {
      column: 'ref_id',
      order: 'DESC'
    },
    
    dataMapper: (referral) => {

      // Determine badge color based on status
let status = referral.status ? referral.status.toLowerCase() : "n/a";
let statusClass = "bg-info"; // default

if (status === "completed") statusClass = "bg-success";
else if (status === "joined") statusClass = "bg-warning";

      return `
        <tr>
          <!-- Referral ID -->
          <td class=" ">${referral.ref_id || "N/A"}</td>

          <!-- Referrer and Referee -->
          <td>
            <div class="d-flex justify-content-between align-items-center">
              <!-- Referrer -->
              <div>
                <i class="fas fa-user-check text-primary"></i>
                <strong>Referrer:</strong>
                ${maskName(referral.from.user_name ||referral.from.driver_name)}
                <button class="btn btn-sm ${referral.from?.type === 'driver' ? 'btn-warning' : 'btn-info'}">
                  ${referral.from?.type === "driver" ? "Driver" : "User"}
                </button>
              </div>

              <!-- Referee -->
              <div class="text-end">
                <i class="fas fa-user text-success"></i>
                <strong>Referee:</strong>
                ${ maskName(referral.to.user_name || referral.to.driver_name)}
                <button class="btn btn-sm ${referral.to?.type === 'driver' ? 'btn-warning' : 'btn-info'}">
                  ${referral.to?.type === "driver" ? "Driver" : "User"}
                </button>
              </div>
            </div>
          </td>

          <!-- Status -->
     <td class=" ">
    <span class="badge ${statusClass}">${referral.status || "N/A"}</span>
  </td>

          <!-- Created Date -->
          <td class=" ">
            <i class="fas fa-calendar-alt"></i>
            ${referral.created ? formatDate(referral.created) : "N/A"}
          </td>
        </tr>
      `;
    }
  });

  $(document).ready(function() {
    const defaultLimit = $("#pageLength").val();
    pagination.loadData(1, defaultLimit);

    $("#pageLength").change(function() {
      const newLimit = $(this).val();
      pagination.loadData(1, newLimit);
    });
  });
</script>


<%- footer %>