<!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>Student 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="/../vendors/staff_sidebar/style.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="/../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">
</head>

<body class="crm_body_bg">
  <%- include('./component/header.ejs')%>
    <!-- Main body starts here -->
    <div id="uploadSidenav" class="sidenav" style="background-color: white;">
      <a href="javascript:void(0)" class="closebtn" onclick="closeSideNav()">&times;</a>
      <div class="container">
        <h5>Upload Student</h5>
        <div class="row">
          <div class="col-lg-12">
            <form action="/admin/upload" method="POST" enctype="multipart/form-data">
              <div>

                <div>
                  <label>Action Type </label>
                  <select name="actionType" id="" class="form-select shadow-none">
                    <option selected>Select action</option>
                    <option value="upload">Upload Student </option>
                    <option value="assign">Assign Supervisor</option>
                    <option value="ppo">Assign PPO</option>
                    <option value="binding">Approve Binding</option>
                  </select>
                </div><br>

                <label>Department</label>
                <select name="department_id" id="" class="form-select shadow-none">
                  <option value="">Select Department</option>
                  <% if(departments && departments.length> 0){
                    for(var department of departments){
                    %>
                    <option value="<%= department.id %>">
                      <%= department.name %>
                    </option>

                    <%}}%>
                </select>
              </div><br>
              <div>
                <label>Level </label>
                <select name="level_id" id="" class="form-select shadow-none">
                  <option selected>Select level</option>
                  <option value="1">ND </option>
                  <option value="2">HND</option>
                </select>
              </div><br>
              <div>
                <label>Study Mode</label>
                <select name="study_mode_id" id="" class="form-select shadow-none">
                  <option selected>Select Study Mode</option>
                  <option value="1">FULL TIME </option>
                  <option value="2">PART TIME</option>
                </select>
              </div><br>

              <br>
              <div>

                <!-- <label>Lecturer?</label>
                            <select name="" id="" class="form-select shadow-none">
                              <option selected>Select Lecturer</option>
                            </select> -->
                <input type="file" name="file" class="form-control" placeholder="upload">
              </div><br>
              <button type="submit" class="btn" style="background-color: #068F3F;color:white;"> Upload </button>
            </form>
          </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">
        <h5>Upload Student</h5>
        <div class="row">
          <div class="col-lg-12">
            <form action="/admin/single-upload" method="POST">
              <div>
                <label>Department</label>
                <select name="department_id" id="department_id" required class="form-select shadow-none">
                  <option value="">Select Department</option>
                  <% if(departments && departments.length> 0){
                    for(var department of departments){
                    %>
                    <option value="<%= department.id %>">
                      <%= department.name %>
                    </option>

                    <%}}%>
                </select>
              </div><br>
              <div>
                <label>Supervisor </label>
                <select name="supervisor" required id="supervisor" class="form-select shadow-none">
                </select>
              </div><br>
              <div>
                <label>Level </label>
                <select value="" name="level_id" id="" required class="form-select shadow-none">
                  <option selected>Select level</option>
                  <option value="1">ND </option>
                  <option value="2">HND</option>
                </select>
              </div><br>
              <div>
                <label>Study Mode</label>
                <select name="study_mode_id" id="" required class="form-select shadow-none">
                  <option value="" selected>Select Study Mode</option>
                  <option value="1">FULL TIME </option>
                  <option value="2">PART TIME</option>
                </select>
              </div><br>

              <div>
                <div>
                  <label>Student Surname name</label>
                  <input type="text" name="lastname" required class="form-control shadow-none">
                </div>
              </div><br>
              <div>
                <div>
                  <label>Student First name</label>
                  <input type="text" name="firstname" required class="form-control shadow-none">
                </div>
              </div><br>

              <div>
                <div>
                  <label>Student Middle name</label>
                  <input type="text" name="middlename" class="form-control shadow-none">
                </div>
              </div><br>
              <div>
                <div>
                  <label>Student Matric Number</label>
                  <input type="text" name="username" required class="form-control shadow-none">
                </div>
              </div><br>
              <button type="submit" class="btn" style="background-color: #068F3F;color:white;"> Upload </button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <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">Student Report</h3>

            </div>
          </div>
        </div>
      </div>


      <div class="col-lg-6">
        <div class="row">
          <div class="col-lg-4">
            <button type="button" class="btn" onclick="openSideNavSingle()"
              style="background-color: #068F3F;color:white;">Upload One Student </button>
            <br>
          </div><br>
          <div class="col-lg-4">
            <button type="button" class="btn" onclick="openSideNav()"
              style="background-color: #068F3F;color:white;">Upload Bulk Student </button>
            <br>
          </div><br>
          <div class="col-lg-4">
            <a href="/assets/template.xlsx" download="Student Template" class="btn"
              style="background-color: #1f2220;color:white;">Download Template</a>
          </div>
        </div>
      </div><br>

      <% if(success==true){ %>
        <div class="alert alert-success" role="alert">
          Student(s) successfully Uploaded!
        </div>
        <%}%>
          <%if(err){%>
            <div class="alert alert-danger" role="alert">
              Error occured: <%= err%>
            </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">
                          <form method="get" action="/admin/students/<%= session_id %>" class="row">
                            <input type="hidden" id="session_id" value="<%= session_id %>">
                            <div class="col-lg-4">
                              <label for="" class="mb-1">Start Date:</label>
                              <input type="date" class="form-control mb-3" placeholder="StartDate to EndDate"
                                name="startDate" id="">
                            </div>
                            <div class="col-lg-4">
                              <label for="" class="mb-1">End Date:</label>
                              <input type="date" class="form-control mb-3" placeholder="StartDate to EndDate"
                                name="endDate" id="">
                            </div>
                            <div class="col-lg-4">
                              <label for="" class="mb-1">Institute</label>
                              <select name="institute_id" class="form-control mb-3" id="">
                                <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="department_id" class="form-control mb-3" 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">Level</label>
                              <select name="level_id" class="form-control mb-3" id="">
                                <option value="">Select Level</option>
                                <% if(levels && levels.length> 0){
                                  for(var level of levels){
                                  %>
                                  <option value="<%= level.id %>">
                                    <%= level.name %>
                                  </option>

                                  <%}}%>
                              </select>
                            </div>

                            <div class="col-lg-4">
                              <label for="" class="mb-1">Study Mode</label>
                              <select name="study_mode_id" class="form-control mb-3" id="">
                                <option value="">Select Study Mode</option>
                                <% if(study_modes && study_modes.length> 0){
                                  for(var study_mode of study_modes){
                                  %>
                                  <option value="<%= study_mode.id %>">
                                    <%= study_mode.name %>
                                  </option>

                                  <%}}%>
                              </select>
                            </div>
                            <div class="col-lg-4">
                              <label for="" class="mb-1">Status</label>
                              <select name="status" class="form-control mb-3" id="">
                                <option value="">Select Status</option>
                                <option value="true">Active</option>
                                <option value="false">InActive</option>
                              </select>
                            </div>
                            <div class="col-lg-4 mt-4">
                              <button type="submit" class="btn btn-success text-center form-control">Filter
                                Record</button>
                            </div>
                          </form>
                          <div class="col-lg-4 mt-4">
                            <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>
                    </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>
                                    <%= activeStudents%>
                                  </h6>
                                  <p>Total Active Students</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 class="col-lg-4">
                            <div class="single_quick_activity">
                              <div class="count_content d-flex my-2">
                                <div>
                                  <h6>
                                    <%= inActiveStudents %>
                                  </h6>
                                  <p>Total InActive Students</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/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 class="col-lg-4">
                            <div class="single_quick_activity">
                              <div class="count_content d-flex my-2">
                                <div>
                                  <h6>
                                    <%= inActiveStudents + activeStudents %>
                                  </h6>
                                  <p>Total Registered Students</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>
                              </div>
                            </div>
                          </div>
                          <div class="QA_table mb_30 table-responsive">

                            <table class="table display table" id="table_id">
                              <thead>
                                <tr>
                                  <th scope="col">STUDENT</th>
                                  <th scope="col">DEPARTMENT</th>
                                  <th scope="col">STUDY MODE</th>
                                  <th scope="col">STATUS</th>
                                  <th scope="col">DATE CREATED</th>
                                  <th scope="col">BINDING</th>
                                  <th scope="col">ACTIONS</th>
                                </tr>
                              </thead>
                              <tbody>
                                <% for(const student of students){%>
                                  <tr>
                                    <th scope="row"> <a href="#" class="question_content">
                                        <%=student.lastname %>
                                          <%=student.firstname %> <br><span>
                                              <%=student.username %>
                                            </span>
                                      </a></th>
                                    <td class="text-dark">
                                      <%=student.dept_name %>
                                    </td>
                                    <td class="text-success">
                                      <%=student.study_name %>
                                    </td>
                                    <td class="text-dark">
                                      <% if(student.isActive){%>
                                        Active
                                        <%}else{%>
                                          InActive
                                          <%}%>
                                    </td>
                                    <td class="text-dark">
                                      <%=student.createdAt%>
                                    </td>
                                    <td>
                                      <a class="btn btn-success text-white" href="/admin/view-cover/<%=student.user_id%>" target="_blank" >View Cover</a>
                                  </td>
                                    <td><a href="/admin/student-account?user_id=<%=student.user_id%>&type=student"
                                        target="_blank" rel="noopener noreferrer"><i class="fa-solid fa-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="/../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>
      function openSideNav() {
        document.getElementById("uploadSidenavSingle").style.width = "0";
        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="/../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="/../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>
      $("#department_id").on('change', function () {
        let department = this.value;
        let moreBox = ""
        moreBox += '<option value="">Select Department</option>';
        jQuery.ajax({
          url: `/admin/department-supervisor/${department}`,
          method: 'GET',
          error: function (request, error) {
            console.log(error)
          },
          success: function (data) {
            document.getElementById("supervisor").innerHTML = '<option value="">Select Supervisor</option>';
            for (dept of data) {
              document.getElementById("supervisor")
                .innerHTML += `
                       <option value="${dept.user_id}">${dept.firstname}  ${dept.lastname}</option>`
            }
          }
        });
      });
    </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();
      });
      $('#SearchRecord').on('click', function () {
        // const searchTearm = $('#searchTearm').val()
        const session_id = document.getElementById("session_id").value
        const searchTearm = document.getElementById("searchTearm").value
        if (!searchTearm)
          return alert("Matric Number can not be empty")
        window.location.href = `/admin/students/${session_id}?searchTearm=${searchTearm}`
      });
    </script>

</html>