<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>Sign up</title>
    <link rel="stylesheet" href="css/signup.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/checkout/">
    <link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />


    <!-- Custom styles for this template -->
    <link href="form-validation.css" rel="stylesheet">
  </head>
  <body class="bg-light">

      <div class="container">
        <main>
          <div class="py-5 text-center">
            <!-- <img class="d-block mx-auto mb-4" src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> -->
            <h3 class="h3 mb-3 mb-0"><a href="/" class="navbar-brand">DigitalLibrary</a></h3><br>
            <h2>Registration</h2>
            <p class="lead">Enter your credentials to create an account, and wait for us to accept your request.<br>  This process may take a few hours.</p>
          </div>

          <div class="row g-5">
            <div class="col-md-12 col-lg-12">
              <h4 class="mb-3">Fill the form</h4>
              <form class="needs-validation" name="signupForm"  method="post" novalidate  action="signup">
                <div class="row g-3">

                  <!-- ==============================================================================First name===================================================================================== -->
                  <div class="col-sm-6">
                    <label for="firstName" class="form-label">First name</label>
                    <input type="text" class="form-control" id="firstName" name="f_name" placeholder="" value="" required>
                    <div class="invalid-feedback">
                      Valid first name is required.
                    </div>
                  </div>

                  <!-- ==============================================================================First Name===================================================================================== -->

                  <!-- ==============================================================================Last Name===================================================================================== -->

                  <div class="col-sm-6">
                    <label for="lastName" class="form-label">Last name</label>
                    <input type="text" class="form-control" id="lastName" name="l_name" placeholder="" value="" required>
                    <div class="invalid-feedback">
                      Valid last name is required.
                    </div>
                  </div>

                  <!-- ==============================================================================Last Name===================================================================================== -->

      <!-- ==============================================================================Username===================================================================================== -->

                  <div class="col-12">
                    <label for="username" class="form-label">Username</label>
                    <div class="input-group has-validation">
                      <span class="input-group-text">@</span>
                      <input type="text" class="form-control" id="username" name="username" placeholder="Username" required>
                    <div class="invalid-feedback">
                        Your username is required.
                      </div>
                    </div>
                  </div>


                  <!-- ==============================================================================Username===================================================================================== -->


                  <!-- ==============================================================================Email===================================================================================== -->

                  <div class="col-12">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="inputEmail" name="email" placeholder="you@example.com" required>
                    <div class="invalid-feedback">
                      Please enter a valid email address for shipping updates.
                    </div>
                  </div>

      <!-- ==============================================================================Password===================================================================================== -->


                  <div class="col-12">
                    <label for="email" class="form-label">Password</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="Kr45%d#8" required>
                    <div class="invalid-feedback">
                      Please enter a valid password.
                    </div>
                  </div>
                  <div class="col-12">
                    <label for="email" class="form-label">Renter password</label>
                    <input type="password" class="form-control"  formControlName="email" id="passwordV" name="passwordV" placeholder="Kr45%d#8" required>
                    <div class="invalid-feedback" id="checkPassword">
                      Please enter a valid password.
                    </div>
                  </div>

                  <!-- ==============================================================================Password===================================================================================== -->



                <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="save-info" required>
                  <label class="form-check-label" for="save-info">I agree all statements in <a href="#!">Terms of service</a></label>
                </div>
                <button class="w-100 btn btn-primary btn-lg" onclick="submitForm();" name="submit" type="submit">Continue to checkout</button>
              </form>
              <label class="form-check-label" for="save-info"><p class="text-center text-muted mt-5 mb-0">Have already an account? <a href="login"
                            class=""><u>Login here</u></a></p></label>
            </div>
          </div>

        </main>
        <!-- Your other HTML content -->
<!-- Button to trigger the modal -->
<button id="errorModalBtn" type="button" class="btn btn-primary d-none" data-bs-toggle="modal" data-bs-target="#errorModal">
  Launch error modal
</button>

<!-- Error Modal -->
<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="errorModalLabel">Error</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-warning" role="alert">
          <p id="errorMessage"><%= errorMessage %></p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Your other HTML content -->

        <!-- <div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <h5 class="modal-title" id="errorModalLabel">Error</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>
                  <div class="modal-body">
                      <p id="errorMessage"></p>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  </div>
              </div>
          </div>
      </div> -->

        <footer class="text-center mt-auto text-black-50" style="padding-top: 5%;">
            <a
            class="btn btn-link btn-floating btn-lg text-dark m-1"
            href="#!"
            role="button"
            data-mdb-ripple-color="dark"
            ><i class="fab fa-facebook-f"></i
          ></a>

          <!-- Twitter -->
          <a
            class="btn btn-link btn-floating btn-lg text-dark m-1"
            href="#!"
            role="button"
            data-mdb-ripple-color="dark"
            ><i class="fab fa-twitter"></i
          ></a>
            <a
              class="btn btn-link btn-floating btn-lg text-dark m-1"
              href="#!"
              role="button"
              data-mdb-ripple-color="dark"
              ><i class="fab fa-instagram"></i
            ></a>
            <a
                class="btn btn-link btn-floating btn-lg text-dark m-1"
                href="https://github.com/MrBrown23/"
                role="button"
                data-mdb-ripple-color="dark"
                ><i class="fa-brands fa-github"></i>
              </a>
          <p>Copyright &copy; 2024 <a href="/" class="text-black">DigitalLibrary</a>.</p>
        </footer>
      </div>


          <!-- ==================================================================================Javascript =============================================================================-->
          <script src="/docs/5.2/dist/js/bootstrap.bundle.min.js"></script>
          <script>
            const errorMessage = '<%= errorMessage %>'; // Use the errorMessage variable passed from the server-side code
        
            document.addEventListener('DOMContentLoaded', () => {
                if (errorMessage && errorMessage.trim() !== '') {
                    const errorModalBtn = document.getElementById('errorModalBtn');
                    errorModalBtn.click();
                }
            });
        </script>
            <script src="js/form-validation.js"></script>

            <!-- ==================================================================================Javascript =============================================================================-->
  </body>
</html>