{% extends 'back_office/bo_layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Membership Approved Page{% endblock %} 
{% block content %}
	<h1 class="text-center font-weight-bold mt-2">MEMBERSHIP NUMBER APPROVED</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="myModal">
	<div class="modal-dialog modal-md">
		<div class="modal-content">
			<!-- Modal Header -->
			<div class="modal-header">
				<h4 class="modal-title text-center">Change Member Type</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<!-- Modal body -->
			<div class="modal-body">
				<form id="form">
					<input type="hidden" name="prev_member_type_id" id="prev_member_type_id" value="">
					<input type="hidden" name="prev_member_type" id="prev_member_type" value="">
					<input type="hidden" name="e_user_id" id="e_user_id" value="">
					<input type="hidden" name="society_id" id="society_id" value="{{society_id}}">
					<input type="hidden" name="society_key" id="society_key" value="{{society_key}}">
					<div class="row text-center">
						<div class="col-md-12">
						<label>Choose Member Type</label><br>
						{% for item in member_types  %}
						<input type="radio" class="change_member_type" name="change_member_type" id="{{item.member_type | replace(' ','_') }}" value="{{item.member_type_id}}"> 
						<label for="{{item.member_type | replace(' ','_') }}" id="{{item.member_type | replace(' ','_') }}_lable">{{item.member_type}}</label><br>
						{% endfor %}
						<label id="member_type-error" class="error" for="member_type" style="color:rgb(226, 5, 5)"></label>
						</div>
						
				   </div> 
				   <div class="row float-right">
					<div class="col-md-12">
						<button type="button" class="btn btn-primary" onclick="change_member_type_by_all()">Change</button>
					</div>
				   </div>
				</form>
			</div>
		</div>
	</div>
</div>
<div id="view_mail"></div>
<div id="view_all_member">
	<div class="alert alert-success alert-dismissible fade show" id="error_message_step1" role="alert">
		<label id="error_message_label"></label>
		<button type="button" class="close" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<form method="POST" id="search_frm" action="{{url_for('backoffice.MembersPage',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>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" id="search_everywhere" class="btn btn-primary mr-5" value="Search Everywhere" name="form_submit"> 
							<input type="submit" class="btn btn-danger mr-5" id="clear_button" value="Clear Filter" name="clear_btn">
							<input type="submit" id="export_button" class="btn btn-success" value="Export Filter Records" name="form_submit">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card p-2 mb-2" id="view_mail_template">
			<div class="row" >
				
				<div class="col-md-6">
					<label>Mail Template</label>
					<select id="mail_template_id" name="mail_template_id" class="form-control">
						<option value="">--Select--</option>
						
							<option value="654">Mem Changing Intimation Mail</option>
							
					</select>

				</div>
				
			</div>
			<div class="row">
				<div class="col-md-6">
					<button type="button" class="btn btn-danger" id='sendtestmail'>Test Mail</button>
					<button type="button" class="btn btn-primary" id='send_all_mail' onclick="send_selected_mailtemplate()">Send Mail</button>
					<button type="button" class="btn btn-secondary" id="preview_mail">Preview</button>
				</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"></th>
						<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> 
						{% if btn_page == 'Search Everywhere': %}
						<th scope="col">Current Status</th>  
						{% endif %}     
					</tr>
				</thead>
				<tbody>
					{% for user in user_profile %}
				<tr>
					<td data-label="Approved Mail">
						<a  href="{{url_for('backoffice.MembershipApprovedMailView',user_id=Cryptography.encrypt(user.user_id),society_id=society_id,society_key=society_key)}}" target="_blank" style="text-decoration: none;"><span class="fa fa-envelope"></span></a>
						<!--{% if society_id|int ==2 %}-->
						<!--<input type="checkbox" name="select_to_mail" id="select_to_mail" class="select_to_mail" value="{{user.user_id}}" />-->
						<!--{% endif %}-->
					</td>
					<td data-label="SNO"  style="color:#94979a">{{loop.index}}</td>
					<td data-label="View">
						<a href="{{url_for('backoffice.View',user_id=Cryptography.encrypt(user.user_id),status_id=user.status_id,society_id=society_id,society_key=society_key)}}" target="_blank">View</a><br>
						{% if society_id|int == 12 %}
						<a href="{{url_for('backoffice.AddNewMember',user_id=Cryptography.encrypt(user.user_id),society_id=society_id,society_key=society_key)}}" target="_blank"><i class="fa fa-edit"></i></a>
						{% else %}
						<a href="{{ url_for('backoffice.getMemberEdit',user_id=Cryptography.encrypt(user.user_id),society_id=society_id,society_key=society_key) }}" target="_blank"><i class="fa fa-edit"></i></a>
						{% endif %}
						{% if Auth.bouser(society_id)['admin_type'] and Auth.bouser(society_id)['admin_type']|int == 2 %}

						{% if user.status_id == societyData['ms_approved_status_id'] and ((society_id|int in [3] and user.member_type_id|int in [1]) or (society_id|int in [2,17] and user.member_type_id|int in [1,6])): %}
						<a href="{{ url_for('member.DownloadIdCard',user_uuid=user.user_uuid,society_id=society_id,society_key=society_key) }}" target="_blank" title="Click here to Download Id Card"><i class="fa fa-id-card" aria-hidden="true"></i></a>
						{% endif %}
						
						{% if user.status_id == societyData['ms_approved_status_id'] and ((society_id|int in [3]  and user.member_type_id|int == 1) or (society_id|int in [18]  and user.member_type_id|int == 1 and user.is_ratified|int == 1)): %}
						<a href="{{ url_for('member.DownloadCertificate',user_uuid=user.user_uuid,society_id=society_id,society_key=society_key) }}" target="_blank" title="Click here to Download certificate"><i class="fa fa-certificate" aria-hidden="true"></i></a>
						{% endif %}

						{% endif %}
					</td>
					<td data-label="Membership no ">{{user.membership_no or ""}}</td>    
					<td data-label="Membership type">{{user.member_type or ""}}<br>
						{% if society_id|int==2 and user.member_type_id !=2 %}
						<button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" target="_blank" onclick="member_type('{{user.member_type}}','{{Cryptography.encrypt(user.user_id)}}','{{user.member_type_id}}')" >click here to change member type</button>
						{% endif %}
					</td>    
					<td data-label="Full Name">{{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> 
	<div class="modal" id="testmailid_modal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Test Mail ID</h5>
					<button type="button" class="close" id="close_btn" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col">
							<label>Enter the testing email id</label>
						</div>
					</div>
					<div class="row">
						<div class="col-12">
							<input type="text" name="test_mail_id" id="test_mail_id" class="form-control"  required />
						</div>
						
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" id="sendtest" class="btn btn-primary">Send</button>
					<!--<button type="button" class="btn btn-secondary" id="close_btn" >Close</button>-->
				</div>
			</div>
		</div>
	</div>
	<div class="modal" id="previewmail_modal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document" style="max-width: 750px;">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Preview Mail</h5>
					<button type="button" class="close" id="close_btn_preview" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col">
							<div id="show_preview_mail"></div>
						</div>
					</div>
					
				</div>
				<div class="modal-footer">
					<!--<button type="button" class="btn btn-secondary" id="close_btn_preview" >Close</button>-->
				</div>
			</div>
		</div>
	</div>
</div>
	
{% endblock %}
{% block script %}
<script type="text/javascript">
	var BaseUrl = document.location.origin
	$("#collapseFilter").hide();
	$("#error_message_step1").hide(); 
	$(document).ready(function() {
		$("#view_mail_template").hide();
		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();
		});

	});  
$(document).on("click","input[name=select_to_mail]",function(e){
	if($('input[name=select_to_mail]').is(":checked")) 
	{  
		$("#view_mail_template").show();
	}
	else{
		$("#view_mail_template").hide();
	}
})


function change_member_type_by_all()

{

if (confirm("Are you sure you want to change member type?")) {
	var user_id     		= $("#e_user_id").val(); 
	var prev_member_type 	=  $("#prev_member_type").val(); 
	var prev_member_type_id =  $("#prev_member_type_id").val(); 
	var society_id  		= $("#society_id").val();
	var society_key 		= $("#society_key").val();
	if(!validate_member_type())
			{
				return false  
			}
	else{
		
		$.ajax({
			type: 'POST',
			url: BaseUrl+"/bo/change_member_type/"+society_id+"/"+society_key,
			data: {
				'user_id':user_id,
				'prev_member_type_id':prev_member_type_id
			},
			dataType: 'json',
			success: function(data){
				msg     = data.msg
				status  = data.status
				if (status==1){
					
					$("#myModal").modal("hide");
					mail_function_changed_memtye(prev_member_type)
				}
				else{
					alert(msg);
				}			
			},
			});
	}
	
}
else{
	return false;
}

   
   
}


function mail_function_changed_memtye(prev_member_type)
{
	var user_id     = $("#e_user_id").val();   
	var society_id  = $("#society_id").val();
	var society_key = $("#society_key").val();
	var is_preview  = 1;  
	$.ajax({
			type: 'POST',
			url: BaseUrl+"/bo/view_changes_mail/"+user_id+"/"+society_id+"/"+society_key+"/"+is_preview,
			data: {
				'prev_member_type'	: prev_member_type
			},
			dataType: 'json',
			success: function(data){
				msg    = data.msg
				html_data = data.html_data
				status = data.status
				if (status==1){
					$("#view_all_member").hide();
					$("#view_mail").html(html_data);					
				}
				else{
					alert(msg);
				}			
			},
			});
}

function validate_member_type() 
	{
		
		$("#member_type-error").text("");
		if ($("input[type=radio]").is(":checked")) {
			
			return true;
		} 
		else {
			$("#member_type-error").text("Please select membership type");
			return false;
		}
	}


function member_type(prev_member_type,user_id,prev_member_type_id)

{
	$("#prev_member_type").val(prev_member_type);
	$("#prev_member_type_id").val(prev_member_type_id);
	var prev_member_type =prev_member_type.replace(' ','_')
	$("#"+prev_member_type).hide();
	$("#"+prev_member_type+"_lable").hide();
	$("#e_user_id").val(user_id);
   
}

function send_selected_mailtemplate() {
	var mail_template_id  = $("#mail_template_id").val();
	var society_id        = "{{society_id}}"
	var society_key       = "{{society_key}}"
	var selected_user_ids = []

	 $("input[name='select_to_mail']:checked").each(function(){
		 selected_user_ids.push(this.value)
	  });
	

	if (mail_template_id.length == 0) 
	{
		alert('Please select mail template')
	} 
	else 
	{
	
	
	
		$.ajax({
		type: 'POST',
		url: BaseUrl + "/bo/send_mail_members/"+mail_template_id+"/"+society_id+"/"+society_key,
		data:{
			'is_test' : 0,
			'selected_user_ids':selected_user_ids.join(",")
			},
		dataType: 'json',
		success: function(data)
		{
			if (data["msg"])
			{
				$("#error_message_step1").show();
				$("#error_message_label").html(data["msg"]);
			}
		}
		})

	}
}
$("#sendtestmail").click(function(){
	$('#testmailid_modal').show();
})

$("#sendtest").click(function(){
				
	var mail_template_id = $("#mail_template_id").val();
	var society_id  = "{{society_id}}"
	var society_key = "{{society_key}}"
	
	var selected_user_ids = []
	 $("input[name='select_to_mail']:checked").each(function(){
		 selected_user_ids.push(this.value)
	  });
	var test_mail_id     = $('#test_mail_id').val();
	alert(test_mail_id)
	if (mail_template_id.length == 0) 
	{
		alert('Please select mail template')
		$('#testmailid_modal').hide();
	} 
	else if(test_mail_id.length == 0)
	{
	  alert('Please enter test mail id')
	  $('#testmailid_modal').hide();
	}
	
	else {
	 $.ajax({
		type: 'POST',
		url: BaseUrl + "/bo/send_mail_members/"+mail_template_id+"/"+society_id+"/"+society_key,
		data:{
			'is_test' : 1,
			'selected_user_ids':selected_user_ids.join(","),
			'test_mail_id':test_mail_id        	
		},
		dataType: 'json',
		success: function(data)
		{
		
			if (data["msg"])
			{
				$("#error_message_step1").show();
				$("#error_message_label").html(data["msg"]);
			}
			$('#testmailid_modal').hide();
		
		}
	})
	}
})

$("#preview_mail").click(function(){
	var mail_template_id = $("#mail_template_id").val();
	var society_id = "{{society_id}}"
	var society_key = "{{society_key}}"
	var selected_user_ids = []
	 $("input[name='select_to_mail']:checked").each(function(){
		 selected_user_ids.push(this.value)
	  });
  if (mail_template_id.length == 0) 
	{
		alert('Please select mail template')
	} 
  else
  {
	$.ajax({
		type: 'POST',
		url: BaseUrl + "/bo/send_mail_members/"+mail_template_id+"/"+society_id+"/"+society_key,
		data:{

			'is_preview' : 1,
			'selected_user_ids':selected_user_ids.join(",")
			},
		dataType: 'json',
		success: function(data)
		{
			$("#previewmail_modal").show();
			$("#show_preview_mail").html(data["html"]) 
		}
	})
  }
})

$("#close_btn").click(function () {

		$("#testmailid_modal").hide();

	});
	
$("#close_btn_preview").click(function () {

		$("#previewmail_modal").hide();

	});

</script>
{% endblock %}