<%- include('../partials/header') %>
<body>
<%- include('../partials/navbar-admin') %>
<div class="container mt-5">
  <!-- Main Card -->
  <div class="card">
    <div class="card-body">
      <h1 class="card-title mb-4 text-center">Attendance List</h1>

      <!-- Flash Messages -->
      <% if (successMessages && successMessages.length > 0) { %>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
          <% successMessages.forEach(message => { %>
            <%= message %><br>
          <% }); %>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      <% } %>
      <% if (errorMessages && errorMessages.length > 0) { %>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
          <% errorMessages.forEach(message => { %>
            <%= message %><br>
          <% }); %>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      <% } %>

      <!-- Export Button -->
      <div class="d-flex justify-content-start mb-4">
        <a href="/admin/attendance/export-excel" class="btn btn-success me-2">Export to Excel</a>
      </div>

      <!-- Attendance List Table -->
      <div class="table-responsive">
        <table class="table table-hover mt-4 text-center">
          <thead class="table-light text-center">
            <tr>
              <th>Name</th>
              <th>Phone Number</th>
              <th>Status</th>
              <th>Info</th>
              <th>Attendance Date</th>
            </tr>
          </thead>
          <tbody>
            <% attendance.forEach((record, index) => { %>
              <tr>
                <td><%= record.Guest.fullname %></td>
                <td><%= record.Guest.phone_number %></td>
                <td><%= record.Guest.status %></td>
                <td><%= record.Guest.info %></td>
                <td><%= record.attendance_date %></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>

      <!-- Pagination Controls -->
      <nav aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center">
          <% if (page > 1) { %>
            <li class="page-item">
              <a class="page-link" href="?page=<%= page - 1 %>&limit=<%= limit %>" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
          <% } %>
          <% 
            let startPage = Math.max(1, page - 2);
            let endPage = Math.min(totalPages, page + 2);
            if (totalPages > 5) {
              if (page <= 3) {
                endPage = 5;
              } else if (page >= totalPages - 2) {
                startPage = totalPages - 4;
              }
            }
          %>
          <% for (let i = startPage; i <= endPage; i++) { %>
            <li class="page-item <%= i === page ? 'active' : '' %>">
              <a class="page-link" href="?page=<%= i %>&limit=<%= limit %>"><%= i %></a>
            </li>
          <% } %>
          <% if (page < totalPages) { %>
            <li class="page-item">
              <a class="page-link" href="?page=<%= page + 1 %>&limit=<%= limit %>" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          <% } %>
        </ul>
      </nav>

    </div>
  </div>
</div>
<%- include('../partials/footer') %>
</body>
