{% extends 'back_office/bo_layout.html' %}
{% block head %}
 {% endblock %}
{% block title %}Mail content{% endblock %} 
{% block content %} 
{% 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 %}
<div class="row mt-2">
	<div class="col-md-12 text-center">
		<h4>The following reminder mail will be sent.</h4>
	</div>
</div>
<div class="row">
    <div class="col-md-12 text-center">
        <p>Subject : <span class="text-danger">{{subject}}</span></p>
    </div>
</div>               
<div class="row text-center">  
	<div class="col-md-12 text-center">
		{% include 'back_office/email/bo_mail_template.html' %}
	</div>   
</div>
<div class="row mt-4"> 
	<div class="col-md-12 text-center">
		<a class="btn btn-primary mr-2"  href="{{url_for('backoffice.ReminderProposerSeconderMail',user_uuid=user.user_uuid,reference_user_uuid=reference_user_uuid,society_id=society.society_id,society_key=society.society_key)}}" onclick="return confirm('Are you sure send mail now ?')">Send now</a> 
		<a class="btn btn-danger ml-2" data-toggle="modal" data-target="#myModal" >Send sample</a>
	</div>
</div>

<div class="modal" id="myModal">
	<div class="modal-dialog modal-md">
		<div class="modal-content">
	  
			<!-- Modal Header -->
			<div class="modal-header">
				<h4 class="modal-title">Enter Testing Email id</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			
			<!-- Modal body -->
			<div class="modal-body">
				<form id="test_form" method="post" action="{{url_for('backoffice.ReminderProposerSeconderMail',user_uuid=user.user_uuid,reference_user_uuid=reference_user_uuid,society_id=society.society_id,society_key=society.society_key)}}">
					<input type="text" id="sample_email" name="sample_email" class="form-control" placeholder="Enter email id" value="{{society.backup_mail}}">
					<span class="error text-black" id="invalid_email">
						<b>Email id is invalid</b>
					</span>
					<br>
					<button type="submit" class="btn btn-primary float-right" id="send_mail" >Send Mail</button>
				</form>
			</div>
		
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" id="close" data-dismiss="modal">Close</button>
			</div>
		
		</div>
	</div>
</div>
{% endblock %}
{% block script %}
<script type="text/javascript">
	var BaseUrl = document.location.origin
$(document).ready(function()
{
	$('.error').hide();
	$("#send_mail").click(function() 
	{
		validate_login_form()
		if(!$("#test_form").valid())
		{
			return false  
		}
		var email = $('#sample_email').val();
		if (IsEmail(email) == false) 
		{
			$('#invalid_email').show();
			return false;
		}
	})
	$("#close").click(function()
	{
		$("#sample_email").val('');
	})
})

function IsEmail(email) {
	var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	if (!regex.test(email)) 
	{
		return false;
	}
	else 
	{
		return true;
	}
}

function validate_login_form()
{   
	errorclass : 'error',
	$("#test_form").validate({
		rules : {
			sample_email : {
							required : true,
							},
				},
	 
		messages : {
			sample_email : {
							required : "Please Enter Email id",
							},
					},
		highlight: function(element) {
			$(element).parent().addClass('error')
		},
	
		unhighlight: function(element) {
			$(element).parent().removeClass('error')
		},

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

{% endblock %}