<!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>Bulk Upload Group</h5>
      <div class="row">
        <div class="col-lg-12">
          <div>
            <input type="file" id="fileInput" class="form-control" placeholder="upload">
          </div>
          <br>
          <div style="display: flex;">
            <div class="mt-3" style="margin-left: 15px;">
              <button type="button" id="verifyPay" onclick="uploadGroup()" 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>

  <div id="uploadSidenavSingle" class="sidenav" style="background-color: white;">
    <a href="javascript:void(0)" class="closebtn" onclick="closeSideNavSingle()">&times;</a>
    <div class="container">
      <h3>Create New Group</h3>
      <p>Please note: The first matric number will be group leader. Inputting wrong matric number will not allow the
        operation to be successful!</p>
      <div class="row">
        <div class="col-lg-12">
          <div>
            <input type="hidden" id="user_id" value="<%= user.id%>">
            <label>Number of Group Member?</label>
            <select name="projGroup" id="projGroup" class="form-select shadow-none">
              <% for (let i=0; i <20; i++) {%>
                <option value="<%= i + 1 %>">
                  <%= i + 1 %>
                </option>
                <% } %>
            </select>
          </div><br>
          <div id="topicBlock">
            <label> Group Member 1</label><br>
            <input name="" id="member1" class="form-control" oninput="this.value = this.value.toUpperCase()">

          </div><br>
          <div style="display: flex;">
            <div class="mt-3" style="margin-left: 15px;">
              <button type="button" id="submitGroup" class="btn" style="background-color: #068F3F;color:white;"> Submit
              </button>
            </div>
            <div class="mt-3" style="margin-left: 15px;">
              <button 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">
      <%if(alert !="" ){%>
        <div class="alert alert-success" role="alert">
          <%= alert%>
        </div>
        <%}%>
          <%if(alertError !="" ){%>
            <div class="alert alert-danger" role="alert">
              <%= alertError%>
            </div>
            <%}%>
              <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">ODEFL Binding</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">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.name%>">
                                  <%= department.name%>
                                </option>
                                <%}}%>

                            </select>
                          </div>

                          <div class="col-lg-12 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="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-odfel" class="btn btn-info form-control mt-2">View
                                        Latest</a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="QA_table mb_30 table-responsive">
                              <table class="table display table" id="table_id">
                                <thead>
                                  <tr>
                                    <th>Matric Number</th>
                                    <th>Name</th>
                                    <th>Department</th>
                                    <th>Created 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 %>
                                          <%= getPayemtHistorys?.othername %>
                                      </td>
                                      <td>
                                        <%= getPayemtHistorys?.department %>
                                      </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-odfel-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 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-odfel?startDate=${startDate}&endDate=${endDate}&department_id=${department_id}`
                });
              </script>
              <script>
                $("#projGroup").on('change', function () {
                  let topicNum = this.value;
                  let moreBox = ""
                  for (let i = 1; i <= parseInt(topicNum); i++) {
                    moreBox += `
    <label> Group Member ${i}</label><br>
    <input name="" id="member${i}" class="form-control oninput="this.value = this.value.toUpperCase()"> 
    `
                  }

                  $('#topicBlock').html(moreBox);
                });
                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";
                }
                function openSideNavSingle() {
                  document.getElementById("uploadSidenav").style.width = "0";
                  document.getElementById("uploadSidenavSingle").style.width = "350px";
                }

                function closeSideNavSingle() {
                  document.getElementById("uploadSidenavSingle").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
                  window.location.href = `/admin/binding-odfel?searchTearm=${searchTearm}`
                });
              </script>

</html>