{% extends 'back_office/bo_layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Add New member{% endblock %} 
{% block content %}
<div class="container p-3 bg-white"> 
	<br>
	<div class="col-md-12 text-center">
		<h2 class="font-weight-bold">Membership Application {% if user.full_name %} of {% endif %}{{user.prefix or ""}}{{user.full_name or ""}}</h2>
	</div>
	<input type="hidden"  name="society_id" id="society_id" value="{{society_id}}">
	<input type="hidden"  name="society_id" id="society_id" value="{{society_key}}">
	<hr>
	<form method="POST"  id="bo_edit_form" action="{{url_for('backoffice.PostAddNewMember',user_id=Cryptography.encrypt(user.user_id),society_id=society_id,society_key=society_key)}}">
		{% 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|safe }}</h4>
		</div>
		{% endfor %}
		
		
		
		<div class="row">
			<div class="col-12">
				<h4 class="text-danger font-weight-bold">CHOOSE MEMBER TYPE</h4>
			</div>
		</div> 
		<br>
		<div class="row">
			{% for item in member_types  %}
			<div class="col-12 form-group ml-3">
				<input type="radio" name="member_type" class="form-input" value="{{item.member_type_id}}" id="{{item.member_type_id}}"{{"checked" if user.choosed_member_type_id==item.member_type_id }}/>
				<label for="{{ item.member_type_id }}">{{ item.display_name }}</label>
			</div>
			{% endfor %}
			<label id="member_type-error" class="error ml-2" for="member_type"></label>
		</div>
		<hr>
		
		<div class="row">
			<div class="col-12">
				<h4 class="text-danger font-weight-bold">USER INFORMATION</h4>
			</div>
		</div>
		<br>
		<br>
		<div class="row">
			<div class=" col-md-6 form-group">
				<label>Prefix:</label>
			</div>
			<div class=" col-md-6 form-group">
				<div class="dropdown" >
					<select class="form-control" id="prefix" name="prefix">
						<option id ="select" >Select Prefix</option>
						<option value="Mr." {{ 'selected' if user.prefix == 'Mr.'}}>Mr.</option>
						<option value="Mrs." {{ 'selected' if user.prefix == 'Mrs.'}}>Mrs.</option>
						<option value="Dr."{{ 'selected' if user.prefix == 'Dr.'}}{{"selected" if not user.prefix }}>Dr.</option>
						<option value="Ms." {{ 'selected' if user.prefix == 'Ms.'}}>Ms.</option>
						<option value="Prof." {{ 'selected' if user.prefix == 'Prof.'}}>Prof.</option>
					</select>
				</div>
			</div>
		</div>
		<div class="row">
			<div class=" col-md-6 form-group">
				<label>Name:</label>
			</div>
			<div class=" col-md-6 form-group">
				<input type="text" class="form-control" name="name"  id="name" value="{{user.full_name or '' }}">   
			</div>
		</div>
		<div class="row">
			<div class=" col-md-6 form-group">
				<label>Membership Number:</label>
			</div>
			<div class=" col-md-6 form-group">
				<input type="text" class="form-control" name="membership_no"  id="membership_no" value="{{user.membership_no or ''}}">   
			</div>
		</div>
		<div class="row">
			<div class=" col-md-6 form-group">
				<label>Email:</label>
			</div>
			<div class="col-md-6 form-group">
				<input type="email" class="form-control" name="email" id="email" value="{{user.email or ''}}" >
			</div>
		</div>
		
		<div class="row">
			<div class=" col-md-6 form-group">
				<label>Mobile Number:</label>
			</div>
			<div class=" col-md-6 form-group">
				<input type="text" class="form-control" name="mobile" id="mobile" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" value="{{user.mobile or ''}}" maxlength="10"/>
			</div>
		</div>
		<div class="row">
			<div class=" col-md-6 form-group">
				<label>Whatsapp Mobile Number:</label>
			</div>
			<div class=" col-md-6 form-group">
				<input type="text" class="form-control" value="{{user.whatsapp_number or ''}}" name="whatsapp_number" id="whatsapp_number" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" maxlength="10" />
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 form-group">
				<label>DOB: [DD-MM-YYYY]</label>
			</div>
			<div class=" col-md-6 form-group">
				<input type="text" class="form-control" name="dob"  id="dob" placeholder="DD-MM-YYYY" value="{{ user.dob.strftime('%d-%m-%Y')  if user.dob else ''}}"/>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 form-group">
				<label>Gender:</label>
			</div>
			<div class=" col-md-6 form-group">
				<div class="row">
					<div class="col-md-4">
						<input type="radio"  class="form-input"  name="gender"  id="gender1" value="Male" {% if user.gender == 'Male' %} checked="checked" {% endif %}> <label for="gender1" class="text-dark">Male</label>
					</div>
					<div class="col-md-4"> 
						<input type="radio" class="form-input" name="gender" id="gender2" value="Female" {% if user.gender == 'Female' %} checked="checked" {% endif %}> <label for="gender2" class="text-dark">Female</label>
					</div>
					<div class="col-md-4">
						<input type="radio" class="form-input" name="gender" id="gender3" value="Transgender" {% if user.gender == 'Transgender' %} checked="checked" {% endif %}  > <label for="gender3" class="text-dark">Transgender</label>
					</div>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-6 form-group">
				<label>City:</label>
			</div>
			<div class="col-md-6 form-group">
				<input type="text" class="form-control" name="city" id="city" value="{{user.city or ''}}" placeholder="City"/>
			</div>
			
		</div>
		<div class="row">
			<div class="col-md-6 form-group">
				<label>District:</label>
			</div>   
			<div class="col-md-6 form-group">
				<input type="text" class="form-control" name="district" id="district" value="{{user.district or ''}}" placeholder="District"/>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 form-group">
				<label>Pincode:</label>
			</div>   
			<div class="col-md-6 form-group">
				<input type="text" class="form-control" name="pincode" id="pincode" value="{{user.pincode or ''}}" placeholder="Pincode"/>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6 form-group">
				<label>Country:</label>
			</div>
			<div class="col-md-6 form-group">
				{% set user_country = user.country_id if user.country_id %} 
				<select class = "form-control" id ="country" name= "country" onchange="onchange_country()">
					<option value = "" id = "select">Select Country*</option>
					{% if countries %}
						{% for country in countries %}
						<option value = "{{country.country_id}}" {{ "selected" if country.country_id == user_country else '' }}> {{country.country_name}}</option>
						{% endfor %}
					{% endif %}
				</select>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 form-group">
				<label>State:</label>
			</div>
			<div class="col-md-6 form-group">
				<select class ="form-control" id = "state" name = "state">
					<option value = "" id ="select">Select State</option>
						{% if states %}
						{% for state in states %}
						<option value = "{{state.state_id}}"> {{state.state_name}}</option>
						{% if state.state_id == user.state_id %}
						<option value = "{{state.state_id}}" selected> {{state.state_name}}</option>
						{% endif %}
						{% endfor %}
						{% endif %}
				</select>
			</div>
		</div>     
		<div class="row ">
			<div class="col-12">
				<h4 class="text-danger font-weight-bold">USER ATTACHMENT</h4>
			</div>
		</div><br><br>
		<input type="hidden" name="user_id" id="user_id" value="{{user.user_id}}">
		<div class="row">
			{% for data in datas %}
			<div class="col-md-3 mb-4">
				<div class="card user_attach_card text-white text-center mb-3" >
					<div class="card-header">{{data.attach_type}}</div>
					<div class="card-body">
						<input type="hidden" name="attach_id" id="attach_{{data.attach_type_id}}"value="{{data.attach_id or 0}}">
						<input type="hidden" id="attach_type_{{data.attach_type_id}}" name="attach_type_id" value="{{data.attach_type_id}}"> 
						{% if data.attach_file_name %}
							{% set image_display = "block" %}
						{% else %}
							{% set image_display = "none" %}    
						{% endif %}

						<div id="show_img_{{data.attach_type_id}}" style="display:{{ image_display }}" >
							{% if data.attach_file_name : %} 
								{% set  src= data.attach_path|string +"/"+data.attach_file_name|string+"?"+Helper.getcurrenttimestamp()|string %}
								{% set iframe_hide = "none" %}
								{% set img_hide = "none" %}
								{% if  ".pdf" in data.attach_file_name :%}
									{% set iframe_hide = "block" %}    
								{% else  %}
									{% set img_hide = "block" %}
								{% endif %}

							{% else %}
								{% set  src= "" %}
							{% endif %}
							
							<img src="{{ src}}" id="img_{{data.attach_type_id}}" alt="{{data.attach_type}}" width="100%" height="auto" style="max-height: 150px;display: {{ img_hide }}">
							<iframe src="{{ src }}" id="iframe_{{data.attach_type_id}}" alt="{{data.attach_type}}"  width="100%" height="auto" allow="encrypted-media" allowfullscreenstyle="max-height: 150px;" style="display: {{ iframe_hide }}"> </iframe>                                   
						</div>
						<div class="btn btn-primary btn-block file-field my-2" id="file-field{{data.attach_type_id}}">
							<span>
							 {% if src=="" %}
								 Upload
							 {% else %}
								 Change
							 {% endif %}
							</span> 
							 <input type="file"  id="file_{{data.attach_type_id}}" name="file_{{data.attach_type_id}}" onchange="uploaduser_attachment('{{data.attach_type_id}}')"/>
						 </div>
						<label id="file_{{data.attach_type_id}}-error" class="error" for="file_{{data.attach_type_id}}"></label><br>
						<input type="button" value="Delete" name="delete" style="display: {{ image_display }}" id="delete_{{data.attach_type_id}}" onclick="deleteuser_attachment('{{data.attach_type_id}}')" class="btn btn-danger btn-block  form-input">
					</div>
				</div>
			</div>
			{% endfor %}
		</div><br><hr>

		<div class="row mt-3">
			<div class="col-md-12">

				<button type="submit" class="btn btn-primary btn-lg float-right submit_btn" id="btnsubmit" name="btnsubmit">Update</button>
				
			</div>
		</div>   
	</form>
	
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.1/moment.min.js"></script>
	{% endblock %}
{% block script %}
<script type="text/javascript">
	var BaseUrl     = document.location.origin
	
	var society_id  = "{{society_key}}";
	var society_key = "{{society_key}}";
	
	$(document).ready(function ()
	{ 	

		
		$( "#btnsubmit" ).on( "click", function() {
		    var member_type =$('input[name="member_type"]:checked').val();
		  	var full_name =$("#name").val();
		  	
		    validate_update_form();
		  });		
	});

	function validate_update_form()
		{
			errorclass : 'error',
			$("#bo_edit_form").validate({

				rules : {
					name :"required",
					member_type:"required",
					email      :"required"
				},
				messages : {
					name   : "Please enter the name",
					member_type:"Please select the member Type",
					email      : "Please enter the email"
				}
			});
	   }	

