<%- 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">Manage Users</h1>

      <!-- Flash Messages -->
      <% if (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.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>
      <% } %>

      <!-- Button to Open the Modal -->
      <div class="d-flex justify-content-start mb-4">
        <button type="button" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#addUserModal">
          Add User
        </button>
      </div>

      <!-- The Modal -->
      <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="addUserModalLabel">Add User</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form action="/admin/users/add" method="POST">
                <div class="mb-3">
                  <label for="username" class="form-label">Username</label>
                  <input type="text" class="form-control" id="username" name="username" required>
                </div>
                <div class="mb-3">
                  <label for="password" class="form-label">Password</label>
                  <input type="password" class="form-control" id="password" name="password" required>
                </div>
                <div class="mb-3">
                  <label for="fullname" class="form-label">Full Name</label>
                  <input type="text" class="form-control" id="fullname" name="fullname" required>
                </div>
                <div class="mb-3">
                  <label for="role" class="form-label">Role</label>
                  <select class="form-control" id="role" name="role" required>
                    <option value="admin">Admin</option>
                    <option value="panitia">Panitia</option>
                  </select>
                </div>
                <button type="submit" class="btn btn-primary w-100">Add User</button>
              </form>
            </div>
          </div>
        </div>
      </div>

      <!-- User List Table -->
      <div class="table-responsive">
        <table class="table table-hover mt-4 text-center">
          <thead class="table-light">
            <tr>
              <th>Username</th>
              <th>Full Name</th>
              <th>Role</th>
              <th>Registration Date</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <% users.forEach(user => { %>
              <tr>
                <td><%= user.username %></td>
                <td><%= user.fullname %></td>
                <td><%= user.role %></td>
                <td><%= user.registration_date.toDateString() %></td>
                <td>
                  <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal" data-userid="<%= user.user_id %>">
                    Delete
                  </button>
                </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>

<!-- Confirm Delete Modal -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Delete</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete this user?
      </div>
      <div class="modal-footer">
        <form id="deleteUserForm" action="" method="POST">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-danger">Delete</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  var confirmDeleteModal = document.getElementById('confirmDeleteModal');
  confirmDeleteModal.addEventListener('show.bs.modal', function (event) {
    var button = event.relatedTarget;
    var userId = button.getAttribute('data-userid');
    var deleteForm = document.getElementById('deleteUserForm');
    deleteForm.action = '/admin/users/delete/' + userId;
  });
</script>

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