<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Payment</title>
    <link rel="icon" href="img/kp.png" type="image/png" />

    <link rel="icon" href="img/icon/logo.png" type="image/png">

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

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

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

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

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

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

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

    <link rel="stylesheet" href="vendors/scroll/scrollable.css" />
    <link rel="stylesheet" href="vendors/staff_sidebar/style.css" />

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

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

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

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

    <link rel="stylesheet" href="css/metisMenu.css">

    <link rel="stylesheet" href="css/style1.css" />
    <link rel="stylesheet" href="css/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>
  <div id="uploadSidenav2" class="sidenav" style="background-color: white;">
    <a href="javascript:void(0)" class="closebtn" onclick="closeSideNav()">&times;</a>
    <div class="container">
        <h5>Verify Binding Payment</h5>
        <div class="row">
            <div class="col-lg-12">
                <div id="topicBlock">
                    <label> Payment refrence</label><br>
                   <input id="payref2" class="form-control">
                    
                </div><br>
               <div style="display: flex;">
                <div class="mt-3" style="margin-left: 15px;">
                    <button type="button" id="veridyBindingPay" 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/student-sidebar.ejs')%>
    <section class="main_content dashboard_part large_header_bg">

        <%- include('../component/student-profile-info.ejs')%>
        <div class="col-lg-12">

            <div class="col-lg-12 mt-4">
              
                <div class="white_card card_height_100 mb_30">
                  <div class="white_card_header">
                    <div class="box_header m-0">
                      <div class="main-title">
                        <h3 class="m-0">Payment history</h3>
                      </div>
                    </div>
                  </div>
                  
                  <div class="white_card_body">
                    <div class="QA_section">
                      <div class="white_box_tittle list_header">
                        <div class="submit_button  mt-3" >
                          <a class="btn" onclick="printRecipt('<%= user?.username%>', )" style="background-color:  rgb(0, 5, 0); color: white;">Print Payment Summary</a>
                      </div>
                      <!-- <div class="submit_button  mt-3 "  >
                        <a class="btn" onclick="openSideNav()" style="background-color:  rgb(42, 127, 42); color: white;">Verify transaction</a>
                    </div> -->
                        <div class="box_right d-flex lms_block">
                          <div class="serach_field_2">
                            <div class="search_inner">
                              <form Active="#">
                                <div class="search_field">
                                  <input
                                    type="text",
                                    id="mySearch"
                                    placeholder="Search content here..."
                                  />
                                </div>
                                <button type="submit">
                                  <i class="ti-search"></i>
                                </button>
                              </form>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="QA_table mb_30">
                        <table id="stu" class="table lms_table_active">
                          <thead>
                            <tr>
                                <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>
                            </tr>
                          </thead>
                          <tbody>
                            <% if(binding_payments && binding_payments.length > 0){
                              id = 0
                                for(var binding_payment of binding_payments){
                              %>
                              <tr>
                                <td>
                                <div class="container">
                                  <div class="row">
                                     <div class="col-lg-12"><%= binding_payment?.txn_ref %></div>
                                  </div>
                                </div>
                                </td>
                                <td>Poject binding fee</td>
                                <td><%= binding_payment?.amount - 500 %> </td>
                                <td><%= new Date(binding_payment?.createdAt).toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"})  %></td>
                                <td>
                                  <%if(binding_payment?.txn_status === "Pending"){%>
                                    <p style="color: red;"><%= binding_payment?.txn_status  %></p>
                                  <%}%>
                                  <%if(binding_payment?.txn_status === "success"){%>
                                    <p style="color: green;"><%= binding_payment?.txn_status  %></p>
                                  <%}%>
                                  <%if(binding_payment?.txn_status != "success" && binding_payment?.txn_status != "Pending"){%>
                                    <p style="color: blue;"><%= binding_payment?.txn_status  %></p>
                                  <%}%>
                                </td>
                                <%if(binding_payment?.txn_status === "success"){%>
                                  <td>Receipt Available</td>
                                  <td> <a class="btn" href="/binding-receipt/<%=user?.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(binding_payment?.txn_status != "success"){%>
                                  <td><a class="btn" onclick="openSideNav2('<%= binding_payment?.txn_ref %>')" style="background-color:  rgb(236, 13, 13); color: white;">REQUERY</a>
                                  
                                <%}%>
                              </tr>
                            <%}}%>
                            <% if(getPayemtHistory && getPayemtHistory.length > 0){
                              id = 0
                                for(var getPayemtHistorys of getPayemtHistory){
                              %>
                              <tr>
                                <td>
                                <div class="container">
                                  <div class="row">
                                     <div class="col-lg-12"><%= getPayemtHistorys?.txn_ref %></div>
                                  </div>
                                </div>
                                </td>
                                <td><%= getPayemtHistorys?.package_name %> Access Fee</td>
                                <td><%= getPayemtHistorys?.amount %> </td>
                                <td><%= new Date(getPayemtHistorys?.createdAt).toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"})  %></td>
                                <%if(getPayemtHistorys?.txn_status === "Pending"){%>
                                <td><p style="color: red;"><%= getPayemtHistorys?.txn_status  %></p></td>
                                <%}%>
                                <%if(getPayemtHistorys?.txn_status === "success"){%>
                                    <td><p style="color: green;"><%= getPayemtHistorys?.txn_status  %></p></td>
                                <%}%>
                                <%if(getPayemtHistorys?.txn_status != "success" && getPayemtHistorys?.txn_status != "Pending"){%>
                                    <td><p style="color: blue;"><%= getPayemtHistorys?.txn_status  %></p></td>
                                <%}%>
                                <%if(getPayemtHistorys?.txn_status === "success"){%>
                                <td> <a class="btn" onclick="printRecipt('<%= getPayemtHistorys?.id %>', '<%=user.username%>')" 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>
                            <%}}else{%>

                            <p>No record found</p>
                            <%}%>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        </div>
    </div>

        <div class="footer_part">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <footer class="footer footer-light  footer-static">
                            <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>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div id="back-top" style="display: none;">
        <a title="Go to Top" href="#">
            <i class="ti-angle-up"></i>
        </a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="../js/jquery1-3.4.1.min.js"></script>
    <script src="../js/toastr.min.js"></script>
    
    <script src="js/popper1.min.js"></script>
    
    <script src="js/bootstrap1.min.js"></script>
    
    <script src="js/metisMenu.js"></script>
    
    <script src="vendors/count_up/jquery.waypoints.min.js"></script>
    
    <script src="vendors/chartlist/Chart.min.js"></script>
    
    <script src="vendors/count_up/jquery.counterup.min.js"></script>
    
    <script src="vendors/niceselect/js/jquery.nice-select.min.js"></script>
    
    <script src="vendors/owl_carousel/js/owl.carousel.min.js"></script>
    
    <script src="vendors/datatable/js/jquery.dataTables.min.js"></script>
    <script src="vendors/datatable/js/dataTables.responsive.min.js"></script>
    <script src="vendors/datatable/js/dataTables.buttons.min.js"></script>
    <script src="vendors/datatable/js/buttons.flash.min.js"></script>
    <script src="vendors/datatable/js/jszip.min.js"></script>
    <script src="vendors/datatable/js/pdfmake.min.js"></script>
    <script src="vendors/datatable/js/vfs_fonts.js"></script>
    <script src="vendors/datatable/js/buttons.html5.min.js"></script>
    <script src="vendors/datatable/js/buttons.print.min.js"></script>
    <script src="js/chart.min.js"></script>
    
    <script src="vendors/progressbar/jquery.barfiller.js"></script>
    
    <script src="vendors/tagsinput/tagsinput.js"></script>
    
    <script src="vendors/text_editor/summernote-bs4.js"></script>
    <script src="vendors/am_chart/amcharts.js"></script>
    
    <script src="vendors/scroll/perfect-scrollbar.min.js"></script>
    <script src="vendors/scroll/scrollable-custom.js"></script>
    <script src="vendors/chart_am/core.js"></script>
    <script src="vendors/chart_am/charts.js"></script>
    <script src="vendors/chart_am/animated.js"></script>
    <script src="vendors/chart_am/kelly.js"></script>
    <script src="vendors/chart_am/chart-custom.js"></script>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
  var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
  (function(){
  var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
  s1.async=true;
  s1.src='https://embed.tawk.to/61c33018c82c976b71c2a947/1fnh77ocr';
  s1.charset='UTF-8';
  s1.setAttribute('crossorigin','*');
  s0.parentNode.insertBefore(s1,s0);
  })();
</script>
<!--End of Tawk.to Script-->
<!-- END: Page JS-->
    <script>
      function openSideNav(paramsPayRef) {
        if(paramsPayRef){
        document.getElementById("payref").value = paramsPayRef
        }else{
          document.getElementById("payref").value = ""
        }
        document.getElementById("uploadSidenav").style.width = "350px";
      }
      function openSideNav2(paramsPayRef) {
        if(paramsPayRef){
        document.getElementById("payref2").value = paramsPayRef
        }else{
          document.getElementById("payref2").value = ""
        }
        document.getElementById("uploadSidenav2").style.width = "350px";
      }
      function closeSideNav() {
        document.getElementById("uploadSidenav").style.width = "0";
        document.getElementById("uploadSidenav2").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>
        var table = $('#stu').DataTable();
         $('#mySearch').on( 'keyup', function () {
         table.search( this.value ).draw();
      } );
      
      $('.filterBtn').on( 'change', function () {
          table.search( this.value ).draw();
      } );
      </script>

    <input hidden id="errorHandler" value="<%=error.error%>">
    <input hidden id="successHandler" value="<%=success.message%>">

    <%if(error.error != undefined){%>
    
    
     <script>
     const incomingError = document.getElementById('errorHandler').value

     if(incomingError != undefined){
       toastr.options.progressBar = true;
       toastr.error(
         document.getElementById('errorHandler').value,
         "ERROR", {
           timeOut: 9000
         }
       );
     }
   </script>
          <%}%> 


    <%if(success.message != "undefined"){%>
    
    
        <script>
        const incomingSuccess = document.getElementById('successHandler').value

      </script>
             <%}%> 
          

    <script src="js/custom.js"></script>
    <script src="js/corass.js"></script>
    <script>
      function printRecipt(user_id){
        window.open(`/all-receipt?username=${user_id}`)
      }
    </script>
</body>
</html>