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

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

 

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

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

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

     <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>



     <div class="card basic-data-table" style="margin-top: 20px;">
       <div class="card-header">
         <h5 class="card-title">Total User/Driver under Audience : <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="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> Name</th>
                 <th>Email</th>
                 <th>Phone</th>
               </tr>
             </thead>
             <tbody></tbody>
           </table>
         </div>
       </div>


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

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

 <script>
 
 
 
   const audienceId = "<%= audienceId %>";
 
   // Set global search input for pagination
   window.globalSearchInput = '#globalSearch';

   // Initialize pagination
   const pagination = new Pagination({
     fetchUrl: `/admin/getdetailaudience?audience_id=${audienceId}`,
     defaultSort: {
       column: `audience_id&audience_id=${audienceId}&`,
       order: 'asc'
     },
     dataMapper: (user) => `
         <tr>
            <td>${user?.user_id || user?.driver_id}</td>
            <td>${user?.u_name || user?.d_name}</td>
          
             <td>${user?.u_email || user?.d_email}</td>
                         <td>${user?.u_phone || user?.d_phone}</td>

          </tr> 
    `
   });


   $(document).ready(function() {

     pagination.loadData(1);

   });
 
 
 </script>
 


 <%- footer %>