{% extends 'digital_batch/layout.html' %}
{% block content %}
<div class="container bg-white p-3" >
{% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
			
<div class="alert alert-success text-center 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 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 %}
<form method="POST" id="login_form" action="{{url_for('digitalbatch.postLoginNonOTP',conf_id=conf_id,conf_key=conf_key)}}" >
	<div class="row ">
		<div class="col-12 mt-5">
			<h4 class="text-center">Key in your registered email id or mobile number</h4>
		</div>
		<div class="col-12 text-center form-group">
			<div class="p-1  mx-md-5 " >
				<input type="text" class="form-control" name="email_mobile"  id="email_mobile" placeholder="Enter your email id or mobile number" autofocus>
			</div>
		</div>
		<br>
	</div>
	<div class="row justify-content-center">
		<button type="submit" class="btn btn-success mr-2 mb-2" id="submit">Login</button>
	</div>
</form>
</div>

{% endblock %} 
{% block script %}
<script type="text/javascript">
	$(document).ready(function()
	{
		$('.error').hide();
		$("#submit").click(function() 
		{
			validate_login_form()
			if(!$("#login_form").valid())
			{
				return false  
			}
			
		})
	})
	
	
	
function validate_login_form()
{
	errorclass : 'error',
	$("#login_form").validate({
		rules : {
			email_mobile : {
				required : true,
			}
		},
		messages : {
			email_mobile : {
				required : "Please Enter Email id or Mobile number",
			}
		},
		highlight: function(element) {
			$(element).parent().addClass('error')
		},
	
		unhighlight: function(element) {
			$(element).parent().removeClass('error')
		},

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