@extends('layouts.main')
@section('title','Report')
@section('content')
<div class="pcoded-content">
	<div class="pcoded-inner-content p-0">
		<div class="main-body">
			<div class="page-wrapper p-0">
				<div class="page-header p-15 m-b-0 pro-page-heading1">
					<div class="page-header-title">
						<h4>Payment History</h4>
					</div>
					<div class="page-header-breadcrumb p-r-10">
						<ul class="breadcrumb-title"></ul>
					</div>
				</div>
				<div id="pro-preview-page1"></div>
				<div class="page-body">
					<div class="hme-loading-mask">
						<div class="hme-loading-container">
					    	<div class="hme-dual-ring"></div>
					    	<div>Please wait, Loading...</div>
						</div>
					</div>
					<div class="pageheader bg-666666">
						<div class="row"></div>
					</div>
					<div class="row">
		              	<div class="col-xs-12 col-md-12">
			                <ul class="nav nav-tabs p-0" id="myTab" role="tablist">
			                	<li class="nav-item">
			                      <a class="nav-link f-16 active" id="payment-history-tab" data-tab="general" href="#payment-history"> General Payment History</a>
			                    </li>
			                    <li class="nav-item">
			                      <a class="nav-link f-16" id="assessment-payment-tab" data-tab="assessment" href="#assessment-payment"> Assessment Payment History</a>
			                    </li>
			                </ul>
							<table class="table table-striped pro-list-table">
								<thead class="bgn-gradient-blue">
									<tr>
										<th scope="col">Payment Status</th>
										<th scope="col">Transaction ID</th>
						                <th scope="col">Payment Date & Time</th>
						                <th scope="col">Payment Amount</th>
						                <th scope="col">Payment Mode</th>
						                <th>Product Name</th>
		             				</tr>
								</thead>
								<tbody id="js-report-result">
									@include("gold.include.payment-history-render")
								</tbody>
							</table>
							@if($data->hasMorePages())
		                        <div class="d-flex flex-row justify-content-center">
									<button class="btn orange btn-lg" type="button" id="load_more_report" data-page='2' data-tab="general">Load More</button>
							    </div>
		                    @endif
				        </div>
				    </div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@section('footer')
<script type="text/javascript">
if("{{ Session::get('success') }}"){
	swal("Payment Successfull", "{{ Session::get('success') }}", "success")
}
else if("{{ Session::get('failure') }}")
{
	swal("Payment Failure", "{{ Session::get('failure') }} \n Your transaction was not successful. Please try again later. If any funds were debited from your account, it will be refunded back within 3-5 business days. For any grievance you may contact us at uday.s@hiremee.co.in or call us at +91 87929 22796", "error")
}else if("{{ Session::get('warning') }}"){
	swal("Already Gold Activated", "{{ Session::get('warning') }}", "warning")
}

$(document).ready(function(){
	$("#js-report-result").empty();
	loadPaymentLists('general',1);
});

$(".nav-item a").on("click",function(e){
	e.preventDefault();
	$(".nav-item").find('a').removeClass('active');
	$(this).addClass('active');
	var tab = $(this).data('tab');
	$("#js-report-result").empty();
	$('#load_more_report').attr('data-page',2);
	$('#load_more_report').attr('data-tab',tab);

	loadPaymentLists(tab,1);
});

$('#load_more_report').on('click',function(e){
	e.preventDefault();
  	$(this).hide();
  	var tab = $(this).data('tab');
	loadPaymentLists(tab,$(this).data('page'));
});

function loadPaymentLists(tab,page)
{
	$('.hme-loading-mask').fadeIn();
	$.ajax({
	    url: "{{ secure_url('candidate/load-payment-history') }}",
	    data: {'limit': 10,'request_type':'remote','page':page,'tab':tab},
	    dataType:'json',
	    type:'post',
	    success: function(response){
	      	if (response.status == 200) 
	      	{
		        $('#js-report-result').append(response.component);
		        $('.hme-loading-mask').fadeOut();
	    	    if(response.hasmore == false) {
	        	  	$('#load_more_report').hide();
	        	} else {
	          		$('#load_more_report').show();
	          		$('#load_more_report').attr('data-page',parseInt($('#load_more_report').attr('data-page'))+1);
	        	}
	      	}
	    },
	    error: function(error){
	      alertMessage("danger","Your action  has been suspended, Sorry for the inconvenience. Please try again later","Something Went Wrong");
	    }
  	});
}
</script>
@endsection