{% extends "users/layout.html" %}
{% block style %}
{% endblock %}
{% block content %}
<div class="row mt-3">
   <div class="container">
      <form id="otp_pin_verify_form" method="POST" action="{{ url_for('user.ValidateOTP',user_id=user_id,conf_id=conf.conf_id,conf_key=conf.conf_key)}}" >
         <div class="row">
            <div class="col-md-4 offset-md-4 col-sm-10 offset-sm-1 box p-3 form-container" style="background-color:white;">
               <div class="row">
                  <div class="col-md-12">
                  </div>
               </div>
               <h2 class="text-center" >Authentication</h2>
               <br>
               {% for mesg in get_flashed_messages() %}
                {% if loop.index == 1 %}
                    <div id="successMessage" style="color:red;text-align: center;">
                        <h4>{{ mesg }}</h4>
                    </div>
                {% endif %}  
               {% endfor %}
               <input type="hidden" class="form-control " name="user_id" id="user_id"  value="{{user_id}}">
               <input type="hidden" class="form-control " name="conf_key" id="conf_key"  value="{{conf.conf_key}}">
               <input type="hidden" class="form-control " name="conf_id" id="conf_id"  value="{{conf.conf_id}}">
               <div class="row">
                  <div class="col-md-2"></div>
                  <div class="col-md-8">   
                           <input class=" text-center form-control rounded inputs" type="text" name="input" id="input" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" value="" maxlength="4" required autofocus /> 
                     </div>
                     <div class="col-md-2"></div>
                     <label class="text-center" style="color:#808080;font-size: 16px;padding: 10px 30px 5px 30px;">If you do not see your OTP email in your inbox, please check your SPAM folder</label>
                  </div>  
               <!--<br>-->
               <div class="row">
                  <div class="col-md-2"> </div>
                  <div class="col-md-8">
                     <div class="form-group">
                        <input type="submit" class="btn btn-danger px-4 validate submit_btn submit_btn form-control center" id="submit_btn" name="submit_btn" value="Submit">
                        <!-- <button class="btn btn-danger px-4 validate submit_btn">Validate</button> -->
                     </div>
                  </div>
                  <div class="col-md-2"> </div>
               </div>
               <div class="row">
                  <div class="col-md-12" align="center">
                     <div class="form-group"> 
                        
                        <a  href="{{ url_for('user.getOTP',user_id=user_id,conf_id=conf.conf_id,conf_key=conf.conf_key) }}" id="otp_resend_btn"  style="align-items: right;color: red;">Click here</a> <span> to resend the OTP.</span>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-3"> </div>
               <div class="col-md-6 text-center">
                       <a  href="{{ url_for('user.Home',conf_id=conf.conf_id,conf_key=conf.conf_key) }}">
                           <button type="button" name="edit_button" id ="back_btn"  class="btn btn-info btn-sm text-uppercase"  style="align-items: right;"> BACK</button>
                         </a>  
               </div>
               <div class="col-md-3"> </div>
            </div>
            <div class="row">
               <img src="/static/images/otp_image.jpg" class="mx-3" style="width:80%;height:auto; ">
            </div>
            </div>
         </div>
      </form>
   </div>
</div>
<br>
{% endblock %}
{% block bottomscript %}
<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();
       }
   });
   
   // Ajax loder

       $("#submit_btn").click(function() 
       {
           var input_length =  $(".inputs").val().length;
           if((input_length == 0)||(input_length < 4))
           {
            $(".inputs").prop("required", true); 
           }
           else{
            // ShowProgress();
            
            $("#otp_pin_verify_form").submit();
            var btn = $(this);
            btn.prop('disabled', true);
            setTimeout(function(){
              // form.submit();
            
                btn.prop('disabled', false);
            }, 3000);

            // setTimeout(function() {
            //     StopProgress();
  
            //       }, 5000);
            
           }      
           
       });



         $("#back_btn").click(function() 
       {
           // ShowProgress();
       });

         $("#otp_resend_btn").click(function() 
       {
          
           // ShowProgress();
  
           
       });  
// end Ajax loder
   
   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(); });
   
    function ShowProgress()
{
    var text = 'loading data.. please wait..';

    if(jQuery('body').find('#resultLoading').attr('id') != 'resultLoading'){
     jQuery('body').append('<div id="resultLoading" style="display:none"><div><img src="'+document.location.origin+'/static/images/ajax-loader.gif"><div>'+text+'</div></div><div class="bg"></div></div>');
     // jQuery('body').append('<div id="resultLoading" style="display:none"><div><div>'+text+'</div></div><div class="bg"></div></div>');
     }

    jQuery('#resultLoading').css({
        'width':'100%',
        'height':'100%',
        'position':'fixed',
        'z-index':'10000000',
        'top':'0',
        'left':'0',
        'right':'0',
        'bottom':'0',
        'margin':'auto'
    });

    jQuery('#resultLoading .bg').css({
        'background':'#000000',
        'opacity':'0.7',
        'width':'100%',
        'height':'100%',
        'position':'absolute',
        'top':'0'
    });

    jQuery('#resultLoading>div:first').css({
        'width': '250px',
        'height':'75px',
        'text-align': 'center',
        'position': 'fixed',
        'top':'0',
        'left':'0',
        'right':'0',
        'bottom':'0',
        'margin':'auto',
        'font-size':'16px',
        'z-index':'10',
        'color':'#ffffff'

    });

    jQuery('#resultLoading .bg').height('100%');
       jQuery('#resultLoading').fadeIn(300);
    jQuery('body').css('cursor', 'wait');
}

function StopProgress()
{
    jQuery('#resultLoading .bg').height('100%');
       jQuery('#resultLoading').fadeOut(300);
    jQuery('body').css('cursor', 'default');
} 

</script>   
<script type="text/javascript">
    $(document).ready(function() {
            function disableBack() {
                window.history.forward()
            }
            window.onload = disableBack();
            window.onpageshow = function(e) {
                if (e.persisted)
                    disableBack();
            }
        });
</script>
{% endblock %}