{% extends 'back_office/bo_layout.html' %}
{% block head %}
 {% endblock %}
{% block title %}About Membership Number Generated{% 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 mb-4">
    <div class="col-md-12 text-center">
        <p>Do you want to send mail?</p>
        <a class="btn btn-primary mr-2" href="{{url_for('backoffice.MembershipSubmissionMail',user_id=encrypt_user_id,society_id=society_id,society_key=society_key,is_preview=0)}}">Yes</a>
        <a class="btn btn-danger mr-2" href="{{url_for('backoffice.MembersPage',society_id=society_id,society_key=society_key)}}">No</a> 
    </div>
</div>
<div class="row mt-2">
    <div class="col-md-12 text-center mb-4">
        <a class="btn btn-success" data-toggle="modal" data-target="#myModal" >Send sample</a>
    </div>
</div>
<div class="row">
    <div class="col-md-12 text-center">
        <h4>Following mail content  are send to applicant:</h4>
    </div>
</div> 
<div class="row">
    <div class="col-md-12 text-center">
        <p>Subject : {{subject}}</p>
    </div>
</div>
<div class="row">
    <div class="col-md-12 text-center">
        {% include 'back_office/email/bo_mail_template.html' %}
    </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.MembershipSubmissionMail',user_id=encrypt_user_id,society_id=society_id,society_key=society_key,is_preview=0)}}?is_test=1">
                    <input type="text" id="sample_email" name="sample_email" class="form-control" placeholder="Enter email id" value="{{Auth.getSociety(society_id)['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>
            
            <!-- Modal footer -->
            <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 %}