{% 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">
              <h1>Forgot password?</h1>
            </header>
          </article>
          <form class="d-flex flex-column gap-32px" id="forgotPassword" action="{{ path('app_forgot_password') }}" method="POST">
            <div class="form-group">
              <label for="email" class="body-text">
                <span class="fw-bold">Email</span>
                <span class="proscreen-black-3-text">(required)</span>
              </label>
              <input type="email" class="form-control" placeholder="Enter your email" id="email" name="email" required/>
            </div>
            <div class="d-flex gap-32px align-items-center">
              <button type="submit" class="ps-button primary button-text align-self-start">
                <span>Reset password</span>
                <span>
                    <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path
                        d="M11.5391 6.37891L7.60156 10.3164L7 10.9453L5.74219 9.6875L6.37109 9.08594L8.80469 6.625H0.875H0V4.875H0.875H8.80469L6.37109 2.44141L5.74219 1.8125L7 0.582031L7.60156 1.21094L11.5391 5.14844L12.168 5.75L11.5391 6.37891Z"
                        fill="white"></path>
                    </svg>
                  </span>
              </button>
              <p class="body-text-small fw-bold mb-0 d-flex gap-2" id="invalidError">
                  <span>
                    <img src="{{ asset('images/button-arrow.svg') }}" alt="Button arrow">
                  </span>
                {%  if email_sent %}
                  <span>We've sent a reset link to your email. Please check your inbox.</span>
                {% endif %}
              </p>
            </div>
            <div class="form-group">
              <a href="{{ path('app_admin_index') }}" class="align-self-end">Back to login</a>
            </div>
          </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 %}