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

<div class="d-flex justify-content-center align-items-center mt-5">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12 col-md-6 offset-md-4 col-lg-4 offset-lg-4">
        <div class="login-wrapper">
          

          <!-- ✅ Success & general error messages -->
          {% if messages %}
            {% for message in messages %}
              {% if message.tags == 'success' %}
                <small  id="msgg" class="text-success fw-semibold d-block text-center mb-2">{{ message }}</small>
              {% elif message.tags == 'error'  %}
                <small  id="msgg" class="text-danger fw-semibold d-block text-center mb-2">{{ message }}</small>
              {% endif %}
            {% endfor %}
          {% endif %}
        <p id="otpStatus" class="text-center mt-2 fw-semibold small"></p>

         <form method="post" id="passwordResetForm">
  {% csrf_token %}
  
  <!-- Step 6 -->
  <div class="card p-4 shadow">
    <div class="row">
      <div class="col-sm-12">
        <div class="d-flex justify-content-between">
          <div class="login-content-box">
            <h3 class="">Password</h3>
            <p class="text-muted">Change your password. Your new password</p>
          </div>
          <div class="login-icon-box border rounded-circle ms-3 p-2 d-flex justify-content-center align-items-center">
            <i class="iconoir-password-check fs-26 px-1"></i>
          </div>
        </div>
      </div>
    </div>
    
    <ul class="ps-2 ms-1 mb-4">
      <li class="pb-1">Must be at least 8 characters long.</li>
      <li class="pb-1">Must not contain the characters >, <, or spaces.</li>
      <li class="pb-1">Must be different from your last password.</li>
    </ul>

    <div class="mb-3 position-relative" id="passwordField">
      <label class="form-label">Password <span class="text-danger">*</span></label>
      <input
        type="password"
        id="new_password"
        name="new_password"
        class="form-control"
        placeholder="Enter password"
        minlength="8"
                 pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*?&]{6,}$"

      >
      <i
        class="fa fa-eye position-absolute"
        id="togglePassword"
        style="right:15px; top:38px; cursor:pointer;"
      ></i>
    </div>

    <div class="d-flex">
     <button type="submit" class="btn btn-primary w-100 me-2">Save</button> 
     <button type="button" class="btn btn-outline-secondary w-100">Cancel</button> 
    </div>

    <!-- Error box (for JS validation) -->
    <div id="formError" class="text-danger text-center fw-semibold py-1 d-none"></div>

  </div>

</form>

        
    <script>
  const togglePassword = document.getElementById("togglePassword");
    if(togglePassword){
        togglePassword.addEventListener("click", function(){
            const password = document.getElementById("new_password");
            password.type = password.type === "password" ? "text" : "password";
             this.classList.toggle("fa-eye");
            this.classList.toggle("fa-eye-slash");
        });
    }
