{% extends 'back_office/bo_layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Terminated members{% endblock %} 
{% block content %}
	<h1 class="text-center font-weight-bold mt-2">TERMINATED MEMBERS</h1>
	{% 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="modal" id="edit_model">
    <div class="modal-dialog modal-md">
      <form id="expired" >

          <input type="hidden" name="society_id" id="society_id" value="{{society_id}}">
        <div class="modal-content ">
         
            <!-- Modal Header -->
            <div class="modal-header text-center">
                <h5 class="modal-title">Make Member Terminated</h5>
               
            </div>
            <!-- Modal body -->
            <div class="modal-body">
            	<input type="hidden" name="user_id" id="user_id" value="">
               
                 <div class="row">
                    <div class="col-md-12 form-group">
                      <label class="">Remarks :</label>
                        <input type="text" class="form-control" name="remarks" id="remarks" required>
                    </div>
                </div> 
                <div class="row">
                	<div class="col-md-12">
                		<p class="text-danger">Once you click on the below button, the membership will be terminated.  The details of this member will not be shown in any other module.</p>
                	</div>
                </div>
                <div class="row">
                    <div class="col-md-10 float-right">
                        <button type="button" class="btn btn-success expire" id="update_btn" >Click here to terminate membership</button>  
                    </div>                        
                    <div class="col-md-2"> 
                      <button type="button" class="btn btn-danger float-right" data-dismiss="modal">Cancel</button>                      
                    </div>
                </div>                                     
            </div>
        </div>
        </form>
    </div>
</div>

	<div class="row">  
		<div class="col-md-6"></div>
		<div class="col-md-6">
			<div class="input-group">  
					<input type="search" id="search" name="search" placeholder="Search here to make as terminated members..."  class="form-control">  
					<div class="input-group-append">  
						<button type="button" onclick="btn_search_expire()" id="button_search_expire" class="btn btn-md btn-primary"> <i class="fa fa-search"> </i> </button>
					</div>  
			</div>
		</div>		  
	</div><br>
	<div class="row">
			<div class="col-md-12" id="show"></div>
	</div><br>
{% if user_profile : %}

	<form method="POST" id="search_frm" action="{{url_for('backoffice.ExpiredMembers',society_id=society_id,society_key=society_key)}}">
		<input type="hidden" name="filter_visible" id="filter_visible" value="{{ filter_visible}}">
		<div class="card">
			<div class="card-header p-1 bg-dark" > 
				<button type="button" class="btn btn-link text-white" id="filter" >
					<i class="fa fa-filter"></i> Filter
				</button>
				<button type="button" id="refresh" class="btn btn-danger pull-right"><i class='fa fa-refresh mr-2'></i>Refresh</button>
				 <!-- <input type="submit"  id="export_button" class="btn btn-info pull-right mr-2" value="Export Members Records" name="form_submit"> -->
			</div>
			<div id="collapseFilter" >
				<div class="card-body">
					<div class="row mx-3"  >
						<div class="col-md-4">
							<label>Name : </label>
							<input type="search" id="search_name" name="search_name" placeholder="Search here..." class="form-control"  value="{{search_data.name or ''}}">
						</div>
						<div class="col-md-4">
							<label>Email : </label>
							<input type="search" id="search_email" name="search_email" placeholder="Search here..." class="form-control"  value="{{search_data.email or ''}}">
						</div>
						<div class="col-md-4">
							<label>Mobile : </label>
							<input type="search" id="search_mobile" name="search_mobile" placeholder="Search here..." class="form-control" value="{{search_data.mobile or ''}}">
						</div>  
					</div>
					<div class="row mx-3 my-3">
						
						<div class="col-md-4">
							<label>Membership No : </label>
							<div class="row">
								<div class="col-md-6">
									<input type="search" id="from_memno" name="from_memno" placeholder="From..." class="form-control" value="{{search_data.from_memno or ''}}">
								</div>
								<div class="col-md-6">
									<input type="search" id="end_memno" name="end_memno" placeholder="End..." class="form-control" value="{{search_data.end_memno or ''}}">
								</div>
							</div>
						</div>
						
					</div>
					
					<div class="row mt-4 text-center">
						<div class="col-md-12">   
							<input type="submit" id="search_button" class="btn btn-primary mr-5" value="Search" name="form_submit">  
							
							<input type="submit" class="btn btn-danger mr-5" id="clear_button" value="Clear Filter" name="clear_btn">
							
						</div>
					</div>
				</div>
			</div>
		</div>
		{{Helper.pagination_tool(total,page,limit)|safe}}
		<div class="mobile-responsive">
			<table class="table table-striped table-bordered bg-white" id="myTable" style="font-size: 14px;">
				<thead class="thead-dark text-white font-weight-bold text-center">
					<tr>
						<th scope="col">Sno</th>
						<!-- <th scope="col">View</th> -->
						<th scope="col">Membership no</th>
						<th scope="col">Membership type</th>
						<th scope="col">Full name</th>
						<th scope="col">Email id /<br> Mobile</th>
						<th scope="col">City /<br>State</th>
						<th scope="col">Terminated by</th>
						<th scope="col">Terminate date updated on</th>
					</tr>
				</thead>
				<tbody>
					{% for user in user_profile %}
				<tr>
					<td data-label="SNO"  style="color:#94979a">{{loop.index}}</td>
					
					<td data-label="Membership no ">{{user.membership_no or ""}}</td>    
					<td data-label="Membership type">{{user.member_type or ""}}</td>    
					<td data-label="Full Name">{{user.prefix or ""}}{{user.full_name or ""}}</td>
					<td data-label="Email / Mobile">{{user.email or ""}}{% if user.email or user.mobile: %}/{% endif %}<br>{{user.mobile or ""}}</td>
					<td data-label="City / State">{{user.city or ""}}{% if user.city or user.state_name: %}/{% endif %}<br>{{user.state_name or ""}}</td>
					<td data-label="Expired By">{{user.expired_by or ""}}</td>
					<td data-label="Expired on">{{user.expired_by_date.strftime('%d-%m-%Y %H:%M:%S') if user.expired_by_date else ''}}</td>
				</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
		{{Helper.pagination_tool(total,page,limit)|safe}}
	</form> 
{% endif %}  
{% endblock %}
{% block script %}
<script type="text/javascript">
	var BaseUrl = document.location.origin
	var society_id  = "{{society_id}}";
	var society_key = "{{society_key}}";
	$("#collapseFilter").hide(); 
	$(document).ready(function() {

		// expired date not geater than current 
		var today = new Date().toISOString().split('T')[0];
         $('#expired_on_date').attr('max', today);


		var filter_visible = $("#filter_visible").val();
		if (filter_visible ==1) {
			$("#collapseFilter").show();   
		} else {
			$("#collapseFilter").hide(); 
		}
		$("#filter").click(function() {
			$("#filter_visible").val(1);
			$("#collapseFilter").toggle();     
		})
		$("#search_button").click(function() {
			$("#filter_visible").val(1);
			$("#collapseFilter").show();          
		})
		$('#clear_button').click(function(){
			$('input[type=search]').each(function() 
			{
				$(this).val('');
			});
			$('#search_member_type').each(function(){
				$(this).val('')
			}); 
			$("#filter_visible").val(0);
			$("#page").val(1)
			$("#collapseFilter").hide();   
		})
		$("#refresh").click(function()
		{
			location.reload();
			$("#filter_visible").val(0);
			$("#collapseFilter").hide();
		});
		
		
    $("#update_btn").click(function()
    {
       
       var user_id            = $("#user_id").val();
       var remarks            = $("#remarks").val();
                
      
          $.ajax({
             type: 'POST', 
             url: BaseUrl+"/bo/make_expired/"+society_id+"/"+society_key,  
             data:{
                
                'user_id'    : user_id,
                'remarks'          : remarks
                   }, 
             dataType: 'json',
             success: function(data){
                if(data.status == 1)
                {
                  location.reload();
                }
                else{
                   
                }  
             },
             error: function(XMLHttpRequest, textStatus, errorThrown) {} 
          });
      
      
                     
    })


    
	});
	
	function btn_search_expire() 
	{
		$('#show').show()
		var search_value    = $("#search").val();
		if (search_value.length < 3)
		{
			alert("Please select atleast 3 character");
		}
		else
		{
		   $.ajax({
				url:"/bo/search_member_for_expire/"+society_id+"/"+society_key,
				method:"POST",
				data:{'search_value':search_value,},
				success:function(data)
				{
					$('#show').html(data);
				}
			});
		}
	}
	 function validate_update_form()
    {
      errorclass : 'error',
      $("#expired").validate({

        rules : {

          expired_on_date    :"required",
          remarks        :"required"
        },
        messages : {
          expired_on_date       : "Please enter the expired date",
          remarks           : "Please enter the remark"
        }
      });
     }



</script>
{% endblock %}