<%- include('partials/header') %> 
<%- include('partials/sidemenu') %>  
		<!--**********************************
            Content body start
        ***********************************-->
        <div class="content-body">
            <!-- row -->
			<div class="container-fluid">
				<div class="form-head d-flex mb-4 mb-md-5 align-items-start">
					
					<h2 class="text-black mb-2 font-w600">OTP Management</h2>
				</div>
				<div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
								<h4 class="card-title">All OTP</h4>
								<a id="myBtn" class="add-button" href="/create-otp">Add OTP</a>
							</div>
							<!-- The Modal -->
							<div id="myModal" class="modal">

								<!-- Modal content -->
								
							  
							  </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-responsive-md">
                                        <thead>
                                            <tr>
                                                <th class="width80"><strong>#</strong></th>
												<th><strong>DATE</strong></th>
												<th><strong>OTP</strong></th>
                                                <th><strong>STATUS</strong></th>
                                                <th><strong>MANAGE</strong></th>
                                            </tr>
                                        </thead>
                                        <tbody>
											<% otp.forEach(function(otp, index){ %>
												<tr>
													<td><strong><%=index + 1%></strong></td>
													<% let date = new Date(otp.date) %>
													<% let d = date.toDateString() %>
													<% let t = date.getTime() %>
													<% let s = date.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"); %>
													<td><%= d%> <%= s%></td>
													<td><%=otp.otp%></td>
													
													<td><span class="badge light badge-success"><%=otp.status%></span></td>
													
													<td>
														<div class="dropdown">
															<button type="button" class="btn btn-success light sharp" data-toggle="dropdown">
																<svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg>
															</button>
															<div class="dropdown-menu">
																
																<a class="dropdown-item" href="#">Delete</a>
															</div>
														</div>
													</td>
												</tr>
											<%})%>
                                          
											
                                        </tbody>
                                    </table>
                                </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
    ***********************************-->

    <!--**********************************
        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>