</script>

<script type="text/javascript">
	
	var BaseUrl = document.location.origin
	var oneMB = 1048576
	var society_id  = "{{society_id}}";
	var society_key = "{{society_key}}";  
$( ".file-field" ).on( "click", function() {
 $(this).find('input[type="file"]')[0].click()
});
function uploaduser_attachment(type_id)
{
	var user_id = $("#user_id").val();
	// validate_userattachment_form(type_id)
	if(!validate_userattachment_form(type_id))
	{
		return false  
	}
	var ext = $('#file_'+type_id).val().split('.').pop().toLowerCase();
	if($.inArray(ext, ['gif','jpg','jpeg','pdf','png','jfif','tif','tiff']) == -1) 
	{
		clear()
		alert('Invalid file type');
	}
	else if($('#file_'+type_id)[0].files[0].size > (oneMB*3))
	{
		alert('File Must less than 3MB');
	} 
	else
	{
		var fd              = new FormData();
		var user_profile    = $('#file_'+type_id)[0].files[0];
		var input_id        = "file_"+type_id;
		var file_name       = $('#'+input_id).val().split('\\').pop();

		$("#show_img_"+type_id).show()
		$("#delete_"+type_id).show()
		fd.append('file',user_profile);
		fd.append('user_id',$("#user_id").val());
		fd.append('attach_id',$("#attach_"+type_id).val());
		fd.append('attach_type_id',$("#attach_type_"+type_id).val());
			$.ajax({
				type: 'POST', 
				url: BaseUrl+"/bo/post_amzon_upload/"+society_id+"/"+society_key,
				data: fd,
				contentType: false,
				processData: false,
				cache: false,
				dataType: 'json',
				}).done(function(data, textStatus, jqXHR){

					status = data.status
					msg    = data.msg
					attach_id = data.attach_id
					if (status > 0)
					{
						bucketname = data.bucketname;
						foldername = data.foldername;
						file_name  = data.file_name;
						file_extension = data.file_extension;
						if (file_extension != ".pdf")
						{
							var image_url = "https://"+bucketname+".s3-ap-southeast-1.amazonaws.com/"+foldername+"/"+user_id+"/"+file_name;
							$("#attach_"+type_id).val(data['attach_id']);
							$("#img_"+type_id).attr('src', image_url);
							$("#img_"+type_id).show();
							$("#iframe_"+type_id).hide();
						}
						if (file_extension == '.pdf')
						{
							var image_url = "https://"+bucketname+".s3-ap-southeast-1.amazonaws.com/"+foldername+"/"+user_id+"/"+file_name;
							$("#attach_"+type_id).val(data['attach_id']);
							$("#iframe_"+type_id).attr('src', image_url);
							$("#iframe_"+type_id).show();
							$("#img_"+type_id).hide();
						}
						$("#file-field"+type_id+" span").text("Change") 
					}
					else{ alert(msg);}
				}).fail(function(data){
				alert('error!');
			});
	}        
}
function deleteuser_attachment(type_id)
{   
	
	var fd = new FormData();
	fd.append('attach_id',$("#attach_"+type_id).val());
	fd.append('attach_type_id',$("#attach_type_"+type_id).val());
	var msg=confirm("Are you sure to delete?")
	if (msg==true) 
	{
		$.ajax({
			type: 'POST',
			url: BaseUrl+"/bo/delete_amazon_image/"+society_id+"/"+society_key,
			data: fd,
			contentType: false,
			processData: false,
			cache: false,
			dataType: 'json',
			}).done(function(data, textStatus, jqXHR){
				$("#attach_"+type_id).val(0)
				$("#show_img_"+type_id).hide()
				$("#delete_"+type_id).hide()
				$("#file-field"+type_id+" span").text("Upload") 
				clear()
			}).fail(function(data){
			alert('error!');
			});
	}
	else {}
}
function  validate_userattachment_form(type_id)
{
	var payment_method = $("#payment_method").val();
	var user_pay_method = "{{user_pay_method}}";
	if((type_id == 6||type_id == 15||type_id == 19||type_id == 27) && (payment_method.length == 0) && user_pay_method == 'None')
	{
		alert("Please choose payment method"); 
		return false; 
	}
	else { return true;}           
}
</script>

{% endblock %}