<!DOCTYPE html>
<html lang="zxx">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Payment Report-CORASS</title>
    <link rel="icon" href="/../img2/kp.png" type="image/png" />

    <link rel="stylesheet" href="/../css2/bootstrap1.min.css" />

    <link rel="stylesheet" href="/../vendors2/themefy_icon/themify-icons.css" />

    <link rel="stylesheet" href="/../vendors2/niceselect/css/nice-select.css" />

    <link rel="stylesheet" href="/../vendors2/owl_carousel/css/owl.carousel.css" />

    <link rel="stylesheet" href="/../vendors2/gijgo/gijgo.min.css" />

    <link rel="stylesheet" href="/../vendors2/font_awesome/css/all.min.css" />
    <link rel="stylesheet" href="/../vendors2/tagsinput/tagsinput.css" />

    <link rel="stylesheet" href="/../vendors2/datepicker/date-picker.css" />

    <link rel="stylesheet" href="/../vendors2/scroll/scrollable.css" />

    <link
      rel="stylesheet"
      href="/../vendors2/datatable/css/jquery.dataTables.min.css"
    />
    <link
      rel="stylesheet"
      href="/../vendors2/datatable/css/responsive.dataTables.min.css"
    />
    <link
      rel="stylesheet"
      href="/../vendors2/datatable/css/buttons.dataTables.min.css"
    />

    <link rel="stylesheet" href="/../vendors2/text_editor/summernote-bs4.css" />

    <link rel="stylesheet" href="/../vendors2/morris/morris.css" />

    <link rel="stylesheet" href="/../vendors2/material_icon/material-icons.css" />

    <link rel="stylesheet" href="/../css2/metisMenu.css" />
    <link rel="stylesheet" href="/../vendors/staff_sidebar/style.css" />

    <link rel="stylesheet" href="/../css2/style1.css" />
    <link rel="stylesheet" href="/../css2/colors/default.css" id="colorSkinCSS" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    
    <link rel="stylesheet" href="/../css2/metisMenu.css">
    <link rel="stylesheet" href="/../css2/style1.css" />
    <link rel="stylesheet" href="/../css2/colors/default.css" id="colorSkinCSS">

    <link href="/../js/toastr.css" rel="stylesheet">
  </head>
  <body class="crm_body_bg">
    <div id="uploadSidenav" class="sidenav" style="background-color: white;">
      <a href="javascript:void(0)" class="closebtn" onclick="closeSideNav()">&times;</a>
      <div class="container">
          <h5>Verify transaction</h5>
          <div class="row">
              <div class="col-lg-12">
                  <div id="topicBlock">
                      <label> Payment refrence</label><br>
                     <input id="payref" class="form-control">
                      
                  </div><br>
                 <div style="display: flex;">
                  <div class="mt-3" style="margin-left: 15px;">
                      <button type="button" id="veridyPay" class="btn" style="background-color: #068F3F;color:white;"> Verify </button>
                   </div>
                  <div class="mt-3" style="margin-left: 15px;">
                     <button onclick="closeSideNav()" type="button" class="btn btn-outline-success">Cancel</button>
                  </div>
                 </div>
              </div>
          </div>
      </div>
    </div>
  
    <%- include('./component/header.ejs')%>
      <!-- Main body starts here -->
      
      
      
      <div class="main_content_iner">
        <div class="container-fluid p-0 mb-3">
          <div class="row">
              <div class="">
                <div class="white_card_header d-flex">
                      <h3 class="m-0 text-dark">Recent Transactions</h3>
                    </div>
              </div>
            </div>
        </div>
  
        <div class="container-fluid p-0">
          <div class="row">
            <div class="col-lg-12">
              <div class="white_card card_height_100 mb_30 QA_section">
                <div class="white_card_header">
                    <select name="" id="" class="mb-4" style="border: none;">
                        <option value="">Filter</option>
                    </select>
                    <div class="row">
                        <!-- <div class="col-lg-3">
                            <label for="" class="mb-1"> Start Date:</label>
                            <input type="date" class="form-control mb-3" placeholder="Start Date" id="startDate">
                        </div>
                        <div class="col-lg-3">
                          <label for="" class="mb-1">End Date:</label>
                          <input type="date" class="form-control mb-3" placeholder="Start Date" id="endDate">
                      </div>  -->

                    <div class="col-lg-8">
                        <label for="" class="mb-1">Matric Number:</label>
                        <input type="text" class="form-control mb-3" placeholder="Matric Number" id="matricNumber">
                </div>
                    <div class="col-lg-4 mt-4">
                      <input type="hidden" class="form-control mb-3" value="<%= session_id %>" id="session_id" >
                        <button class="btn btn-success text-center form-control" id="filterRecord">Filter Record</button>
                </div>
                
            </div>
          </div>
        </div>
      </div>
      </div>

      
      </div>
     
    <div class="container-fluid p-0 my-4">
      <div class="row justify-content-center">
      <div class="col-lg-12">
      <div class="white_card card_height_100 mb_30">
      <div class="white_card_header">
      <div class="box_header m-0">
      </div>
      </div>
      <div class="white_card_body">
      <div class="QA_section">

      <div class="QA_table mb_30 table-responsive">
      
      <table class="table display table" id="table_id">
      <thead>
      <tr>
        <th>Matric Number</th>
        <th>Action</th>
      </tr>
      </thead>
      <tbody>
        <% if(getPayemtHistory && getPayemtHistory.length > 0){
          id = 0
            for(var getPayemtHistorys of getPayemtHistory){
          %>
          <tr>
            <td><%= getPayemtHistorys?.username %></td>

            <td> <a class="btn" onclick="printRecipt('<%= getPayemtHistorys?.username%>', )" style="background-color:  rgb(42, 127, 42); color: white;">Audit Payment&nbsp;&nbsp;<i class="ti-eye"></i></a></td>
            
          </tr>
        <%}}%>
      </tbody>
      </table>
      </div>
      </div>
      </div>
      </div>
      </div>
      <div class="col-12">
      </div>
      </div>
      </div>
    
      </div>


      <footer class="footer footer-light  footer-static  footer1">
        <p class="clearfix mb-0">
          <span class="float-md-start d-block d-md-inline-block mt-25 text-center">COPYRIGHT &copy;
            <script>document.write(new Date().getFullYear())</script><a class="ms-25" href="">CORASS</a>,
            <span class="d-inline-block">All rights Reserved</span>
          </span>
          <span class="float-md-end d-block text-center">Centralized Online Research Assessment and Submission System<i data-feather="file-text"></i></span>
        </p>
      </footer>
    </section>
    <div id="back-top" style="display: none">
      <a title="Go to Top" href="#">
        <i class="ti-angle-up"></i>
      </a>
    </div>

    <script src="/../js2/jquery1-3.4.1.min.js"></script>
    <script src="/../js/toastr.min.js"></script>

    <script src="/../js2/popper1.min.js"></script>

    <script src="/../js2/bootstrap1.min.js"></script>

    <script src="/../js2/metisMenu.js"></script>

    <script src="/../vendors2/count_up/jquery.waypoints.min.js"></script>

    <script src="/../vendors2/chartlist/Chart.min.js"></script>

    <script src="/../vendors2/count_up/jquery.counterup.min.js"></script>

    <script src="/../vendors2/niceselect/js/jquery.nice-select.min.js"></script>

    <script src="/../vendors2/owl_carousel/js/owl.carousel.min.js"></script>

    <script src="/../vendors2/datatable/js/jquery.dataTables.min.js"></script>
    <script src="/../vendors2/datatable/js/dataTables.responsive.min.js"></script>
    <script src="/../vendors2/datatable/js/dataTables.buttons.min.js"></script>
    <script src="/../vendors2/datatable/js/buttons.flash.min.js"></script>
    <script src="/../vendors2/datatable/js/jszip.min.js"></script>
    <script src="/../vendors2/datatable/js/pdfmake.min.js"></script>
    <script src="/../vendors2/datatable/js/vfs_fonts.js"></script>
    <script src="/../vendors2/datatable/js/buttons.html5.min.js"></script>
    <script src="/../vendors2/datatable/js/buttons.print.min.js"></script>
    <script src="/../js2/chart.min.js"></script>

    <script src="/../vendors2/progressbar/jquery.barfiller.js"></script>

    <script src="/../vendors2/tagsinput/tagsinput.js"></script>

    <script src="/../vendors2/text_editor/summernote-bs4.js"></script>
    <script src="/../vendors2/am_chart/amcharts.js"></script>

    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="/../vendors2/scroll/perfect-scrollbar.min.js"></script>
    <script src="/../vendors2/scroll/scrollable-custom.js"></script>
    <script src="/../vendors2/chart_am/core.js"></script>
    <script src="/../vendors2/chart_am/charts.js"></script>
    <script src="/../vendors2/chart_am/animated.js"></script>
    <script src="/../vendors2/chart_am/kelly.js"></script>
    <script src="/../vendors2/chart_am/chart-custom.js"></script>
    <script>
      $('#filterRecord').on('click', function(){
        // const startDate = $('#startDate').val()
        // const endDate = $('#endDate').val()
        const session_id = $('#session_id').val()
        const username= $('#matricNumber').val()
        window.location.href = `/admin/payment-audit/${session_id}?username=${username}`
      });
    </script>
    <script>
      function openSideNav(paramsPayRef) {
        if(paramsPayRef){
        document.getElementById("payref").value = paramsPayRef
        }else{
          document.getElementById("payref").value = ""
        }
        document.getElementById("uploadSidenav").style.width = "350px";
      }
      
      function closeSideNav() {
        document.getElementById("uploadSidenav").style.width = "0";
      }
      </script>

    <script>
      function printRecipt(user_id){
        window.open(`/all-receipt?username=${user_id}`)
      }
    </script>

    <script src="/../js2/custom.js"></script>
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script>
  $(document).ready(function () {
  $('#table_id').DataTable();
});
</script>
<script src="/../js2/custom.js"></script>
<script src="/../js2/corass.js"></script>
</html>
