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

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

<!-- Ensure Bootstrap CSS and JS are loaded properly -->

<style>
  /* Optional: move modal down a bit using margin */
  .modal-dialog.custom-modal-top {
    margin-top: 120px;
  }

  /* Fix z-index issues if modal appears under the backdrop */
  .modal-backdrop {
    z-index: 1040 !important;
  }

  .modal {
    z-index: 1050 !important;
  }

  .card {
    transition: transform 0.3s ease;
  }

  .card:hover {
    transform: translateY(-5px);
  }

  .list-group-item {
    padding: 12px;
    /* Smaller padding for a more compact look */
    border: 1px solid #e0e0e0;
  }

  .list-group-item:hover {
    background-color: #f9f9f9;
  }

  small {
    font-size: 0.875rem;
    /* Slightly smaller text */
  }
</style>
<!-- Audience Name Modal -->
<style>
  /* Custom class to push modal down */
  .custom-modal-top {
    margin-top: 120px;
  }
</style>

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

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

    <% 
      const breadcrumbs = [
        { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
        { label: " Audience Manager", href: "/admin/audience-manager" },
         { label: " Driver Audience Manager" }
      ];
    %>

    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>
    <div style="display: flex; justify-content: space-between; align-items: center;">

      <button id="saveAudienceBtn" class="btn shadow btn-success me-2">
        <i class="fa fa-plus"></i> Save Audience
      </button>
      <!-- Offcanvas for Search Filter Panel -->
      <%- include('../../partials/utils/searchFilter.ejs') %>
    </div>





    <div class="container mt-4">
      <div class="row">
        <!-- Step Card Container -->
        <div class="col-lg-6 col-md-8 mx-auto">
          <div class="card shadow-sm p-3 rounded-lg">
            <h5 class="text-center mb-3">Steps to Create Targeted Audience</h5>
            <ol class="list-group list-group-flush">
              <li class="list-group-item p-2">
                <strong>1. Apply Search Filters</strong>
                <small class="d-block text-muted">Pinpoint users based on specific criteria.</small>
              </li>
              <li class="list-group-item p-2">
                <strong>2. Explore Filtered Results</strong>
                <small class="d-block text-muted">Review the tailored list generated by your filters.</small>
              </li>
              <li class="list-group-item p-2">
                <strong>3. Initiate Audience Creation</strong>
                <small class="d-block text-muted">Click "Create Audience" and assign a unique name.</small>
              </li>
              <li class="list-group-item p-2">
                <strong>4. Engage Effortlessly</strong>
                <small class="d-block text-muted">Send notifications, SMS, and emails to your audience.</small>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="audienceModal" tabindex="-1" aria-labelledby="audienceModalLabel" aria-hidden="true">
      <div class="modal-dialog custom-modal-top">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="audienceModalLabel">Enter Audience Name</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <input type="text" id="audienceName" class="form-control" placeholder="Audience Name" />
          </div>
          <div class="modal-footer">
            <button type="button" id="saveAudience" class="btn btn-primary">Save</button>
          </div>
        </div>
      </div>
    </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>
      <div class="d-flex justify-content-between align-items-center" style="padding-inline: 20px; padding-block: 20px;">
        <div style="display: none;">
          <label for="pageLength"></label>
          <select id="pageLength" class="form-select d-inline-block w-auto">
            <option value="5">5</option>
            <option value="10" selected>10</option>
            <option value="20">20</option>
            <option value="50">50</option>
          </select>
          <span>entries per page</span>
        </div>
      </div>
      <!-- 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>Driver Details</th>
                <th>Rating </th>
                <th>Wallet</th>
                <th data-sort="trip_date">Joining 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 style="display: none;" class="pagination">
        <div id="pagination"></div>
      </div>

    </div>




  </div>
</main>
<!-- Modal Backdrop -->
<!-- Modal Backdrop -->




<script>
  let currentSort = {
    column: "driver_id",
    order: "asc"
  }; // Default sorting

  let UserData

  $(document).ready(function() {

    let defaultLimit = $("#pageLength").val();
    loadUsers(1, defaultLimit);

    $("#pageLength").change(function() {
      let newLimit = $(this).val();
      loadUsers(1, newLimit);
    });

    // Apply Filters
    // Get reference to Bootstrap Offcanvas instance
    const filterOffcanvasEl = document.getElementById('filterOffcanvas');
    const filterOffcanvas = bootstrap.Offcanvas.getOrCreateInstance(filterOffcanvasEl);
    // Apply Filters
    $("#applyFilters").click(function() {
      let filters = {};

      $("#searchForm")
        .find("input, select")
        .each(function() {
          let key = $(this).attr("name");
          let value = $(this).val().trim();
          if (value) {
            filters[key] = value;
          }
        });

      $("#globalSearch").val("");

      loadUsers(1, 10, search = "", currentSort.column, currentSort.order, filters);
      // Close the drawer after search
      filterOffcanvas.hide();
    });

    // Reset Filters
    $("#resetForm").click(function() {
      $("#searchForm")[0].reset();
      loadUsers(1, 10); // Reload users without filters

      // Close the drawer after reset
      filterOffcanvas.hide();
    });
  });

  let curr = "<%= city_cur %>"

  function loadUsers(page = 1, limit = 10, search = "", sortBy = "driver_id", sortOrder = "DESC", filters = {}) {
    console.log(`Fetching users - Page: ${page}, Limit: ${limit}, Search: ${search}, Sort: ${sortBy} (${sortOrder}), Filters:`, filters);

    let queryParams = new URLSearchParams({
      page,
      limit,
      search,
      sortBy,
      sortOrder,
      ...filters
    }).toString();

    $.get(`/admin/driverAudience?${queryParams}`)
      .done(function(response) {
        if (!response || !response.users) {
          console.error("Invalid response format", response);
          return;
        }

        const users = response.users;
        collectUserIds(users); // users is the array of fetched driver/user objects
        const totalUsers = response.totalusers || 0;
        const totalPages = Math.ceil(totalUsers / limit);
        const page = parseInt(response.currentPage) || 1;
        UserData = users
        let tbody = "";
        users.forEach(user => {
          let rating = Math.round(user?.d_rating || 0);
          let stars = "";

          for (let i = 1; i <= 5; i++) {
            stars += i <= rating ?
              `<i class="fa fa-star text-warning"></i>` :
              `<i class="fa fa-star text-muted"></i>`;
          }

          tbody += `
        <tr>
           <td>${user?.driver_id}</td>
          <td>
            <div class="d-flex align-items-center">
   <img 
                src="<%= IMAGE_FOLDER_PATH %>${user.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/${user.driver_id}"><strong>${user?.d_name || "N/A"} ${user?.u_lname || ""}</strong></a><br />
                 <strong>${user?.d_email || "N/A"}</strong><br />
               <span>${user.c_code ?  (user.c_code +" "+ user?.d_phone || "N/A") : user?.d_phone || "N/A"}</span>

              </div>
            </div>
          </td>
          <td>${stars}</td>
            <td style="color:green">${curr}${user?.d_wallet.toFixed(2) || "00.00"}</td>
<td>${new Date(user.d_created).toLocaleString() }</td>

        
        </tr>
      `;
        });
        $("#tripsTable tbody").html(tbody);
        $("#totalRows").text(totalUsers);
        generatePagination(totalPages, page, limit);

        // Reattach event listeners after updating the table
        attachEventListeners();
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        console.error("Error fetching users:", textStatus, errorThrown, jqXHR.responseText);
      });


  }
  // Sorting Functionality
  $("#tripsTable th[data-sort]").on("click", function() {
    let column = $(this).data("sort");
    let newOrder = currentSort.column === column && currentSort.order === "asc" ? "desc" : "asc";

    currentSort = {
      column,
      order: newOrder
    };
    loadUsers(1, 10, $("#globalSearch").val(), column, newOrder);
  });
  // Generate pagination


  // Attach search event
  $("#globalSearch").on("input", function() {
    let search = $(this).val().trim();
    loadUsers(1, 10, search); // Always reset to page 1 on search
  });

  // Function to generate pagination buttons
  function generatePagination(totalPages, currentPage) {
    let paginationHtml = `<nav><ul class="pagination justify-content-center">`;

    if (currentPage > 1) {
      paginationHtml += `<li class="page-item"><a class="page-link" href="#" onclick="loadUsers(1)">First</a></li>`;
      paginationHtml += `<li class="page-item"><a class="page-link" href="#" onclick="loadUsers(${currentPage - 1})">&laquo;</a></li>`;
    }

    let startPage = Math.max(1, currentPage - 2);
    let endPage = Math.min(totalPages, startPage + 4);

    for (let i = startPage; i <= endPage; i++) {
      paginationHtml += `<li class="page-item ${i === currentPage ? 'active' : ''}">
      <a class="page-link" href="#" onclick="loadUsers(${i})">${i}</a></li>`;
    }

    if (currentPage < totalPages) {
      paginationHtml += `<li class="page-item"><a class="page-link" href="#" onclick="loadUsers(${currentPage + 1})">&raquo;</a></li>`;
      paginationHtml += `<li class="page-item"><a class="page-link" href="#" onclick="loadUsers(${totalPages})">Last</a></li>`;
    }

    paginationHtml += `</ul></nav>`;
    $("#pagination").html(paginationHtml);
  }

  $(document).ready(function() {
    let defaultLimit = $("#pageLength").val();
    loadUsers(1, defaultLimit);

    $("#pageLength").change(function() {
      let newLimit = $(this).val();
      loadUsers(1, newLimit); // Reload users with new limit
    });
  });


  // Function to attach event listeners to buttons
  function attachEventListeners() {




  }
</script>
<script>
  $(document).ready(function() {
    $('.select2').select2({
      width: '100%',
      placeholder: 'Select an option',
      allowClear: true
    });
  });
  $('#filterOffcanvas').on('shown.bs.offcanvas', function() {
    $('.select2').select2({
      dropdownParent: $('#filterOffcanvas'),
      width: '100%'
    });
  });
  $('#searchForm').on('keydown', function(e) {
    if (e.key === 'Enter') {
      e.preventDefault(); // Prevent Enter from submitting the form
    }
  });
</script>

<script>
  let selectedUserIds = [];

  // Called when table loads to capture all visible user IDs
  function collectUserIds(data) {
    selectedUserIds = data.map(user => user.driver_id);
  }

  // Show modal on button click
  $('#saveAudienceBtn').on('click', function() {
    if (!selectedUserIds.length) {
      Swal.fire({
        icon: 'warning',
        title: 'No Users',
        text: 'No users found to save.',
        confirmButtonColor: '#3085d6',
      });
      return;
    }
    $('#audienceModal').modal('show');
  });

  // Save audience on confirm
  $('#saveAudience').on('click', function() {
    const name = $('#audienceName').val().trim();
    if (!name) {
      Swal.fire({
        icon: 'error',
        title: 'Error',
        text: 'Audience name is required.',
        confirmButtonColor: '#3085d6',
      });
      return;
      return;
    }

    $.ajax({
      url: '/admin/save-audience',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({
        name: name,
        user_ids: selectedUserIds
      }),
      success: function(res) {
        $('#audienceModal').modal('hide');
        // Replace toastr.success
        Swal.fire({
          icon: 'success',
          title: 'Success!',
          text: 'Audience saved successfully!',
          confirmButtonColor: '#3085d6',
          timer: 2000
        });
      },
      error: function(xhr) {
        let errorMsg = 'This name is already taken.';
        if (xhr.responseJSON && xhr.responseJSON.message) {
          errorMsg = xhr.responseJSON.message;
        } else if (xhr.responseText) {
          try {
            const parsed = JSON.parse(xhr.responseText);
            if (parsed.message) errorMsg = parsed.message;
          } catch (e) {
            errorMsg = xhr.responseText;
          }
        }
        Swal.fire('Error!', errorMsg, 'error');
      }
    });
  });
</script>




<%- footer %>