{% extends 'memberapp_users/layout.html' %}
{% block head %}
{% endblock %}
{% block title %}OTP{% endblock %} 
{% block content %}   
<form id="registration_form" method="POST" action="{{url_for('member.postOtp',user_id=encrypt_user_id,society_id=society_id,society_key=society_key)}}">
    <h3 class="text-center"> <b>Authenticate yourself</b>  </h3>
    {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}       
    <div class="alert alert-success text-center text-wrap alert-dismissible" id="successMessage" >
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <h4><img src="/static/images/right.png" alt="right" height="21" width="21">{{ mesg }}</h4>
    </div>    
    {% endfor %}
    {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
    <div class="alert alert-danger text-center text-wrap alert-dismissible" id="successMessage" >
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <h4><img src="/static/images/wrong_img.png" alt="wrong" height="21" width="21">{{ mesg }}</h4>
    </div>
    {% endfor %}
    <div class="row">
        <div class="col-md-4 offset-md-4 col-sm-10 offset-sm-1 box p-1 form-container">
            <div class="row">
                <div class="col-md-12">
                    <div id="app">
                        <h4 style="text-align:center;color: rgb(4, 4, 73);">Key in your OTP <br> </h4>
                        <div id="otp" class="inputs d-flex flex-row justify-content-center mt-2"> 
                            <input class="m-2 text-center form-control rounded inputs" type="text" name="input1" id="input1" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" value="" maxlength="1" required /> 
                            <input class="m-2 text-center form-control rounded inputs"  type="text" id="input2" name="input2" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" value="" maxlength="1" required/> 
                            <input class="m-2 text-center form-control rounded inputs"  type="text" id="input3" name="input3" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" value="" maxlength="1" required/> 
                            <input class="m-2 text-center form-control rounded inputs"  type="text" id="input4" name="input4" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" value="" minlength="1" maxlength="1" required/> 
                        </div>
                    </div>   
                </div>
            </div>   
            <br>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <input type="submit" class="btn btn-primary px-4 validate submit_btn btn-lg submit_btn form-control center" id="submit_btn" name="submit_btn" value="Proceed">
                    </div>
                </div>
            </div>   
            <div class="row">   
                <div class="col-md-12" align="center">
                    <div class="form-group" id="div"> 
                        <span>OTP not received?</span>
                        <a  href="{{url_for('member.resendOTP',user_id=encrypt_user_id,society_id=society_id,society_key=society_key)}}"  style="align-items: right;color: red;" id="resend">Click here to send again</a> 
                    </div>  
                </div>
            </div>
            <div class="row">   
                <div class="col-md-12" align="center">
                    <div class="form-group" id="div"> 
                        <span>Change login email id ?</span>
                        <a  href="{{url_for('member.getLogin',society_id=society_id,society_key=society_key)}}"  style="align-items: right;color: red;" id="resend">Click here</a> 
                    </div>  
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 text-center">
                    <img src="{{Helper.getSoceityAssets(society_id,'society_otp_image')}}" class="img-fluid">
                </div>
            </div>
    </div>		
    </div>
</form>

{% endblock %}
{% block script %}
<script type="text/javascript">
 
    $(".inputs").keyup(function () {
        if (this.value.length == this.maxLength) {
        $(this).next('.inputs').focus();
        }
    });

    $(".inputs").keydown(function () {
        if (event.key==="Backspace" ) {
        $(this).previous('.inputs').focus();
        }
    });

    document.addEventListener("DOMContentLoaded", function(event) {

    function OTPInput() {
    const inputs = document.querySelectorAll('#otp > *[id]');
    for (let i = 0; i < inputs.length; i++) { inputs[i].addEventListener('keydown', function(event) { if (event.key==="Backspace" ) { inputs[i].value='' ; if (i !==0) inputs[i - 1].focus(); } else { if (i===inputs.length - 1 && inputs[i].value !=='' ) { return true; } else if (event.keyCode> 47 && event.keyCode < 58) { inputs[i].value=event.key; if (i !==inputs.length - 1) inputs[i + 1].focus(); event.preventDefault(); } else if (event.keyCode> 48 && event.keyCode < 57) { inputs[i].value=String.fromCharCode(event.keyCode); if (i !==inputs.length - 1) inputs[i + 1].focus(); event.preventDefault(); } } }); } } OTPInput(); });
</script>  

<!-- <script type="text/javascript">window.setTimeout("document.getElementById('successMessage').style.display='none';", 6000); </script> -->
{% endblock %}