{% extends 'memberapp_users/layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Membership of other society{% 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|safe }}</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="othermembership_form"   action="{{url_for('member.postStep',user_id=encrypt_user_id,society_id=society_id,society_key=society_key)}}">
    <div class="row ">
        <div class="col-md-12 text-center">
            <label><h3 class="font-weight-bold">MEMBERSHIP OF OTHER ASSOCIATIONS/SOCIETIES</h3></label>
        </div>
    </div>
    <input type="hidden" name="user_id" id="user_id"value="{{user_id}}">
    <input type="hidden" name="user_other_society_id" id="user_other_society_id"value="{{user_other_society_id or 0}}">
    <input type="hidden" id="cur_step" name="cur_step" value="{{cur_step}}">
    <input type="hidden" id="pre_step" name="pre_step" value="{{pre_step}}">
    <input type="hidden" id="nxt_step" name="nxt_step" value="{{nxt_step}}">
    <div class="row">
        <div class=" col-md-6 form-group">
            <label>Associations/Societies:</label>
            <input type="text" class="form-control" name="associations_society" id="associations_society" />
        </div>
        <div class=" col-md-6 form-group">
            <label>Membership no:</label>
            <input type="text" class="form-control" name="other_membership_no" id="other_membership_no" />
        </div>
    </div>
    <div class="row text-center">
        <div class="col-md-12">
            <input type="button" value="Add" name="add_submit" id="add_submit" class="btn btn-primary form-input mr-4">
            <input type="button" value="Clear" name="clear_submit" id="clear_submit" class="btn btn-danger form-input">
        </div>    
    </div>
    <br>
    <h3 class="text-center">YOUR MEMBERSHIP OF OTHER ASSOCIATIONS/SOCIETIES</h3>
    <div class="row">
        <div class="col-md-12" id="othermembershiptable"></div>
    </div>
</form>
<div class="row">
    <div class="col-md-12">
        <a  href="{{ url_for('member.getStep',user_id=encrypt_user_id,step_no=pre_step,society_id=society_id,society_key=society_key) }}" class="btn btn-lg btn-secondary">Previous</a>
        <input type="button" value="Next" name="submit_update" id="submit" class="btn btn-primary btn-lg float-right form-input">
    </div>
</div>
    
{% endblock %}
{% block script %}
<script type="text/javascript">
    
var BaseUrl = document.location.origin     
var user_id=$("#user_id").val();
var society_id = "{{society_id}}";
var society_key = "{{society_key}}";
$(document).ready( function ()
{
    othersociety()  
    $("#submit").click(function()
    {
        $("form").validate().cancelSubmit = true;
        $("form").submit()
    })
    $("#add_submit").click(function()
    {   
        validate_othermembership_form()
        if(!$("form").valid())
        {
            return false  
        }
        var user_id                = $("#user_id").val();
        var user_other_society_id  = $("#user_other_society_id").val();
        var associations_society   = $("#associations_society").val();
        var other_membership_no    = $("#other_membership_no").val();
        $.ajax({
            type: 'POST', 
            url: BaseUrl+"/insert_other_society/"+society_id+"/"+society_key, 
            data: {
                'user_id':user_id,
                'user_other_society_id':user_other_society_id,
                'associations_society' :associations_society,
                'other_membership_no' : other_membership_no
            },          
            dataType: 'html',
            success: function(data)
                {
                    $("#othermembershiptable").html(data);
                    clearall()              
                },
            error: function(XMLHttpRequest, textStatus, errorThrown) 
                {

                } 
        });
        return false;              
    })
    
    $("#clear_submit").click(function() {
        clearall()
    })  
});

function othersociety() 
{
    $.ajax({
        type: 'GET', 
        url: BaseUrl+"/get_othersociety_by_user/"+society_id+"/"+society_key, 
        data:{
          'user_id':user_id
        }, 
        dataType: 'html',
        success: function(data){
          $("#othermembershiptable").html(data)
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
        } 
                                            
    });                  
}  
function validate_othermembership_form()
{
    errorclass : 'error',
    $("#othermembership_form").validate({
        rules : {
            associations_society    : "required",
            other_membership_no     : "required",
        },
        messages : {
            associations_society        : "Please enter other assocations/society name",
            other_membership_no         : "Please enter other membership number",
        },
             highlight: function(element) {
                 $(element).parent().addClass('error')
             },
         
             unhighlight: function(element) {
                 $(element).parent().removeClass('error')
             },
     
             //submitHandler: function(form) {
               //  form.submit();
             //},
             invalidHandler: function(form, validator) {

                if (!validator.numberOfInvalids())
                    return;

                $('html, body').animate({
                scrollTop: $(validator.errorList[0].element).offset().top
                }, 300);
                StopProgress();

            }
    })
            
}
function clearall() 
{
     $("#user_other_society_id").val(0);
     $("input[type=text]").val('');
}
              
</script>
   
{% endblock %}