{{define "content"}}
<div class="app-shell">
  <main class="page active">
    <div class="card card-app">
      <div class="card-body">
        <h1 class="h3 mb-3 font-weight-normal">Add User</h1>
        <div class="form-group mb-3">
          <label for="firstname" class="form-label">First Name</label>
          <input type="hidden" name="csrf_token" value="{{.CSRF}}">
          <input type="text" class="form-control" id="firstname" name="firstname" placeholder="Enter first name"
            required>
        </div>
        <div class="form-group mb-3">
          <label for="lastname" class="form-label">Last Name</label>
          <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Enter last name" required>
        </div>
        <div class="form-group mb-3">
          <label for="email" class="form-label">Email</label>
          <input type="email" class="form-control" id="email" name="email" placeholder="Enter email address" required>
        </div>
        <div class="form-group mb-3">
          <label for="password" class="form-label">Password</label>
          <input type="text" class="form-control" id="password" name="password" placeholder="Enter password" required>
          <i> Must be 8-12 characters with at least one uppercase letter, one lowercase letter, one number, and one special character (!@#$%^&*)</i>
        </div>
        <div class="form-group mb-3">
          <label for="role" class="form-label">Role</label>
          <select class="form-select" id="role" name="role" required>
            <option value="">Select role</option>
            <option value="SA">Super Admin</option>
            <option value="Admin">Admin</option>
            <option value="User">User</option>
            </select>
        </div>
        <p class="text-center text-danger" id="pError"></p>
        <p><button class="btn btn-lg btn-primary btn-block" type="submit" id="btnCreateUser">Create User</button></p>
      </div>
  </main>
</div>

<div class="modal fade" id="SuccessModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-4 border-0 shadow">
      <div class="modal-body p-4">
        <div class="d-flex align-items-start justify-content-between gap-3">
          <div>
            <div class="fw-bold fs-5">An account created ✅</div>
            <p id="pCreated"></p>
          </div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {

  var btnCreateUser = document.getElementById('btnCreateUser');
  var pError = document.getElementById('pError');
  var successModal = new bootstrap.Modal(document.getElementById('SuccessModal'));
  var pCreated = document.getElementById('pCreated');

  if (btnCreateUser) {
    btnCreateUser.addEventListener('click', function () {

      pError.innerHTML = "";
      pCreated.innerHTML = "";

      fetch("/admin/add-user", {
        method: "POST",
        credentials: "same-origin",
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json",
          "X-Requested-With": "XMLHttpRequest",
          "X-CSRF-Token": "{{.CSRF}}"
        },
        body: JSON.stringify({
          firstname: document.getElementById("firstname").value,
          lastname: document.getElementById("lastname").value,
          email: document.getElementById("email").value,
          password: document.getElementById("password").value,
          role: document.getElementById("role").value
        }),
      })
      .then(response => response.json())
      .then(data => {
        console.log("Response from server:", data);
        if (data.code == "fail") {
          pError.innerHTML = data.errors;
        }else if (data.code == "success") {
          pCreated.innerHTML = `Account created successfully`;
          successModal.show();
        }
      })
      .catch((error) => {
        console.error("Error sending notification:", error);
      });

    });
  } else {
    console.log("btnCreateUser not found in DOM");
  }

  successModal._element.addEventListener('hidden.bs.modal', function () {
    window.location.reload();
  });

});
</script>


{{end}}