{% extends 'back_office/bo_layout.html' %}
{% block head %}
{% endblock %}
{% block title %}View Form{% endblock %} 
{% block content %}
   
	<div class="container p-2 bg-white">
		<form method="POST" id="verify_form" action="{{url_for('backoffice.PostUpdateRatificationYear',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 }}</h4>
			</div>
			{% endfor %}
			
			<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="p-4">
				<div class="card bg-light">
					<div class="card-body">
						<h2 class="text-center">Last Ratified Membership Number: <b>{{last_ratified_number}}</b>(Ratified Year: <b>{{last_ratified_year or ''}}</b>)</h4><hr>
						{% if ratification_member_type : %}
						<h2 class="text-center">Ratification Member Types: <b>{{ratification_member_type}}</b></h2><hr>
						{% endif %}	
						
						{% if next_ratified_number : %}
						<h2 class="text-center">Non Ratified Membership Numbers</h2>
						
						<div class="row mt-3">
							<div class="col-md-2"></div>
							<div class="col-md-4">
								<label>From Membership Number:</label>
							</div>
							<div class="col-md-4">
								<label><b>{{next_ratified_number}}</b></label>
							</div>
							<div class="col-md-4"></div>														
						</div>

						<div class="row mt-3">
							<div class="col-md-2"></div>
							<div class="col-md-4">
								<label>Last Membership Number:</label>
							</div>
							<div class="col-md-4">
								<label><b>{{last_membership_number}}</b></label>
								<input type="hidden" name="last_membership_number" id="last_membership_number" value="{{last_membership_number}}">
							</div>
							<div class="col-md-4"></div>													
						</div><hr>

						<h2 class="text-center"> Generate Ratification Year</h2>
						<div class="row mt-3">
							<div class="col-md-2"></div>
							<div class="col-md-4">
								<label>Membership No From:</label>
							</div>
							<div class="col-md-4">
								<input type="text" class="form-control" name="membership_no_from" id="membership_no_from" value="{{next_ratified_number}}" disabled>
							</div>
							<div class="col-md-4"></div>							
								<input type="hidden" class="form-control" name="membership_no_from_only" id="membership_no_from_only" value="{{next_ratified_number}}">							
						</div>
						<div class="row mt-3">
							<div class="col-md-2"></div>
							<div class="col-md-4">
								<label>Membership No To:</label>
							</div>
							<div class="col-md-4">
								<input type="text" class="form-control" name="membership_no_to" id="membership_no_to" value="" onkeyup="use_last()">
							</div>
							<div class="col-md-2">
							<button type="button" class="btn btn-sm btn-primary" id="use_last_member">Use the last number</button>								
							</div>
						</div>
						<div class="row mt-3">
							<div class="col-md-2"></div>
							<div class="col-md-4">
								<label>Ratification Year:</label>
							</div>
							<div class="col-md-4">
								<input type="number" class="form-control" name="ratification_year" id="ratification_year" value="">
								<label></label>
							</div>
						</div>
						<!-- <div id="ErrorAlert" class="alert alert-danger text-center" style="display:none;"> 
			         <p class="close" onclick="closeAlert()"  aria-label="close">&times;</p> -->
			            <h4 class="text-center text-danger font-weight-bold" id="flash_error" ></h4>
			    		<!-- </div> -->
			    		<!-- <div id="successAlert" class="alert alert-success text-center" style="display:none;"> 
			         <p class="close" onclick="closeAlert()"  aria-label="close">&times;</p> -->
			            <h4 class="text-center text-success font-weight-bold" id="flash_success" ></h4>
			    		<!-- </div>				 -->
						<div class="row mt-3">
							<div class="col-md-6"></div>
							<div class="col-md-4 text-center">
								<button type="button" class="btn btn-success" name="update_ratification_year" id="update_ratification_year" value="0" onclick="verifiy_update(0)">Verifiy</button>
								<button type="button" class="btn btn-success" name="generate_ratification_year" id="generate_ratification_year" value="1" onclick="verifiy_update(1)">Generate</button>							
							</div>
						</div>
						{% else %}
						<h4 class="text-center">No New Members got approved</h4>						
						{% endif %}						
					</div>					
				</div>
			</div> 
			
		</form>
	</div>
{% endblock %}
{% block script %}
<script type="text/javascript">

    var BaseUrl = document.location.origin
	 var oneMB   = 1048576 

	
	$(document).ready(function()
	{
		$("#generate_ratification_year").hide();

			$( "#use_last_member" ).click(function() {
				var last_membership_number  = $("#last_membership_number").val();
				$("#membership_no_to").val(last_membership_number);
			});			
		});


	 window.onbeforeunload = function(e) 
	 {
       return 'Dialog text here.';
    };



	function use_last()
	{
		 $("#generate_ratification_year").hide();
		 $("#update_ratification_year").show();
	}

	function verifiy_update(data){
			
				var society_id = $("#society_id").val();
				var society_key = $("#society_key").val();
				var membership_no_from = $("#membership_no_from").val();
				var membership_no_to   = $("#membership_no_to").val();
				var ratification_year = $("#ratification_year").val();
				localStorage.setItem(membership_no_to, ratification_year);
				validate_update_form();
				if (!$("#verify_form").valid())
					{
						return false;
					}

				$.ajax({
		           type: 'POST',
		           url: BaseUrl+"/bo/post_update_ratification_year/"+society_id+"/"+society_key,
		           data:{ 
		                  'membership_no_from': membership_no_from,
		                  'membership_no_to'  : membership_no_to,
		                  'ratification_year' : ratification_year,
		                  'is_ratified' : data
		                }, 
		           dataType: 'json',
		           async  :true,
		           success: function(data){
		           	if(data.flash_color == "errorMsg")
		           	{
		           		$('#flash_error').show();
                  	$("#flash_error").html(data.flash_mesg);
                  	$("#flash_success").hide();
		           	}
		           	else
		           	{
		           		
		           		$('#flash_success').show();
                  	$("#flash_success").html(data.flash_mesg);
	                  	$("#flash_error").hide();

		           	}
		           	
		           	if (data.is_ratified == 1)
		           	{
							window.onbeforeunload = null;
							setTimeout(function(){
						        location.reload();
						        return true;
						    }, 5000)  
		           	}
		           	else
		           	{
		           	 var membership_no_to = data.membership_no_to;
			           var ratification_year = data.ratification_year;
			           $("#membership_no_to").val(membership_no_to);
			           $("#ratification_year").val(ratification_year);
			           	if(data.flash_color == "successMsg")
			           	{
			           		$("#generate_ratification_year").show();
			           		$("#update_ratification_year").hide();
			           		return false;
			           	} 

			           
		           	}
			           
        					
    				
		           },
		           error: function(XMLHttpRequest, textStatus, errorThrown) {}                      
		        });	
					
				};
	

$(document).on("change" , "#membership_no_to",function(e)
	{
		var membership_no_to = $("#membership_no_to").val();
		var membership_no_to_only = membership_no_to.replace(/[A-Za-z]/g, ''); // Removes alphabets
      $("#membership_no_to_only").val(membership_no_to_only);
	});



function  closeAlert()
  {
        $('#successAlert').hide();
         $('#ErrorAlert').hide();
  } 

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

				rules : {
					membership_no_from  :"required",
					membership_no_to	:"required",
					ratification_year   :{
						required: true,
						maxlength: 4,
						minlength: 4
					}

				},
				messages : {
					membership_no_from   : "Please enter the from membership number",
					membership_no_to     : "Please enter the from membership number",
					ratification_year    : 
					{ required : "Please enter the ratification year",
					  maxlength: "please enter 4 character only",
					  minlength: "please enter 4 character only"
					}
					
				}
			});
	 }	

</script>  
{% endblock %}