<!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>Student</title>
<link rel="icon" href="/img/kp.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/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">
</head>
<body class="crm_body_bg">
<%- include('../component/staff-sidebar.ejs')%>
  <section class="main_content dashboard_part large_header_bg">
    <%- include('../component/staff-profile-info.ejs')%>

    <div class="app-content content main_content_iner ">
        <!-- BEGIN: Header-->
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
    
            <div class="content-wrapper container-xxl p-0">
          
              <div class="col-12">
                <div class="dashboard_header ">
                  
            <div class="col-lg-12">
              <div class="white_card card_height_ mb_30">
                <div class="white_card_header">
                  <div class="box_header m-0">
                    <div class="main-title">
                      <div class="col-lg-12 mb-3">  <h3 class="m-0">Assigned Students </h3></div>
                    </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-3 mt-3">
                       <div class="d-flex justify-content-space-between">
                        <div class="bg-col mx-3 ">
                          <img src="/img/icon/open-book-svgrepo-com.svg" alt="" height="30px" width="30px">
                        </div>
                        <div>
                          <h3><%= students.length%></h3>
                          <p>All</p>
                        </div>
                       </div>
                      </div>
                      <div class="col-lg-3 mt-3"> 
                         <div class="d-flex justify-content-space-between">
                        <div class="bg-col mx-3 ">
                          <img src="/img/icon/open-book-svgrepo-com.svg" alt="" height="30px" width="30px">
                        </div>
                        <div>
                          <h3><%= totalFT %> </h3>
                          <p>Total FT Student</p>
                        </div>
                       </div></div>
                      <div class="col-lg-3 mt-3">  <div class="d-flex justify-content-space-between">
                        <div class="bg-col mx-3 ">
                          <img src="/img/icon/open-book-svgrepo-com.svg" alt="" height="30px" width="30px">
                        </div>
                        <div>
                          <h3><%= totalPT%> </h3>
                          <p>Total PT Student</p>
                        </div>
                       </div></div>
                      <div class="col-lg-3 mt-3">  <div class="d-flex justify-content-space-between">
                        <div class="bg-col mx-3 ">
                          <img src="/img/icon/open-book-svgrepo-com.svg" alt="" height="30px" width="30px">
                        </div>
                        <div>
                          <h3><%= totalHND %> / <%= totalND %></h3>
                          <p>HND/ND</p>
                        </div>
                       </div></div>
                    </div>
                    </div>
              </div>
            </div>
                </div>
              </div>
          
          <div class="content-body">
    <br>
    <%if(error){%>
      <div class="alert alert-danger" role="alert">
        Error occured: <%= error%>
      </div>
  <%}%>
    <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">Search & Filter</h3>
            </div>
          </div>
        </div>
        <div class="white_card_body">
          <div class="QA_section">
            <div class="row">
              <div class="col-lg-6 col-sm-3 col-md-3">
                <label>Student Level(HND/ND)</label>
                <select name="" id="deptFilter" class="form-select shadow-none">
                  <option selected>Select Level</option>
                  <option value="National Diploma">National Diploma(ND)</option>
                  <option value="Higher National Diploma">Higher National Diploma(HND)</option>
                </select>
              </div>
              <div class="col-lg-6"> 
                <label>Study Mode(FT/PT)</label>
                <select name="" id="studyModeFilter" class="form-select shadow-none">
                  <option selected>Select Mode</option>
                  <option value="FULL TIME">FULL TIME(FT)</option>
                  <option value="PART TIME">PART TIME(PT)</option>
                </select>
              </div>
            </div><br>
            <div class="white_box_tittle list_header">
              <h4>Table</h4>
              <div class="box_right d-flex lms_block">
                <div class="serach_field_2">
                  <div class="search_inner">
                    <form Active="#">
                      <div class="search_field">
                        <input
                        id="mySearch"
                          type="text"
                          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 scope="col">Student</th>
                    <th scope="col">Matric Number</th>
                    <th scope="col">Level</th>
                    <th scope="col">Study Mode</th>
                    <th scope="col">Contact</th>
                    <th scope="col">View Project</th>
                  </tr>
                </thead>
                <tbody>
                  <% if (students){
                    for(const student of students){
                      %>
                  <tr>
                    <td >
                      <p><%= student?.lastname %> <%= student?.firstname %> </p>
                    </td>
                    <td>
                      <%= student?.user?.username %> 
                    </td>
                    <td>
                    <p><%= student?.level?.name %> </p>
                    </td>
                    <td>
                        <p><%= student?.study_mode?.name %> </p>
                    </td>
                    <td>
                        <li>
                          <%= student?.user?.email %> 
                        </li>
                        <li>
                          <%= student?.user?.phone %> 
                        </li>
                    </td>
                    <td><a  target="_blank"  href="/view-project/<%= student?.project_id %>"><i class="ti-eye"></i></a></td>
                  </tr>
                <%}}%>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
        <!-- <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>
                </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>
<div id="back-top" style="display: none;">
<a title="Go to Top" href="#">
<i class="ti-angle-up"></i>
</a>
</div>



</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="/js/jquery1-3.4.1.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>
<script>
  var table = $('#stu').DataTable();
 
 $('#mySearch').on( 'keyup', function () {
     table.search( this.value ).draw();
 } );

 $('#deptFilter').on( 'change', function () {
     table.search( this.value ).draw();
 } );
 $('#studyModeFilter').on( 'change', function () {
     table.search( this.value ).draw();
 } );
</script>
<script src="/js/custom.js"></script>
</body>

</html>