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

            <% const breadcrumbs=[ { label: "Dashboard" , href: "/admin/dashboard" , icon: "bi bi-house-door" }, {
              label: " Active Drivers 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 -->
                    <div style="display: flex; justify-content: space-between; align-items: center; gap: 10px;">
                      <button data-tooltip="Delete selected drivers" id="deleteSelected" class="btn shadow btn-danger"
                        style="padding-block: 6px;">
                        <i class="fas fa-trash"></i>
                      </button>
                      <div style="display: flex; justify-content: end;">
                        <%- include('../../partials/utils/searchFilter-withApi.ejs') %>
                      </div>
                    </div>
                </div>
                <!-- Global Search -->
                <!-- Global Search -->
                <!-- <div style="display: flex; justify-content: end;">
      <button id="deleteSelected" class="btn shadow btn-danger" style="padding-block: 6px;">
        <i class="fas fa-trash"></i>
      </button>
    </div> -->


                <div class="card basic-data-table" style="margin-top: 20px;">
                  <div class="card-header">
                    <h5 class="card-title mb-0">Total Active Drivers: <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 scope="col">
                                <div class="form-check style-check d-flex align-items-center">
                                  <input id="selectAll" class="form-check-input" type="checkbox">
                                </div>
                              </th>
                              <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 Details</th>
                              <th data-sort="d_rating">
                                Rating (Avg)
                                <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>
                              <% if (user && user.group_id !== 5) { %>
                                <th data-sort="d_wallet">
                                  Wallet Balance
                                  <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>Verified / Available</th>
                                  <th>Actions</th>
                            </tr>
                          </thead>
                          <tbody></tbody>
                        </table>
                      </div>
                    </div>


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

                </div>

  </main>


  <script>
    let city_cur = "<%= city_cur %>";
    const userGroupId = <%= user && user.group_id ? user.group_id : 0 %>;
    // Set global search input for pagination
    window.globalSearchInput = '#globalSearch';
    // --- Export config ---
    window.exportConfig = {
      csv: {
        headers: ["Driver ID", "First Name", "Last Name", "Email", "Country Code", "Phone", "Rating", "Wallet"],
        dataMapper: (driver) => [
          driver.driver_id,
          maskName(driver.d_fname || 'N/A', driver.d_lname || ''),
          maskEmail(driver.d_email || 'N/A'),
          driver.c_code || "N/A",
          maskPhone(driver.d_phone || 'N/A'),
          (driver.d_rating || 0).toFixed(1),
          `${(driver.d_wallet || 0).toFixed(2)}`
        ],
        filename: 'active_drivers.csv'
      },
      pdf: {
        headers: ["Driver ID", "First Name", "Last Name", "Email", "Country Code", "Phone", "Rating", "Wallet"],
        dataMapper: (driver) => [
          driver.driver_id,
          maskName(driver.d_fname || 'N/A', driver.d_lname || ''),
          maskEmail(driver.d_email || 'N/A'),
          driver.c_code || "N/A",
          maskPhone(driver.d_phone || 'N/A'),
          (driver.d_rating || 0).toFixed(1),
          `${city_cur}${(driver.d_wallet || 0).toFixed(2)}`
        ],
        title: 'Active Drivers Report',
        filename: 'active_drivers.pdf'
      },
      fetchAllUrl: '/admin/activeDrivers?limit=99999',
      currentData: []
    };

    // --- Pagination table rows (uses same mask functions) ---
    const pagination = new Pagination({
      fetchUrl: '/admin/activeDrivers',
      defaultSort: { column: 'driver_id', order: 'DESC' },
      dataMapper: (driver) => {
        const rating = parseFloat(driver.d_rating || 0);
        const fullStars = Math.floor(rating);
        const hasHalfStar = rating % 1 >= 0.5;
        let ratingStars = '';

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

        const phoneNumber = driver.c_code ?
          `${driver.c_code} ${maskPhone(driver.d_phone || 'N/A')}` :
          maskPhone(driver.d_phone || 'N/A');

        const walletAmount = (driver.d_wallet || 0).toFixed(2);

        // Determine admin type label
        let adminTypeLabel = '';
        if (driver.companyAdmin && driver.companyAdmin.group_id) {
          if (driver.companyAdmin.group_id === 6) {
            adminTypeLabel = '<span class="badge bg-info text-white">Corporate</span>';
          } else if (driver.companyAdmin.group_id === 5) {
            adminTypeLabel = '<span class="badge bg-primary text-white">Company</span>';
          } else {
            adminTypeLabel = '<span class="badge bg-secondary text-white">Normal</span>';
          }
        } else {
          adminTypeLabel = '<span class="badge bg-secondary text-white">Normal</span>';
        }

        return `
        <tr>
          <td>
            <div class="form-check style-check d-flex align-items-center">
              <input class="select-driver form-check-input" type="checkbox" value="${driver.driver_id}">
            </div>
          </td>
          <td>${driver.driver_id}</td>
          <td>
            <div class="d-flex align-items-center">
              <img 
                src="<%= IMAGE_FOLDER_PATH %>${driver.image?.img_path || '/placeholder.jpg'}" 
                alt="Profile Image" 
                class="pi-css rounded-circle me-2" 
                width="40" 
                height="40"
                onerror="this.onerror=null; this.src='/placeholder.jpg';"
              >
              <div>
                <a href="/admin/driver-detailed-report/${driver.driver_id}">
                  <strong>${maskName(driver.d_fname || 'N/A', driver.d_lname || '')}</strong>
                </a><br>
                <strong>${maskEmail(driver.d_email || 'N/A')}</strong><br>
                <span>${phoneNumber}</span>
              </div>
            </div>
          </td>
          <td>${ratingStars}</td>
          ${userGroupId !== 5 ? `<td style="color:${ walletAmount < 0 ? 'red' : 'green' }">${city_cur}${walletAmount}</td>` : ''}
          <td>
            <button class="btn btn-sm ${driver.d_is_verified ? '' : 'text-[#FF9F29]'} change-astatus" 
                    style="${driver.d_is_verified ? 'background: var(--success-focus) !important; color:#45B369; border-radius:20px' : 'background: #ffb150; color:white; border-radius:20px'}"
                    data-id="${driver.driver_id}" 
                    data-value="${driver.d_is_verified}"
                    data-type="verify">
              ${driver.d_is_verified ? 'Verified' : 'Unverified'}
            </button>
            ${driver.status === "busy"
            ? `<button disabled class="btn btn-sm ${driver.d_is_available ? 'btn-primary' : 'btn-secondary'} change-ostatus" style="background: var(--success-focus) !important; border:none; color:#45B369; border-radius:20px" data-type="availability">On ride</button>`
            : `<button class="btn btn-sm ${driver.d_is_available ? 'btn-primary' : 'btn-secondary'} change-ostatus" style="${driver.d_is_available ? 'background: var(--success-focus) !important; border:none; color:#45B369; border-radius:20px' : ' color:white; border-radius:20px'}" data-id="${driver.driver_id}" data-value="${driver.d_is_available}" data-type="availability">${driver.d_is_available ? 'Available' : 'Unavailable'}</button>`
          }
          </td>
          <td>
            <button data-tooltip="Click to deactivate driver" class="btn btn-sm change-status" data-value="${driver.d_active}" data-id="${driver.driver_id}" style="background: transparent; border: none; padding: 0.25rem;">
              <iconify-icon icon="${driver.d_active ? 'mdi:account-check' : 'mdi:account-remove'}" style="font-size: 1.5rem;" class="${driver.d_active ? 'text-success' : 'text-danger'}"></iconify-icon>
            </button>
            <button data-tooltip="Edit driver" class="edit-driver" data-id="${driver.driver_id}" style="background: transparent; border: none; padding: 0.25rem; margin-left: 0.5rem;">
              <a href="javascript:void(0)" class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center">
                <iconify-icon icon="lucide:edit"></iconify-icon>
              </a>
            </button>
          </td>
        </tr>
      `;
      }
    });

    $(document).ready(function () {
      pagination.loadData(1);
      // Edit driver handler
      $(document).on("click", ".edit-driver", function () {
        const driverId = $(this).data("id");
        window.location.href = `/admin/edit-driver/${driverId}`;
      });
    });
  </script>



  <script src="/js/driverScript/update-driver
-status.js"></script>


  <%- footer %>