<%- 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">Loans</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">Personal Loans</h2>
									
								</div>
								<img src="images/personal1.png" alt="">	
							</div>
							<div class="card-body p-0 accounts-card">
								<p class="mb-1 fs-13">
									Interest Rate: 10%
								</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">Car Loans</h2>
									
								</div>
								<img src="images/car-loan.png" alt="">
							</div>
							<div class="card-body p-0 accounts-card">
								<p class="mb-1 fs-13">
									Interest Rate: 12%
								</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">Business Loans</h2>
									
								</div>
								<img src="images/money.png" alt="">
							</div>
							<div class="card-body p-0 accounts-card">
								<p class="mb-1 fs-13">
									Interest Rate: 7%
								</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">Home Loans</h2>
									
								</div>
								<img src="images/loan.png" alt="">
							</div>
							<div class="card-body p-0 accounts-card">
								<p class="mb-1 fs-13">
									Interest Rate: 9%
								</p>
							</div>
						</div>
                    </div>
					
					
					<div class="col-xl-12">
						<div class="card">
							<div class="card-header d-block d-sm-flex border-0 pb-0">
								<div>
									<h4 class="text-black fs-20">Loan Request Form</h4>
									<p class="fs-13 mb-0">Fill the form below to request for a loan</p>
								</div>
								
							</div>
							<div class="card-body xc">
								
								<div class="form-body">
									<form method="POST" action="/create-loans">
										<div class="row form-row">
											<div class="single-field">
												<select id="loantype" name="loantype">
													<option selected>Personal Loans</option>
													<option>Car Loans</option>
													<option>Business Loans</option>
													<option>Home Loans</option>
												</select>
												
											</div>
											<div class="single-field">
												<input class="elp" id="loanamount" name="loanamount" type="number" placeholder="Enter Loan Amount" min="0" required>
											</div>
										</div>
										<div class="row form-row">
											<div class="single-field">
												<input class="elp" type="number" id="duration" name="duration" placeholder="Enter Duration in Months" min="0" required>
												
											</div>
											<div class="single-field">
												<input id="amountdue" name="amountdue" type="number" min="0" placeholder="Amount Due" readonly>
											</div>
										</div>
										<button class="submit" id="loany">Submit Request</button>
									</form>
								</div>	
								
							
								<div class="media align-items-center d-none d-sm-flex">
									
									<div class="media-body card-limit">
										<p class="mb-2">Monthly Limits</p>
										<h4 class="mb-0 text-black font-w600 fs-20">$100,000</h4>
									</div>
									
								</div>
							</div>
						</div>
					</div>
				
					<div class="col-xl-12">
						<div class="table-responsive table-hover fs-14">
							<h4 class="loan-head">Loan History</h4>
							<table class="table display mb-4 dataTablesCard  card-table" id="example5">
								<thead>
									<tr>
										
										<th>Transaction ID</th>
										<th>Date</th>
										<th>Amount</th>
										<th>Amount Due</th>
										<th>Type</th>
										
										<th style="text-align: right;">Status</th>
									</tr>
								</thead>
								<tbody>
									<%owner.loanrequests.forEach(function(loans){ %>
										<tr>
										
											<td><%=loans.referencenumber%></td>
											<% let date = new Date(loans.date) %>
											<td class="wspace-no"><%= date.toDateString()%></td>
											<td>
												<span class="text-success font-w700">+$ <%=loans.amount%></span>
											</td>
											<td>
												<span class="text-success font-w700">+$ <%=loans.amountdue.toFixed(2)%></span>
											</td>
											<td><%=loans.type%></td>
										
										
											
											
											<td>
												<a href="javascript:void(0);" class="btn-link text-success float-right"><%=loans.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>
	<script>
		
		let amountdue = document.getElementById('amountdue')
		let loantype = document.querySelector('.filter-option-inner-inner')
		document.querySelectorAll('.elp').forEach(function(elp){
			elp.addEventListener('input', function(){
				let amount = parseInt(document.getElementById('loanamount').value)
				let duration = parseInt(document.getElementById('duration').value)
				amountdue.value = amount + (amount * 0.01 * (duration/12))
				
			})
		})
	</script>
	
</body>

</html>