{% 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="msgg  text-success fw-semibold d-block text-center mb-2 ">{{ message }}</small>
              {% elif message.tags == 'error'  %}
                <small  id="msgg" class="msgg  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 mb-3">     
        <div class="d-flex justify-content-between">
          <div class="login-content-box">
            <h3 class="">Get code from your email</h3>
            <p class="text-muted">We want to make sure it's really you. In order to further verify your identity, enter the verification code that was sent to your email <strong>{{masked_email}}</strong></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-message-text fs-26 px-1"></i>
          </div>
        </div>
      </div>
    </div>
    
    <div class="mb-3">
        <label class="form-label">Verification Code <span class="text-danger">*</span></label>
<input type="text" name="otp" id="loginOtpEmail" class="form-control" maxlength="6" placeholder="123456" required>
      </div>
<input name="email" value="{{masked_email}}" type="hidden" >
<button type="button" class="btn btn-ghost" id="resendOtpBtn" data-email="{{ masked_email }}">Resend Code</button>
<span id="resendSpinner" class="d-none">
    <i class="fa fa-spinner fa-spin"></i> Sending...
</span>
<div id="resendMsg" class="text-success mt-2"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#resendOtpBtn').click(function() {
    const email = $(this).data('email');
    const spinner = $('#resendSpinner');
    const msgBox = $('#resendMsg');

    if (!email) {
        msgBox.text('Email not found.');
        return;
    }

    // Show spinner and disable button
    spinner.removeClass('d-none');
    $(this).prop('disabled', true);
    msgBox.text('');
     $('.msgg').addClass('d-none');

    $.ajax({
        url: "{% url 'forgot_password' %}",
        type: "GET",
        data: { email: email },
        success: function(response) {
            spinner.addClass('d-none'); // hide spinner
            $('#resendOtpBtn').prop('disabled', false); // enable button
            $("#msgg").hide();
            msgBox.text('OTP resent successfully! Please check your email.');
        },
        error: function(xhr, status, error) {
            spinner.addClass('d-none');
            $('#resendOtpBtn').prop('disabled', false);
            msgBox.text('Error resending OTP. Please try again.');
        }
    });
});
</script>


    <!-- Login Button -->
    <div class="mt-3">
      <button type="submit"  value="1" class="btn btn-primary w-100 mb-2"> 
        Verify
      </button> 
      
    </div>

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

  </div>

</form>

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


{% endblock %}