<%- include('partials/header') %> 
<%- include('partials/sidemenu') %> 
<style>
	button.btn.dropdown-toggle.btn-light {
    display: none;
}
.dropdown.bootstrap-select.form-control {
    padding: 0;
}
</style>
        <!--**********************************
            Content body start
        ***********************************-->
        <div class="content-body">
            <div class="container-fluid">
                <div class="page-titles">
					<ol class="breadcrumb">
						<li class="breadcrumb-item"><a href="javascript:void(0)">Edit Loan</a></li>
						<li class="breadcrumb-item active"><a href="/edit-user/<%=owner._id%>">Back To All Loans</a></li>
					</ol>
                </div>
                <!-- row -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="profile card card-body px-3 pt-3 pb-0">
                            <div class="profile-head">
                                <div class="photo-content">
                                    <div class="cover-photo"></div>
                                </div>
                                <div class="profile-info">
									<% if(owner.profileimage.path !== undefined) { %>
										<div class="profile-photo">
											<img src="/<%=owner.profileimage.path%>" class="img-fluid rounded-circle" alt="" style=" width:120px !important; height:120px !important; max-width: unset;">
										</div>
									<%} else{ %>
										<div class="profile-photo" >
											<img src="../images/avatar/profile.png" class="img-fluid rounded-circle" alt="">
										</div>
							     	<%}%>
									
									<div class="profile-details">
										<div class="profile-name px-3 pt-2">
											<h4 class="text-primary mb-0"><%=owner.fullnames.firstname%> <%=owner.fullnames.lastname%></h4>
											<p>Fountain Core User</p>
										</div>
										<div class="profile-email px-2 pt-2">
											<h4 class="text-muted mb-0"><%=owner.username%></h4>
											<p>Email</p>
                                        </div>
                                       
										
									</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                   
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="profile-tab">
                                    <div class="custom-tab-1">
                                       
                                        <div class="tab-content">
											
                                            <div id="transactions" class="tab-pane fade show active">
												<h4>Edit Loan</h4>
                                                <div class="pt-3">
                                                    <div class="settings-form">
                                                        
                                                        <form method="POST" action="/update-user-loan">
                                                            <div class="form-row">
                                                                <input type="text" name="loanid" value="<%=loan._id%>" hidden>
                                                                <div class="form-group col-md-6">
                                                                   
                                                                        <% let types = ['Personal Loans','Car Loans', 'Business Loans', 'Home Loans'] %>
                                                                
                                                                        <select class="form-control" name="loantype">
                                                                            <option selected><%= loan.type %></option>
                                                                            <% types.forEach(function(type){ %>
                                                                                <% if(type !== loan.type){ %>
                                                                                    <option><%=type%></option>
                                                                                <% } %>
                                                                            <% }) %>
                                                                           
                                                                        </select>
                                                                     </div>
                                                                     <div class="single-field">
                                                                        <input class="elp" id="loanamount" name="loanamount" type="number" placeholder="Enter Loan Amount" min="0" required="" value="<%=loan.amount%>">
                                                                    </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="" value="<%=loan.duration%>">
                                                                    
                                                                </div>
                                                                <div class="single-field">
                                                                    <input id="amountdue" name="amountdue" type="number" min="0" placeholder="Amount Due" readonly="" value="<%=loan.amountdue%>">
                                                                </div>
                                                                <input type="text" value="617a8f942a8c02280c9ab40e" class="form-control" name="userid" hidden="">
                                                            </div>
                                                            <div class="form-row">
                                                              
                                                                
                                                                <div class="form-group col-md-6">
                                                                    
                                                                    <% let status = ['Successful','Pending','Failed'] %>
                                                                
                                                                        <select class="form-control" name="status">
                                                                            <option selected><%= loan.status %></option>
                                                                            <% status.forEach(function(stat){ %>
                                                                                <% if(stat !== loan.status){ %>
                                                                                    <option><%=stat%></option>
                                                                                <% } %>
                                                                            <% }) %>
                                                                            
                                                                        </select>
                                                                   
                                                                </div>
                                                            </div>
                                                             <button class="btn btn-primary" type="submit"> Update Loan                    </button>
                                                            
                                                        </form>
                                                       
                                                    </div>
                                                </div>
                                               
                                            </div>
                                          
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </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
    ***********************************-->
	
	<!--removeIf(production)-->
        
    <!--**********************************
        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="/js/custom.min.js"></script>
	<script src="/js/deznav-init.js"></script>
	
    <script type="text/javascript">
        $(document).ready(function(){
          setTimeout(function(){
            $('#flash').remove();
          }, 5000);
         })
    </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 = Math.ceil(amount + (amount * 0.01 * (duration/12)))
            
        })
    })
</script>



	
		
</body>


</html>