<%- include('partials/header') %> 
<%- include('partials/sidemenu') %>  
		<!--**********************************
            Content body start
        ***********************************-->
        <div class="content-body">
            <!-- row -->
			<div class="container-fluid">
				<% 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">Card Management</h2>
				</div>
                <div class="row">
					
					<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>09/22</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">Manage Card</h4>
									<p class="fs-13 mb-0">Change your card pin, Freeze and Unfreeze Card status</p>
								</div>
								
							</div>
							<div class="card-body">
								<div id="myBtn" class="card-row">
									<div class="small-card">
										<img class="img-manage" src="images/keypad.png" alt="">
										<p>Change Pin</p>
									</div>
									<div class="small-card">
										<img class="img-manage" src="images/lock.png" alt="">
										<p>Lock Card</p>
									</div>
									
								</div>
								<div class="card-row">
									<div class="small-card">
										<h4>Pin</h4>
										<p><%=owner.carddetails.cardpin%></p>
									</div>
									<div class="small-card">
										<h4>Lock</h4>
										<p><%=owner.carddetails.cardlock%></p>
									</div>
									
								</div>
								
							</div>
						</div>
					</div>
					<div id="myModal" class="modal">

						<!-- Modal content -->
						<div class="modal-content">
							<span class="close">&times;</span>
							<div class="form-body add-user">
								<h4>Manage Card </h4>
								<form method="POST" action="/update-card">
									<div class="row form-row">
										<div class="single-field">
											<label>Enter New Card Pin</label>
											<input id="bn" type="text" min="0" placeholder="" name="cardpin" value="<%=owner.carddetails.cardpin%>">
											
										</div>
										<div class="single-field">
											<label>Card Status</label>
											<% let types = ['Locked','Unlocked'] %>
                                                                
											<select class="form-control" name="cardlock">
												<option selected><%= owner.carddetails.cardlock %></option>
												<% types.forEach(function(type){ %>
													<% if(type !== owner.carddetails.cardlock){ %>
														<option><%=type%></option>
													<% } %>
												<% }) %>
											   
											</select>
											
											
										</div>
									</div>
								
									
									
									<button class="submit" id="thanos">Submit</button>
									
								</form>
								
							</div>	
						  
						</div>
					  
					  </div>
					<div class="col-xl-12">
						<div class="table-responsive table-hover fs-14">
							<h4 class="loan-head">Card Transactions</h4>
							<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>Amount</th>
										
										<th style="text-align: right;">Status</th>
									</tr>
								</thead>
								<tbody>
									<% owner.cardtransactions.forEach(function(cardtransaction){ %>
										<tr>
											<td class="pr-0">
												<%if (cardtransaction.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><%= cardtransaction.referencenumber %></td>
										   
											<td><%= cardtransaction.admindate %></td>
										   
											
											<% if(cardtransaction.type == 'Credit'){ %>
												<td>
													<span class="text-success font-w700">+&#x24;<%=cardtransaction.amount.toLocaleString()%></span>
												</td> 
										   <%   } else{ %>
												<td>
													<span class="text-danger font-w700">-&#x24;<%=cardtransaction.amount.toLocaleString()%></span>
												</td>
										   <% }%>
										   
											<% let thecardclass; %>
											<% if (cardtransaction.status == 'Successful'){ %>
												<% thecardclass = 'success' %>
											<% } else if(cardtransaction.status == 'Pending'){ %>
												<% thecardclass = 'warning' %>
										   <%  } else{ %>
												<% thecardclass = 'danger' %>
										   <%  } %>
											<td>
												<a href="javascript:void(0);" class="btn-link text-<%=thecardclass%> float-right"><%=cardtransaction.status%></a>
											</td>
											
											
										</tr>
									<%  }) %>
								</tbody>
							</table>
						</div>
					</div>
					
				
				</div>
            </div>
        </div>
        <!--**********************************
            Content body end
        ***********************************-->

        <!--**********************************
            Footer start
        ***********************************-->
        <div class="footer">
            <div class="copyright">
                <p>Copyright © 2022 Fountain Capital Trust</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>
		<script>

			// Get the modal
			var modal = document.getElementById("myModal");
			
			// Get the button that opens the modal
			var btn = document.getElementById("myBtn");
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close")[0];
			
			// When the user clicks on the button, open the modal
			btn.onclick = function() {
			  modal.style.display = "block";
			}
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function() {
			  modal.style.display = "none";
			}
			
			// When the user clicks anywhere outside of the modal, close it
			window.onclick = function(event) {
			  if (event.target == modal) {
				modal.style.display = "none";
			  }
			}
				</script>
	
</body>

</html>