   <%- 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: "Rating Manager"}) %>

    <% 
    const breadcrumbs = [
      { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
       { label: " Rating 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 Ratings: <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="trip_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>Passenger</th>
                <th>Driver</th>
                <th>Rating To Driver</th>
                <th>Rating To Passenger</th>
                <th data-sort="trip_date">Trip Date                  <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>

</main>




<script>
  // Configure the export component
  window.exportConfig = {
    csv: {
      headers: ["Trip ID", "Passenger Name", "Driver Name", "Driver Rating", "Driver Feedback", "Passenger Rating", "Passenger Feedback", "Trip Date"],
      dataMapper: (trip) => [
        trip?.trip_id || "N/A",
        maskName(trip.user?.u_name || "N/A"),
        maskName(trip.driver?.d_name || "N/A"),
        Math.round(trip?.trip_rating || 0),
        trip?.trip_feedback || "No feedback",
        Math.round(trip?.user_rating || 0),
        trip?.user_feedback || "No feedback",
        trip?.trip_date ? new Date(trip.trip_date).toLocaleString() : "N/A"
      ],
      filename: 'ratings.csv'
    },
    pdf: {
      headers: ["Trip ID", "Passenger Name", "Driver Name", "Driver Rating", "Driver Feedback", "Passenger Rating", "Passenger Feedback", "Trip Date"],
      dataMapper: (trip) => [
        trip?.trip_id || "N/A",
        maskName(trip.user?.u_name || "N/A"),
        maskName(trip.driver?.d_name || "N/A"),
        Math.round(trip?.trip_rating || 0),
        trip?.trip_feedback || "No feedback",
        Math.round(trip?.user_rating || 0),
        trip?.user_feedback || "No feedback",
        trip?.trip_date ? new Date(trip.trip_date).toLocaleString() : "N/A"
      ],
      title: 'Ratings Report',
      filename: 'ratings.pdf',
      pageSize: 'A4',
      margin: {
        top: 20,
        right: 10,
        bottom: 20,
        left: 10
      },
      fontSize: 10
    },
    fetchAllUrl: '/admin/ratingManager?limit=99999',
    currentData: []
  };

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

  // Initialize pagination
  const pagination = new Pagination({
    fetchUrl: '/admin/ratingManager',
    defaultSort: {
      column: 'trip_id',
      order: 'DESC'
    },
    dataMapper: (trip) => {
      // --- DRIVER RATING ---
      const driverRating = trip?.trip_rating || 0;
      const roundedRatingd = Math.round(driverRating * 10) / 10; // Round to 1 decimal
      let driverRatingStars = "";

      const fullStarsd = Math.floor(roundedRatingd);
      const hasHalfStard = roundedRatingd % 1 >= 0.25 && roundedRatingd % 1 < 0.75;

      for (let i = 1; i <= 5; i++) {
        if (i <= fullStarsd) {
          driverRatingStars += '<i class="fa fa-star text-warning"></i>';
        } else if (i === fullStarsd + 1 && hasHalfStard) {
          driverRatingStars += '<i class="fa fa-star-half-alt text-warning"></i>';
        } else {
          driverRatingStars += '<i class="fa fa-star text-muted"></i>';
        }
      }

      // --- PASSENGER RATING ---
      const passengerRating = trip?.user_rating || 0;
      const roundedRating = Math.round(passengerRating * 10) / 10; // Round to 1 decimal
      let passengerRatingStars = "";

      const fullStars = Math.floor(roundedRating);
      const hasHalfStar = roundedRating % 1 >= 0.25 && roundedRating % 1 < 0.75;

      for (let i = 1; i <= 5; i++) {
        if (i <= fullStars) {
          passengerRatingStars += '<i class="fa fa-star text-warning"></i>';
        } else if (i === fullStars + 1 && hasHalfStar) {
          passengerRatingStars += '<i class="fa fa-star-half-alt text-warning"></i>';
        } else {
          passengerRatingStars += '<i class="fa fa-star text-muted"></i>';
        }
      }

      return `
        <tr>
          <td>${trip?.trip_id || 'N/A'}</td>
          <td>
            <strong>${maskName(trip.user?.u_name || "N/A")}</strong><br />
            ${maskEmail(trip.user?.u_email || "")}
          </td>
          <td>
            <strong>${maskName(trip.driver?.d_name || "N/A")}</strong><br />
            ${maskEmail(trip.driver?.d_email || "")}
          </td>
          <td>
            <div class="d-flex flex-column">
              <div data-tooltip="${trip.trip_rating || 0}">${driverRatingStars}</div>
              <small>${trip.trip_feedback || "No feedback"}</small>
            </div>
          </td>
          <td>
            <div class="d-flex flex-column">
              <div data-tooltip="${trip.user_rating || 0}">${passengerRatingStars}</div>
              <small>${trip.user_feedback || "No feedback"}</small>
            </div>
          </td>
          <td>
            ${trip.trip_date ? formatDate(trip.trip_date) : '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 %>