<%- header %>
  <!-- pre-rendered navbar inserted -->
  <main class="dashboard-main">
    <%- navbar %>
      <%- include('../../partials/utils/mask.ejs') %>

        <!-- pre-rendered navbar inserted -->
        <style>
          .pay-label {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-right: 6px;
            color: #fff;
            width: 50px !important;
          }

          .pay-label.card {
            background-color: #3b82f6;
          }

          .pay-label.wallet {
            background-color: #10b981;
          }

          .pay-label.cash {
            background-color: #f59e0b;
          }

          .badge {
            background-color: #6366f1;
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
          }
        </style>

        <script src="/js/pagination.js"></script>


        <div class="container flex-1 pt-20 w-full my-4">

          <%- include('../../partials/utils/title.ejs', {title: "Drivers Ride Requests" }) %>

            <% const breadcrumbs=[ { label: "Dashboard" , href: "/admin/dashboard" , icon: "bi bi-house-door" }, {
              label: "Drivers Ride Requests" } ]; %>

              <%- 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 Drivers: <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>

                            <th data-sort="driver_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>Driver Detail</th>
                            <th data-sort="trip_count">Trips <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="total_paid">Payments <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>
    let city_cur = "<%= city_cur %>";

    // --- Export config with masking ---
    window.exportConfig = {
      csv: {
        headers: ["Driver ID", "Driver Name", "Email", "Phone", "Trip Count", "Card", "Wallet", "Cash", "Total Paid"],
        dataMapper: (driver) => [
          driver.driver_id,
          maskName(driver.d_fname || "N/A", driver.d_lname || ""),
          maskEmail(driver.d_email || "N/A"),
          maskPhone(driver.d_phone || "N/A"),
          driver.trip_count || 0,
          driver.card_amount > 0 ? `${driver.card_amount.toFixed(2)}` : "0.00",
          driver.wallet_amount > 0 ? `${driver.wallet_amount.toFixed(2)}` : "0.00",
          driver.cash_amount > 0 ? `${driver.cash_amount.toFixed(2)}` : "0.00",
          `${(driver.total_paid || 0).toFixed(2)}`
        ],
        filename: 'driver_rides.csv'
      },
      pdf: {
        headers: ["Driver ID", "Driver Name", "Email", "Phone", "Trip Count", "Card", "Wallet", "Cash", "Total Paid"],
        dataMapper: (driver) => [
          driver.driver_id,
          maskName(driver.d_fname || "N/A", driver.d_lname || ""),
          maskEmail(driver.d_email || "N/A"),
          maskPhone(driver.d_phone || "N/A"),
          driver.trip_count || 0,
          driver.card_amount > 0 ? `${city_cur}${driver.card_amount.toFixed(2)}` : `${city_cur}0.00`,
          driver.wallet_amount > 0 ? `${city_cur}${driver.wallet_amount.toFixed(2)}` : `${city_cur}0.00`,
          driver.cash_amount > 0 ? `${city_cur}${driver.cash_amount.toFixed(2)}` : `${city_cur}0.00`,
          `${city_cur}${(driver.total_paid || 0).toFixed(2)}`
        ],
        title: 'Driver Rides Report',
        filename: 'driver_rides.pdf'
      },
      fetchAllUrl: '/admin/ridesDriver?limit=99999',
      currentData: []
    };

    window.globalSearchInput = '#globalSearch';

    // --- Pagination table rows with masking ---
    const pagination = new Pagination({
      fetchUrl: '/admin/ridesDriver',
      defaultSort: { column: 'total_paid', order: 'DESC' },
      // defaultSort: { column: 'driver_id', order: 'DESC' },
      dataMapper: (driver) => {
        const maskedName = maskName(driver.d_fname || "N/A", driver.d_lname || "");
        const maskedEmail = maskEmail(driver.d_email || "N/A");
        const maskedPhone = maskPhone(driver.d_phone || "N/A");

        let payments = "";
        if (driver?.card_amount > 0) payments += `<div><span class="pay-label card">Card</span> ${city_cur}${driver.card_amount.toFixed(2)}</div>`;
        if (driver?.wallet_amount > 0) payments += `<div><span class="pay-label wallet">Wallet</span> ${city_cur}${driver.wallet_amount.toFixed(2)}</div>`;
        if (driver?.cash_amount > 0) payments += `<div><span class="pay-label cash">Cash</span> ${city_cur}${driver.cash_amount.toFixed(2)}</div>`;

        return `
      <tr>
        <td><strong>${driver.driver_id}</strong></td>

        <td>
          <div style="line-height: 1.4">
            <a href="/admin/driver-detailed-report/${driver.driver_id}" style="font-weight: 600; color: #1d4ed8;">
              ${maskedName}
            </a><br />
            <small><i class="fas fa-envelope"></i> ${maskedEmail}</small><br />
            <small><i class="fas fa-phone"></i> ${maskedPhone}</small>
          </div>
        </td>

        <td><span class="badge badge-info">${driver.trip_count || 0} Trips</span></td>

        <td>
          <div style="line-height: 1.5">
            ${payments || '<span style="color: #999;">No payments</span>'}
            <hr style="margin: 4px 0;" />
            <strong>Total:</strong> ${city_cur}${(driver.total_paid || 0).toFixed(2)}
          </div>
        </td>
      </tr>
    `;
      }
    });

    // --- Toast notifications ---
    function showToast(message, type = 'error') {
      Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
      }).fire({ icon: type, title: message });
    }

    $(document).ready(function () {
      const defaultLimit = $("#pageLength").val();
      pagination.loadData(1, defaultLimit);

      $("#pageLength").change(function () {
        const newLimit = $(this).val();
        pagination.loadData(1, newLimit);
      });
    });
  </script>

  <%- footer %>