{% extends "esign/base_login.html" %}
{% block content %}

<div class="d-flex justify-content-center align-items-center min-vh-100">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
        <div class="login-wrapper">
          <div class="row">
            <div class="col-sm-12 text-center mb-3 mt-3">
              <h3 class="">Let's Create Your EazeeSign Account</h3>
              <p class="text-muted">Let’s get the basics. Enter your info below.</p>
            </div>
          </div>

          <form method="post" id="signupForm">
            {% csrf_token %}
            <div class="card p-4 pb-2 shadow">
              <div class="row">
                <div class="col-sm-12 col-md-6">
                  <div class="mb-3">
                    <label class="form-label" for="username">First Name<span style="color: red;"> *</span></label>
                    <input type="text" name="username" class="form-control" placeholder="First Name" required
                      value="{{ request.POST.username|default_if_none:'' }}">
                  </div>
                </div>
                <div class="col-sm-12 col-md-6">
                  <div class="mb-3">
                    <label class="form-label" for="userLastName">Last Name<span style="color: red;"> *</span></label>
                    <input type="text" name="userLastName" class="form-control" placeholder="Last Name" required
                      value="{{ request.POST.userLastName|default_if_none:'' }}">
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-sm-12 col-md-6">
                  <div class="mb-3">
                    <label class="form-label" for="userPhone">Phone<span style="color: red;"> *</span></label>
                    <input type="text" name="userPhone" class="form-control" placeholder="Phone Number" required
                      value="{{ request.POST.userPhone|default_if_none:'' }}">
                  </div>
                </div>
                <div class="col-sm-12 col-md-6">
                  <div class="mb-3">
                    <label class="form-label" for="userEmail">Email<span style="color: red;"> *</span></label>
                    <input type="email" name="userEmail" class="form-control" placeholder="Email" required
                      value="{{ request.POST.userEmail|default_if_none:'' }}">

                      <div id="userEmailHelp" class="form-text small text-muted">
                      <i class="fas fa-info-circle me-1"></i> e.g.: john.dow@example.com
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-sm-12 col-md-6">
                  <div class="mb-3 position-relative">
                    <label class="form-label" for="userPassword">Password <span style="color: red;">*</span></label>
                    <div class="input-group">
                      <input type="password" name="userPassword" id="userPassword" class="form-control" placeholder="Password" required>
                      <button type="button" class="btn btn-outline-secondary" id="togglePassword">
                        <i class="fas fa-eye"></i>
                      </button>
                    </div>
                    <div id="passwordHelp" class="form-text small text-muted">
                      <i class="fas fa-info-circle me-1"></i> Use a strong password (A–Z, a–z, 0–9, @#).
                    </div>
                  </div>
                </div>
                <div class="col-sm-12 col-md-6">
                  <div class="mb-3 position-relative">
                    <label class="form-label" for="confirmPasswordHelp">Confirm Password <span style="color: red;">*</span></label>
                    <div class="input-group">
                      <input type="password" name="confirmPasswordHelp" id="confirmPasswordHelp" class="form-control" placeholder="Confirm Password" required>
                      <button type="button" class="btn btn-outline-secondary" id="toggleConfirmPassword">
                        <i class="fas fa-eye"></i>
                      </button>
                    </div>
                    <div id="confirmError" class="form-text small text-danger" style="display: none;">
                      <i class="fas fa-exclamation-circle me-1"></i> Passwords do not match.
                    </div>
                  </div>
                </div>
              </div>
                                
                </div>
                <div class="row">
                <div class="col-sm-8 offset-sm-2">
                  <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="userConsentCheckBox">
                    <label class="form-check-label mb-3" for="userConsentCheckBox">I agree to receive marketing communications from EazeeSign and acknowledge that I can opt out at any time by submitting contact us form.</label>

                    <small>By clicking "Sign up," you agree to EazeeSign's <a href="/privacy_policy" class="d-inline-block px-1">Privacy Policy</a> and <a href="/terms_of_service" class="d-inline-block">Terms of Service</a>.</small>
                  </div>
                </div>
              </div>
            <div class="text-center">
              <button type="submit" class="btn btn-primary px-5">Sign up</button>
              <p class="mt-3 text-center">
                Already have an account? <a href="{% url 'user_login' %}">Login</a>
              </p>
            </div>
          </form>

          <script>
            const togglePassword = document.querySelector("#togglePassword");
            const password = document.querySelector("#userPassword");
            const toggleConfirmPassword = document.querySelector("#toggleConfirmPassword");
            const confirmPassword = document.querySelector("#confirmPasswordHelp");
            const passwordHelp = document.getElementById("passwordHelp");
            const confirmError = document.getElementById("confirmError");
            const signupForm = document.getElementById("signupForm");

            // Toggle show/hide
            togglePassword.addEventListener("click", function () {
              const type = password.getAttribute("type") === "password" ? "text" : "password";
              password.setAttribute("type", type);
              this.querySelector("i").classList.toggle("fa-eye");
              this.querySelector("i").classList.toggle("fa-eye-slash");
            });

            toggleConfirmPassword.addEventListener("click", function () {
              const type = confirmPassword.getAttribute("type") === "password" ? "text" : "password";
              confirmPassword.setAttribute("type", type);
              this.querySelector("i").classList.toggle("fa-eye");
              this.querySelector("i").classList.toggle("fa-eye-slash");
            });

            // Password validation regex
            function validatePasswordStrength(pwd) {
              const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#])[A-Za-z\d@#]{8,}$/;
              return strongRegex.test(pwd);
            }

            // Real-time validation
            password.addEventListener("input", () => {
              if (!validatePasswordStrength(password.value)) {
                passwordHelp.innerHTML = '<i class="fas fa-exclamation-circle me-1"></i> Password must include upper, lower, number, symbol & be ≥8 characters.';
                passwordHelp.classList.add("text-danger");
                passwordHelp.classList.remove("text-success");
              } else {
                passwordHelp.innerHTML = '<i class="fas fa-check-circle me-1"></i> Strong password.';
                passwordHelp.classList.remove("text-danger");
                passwordHelp.classList.add("text-success");
              }
            });

            confirmPassword.addEventListener("input", () => {
              confirmError.style.display = confirmPassword.value !== password.value ? "block" : "none";
            });

            // ✅ Final form validation before submit
            signupForm.addEventListener("submit", (e) => {
              let valid = true;

              if (!validatePasswordStrength(password.value)) {
                valid = false;
                password.focus();
                alert("Please enter a strong password (must include upper, lower, number, symbol & be ≥8 characters).");
              } else if (confirmPassword.value !== password.value) {
                valid = false;
                confirmPassword.focus();
                alert("Passwords do not match. Please recheck.");
              }

              if (!valid) e.preventDefault(); // stop submission
            });
          </script>

        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}