</script>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const loginForm = document.getElementById('loginForm');
  const emailField = document.getElementById('emailField');
  const hiddenEmail = document.getElementById('hiddenEmail');
  const otpField = document.getElementById('otpField');
  const passwordField = document.getElementById('passwordField');
  const sendOtpBtnWrapper = document.getElementById('sendOtpBtnWrapper');
  const resendOtpBtnWrapper = document.getElementById('resendOtpBtnWrapper');
  const orDivider = document.getElementById('orDivider');
  const errorBox = document.getElementById('formError');
  const passwordInput = document.getElementById('password');
  const emailInput = document.getElementById('email');
  const otpStatus = document.getElementById('otpStatus');

  // Messages from Django
  const messages = `{% if messages %}{% for m in messages %}{{ m }}{% endfor %}{% endif %}`;
  const invalidOtp = messages.includes("Invalid OTP");
  const invalidLogin = messages.includes("Invalid email or password");

  const otpSent = "{{ request.POST.send_otp|default:'' }}";

  // Show OTP field only if OTP flow and not invalid login
  if ((otpSent === "1" || invalidOtp) && !invalidLogin) {
    emailField.style.display = "none";
    passwordField.style.display = "none";
    orDivider.style.display = "none";
    sendOtpBtnWrapper.style.display = "none";
    resendOtpBtnWrapper.style.display = "block";
    otpField.style.display = "block";

    // preserve email in hidden field
    const emailVal = hiddenEmail.value || emailInput.value;
    hiddenEmail.value = emailVal;
    emailInput.value = emailVal;
  } else {
    // If login failed with invalid credentials, show all fields
    emailField.style.display = "block";
    passwordField.style.display = "block";
    orDivider.style.display = "block";
    sendOtpBtnWrapper.style.display = "block";
    otpField.style.display = "none";
    resendOtpBtnWrapper.style.display = "none";
  }

  // Form validation
  loginForm.addEventListener('submit', function(e) {

    const otp = document.getElementById('otp').value.trim();
    const password = passwordInput.value.trim();
    const submitter = e.submitter ? e.submitter.name : '';

    // Clear old error
    errorBox.classList.add('d-none');
    errorBox.textContent = '';

    if (submitter === 'login') {
      if (otpField.style.display === "block") {
        // 🔹 OTP mode active
        if (otp.length === 0) {
          e.preventDefault();
          showOtpError("Please enter the OTP.");
        } else if (otp.length !== 6) {
          e.preventDefault();
          showOtpError("OTP must be 6 digits.");
        } else {
          passwordInput.value = ""; // ignore password if OTP flow
        }
      } else if (!password) {
        // 🔹 Password login mode
        e.preventDefault();
        errorBox.textContent = "Please enter your password or send OTP.";
        errorBox.classList.remove('d-none');
      }
    }
  });

  function showOtpError(message) {
    let errorMsg = otpField.querySelector(".otp-error-msg");
    if (!errorMsg) {
      errorMsg = document.createElement("small");
      errorMsg.className = "text-danger fw-semibold d-block mt-1 otp-error-msg";
      otpField.appendChild(errorMsg);
    }
    errorMsg.textContent = message;
  }

  // Toggle password visibility
  // Toggle password visibility
  document.getElementById('togglePassword').addEventListener('click', function() {
      const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
      passwordInput.setAttribute('type', type);

      // Toggle icons correctly
      this.classList.toggle('fa-eye');
      this.classList.toggle('fa-eye-slash');
  });


  // AJAX Resend OTP
  const resendOtpBtn = document.getElementById('resendOtpBtn');
  resendOtpBtn?.addEventListener('click', function() {
    const email = hiddenEmail.value.trim() || emailInput.value.trim();
    if (!email) {
      otpStatus.textContent = "Email is missing.";
      otpStatus.classList.add("text-danger");
      return;
    }

    resendOtpBtn.disabled = true;
    otpStatus.textContent = "Resending OTP...";
    otpStatus.classList.remove("text-danger", "text-success");
    otpStatus.classList.add("text-info");
    document.getElementById("msgg")?.classList.add("d-none");

    fetch("{% url 'resend_otp' %}", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-CSRFToken": "{{ csrf_token }}",
      },
      body: new URLSearchParams({ email: email })
    })
    .then(res => res.json())
    .then(data => {
      resendOtpBtn.disabled = false;
      if (data.success) {
        otpStatus.textContent = `OTP sent to ${email}. ${data.otp} Please check your inbox.`;
        otpStatus.classList.remove("text-danger", "text-info");
        otpStatus.classList.add("text-success");
      } else {
        otpStatus.textContent = data.message;
        otpStatus.classList.remove("text-success", "text-info");
        otpStatus.classList.add("text-danger");
      }
    })
    .catch(() => {
      resendOtpBtn.disabled = false;
      otpStatus.textContent = "Something went wrong!";
      otpStatus.classList.remove("text-success", "text-info");
      otpStatus.classList.add("text-danger");
    });
  });
});
</script>


{% endblock %}