{% extends 'back_office/bo_layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Awaiting For Life Member{% endblock %} 
{% block content %}
	<h1 class="text-center font-weight-bold mt-2">AWAITING FOR LIFE MEMBER</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 %}
	<form method="POST" id="search_frm" action="{{url_for('backoffice.WatingLifeMembersPage',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>
				 
			</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>Member Type : </label>
							<div class="dropdown" >
								<select class="form-control" id="search_member_type" name="search_member_type">
									<option id = "select" value="">All</option>
									{% for item in member_types  %}
									<option value={{item.member_type_id}} {{ 'selected' if search_data.member_type|int==item.member_type_id }}>{{item.member_type}}</option>
									
									{% endfor %}
								</select>
							</div>
						</div>
						<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 class="col-md-2">
							<label>Joined From</label>
							<div class="row">
								<div class="col-md-12">
									<input type="date" id="approved_from" name="approved_from" placeholder="Approved From" class="form-control" value="{{search_data.approved_from or ''}}">
								</div>
							</div>
						</div>
						<div class="col-md-2">
							<label>Joined To</label>
							<div class="row">
								<div class="col-md-12">
									<input type="date" id="approved_to" name="approved_to" placeholder="Approved To" class="form-control" value="{{search_data.approved_to or ''}}">
								</div>
							</div>
						</div>
					</div>
					<div class="row mx-3 my-3">
						<div class="col-md-4">
			              <label> Sort By :</label>
			                 <select name="sort_by" id="sort_by" class="form-control" >
			                    <option value = "membership_no_only"  >Membership Number</option>
			                    <option value = "full_name">Name</option>
			                    <option value="updated_at">Updated at</option>
			                 </select>
               			</div>
						<div class="col-md-4">
			              <label> Order By :</label>
			                 <select name="order_type" id="order_type" class="form-control" >
			                    <option value = "desc" {% if search_data.order_type == 'desc' %} selected="selected" {% endif %} >DESC</option>
			                    <option value = "asc" {% if search_data.order_type == 'asc' %} selected="selected" {% endif %} >ASC</option>
			                 </select>
               			</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>
						<!--{% if society_id|int == 10 or society_id|int ==1 %}-->
						<!--<th scope="col">Is Ratified</th> -->
						<!--{% endif %}-->
						<!--<th scope="col">Ratified Year</th> -->
						     
					</tr>
				</thead>
				<tbody>
					{% for user in user_profile %}
				<tr>
					<td data-label="SNO"  style="color:#94979a">{{loop.index}}</td>
					<td data-label="View">
						<a href="{{url_for('backoffice.ViewLifeMemberVerification',user_id=Cryptography.encrypt(user.user_id),status_id=user.status_id,society_id=society_id,society_key=society_key)}}" target="_blank">Click here to view approve</a><br>
					</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>
					<!--{% if society_id|int == 10 or society_id|int == 1 %}-->
					<!--<td data-label="Is Ratified">-->
					<!--    {% if user.is_prosec == 1 %} Yes {% else %} No {% endif %}-->
					<!--</td> -->
					<!--{% endif %}-->
					<!--<td data-label="Ratified Year">{{user.ratified_year or ""}}</td>  -->
					{% if btn_page == 'Search Everywhere': %}
					<td data-label="Current Status"><span class="text-danger">{{user.current_status or 'Incomplete Form'}}</span></td>  
					{% endif %}
				</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
		{{Helper.pagination_tool(total,page,limit)|safe}}
	</form>    
{% endblock %}
{% block script %}
<script type="text/javascript">
	var BaseUrl = document.location.origin
	$("#collapseFilter").hide(); 
	$(document).ready(function() {
		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();
		});
	});   
</script>
{% endblock %}