<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Editing <%= username %> - LiteLib</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="/css/style.css">

    <!-- Favicon Information -->
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="194x194" href="/favicon/favicon-194x194.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
    <link rel="manifest" href="/favicon/site.webmanifest">
    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#805a3f">
    <link rel="shortcut icon" href="/favicon/favicon.ico">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/favicon/mstile-144x144.png">
    <meta name="msapplication-config" content="/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
  </head>
  <body>
    <h1 class="mt-5 mb-5" style="text-align:center;"><i class="bi bi-pencil-fill"></i> Edit User Information</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <div class="container-sm">
        <form action="/edit-users" method="post" id="userForm">
            <label for="username" style="text-align: left;">Username:</label>
            <input id="newUsername" name="newUsername" class="form-control form-control-lg mb-5" value="<%= username %>" autocomplete="newUsername" required>
            <label for="name" style="text-align: left;">Name:</label>
            <input id="name" name="name" class="form-control form-control-lg mb-5" value="<%= name %>" autocomplete="name" required>

            <label for="role" style="text-align: left;">Role:</label> 
            <div class="mb-3">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="role" id="basicRole" value="basic" checked required>
                <label class="form-check-label" for="userRole">
                  Basic
                  <i class="bi bi-question-circle-fill text-primary" data-bs-toggle="tooltip" title="Basic Users can only checkout and return books."></i>
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="role" id="advancedRole" value="advanced">
                <label class="form-check-label" for="advancedRole">
                  Advanced 
                  <i class="bi bi-question-circle-fill text-primary" data-bs-toggle="tooltip" title="Advanced Users can change their usernames, names, and passwords."></i>
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="role" id="adminRole" value="admin">
                <label class="form-check-label" for="adminRole">
                  Admin
                  <i class="bi bi-question-circle-fill text-primary" data-bs-toggle="tooltip" title="Admin Users have complete control of the database."></i>
                </label>
              </div>
            </div>

            <label for="newPassword" style="text-align: left;">New Password:</label>
            <input id="newPassword" name="newPassword" class="form-control form-control-lg mb-5" type="newPassword" autocomplete="newPassword">
            <!-- hidden input field to receive old username -->
            <input type="hidden" id="username" name="username" value="<%= username %>">
            <!-- hidden input to know if delete user -->
            <input type="hidden" name="delete" id="delete" value="false">
        
            <!-- Buttons -->
            <div class="container" style="padding: 0px;">
              <div class="d-flex justify-content-between align-items-center">
                <a href="/" class="btn btn-primary btn-lg"><i class="bi bi-house-door-fill"></i> Home</a>
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                  <button type="button" class="btn btn-danger btn-lg" onclick="submitDeleteForm()"><i class="bi bi-trash-fill"></i> Delete User</button>
                  <a href="/users" class="btn btn-secondary btn-lg"><i class="bi bi-x-circle-fill"></i> Cancel</a>
                  <button type="submit" class="btn btn-primary btn-lg"><i class="bi bi-floppy2-fill"></i> Save</button>
                </div>
              </div>
          </div>

            <!-- Delete Confirmation Modal -->
            <div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                  <div class="modal-content">
                      <div class="modal-header">
                          <h5 class="modal-title" id="deleteConfirmationModalLabel">Confirmation</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 <strong>delete</strong> this user? This is a <strong>permanent</strong> action.
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-secondary btn-lg" data-bs-dismiss="modal"><i class="bi bi-x-circle-fill"></i> Cancel</button>
                          <button type="button" class="btn btn-danger btn-lg" id="confirmDeleteButton"><i class="bi bi-trash-fill"></i> Delete</button>
                      </div>
                  </div>
              </div>
            </div>

        </form>

        <script>
          // Function to parse URL parameters
          function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
          };

          // Function to auto-select the correct radio button based on URL parameter
          function autoSelectRole() {
            var role = getUrlParameter('role');
            if (role) {
              document.getElementById(role.toLowerCase() + 'Role').checked = true;
            }
          }

          // Call the function when the page loads
          window.onload = autoSelectRole;
          
          // Function to user confirmation modal and delete user
          function submitDeleteForm() {
              // Show confirmation modal
              $('#deleteConfirmationModal').modal('show');
      
              // Set up event listener for delete button in modal
              $('#confirmDeleteButton').on('click', function() {
                  // Perform deletion
                  document.getElementById("delete").value = "true";
                  document.getElementById("userForm").submit();
      
                  // Hide modal and remove event listener to prevent memory leaks
                  $('#deleteConfirmationModal').modal('hide');
                  $('#confirmDeleteButton').off('click');
              });
          }
      </script>
        
    </div>  

  </body>
</html> 