{% extends 'digital_batch/layout.html' %}
{% block head %}
{% endblock %}
{% block title %}OTP{% endblock %} 
{% block content %}   
<div class="container bg-white p-2">
    <form id="otp_form" method="POST" action="{{url_for('digitalbatch.postOtp',conf_id=conf_id,conf_key=conf_key,delegate_id=delegate_id)}}">
        <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 form-group">
                        <h4 style="text-align:center;color: rgb(4, 4, 73);">Key in your OTP</h4>
                        <input type="text" name="otp" id="otp" class="form-control" placeholder="Your OTP" autofocus>
                    </div>
                </div>   
                <br>
                <div class="row">
                    <div class="col-md-12 text-center ">
                        <div class="form-group">
                            <input type="submit" class="btn btn-primary" 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('digitalbatch.resendOTP',conf_id=conf_id,conf_key=conf_key,delegate_id=delegate_id)}}"  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 or mobile number ?</span>
                            <a  href="{{url_for('digitalbatch.DigitalBatch',conf_id=conf_id,conf_key=conf_key)}}"  style="align-items: right;color: red;" id="resend">Click here</a> 
                        </div>  
                    </div>
                </div>
            </div>		
        </div>
    </form>
</div>

{% endblock %}
{% block script %}
<script type="text/javascript">
    $(document).ready(function()
    {
        $("#submit_btn").click(function() 
        {
            validate_otp_form()
            if(!$("#otp_form").valid())
            {
                return false  
            }
        })
    })
    
    
function validate_otp_form()
{
    errorclass : 'error',
    $("#otp_form").validate({
        rules : {
            otp : {
                required : true,
            },
        },
        messages : {
            otp : {
                required : "Please Enter OTP",
            },
        },
        highlight: function(element) {
            $(element).parent().addClass('error')
        },
    
        unhighlight: function(element) {
            $(element).parent().removeClass('error')
        },

        submitHandler: function(form) {
            form.submit();
        },
    })
} 
    
</script>  

{% endblock %}