<%- include('partials/header') %> 
<%- include('partials/sidemenu') %>  
		<!--**********************************
            Content body start
        ***********************************-->
        <div class="content-body">
            <!-- row -->
			<div class="container-fluid">
				<% if(owner.status === "Dormant") { %> 
					<div class="form-head d-flex dormant-container text-center mb-4 mb-md-5 align-items-start">
						<p class="text-white sm-h6 md-h3 font-w600">Account Suspended, kindly contact Bank Support</p>
					</div>
				<% } %>
				<% if(owner.status === "Restricted") { %> 
					<div class="form-head d-flex dormant-container text-center mb-4 mb-md-5 align-items-start">
						<p class="text-white sm-h6 md-h3 font-w600">Account Restricted, kindly contact Bank Support</p>
					</div>
				<% } %>
				<div class="form-head d-flex mb-4 mb-md-5 align-items-start">
					
					<h2 class="text-black mb-2 font-w600">Account Summary</h2>
				</div>
                <div class="row">
					<div class="col-xl-3 col-xxl-6 col-lg-6 col-sm-6">
						<div class="card overflow-hidden">
							<div class="card-header border-0 pb-0">
								<div class="mr-auto">
									<h2 class="text-black mb-2 font-w600">$<%=owner.mainbalance.toLocaleString()%></h2>
									
								</div>
								<img src="images/piggy-bank.png" alt="">	
							</div>
							<div class="card-body p-0 accounts-card">
								<p class="mb-1 fs-13">
									Main Balance
								</p>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-xxl-6 col-lg-6 col-sm-6">
						<div class="card overflow-hidden">
							<div class="card-header border-0 pb-0">
								<div class="mr-auto">
									<h2 class="text-black mb-2 font-w600">$<%=owner.loanbalance.toLocaleString()%></h2>
									
								</div>
								<img src="images/personal.png" alt="">
							</div>
							<div class="card-body p-0 accounts-card">
								<p class="mb-1 fs-13">
									Loan Balance
								</p>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-xxl-6 col-lg-6 col-sm-6">
						<div class="card overflow-hidden">
							<div class="card-header border-0 pb-0">
								<div class="mr-auto">
									<h2 class="text-black mb-2 font-w600">$<%=owner.cardbalance.toLocaleString()%></h2>
									
								</div>
								<img src="images/credit-card.png" alt="">
							</div>
							<div class="card-body p-0 accounts-card">
								<p class="mb-1 fs-13">
									Credit Balance
								</p>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-xxl-6 col-lg-6 col-sm-6">
						<div class="card overflow-hidden">
							<div class="card-header border-0 pb-0">
								<div class="mr-auto">
									<h2 class="text-black mb-2 font-w600">$<%=owner.termdepositbalance.toLocaleString()%></h2>
									
								</div>
								<img src="images/long-term-debt.png" alt="">
							</div>
							<div class="card-body p-0 accounts-card">
								<p class="mb-1 fs-13">
									Term Deposit
								</p>
							</div>
						</div>
                    </div>
					
					
					<div class="col-xl-6 col-xxl-6 col-lg-6 col-sm-12">
						<div class="card">
							<div class="card-header d-block d-sm-flex border-0 pb-0">
								<div>
									<h4 class="text-black fs-20">Cards</h4>
									<p class="fs-13 mb-0">Cards attached to your banking accounts</p>
								</div>
								<div class="dropdown custom-dropdown mb-0 mt-3 mt-sm-0">
									<div class="btn text-black bgl-light rounded-0" data-toggle="dropdown">
										Request Activation
									</div>
								 </div>
							</div>
							<div class="card-body xc">
								
									
								<div class="credit-card">
									<div class="credit-head">
										<div class="c-head-left">
											<img class="mw-100 img-less" src="images/card/contactless.png" alt="">
										</div>
										<div class="c-head-right">
											<img class="mw-100 img-master" src="images/card/mastercard.png" alt="">
										</div>
									</div>
									<div class="credit-body">
										<div class="c-body-left">
											<% let pan = owner.carddetails.pan %>
											<% let fpan = pan.match(/.{1,4}/g) %>
											<p class="pan"><%=fpan.join('  ')%></p>
										</div>
										<div class="c-body-right">
											<p class="little-title">CVV</p>
											<p><%=owner.carddetails.cvv%></p>
										</div>
									</div>
									<div class="credit-footer">
										<div class="c-footer-left">
											<p class="little-title">CARD HOLDER</p>
											<p><%=owner.fullnames.firstname%> <%=owner.fullnames.lastname%></p>
										</div>
										<div class="c-footer-right">
											<p class="little-title">VALID THRU</p>
											<p>08/24</p>
										</div>
									</div>
								</div>
							
								<div class="media align-items-center d-none d-sm-flex">
									
									<div class="media-body card-limit">
										<p class="mb-2">Card Balance</p>
										<h4 class="mb-0 text-black font-w600 fs-20">$<%=owner.cardbalance%></h4>
									</div>
									
								</div>
							</div>
						</div>
					</div>
					<div  class="col-xl-6 col-xxl-6 col-lg-6 col-sm-12">
						<div class="card">
							<div class="card-header d-block d-sm-flex border-0 pb-0">
								<div>
									<h4 class="text-black fs-20">Loans</h4>
									<p class="fs-13 mb-0">Get Loans at the best rate</p>
								</div>
								<div class="dropdown custom-dropdown mb-0 mt-3 mt-sm-0">
									<div class="btn text-black bgl-light rounded-0" data-toggle="dropdown">
										Loan Request
									
									</div>
									
                                </div>
							</div>
							<div class="card-body">
								<div class="long-card cardone">
									<h4>Personal Loans</h4>
									<p>Apply for a Personal Loan to get an instant decision and funds transferred the same day. </p>
								</div>
								<div class="long-card cardtwo">
									<h4>Home Equity Loans</h4>
									<p>Mortgages. Getting ready to buy a home or want to remortgage your current one? </p>
								</div>
								<div class="media align-items-center d-none d-sm-flex">
									
									<div class="media-body card-limit">
										<p class="mb-2">Outstanding Loans</p>
										<h4 class="mb-0 text-black font-w600 fs-20">$<%=owner.loanbalance%></h4>
									</div>
									<a class="btn btn-link ml-auto font-w700" href="javascript:void(0);">View details</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xl-12">
						<div class="table-responsive table-hover fs-14">
							<table class="table display mb-4 dataTablesCard  card-table" id="example5">
								<thead>
									<tr>
										<th>
											<div class="checkbox mr-0 align-self-center">
												<div class="custom-control custom-checkbox ">
													<input type="checkbox" class="custom-control-input" id="checkAll" required="">
													<label class="custom-control-label" for="checkAll"></label>
												</div>
											</div>
										</th>
										<th>Reference No</th>
										<th>Date</th>
										<th>Description</th>
										<th>Amount</th>
										
										<th style="text-align: right;">Status</th>
									</tr>
								</thead>
								<tbody>
									<% owner.transfertransactions.forEach(function(transaction){ %>
										<tr>
											<td class="pr-0">
												<%if (transaction.type == 'Credit'){ %>
													<span class="bgl-success p-3 d-inline-block">
														<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
															<path d="M23.6186 15.7207L23.6186 15.7207L23.6353 22.6289C23.6354 22.6328 23.6354 22.6363 23.6353 22.6396M23.6186 15.7207L23.1353 22.6341L23.6353 22.635C23.6353 22.6481 23.6347 22.6583 23.6345 22.6627L23.6344 22.6642C23.6346 22.6609 23.6351 22.652 23.6353 22.6407C23.6353 22.6403 23.6353 22.64 23.6353 22.6396M23.6186 15.7207C23.6167 14.9268 22.9717 14.2847 22.1777 14.2866C21.3838 14.2885 20.7417 14.9336 20.7436 15.7275L20.7436 15.7275L20.7519 19.1563M23.6186 15.7207L20.7519 19.1563M23.6353 22.6396C23.6329 23.4282 22.9931 24.0705 22.2017 24.0726C22.2 24.0726 22.1983 24.0727 22.1965 24.0727L22.1944 24.0727L22.1773 24.0726L15.2834 24.056L15.2846 23.556L15.2834 24.056C14.4897 24.054 13.8474 23.4091 13.8494 22.615C13.8513 21.8211 14.4964 21.179 15.2903 21.1809L15.2903 21.1809L18.719 21.1892L5.53639 8.0066C4.975 7.44521 4.975 6.53505 5.53639 5.97367C6.09778 5.41228 7.00793 5.41228 7.56932 5.97367L20.7519 19.1563M23.6353 22.6396C23.6353 22.6376 23.6353 22.6356 23.6353 22.6336L20.7519 19.1563M22.1964 24.0726C22.1957 24.0726 22.1951 24.0726 22.1944 24.0726L22.1964 24.0726Z" fill="#2BC155" stroke="#2BC155"></path>
														</svg>
													</span>
											   <% } else { %>
												<span class="bgl-danger p-3 d-inline-block">
													<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
														<path d="M5.13185 13.9043L5.13185 13.9043L5.11515 6.99607C5.11511 6.99224 5.11513 6.98868 5.11517 6.98542M5.13185 13.9043L5.61517 6.99089L5.11517 6.99005C5.11519 6.97692 5.11575 6.96665 5.116 6.96234L5.11608 6.96082C5.11588 6.96411 5.11535 6.97298 5.11519 6.98431C5.11518 6.98468 5.11517 6.98505 5.11517 6.98542M5.13185 13.9043C5.13378 14.6982 5.77881 15.3403 6.57281 15.3384C7.36672 15.3365 8.00877 14.6914 8.00689 13.8975L8.00689 13.8975L7.99856 10.4687M5.13185 13.9043L7.99856 10.4687M5.11517 6.98542C5.11755 6.19684 5.75739 5.55451 6.54875 5.55238C6.55044 5.55236 6.5522 5.55235 6.554 5.55234L6.55606 5.55234L6.57321 5.55239L13.4671 5.56905L13.4658 6.06905L13.4671 5.56905C14.2608 5.57098 14.903 6.21593 14.9011 7.01004C14.8992 7.80394 14.2541 8.44597 13.4602 8.44409L13.4602 8.4441L10.0315 8.43582L23.2141 21.6184C23.7755 22.1798 23.7755 23.0899 23.2141 23.6513C22.6527 24.2127 21.7426 24.2127 21.1812 23.6513L7.99856 10.4687M5.11517 6.98542C5.11516 6.98743 5.11517 6.98943 5.11517 6.99144L7.99856 10.4687M6.5541 5.55237C6.55474 5.55237 6.5554 5.55237 6.55606 5.55238L6.5541 5.55237Z" fill="#FF2E2E" stroke="#FF2E2E"></path>
													</svg>
												</span>
											   <% } %>
											</td>
											<td><%= transaction.referencenumber %></td>
											<%if (transaction.admindate == undefined){ %>
												<% let date = new Date(transaction.date) %>
												<% let d = date.toDateString() %>
												<% let t = date.getTime() %>
												<% let s = date.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"); %>
											<td><%= d %></td>   
											<% } else {%>
											<td><%= transaction.admindate %></td>
											<% } %>
											<td style="text-transform: capitalize;"><%=transaction.action%><br><%=transaction.bdetails.bn %> <br><%=transaction.bdetails.bbn%></td>
											<% if(transaction.type == 'Credit'){ %>
												<td>
													<span class="text-success font-w700">+&#x24;<%=transaction.amount.toLocaleString()%></span>
												</td> 
										   <%   } else{ %>
												<td>
													<span class="text-danger font-w700">-&#x24;<%=transaction.amount.toLocaleString()%></span>
												</td>
										   <% }%>
										   
											<% let theClass; %>
											<% if (transaction.status == 'Successful'){ %>
												<% theClass = 'success' %>
											<% } else if(transaction.status == 'Pending'){ %>
												<% theClass = 'warning' %>
										   <%  } else{ %>
												<% theClass = 'danger' %>
										   <%  } %>
											<td>
												<a href="javascript:void(0);" class="btn-link text-<%=theClass%> float-right"><%=transaction.status%></a>
											</td>
											
											
										</tr>
									<%  }) %>
								</tbody>
							</table>
						</div>
					</div>
					
				
				</div>
            </div>
        </div>
        <!--**********************************
            Content body end
        ***********************************-->

        <!--**********************************
            Footer start
        ***********************************-->
        <div class="footer">
            <div class="copyright">
				<p>Copyright © 2024 Fountain Core Finance</p>
            </div>
        </div>
        <!--**********************************
            Footer end
        ***********************************-->

		<!--**********************************
           Support ticket button start
        ***********************************-->

        <!--**********************************
           Support ticket button end
        ***********************************-->


    </div>
    <!--**********************************
        Main wrapper end
    ***********************************-->

    <!--**********************************
        Scripts
    ***********************************-->
    <!-- Required vendors -->
    <script src="vendor/global/global.min.js"></script>
	<script src="vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
	<script src="vendor/chart.js/Chart.bundle.min.js"></script>
    <script src="js/custom.min.js"></script>
	<script src="js/deznav-init.js"></script>
	<script src="vendor/owl-carousel/owl.carousel.js"></script>
		
		
	
	<!-- Chart piety plugin files -->
    <script src="vendor/peity/jquery.peity.min.js"></script>
	
	
	<!-- Dashboard 1 -->
	<script src="js/dashboard/dashboard-1.js"></script>
	<script>
		function carouselReview(){
			/*  testimonial one function by = owl.carousel.js */
			/*  testimonial one function by = owl.carousel.js */
			jQuery('.owl-bank-wallet').owlCarousel({
				loop:true,
				autoplay:false,
				margin:0,
				nav:false,
				center:true,
				dots: false,
				navText: [''],
				responsive:{
					0:{
						items:2
					},
					
					480:{
						items:2
					},			
					
					991:{
						items:3
					},
					1200:{
						items:3
					},
					1600:{
						items:2
					}
				}
			})		
			
			jQuery('.testimonial-one').owlCarousel({
				loop:true,
				autoplay:true,
				margin:15,
				nav:true,
				dots: false,
				center:true,
				navText: ['', '<i class="las la-long-arrow-alt-right"></i>'],
				responsive:{
					0:{
						items:3
					},
					600:{
						items:5
					},	
					991:{
						items:8
					},			
					
					1200:{
						items:8
					},
					1600:{
						items:6
					}
				}
			})			
		}
		
		jQuery(window).on('load',function(){
			setTimeout(function(){
				carouselReview();
			}, 1000); 
		});
	</script>
	
</body>

</html>