{% extends 'store_layout.html' %}
{% load static %}
{% block content %}
<title>Beni | Forget Otp</title>
<div class="login-form-bg h-100">
    <div class="login-img-cnt">
       <img src="{% static 'store/images/bglogin.png' %}">
   </div>
   <div class="container h-100">
       <div class="row justify-content-center h-100">
           <div class="col-xl-6">
               <div class="form-input-content">
                   <div class="card login-form  mb-0">
                       <div class="card-body pt-4">
                           <div class="loginlogo text-center">
                               <a class="text-center" href="/store-login"> 
                                   <img src="{% static 'store/images/beniLogo.png' %}">
                               </a>
                           </div>

                          <form class="loginform w-100 pt-4" action='/forget-otp-verify' id="store_forget_password" method="POST">
                            {% csrf_token %}   
                            <h3  class="fs-32 text-center"><strong>Mobile Number </strong> Verification</h3>
                               <p class="text-center">Please Enter  OTP sent to your mobile number.</p>
                                <div style="display: flex; justify-content: center;" class="verify-otp">
                                       <div style="display: flex; align-items: center;">
                                        <input aria-label="Please enter verification code. Digit 1" autocomplete="off"
                                        class="authInput" type="tel" maxlength="1" name="otp_one" id="n0" value="" autofocus data-next="1"
                                        style="width: 1em; text-align: center;">                                       </div>
                                       <div style="display: flex; align-items: center;">
                                        <input aria-label="Digit 2" autocomplete="off" name="otp_two" id="n1" class="authInput" type="tel" maxlength="1"
                                        value="" data-next="2" style="width: 1em; text-align: center;">                                       </div>
                                       <div style="display: flex; align-items: center;">
                                        <input aria-label="Digit 3" autocomplete="off" class="authInput" name="otp_three" id="n2" type="tel" maxlength="1"
                                        value="" data-next="3" style="width: 1em; text-align: center;">                                       </div>
                                       <div style="display: flex; align-items: center;">
                                        <input aria-label="Digit 4" autocomplete="off" class="authInput" name="otp_four" id="n3" type="tel" maxlength="1"
                                        value="" style="width: 1em; text-align: center;">                                       </div>
                                   </div>
                                  <div class="form-forgot pt-4">
                                   <p class="forgt-left yellow"> <a class="yellow forgot-anc f-15" href="/resend-forget-otp">Resend Code?  </a></p>
                                 </div>
                                   <div class="login-btn text-center pt-4">
                                   <button class="btn login-form__btn submit w-100" id="otpsubmit"  disabled>Continue</button>   
                                  </div>
                           </form>
                           <p class="mt-5 login-form__footer text-center"><a href="/store-login" class="text-primary underline" >Back to Login</a></p>
                            
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<script>
    $('#n0, #n1, #n2, #n3').bind('keyup', function() {
        if(allFilled()) $('#otpsubmit').removeAttr('disabled');
    });
    
    function allFilled() {
        var filled = true;
        $('body input').each(function() {
            if($(this).val() == '') filled = false;
        });
        return filled;
    }
    
    $('.authInput').keyup(function(e) {
        if (this.value.length === this.maxLength) {
            let next = $(this).data('next');
            $('#n' + next).focus();
        }
    });


</script>

{% endblock %}