<!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>Project Binding 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="veridyPayBinding" 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-4">
                            <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-4">
                          <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-4">
                            <label for="" class="mb-1">School</label>
                            <select name="" class="form-control mb-3" id="institute">
                                <option value="">Select Institute</option>
                                <% if(institutes && institutes.length > 0){
                                  for(var institute of institutes){
                                %>
                                <option value="<%= institute.id%>"><%= institute.name%></option>
                                <%}}%>
                            </select>
                      </div>
                        <div class="col-lg-4">
                            <label for="" class="mb-1">Course</label>
                            <select name="" class="form-control mb-3" id="department_id">
                                <option value="">Select Department</option>
                                <% if(departments && departments.length > 0){
                                    for(var department of departments){
                                  %>
                                  <option value="<%= department.id%>"><%= department.name%></option>
                                  <%}}%>

                            </select>
                        </div>           
                    <div class="col-lg-4">
                        <label for="" class="mb-1">Status</label>
                        <select name="" class="form-control mb-3" id="status">
                            <option value="">Select Status</option>
                            <option value="abandoned">Abandoned</option>
                            <option value="success">Success</option>
                            <option value="pending">Pending</option>
                        </select>
                    </div>

                    <div class="col-lg-4 mt-4">
                        <button class="btn btn-success text-center form-control" id="filterRecord">Filter Record</button>
                </div>
                
            </div>
          </div>
        </div>
      </div>
      </div>

      
      </div>
      <div class="container"> 
        
        <div class="row">
          <div class="col-lg-12">
              <div class="single_element">
                  <div class="quick_activity">
                      <div class="row gy-2">
                             <div class="col-lg-4">
                              <div class="single_quick_activity">
                                  <div class="count_content d-flex my-2">
                                    <div>
                                        <h6>#<%= transactionSum %></h6>
                                      <p>Transactions Value</p>
                                    </div>
                                    <div style="display: inline-block; position: absolute; right: 23%;">
                                      <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                        <img src="img/atm.jpg"  class="mt-2" style="justify-content: center;left: 50%;top: 50%;"  alt="" height="30px" width="30px">
                                      </div>
                                    </div>
                                  </div>
                              </div>
                             </div>
                             <div class="col-lg-4">
                                <div class="single_quick_activity">
                                    <div class="count_content d-flex my-2">
                                      <div>
                                        <h6><%= transactionCount%></h6>
                                        <p>Transactions Count</p>
                                      </div>
                                      <div style="display: inline-block; position: absolute; right: 23%;">
                                        <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:pink" class="bg-col mx-3 ">
                                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"  alt="" height="30px" width="30px">
                                        </div>
                                      </div>
                                    </div>
                                </div>
                               </div>
                            
                               <div class="col-lg-4">
                                <div class="single_quick_activity">
                                    <div class="count_content d-flex my-2">
                                      <div>
                                        <h6><%= transactionCount%></h6>
                                        <p>Total Users That Paid</p>
                                      </div>
                                      <div style="display: inline-block; position: absolute; right: 23%;">
                                        <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                          <img src="img/group-people.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"  alt="" height="30px" width="30px">
                                        </div>
                                      </div>
                                    </div>
                                </div>
                               </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="white_box_tittle list_header">
      
      <div class="box_right d-flex lms_block">
      <div class="add_button ms-2">
        <div class="d-flex mx-2 text-center">
                    
          <!-- <button class="btn btn-success form-control"><i class="fa-sharp fa-solid fa-arrow-up-from-bracket mx-1"></i>Export Excel</button> -->
          <div class="submit_button  mt-3" style="margin-left: 15px;">
            <a class="btn" onclick="openSideNav()" style="background-color:  rgb(42, 127, 42); color: white;">Verify transaction</a>
        </div> 
       </div>
      </div>
      </div>
      </div>
      <div class="QA_table mb_30 table-responsive">
      <!-- <p>
        <%= JSON.stringify(getPayemtHistory)%>
      </p> -->
      <table class="table display table" id="table_id">
      <thead>
      <tr>
        <th>Matric Number</th>
        <th>PAYMENT REFRENCE</th>
        <th>PAYMENT</th>
        <th>AMOUNT</th>
        <th>ISSUED DATE</th>
        <th>STATUS</th>
        <%if(getPayemtHistorys?.txn_status === "success"){%>
        <th>RECEIPT</th>
        <%}%>
        <th>REQUERY/RECEIPT</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>
            <div class="container">
              <div class="row">
                <!-- <div class="col-lg-6"> <div class="profile_info">
                   <img src="img/client_img.png" alt="#" />
                 </div></div> -->
                 <div class="col-lg-12"><%= getPayemtHistorys?.txn_ref %></div>
              </div>
            </div>
            </td>
            <td>Poject binding fee</td>
            <td><%= getPayemtHistorys?.amount %> </td>
            <td><%= new Date(getPayemtHistorys?.createdAt).toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"})  %></td>
            <td>
              <%if(getPayemtHistorys?.txn_status === "Pending"){%>
                <p style="color: red;"><%= getPayemtHistorys?.txn_status  %></p>
              <%}%>
              <%if(getPayemtHistorys?.txn_status === "success"){%>
                <p style="color: green;"><%= getPayemtHistorys?.txn_status  %></p>
              <%}%>
              <%if(getPayemtHistorys?.txn_status != "success" && getPayemtHistorys?.txn_status != "Pending"){%>
                <p style="color: blue;"><%= getPayemtHistorys?.txn_status  %></p>
              <%}%>
            </td>
            <%if(getPayemtHistorys?.txn_status === "success"){%>
              <td>Receipt Available</td>
              <td> <a class="btn" onclick="printRecipt('<%= getPayemtHistorys?.id %>', )" style="background-color:  rgb(42, 127, 42); color: white;">Receipt&nbsp;&nbsp;<i class="ti-eye"></i></a></td>
            
            <%}else{%>
              <td><p style="color: red;">Receipt not available</p></td>
            <%}%>
            <%if(getPayemtHistorys?.txn_status != "success"){%>
              <td><a class="btn" onclick="openSideNav('<%= getPayemtHistorys?.txn_ref %>')" style="background-color:  rgb(236, 13, 13); color: white;">REQUERY</a>
              
            <%}%>
          </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 institute = $('#institute').val()
        const department_id = $('#department_id').val()
        const projectType = $('#projectType').val()
        const status = $('#status').val()
        window.location.href = `/admin/binding-payment?startDate=${startDate}&endDate=${endDate}&institute=${institute}&department_id=${department_id}&status=${status}`
      });
    </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(ref_id,user_id){
        window.open(`/receipt?reference=${ref_id}&&MatricNo=${user_id}`)
        //  window.location.href =`/receipt?reference=${ref_id}&&MatricNo=${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>
