{% extends 'back_office/bo_layout.html' %}
{% block head %}
{% endblock %}
{% block style %}
 <style type="text/css">
 	.list-group-item{
 		background-color: green;
 		border: 0px;
 	}
 </style>
{% endblock %}
{% block title %} Search all Members and Non-members  {% endblock %} 
{% block content %}
	<h2 class="text-center font-weight-bold mt-2">Search All Members and Non-Members</h2>
	{% 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" id="search_icon"> 
	<div class="col-md-3">
		
	</div> 
		
		<div class="col-md-6">
			<div class="input-group">  
					<input type="search" id="search" name="search" placeholder="Search all members"  class="form-control">  
					<div class="input-group-append">  
						
					</div>  
			</div>
		</div>		  
	</div><br>
	<div class="row text-center">
		<div class="col-md-3"></div>
		<div class="col-md-2 ">
			<button type="button" onclick="btn_search_members_nonmembers(1)" id="search_member_type" class="btn btn-md btn-primary">Search All Members</button>
			
		</div>
		<div class="col-md-2">
			<button type="button" onclick="btn_search_members_nonmembers(0)" id="search_member_type" class="btn btn-md btn-primary">Search Members</button>
		</div>
		<div class="col-md-2">
			<button type="button" onclick="btn_search_members_nonmembers(2)" id="search_member_type" class="btn btn-md btn-primary">Search Non Members</button>
		</div>
	</div><br>	

	<div class="row">
			<div class="col-md-12" id="show"></div>
	</div><br>
	<div class="row">
			<div class="col-md-12" id="show_prosec"></div>
	</div><br>
{% endblock %}
{% block script %}
<script type="text/javascript">
var BaseUrl = document.location.origin
var society_id  = "{{society_id}}";
var society_key = "{{society_key}}";
$("#collapseFilter").hide(); 	
function btn_search_members_nonmembers(search_member_type) 
	{
		$('#show').show();
		$('#show_prosec').hide();
		var search_value    = $("#search").val();
		if (search_value.length < 3)
		{
			alert("Please select atleast 3 character");
		}
		else
		{
		   $.ajax({
				url:"/bo/post_search_all_members_non_members/"+society_id+"/"+society_key,
				method:"POST",
				data:{'search_value':search_value,
					  'search_member_type':search_member_type
					},
				success:function(data)
				{
					$('#show').html(data);
					new DataTable('#myTable', {
                                searching: true,
                                responsive: true,
                                paging: false
                            });  
				}
			});
		}
	}
</script>
{% endblock %}