<!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>Update Bindig Status</h5>
          <div class="row">
              <div class="col-lg-12">
                  <div id="topicBlock">
                      <label> Status</label><br>
                      <input type="text" id="user_id" style="display: none;">
                      <select class="form-control" name="status" id="status">
                        <option value="SUBMITTED">SUBMITTED</option>
                        <option value="READY">READY</option>
                      </select> 
                  </div><br>
                 <div style="display: flex;">
                  <div class="mt-3" style="margin-left: 15px;">
                      <button type="button" id="veridyPay" onclick="updateUser()" class="btn" style="background-color: #068F3F;color:white;"> Update </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">Binding Record</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">Institute</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">Department</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 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"> 
        
        <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-6">
                                <div class="single_quick_activity">
                                    <div class="count_content d-flex my-2">
                                      <div>
                                        <h6><%= totalSubmitted%></h6>
                                        <p>Total Hard Cover submitted</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-6">
                                <div class="single_quick_activity">
                                    <div class="count_content d-flex my-2">
                                      <div>
                                        <h6><%= totalReady%></h6>
                                        <p>Total Binding Ready</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:#0bcb2f;" 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>
                  </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">
          <div class="submit_button" >
            <input type="text" name="search" class="form-control" id="searchTearm" placeholder="Search with matric number">
            <button class="btn btn-success form-control mt-2" id="SearchRecord">Search</button>
        </div> 
       </div>
       <div class="d-flex mx-2 text-center">
        <div class="submit_button" >
          <a href="/admin/binding-record" class="btn btn-info form-control mt-2">View Latest</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>Name</th>
        <th>STATUS</th>
        <th>ISSUED DATE</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><%= getPayemtHistorys?.lastname %> <%= getPayemtHistorys?.firstname %></td>
            <td>
                <%= getPayemtHistorys?.status %> 
            </td>
            <td><%= new Date(getPayemtHistorys?.createdAt).toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"})  %></td>
            <td>
                <a class="btn btn-info text-dark" onclick="openSideNav('<%= getPayemtHistorys?.id %>')"  >Update Status</a>
                <a class="btn btn-success text-white" href="/admin/view-cover/<%= getPayemtHistorys?.id %>" target="_blank" >View Cover</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 session_id = $('#session_id').val()
        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-record/${session_id}?startDate=${startDate}&endDate=${endDate}&institute=${institute}&department_id=${department_id}&status=${status}`
      });
    </script>
    <script>
      function openSideNav(user_id) {
        document.getElementById("user_id").value= user_id;
        document.getElementById("uploadSidenav").style.width = "350px";
      }
      
      function closeSideNav() {
        document.getElementById("uploadSidenav").style.width = "0";
      }
      </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>

<script>
    $('#SearchRecord').on('click', function(){
    // const searchTearm = $('#searchTearm').val()
    const searchTearm = document.getElementById("searchTearm").value
    const session_id = document.getElementById("session_id").value
    window.location.href = `/admin/binding-record/${session_id}?searchTearm=${searchTearm}`
    });

function updateUser() {

const user_id = document.getElementById("user_id").value
const status = document.getElementById("status").value

document.getElementById("veridyPay").innerHTML = "Updating..."
document.getElementById("veridyPay").disabled = true
jQuery.ajax({
  url: `/admin/binding-update`,
  method: 'POST',
  data: {
    user_id,
    status
  },
  error: function (request, error) {
    toastr.options.progressBar = true;
    toastr.error(
      error,
      "ERROR", {
        timeOut: 9000
      }
    );

    document.getElementById("veridyPay").innerHTML = "Update"
    document.getElementById("veridyPay").disabled = false
    
  },
  success: function (data) {
    document.getElementById("veridyPay").innerHTML = "Update"
    document.getElementById("veridyPay").disabled = false
    if (data.success === false) {
      toastr.options.progressBar = true;
      toastr.error(
        data.error,
        "ERROR", {
          timeOut: 9000
        }
      );
    }
    if (data.success === true) {
      toastr.options.progressBar = true;
      toastr.info(
        ` ${data.message}`,
        "MESSAGE", {
          timeOut: 9000
        }
      );
    }

  }
});
}
</script>
</html>
