{% 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.PaymentStatus',society_id=society_id,society_key=society_key)}}">
			<div class="row">
				<div class="col-md-12 text-center">
					<br>
					<label><h2>Membership Application of {% if user.prefix: %}{{user.prefix}}{{user.full_name}}{% else %}{{user.full_name or ''}}{% endif %}</h2></label>
				</div>
			</div>
			{% 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="bg-light p-4">
				<div class="row form-group">
					<div class="col-md-6">
						<label>Full Name:</label>
					</div>
					<div class="col-md-6">
						{% if user.prefix and user.full_name: %}
							<h4 class="font-weight-bold">{{user.prefix or ""}}{{user.full_name or ""}}</h4>
						{% else %}
							<h4 class="font-weight-bold">{{user.full_name or ''}}</h4>
						{% endif %}
					</div>
				</div>
				<div class="row form-group">
					<div class="col-md-6">
						<label>Date Of Birth:</label>
					</div>
					<div class="col-md-6">
						{% if user.dob %}
							<h5>{{user.dob.strftime('%d-%m-%Y')}}</h5>
						{% else %}
							<h5>-</h5>
						{% endif %} 
					</div>
				</div>
				<div class="row form-group">
					<div class="col-md-6">
						<label>Gender:</label>
					</div>
					<div class="col-md-6">
						<h5>{{user.gender or '-'}}</h5>
					</div>
				</div>
				<div class="row form-group">
					<div class="col-md-6">
						<label>Email id:</label> 
					</div>
					<div class="col-md-6">
						<h5>{{user.email or '-'}}</h5>
					</div>
				</div>
				<div class="row form-group">
					<div class="col-md-6">
						<label>Mobile Number:</label>
					</div>
					<div class="col-md-6">
						<h5>{{user.mobile  or '-'}}</h5>
					</div>
				</div>
				<div class="row form-group">
					<div class="col-md-6">
						<label>Whatsapp Number:</label>
					</div>
					<div class="col-md-6">
						<h5>{{user.whatsapp_number  or '-'}}</h5>
					</div>
				</div>
				<div class="row form-group">
					<div class="col-md-6">
						<label>Address:</label>
					</div>
					<div class="col-md-6">
						{% if user.address1 or user.address2 or user.address3: %}
							<h5>{{user.address1 or ""}}</h5>
							<h5>{% if user.address2: %}{{user.address2}}{% else %} {% endif %}</h5>
							<h5>{% if user.address3: %}{{user.address3}}{% else %} {% endif %}</h5>
						{% else %}
							<h5>-</h5>
						{% endif %}
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<input type="button" class="btn btn-success font-weight-bold" name="success_payment" id="success_payment" value="Verify Payment" onclick="make_payment_success()">
						<input type="button" class="btn btn-danger font-weight-bold float-right" name="reject_payment" id="reject_payment" value="Reject Payment" onclick="make_payment_reject()">
						
					</div>
				</div>
				<input type="hidden" name="user_id" id="user_id" value="{{user.user_id}}">
				<input type="hidden" name="society_id" id="society_id" value="{{society_id}}">
				<input type="hidden" name="society_key" id="society_key" value="{{society_key}}">
				<input type="hidden" name="payment_id" id="payment_id" value="{{payment.payment_id}}">
				<input type="hidden" name="payment_id" id="payment_id" value="{{payment.unique_id}}">
				<div id="success" class="mt-3">
					<div class="card">
						<div class="card-body">
							<div class="row mt-3">
								<div class="col-md-6">
									<label>Payment Method:</label>
								</div>
								<div class="col-md-6">
									<input type="text" class="form-control" name="payment_method" id="payment_method">
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-md-6">
									<label>API Payment Id:</label>
								</div>
								<div class="col-md-6">
									<input type="text" class="form-control" name="api_payment_id" id="api_payment_id" value="">
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-md-6">
									<label>Payment Unique Id:</label>
								</div>
								<div class="col-md-6">
									<input type="text" class="form-control" name="unique_id" id="unique_id" value="{{payment.unique_id}}">
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-md-6">
									<label>Paid On Date:</label>
								</div>
								<div class="col-md-6">
									<input type="text" class="form-control" name="paid_on" id="paid_on">
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-md-6">
									<label>Amount paid:</label>
								</div>
								<div class="col-md-6">
									<input type="Number" class="form-control" name="amount" id="amount">
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-md-6">
									<label>Remark:</label>
								</div>
								<div class="col-md-6">
									<input type="text" class="form-control" name="remark" id="remark">
								</div>
							</div>


							<div class="row mt-3">
								<div class="col-md-12">
									<button type="submit" name="PaymentStatus" class="btn btn-success float-right" id="payment_success" value="0">Make payment success</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="reject" class="mt-3">
					<div class="card">
						<div class="card-body">
							<div class="row mt-3">
								<div class="col-md-6">
									<label>Payment Unique Id:</label>
								</div>
								<div class="col-md-6">
									<input type="text" class="form-control" name="unique_id" id="unique_id" value="{{payment.unique_id}}">
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-md-6">
									<label>Remark:</label>
								</div>
								<div class="col-md-6">
									<input type="text" class="form-control" name="reject_remark" id="reject_remark">
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-md-12">
									<button type="submit" name="PaymentStatus" class="btn btn-danger float-right font-weight-bold" id="Payment_reject" value="1">Make payment reject</button>
								</div>
							</div>

						</div>
					</div>
				</div>


			</div>
               
			
		</form>
	</div>
{% endblock %}
{% block script %}
<script type="text/javascript">

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

	// var society_id    = "{{ society_id }}"
	$(document).ready(function()
	{
		$("#success").hide();
		$("#reject").hide();
		$( "#payment_success" ).click(function() {
				validate_update_form();
				if (!$("#verify_form").valid())
					{
						return false;
					}   
					   
				});
	

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

		if(confirm("Are you sure you want to reject payment?"))
			        {
					    validate_update_form();
						if (!$("#verify_form").valid())
							{
								return false;
							}  							    
					}
				else{
					return false;
				}
				   
			});

	});


function make_payment_success()
{
	$("#success").show();
	$("#reject_payment").hide();
	$("#success_payment").hide();
    $('html, body').animate({
             scrollTop: $(document).height()
         },
         1500);
         return false;           
}

function make_payment_reject()
{
	$("#reject").show();
	$("#success_payment").hide();
	$("#reject_payment").hide();
    $('html, body').animate({
             scrollTop: $(document).height()
         },
         1500);
         return false;           
}



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

				rules : {
					payment_method  :"required",
					unique_id		:"required",
					paid_on         :"required",
					api_payment_id  :"required",
					amount          :"required",
					remark		    :"required"
				},
				messages : {
					payment_method   : "Please enter the payment method",
					unique_id		 : "Please enter the unique_id",
					paid_on          : "Please enter the paid on date",
					api_payment_id   : "Please enter the Api payment Id",
					amount 		     : "Please enter the amount",
					remark		     : "Please enter the remark"
				}
			});
	 }	

</script>  
{% endblock %}