{% extends 'base.html.twig' %}

{% block title %}{{ page_title }}{% endblock %}

{% block body %}
  <section class="proscreen-onboarding">
    <div class="container">
      <div class="proscreen-onboarding__left">
        <div>
          <img src="{{ asset('images/proscore-logo.svg') }}" alt="ProScore Logo">
        </div>
        <div class="d-flex flex-column gap-64px">
          <article>
            <header class="d-flex flex-column gap-8px">
              <p class="body-text proscreen-black-4-text mb-0">Your ProScreen account is ready</p>
              <h1>Set your password to get started</h1>
            </header>
          </article>
          <form class="d-flex flex-column gap-32px" id="createPasswordForm" action="{{ path('app_create_password') }}" method="POST">
            <input type="hidden" name="signup_token" value="{{ signup_token }}">
            <div class="form-group">
              <label for="password" class="body-text">
                <span class="fw-bold">Password</span>
                <span class="proscreen-black-3-text">(required)</span>
              </label>
              <input
                type="password"
                name="password"
                class="form-control"
                placeholder="Enter password"
                id="password"
              />
              <small class="body-text-xsmall proscreen-bunting-text">Passwords should be at least 10
                characters long. </small>
            </div>
            <div class="form-group">
              <label for="confirmPassword" class="body-text">
                <span class="fw-bold">Confirm Password </span>
                <span class="proscreen-black-3-text">(required)</span>
              </label>
              <input type="password" class="form-control" id="confirmPassword"
                     placeholder="Confirm password"/>
              <p class="body-text-small fw-bold mb-0 proscreen-red-1-text d-none" id="passwordError">
                Passwords do not match.</p>
            </div>
            <div class="form-check form-switch">
              <label class="form-check-label body-text" for="passwordSwitch">Show password</label>
              <input class="form-check-input" type="checkbox" role="switch" id="passwordSwitch"
                     aria-label="Toggle password visibility"/>
            </div>
            <button type="submit" class="ps-button primary button-text align-self-start">
              <span>Continue</span>
              <span>
                <img src="{{ asset('images/button-arrow.svg') }}" alt="Button arrow">
              </span>
            </button>
          </form>
        </div>
      </div>
    </div>
    <div class="proscreen-onboarding__right"></div>
  </section>


  <!-- Bootstrap JS Bundle with Popper (required for tooltips) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      // Initialize all tooltips on the page
      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
      tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
      });
    });
  </script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      // Get DOM elements with null checks
      const passwordInput = document.getElementById("password");
      const confirmPasswordInput = document.getElementById("confirmPassword");
      const passwordSwitch = document.getElementById("passwordSwitch");
      const passwordError = document.getElementById("passwordError");
      const form = document.querySelector("#createPasswordForm");

      // Only proceed if all required elements exist
      if (!passwordInput || !confirmPasswordInput || !passwordSwitch || !form) {
        return; // Exit if any essential element is missing
      }

      // Toggle password visibility (only if switch exists)
      if (passwordSwitch) {
        passwordSwitch.addEventListener("change", function () {
          const type = this.checked ? "text" : "password";
          if (passwordInput) passwordInput.type = type;
          if (confirmPasswordInput) confirmPasswordInput.type = type;
        });
      }

      // Validate password match
      function validatePassword() {
        if (!passwordInput || !confirmPasswordInput || !passwordError) return false;

        if (passwordInput.value !== confirmPasswordInput.value) {
          passwordError.classList.remove("d-none");
          return false;
        } else {
          passwordError.classList.add("d-none");
          return true;
        }
      }

      // Add event listeners for real-time validation (only if elements exist)
      if (confirmPasswordInput) {
        confirmPasswordInput.addEventListener("input", validatePassword);
      }
      if (passwordInput) {
        passwordInput.addEventListener("input", validatePassword);
      }

      // Form submission handler (only if form exists)
      if (form) {
        form.addEventListener("submit", function (e) {
          if (!validatePassword()) {
            e.preventDefault();
            // Additional validation can be added here
            if (passwordInput && passwordInput.value.length < 10) {
              alert("Password must be at least 10 characters long");
            }
          }
        });
      }
    });
  </script>
{% endblock %}