<!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"><!-- toastr -->
<link href="../js/toastr.css" rel="stylesheet">
</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_100 mb_30">
                          <div class="white_card_header">
                            <div class="box_header m-0">
                              <div class="main-title">
                                  <label>Session</label>
                                  <select name="" id="sessionLoad" class="form-select shadow-none">
                                    <% if(sessions){
                                      for(var session of sessions){
                                  %>
                                    <option value="<%= session.id %> "><%= session.name %> </option>
                                  <%}}%>
                                  <option value="1">2021/2022</option>
                                  </select>
                              </div>
                            </div>
                          </div>
                          <div class="white_card_body">
                            <div class="date-picker">
                                <div class="row mb-3">
                                  <div class="col-xl-6 col-sm-9 common_date_picker">
                                      <label>Department</label>
                                      <select name="" id="dept" class="form-select shadow-none">
                                          <option selected>Select Department</option>
                                          <% if(departments){
                                            for(var department of departments){
                                        %>
                                          <option value="<%= department.id %> "><%= department.name %> - A<%= department.code %> </option>
                                        <%}}%>
                                          
                                        </select>
                                  </div>
                                  <div class="col-xl-6 col-sm-9 common_date_picker">
                                      <label>Project Type</label>
                                      <select name="" id="projectType" class="form-select shadow-none">
                                          <option selected>Select Project Type</option>
                                          <option value="1">Final Year Research Report</option>
                                          <option value="4">Siwes Report</option>
                                      </select>
                                  </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">
    <div class="white_card card_height_100 mb_30">
      <div class="white_card_body">
        <div class="QA_section">
          <div class="white_box_tittle list_header">
            <h4>Project</h4>
            <div class="box_right d-flex lms_block">
              <div class="serach_field_2">
                <div class="search_inner">
                    <div class="search_field">
                      <input
                        type="text"
                        placeholder="Search content here..."
                        id="searchProject"
                      />
                    </div>
                    <button type="submit">
                      <i class="ti-search"></i>
                    </button>
                </div>
              </div>
            </div>
          </div>
          <input style="display: none ;" type="text" id="filterType" value="main" >
          <div class="QA_table mb_30">
            <div class="col-lg-12">
                <div class="card_box box_shadow position-relative mb_30 border_radius_0">
                  
                  <input type="hidden" id="pageNumber" value="1">
                  <div class="row" id="projectContainer">
                    
                        <% if(projects){
                          for(var project of projects){
                      %>
                        <div class="col-lg-6">
                            <div class="card_box position-relative mb_10 white_bg">
                              <div class="white_box_tittle green_bg">
                                <div class="main-title2">
                                  <strong class="text-white"><%= (project.topic).toUpperCase() %></strong>
                                </div>
                              </div>
                              <div class="box_body">
                                <ul>
                                    <li><b>Research By: </b> <span style="text-transform:uppercase;"><%= project.student.profile.firstname%></span> <span><%= project.student.profile.lastname%> </span><span style="color:#FFB167;"><%= project.student.username%></span> </li>
                                    <li><b>Supervised By:</b> <span style="text-transform:uppercase;"> <%= project.lecturer?.profile.firstname%> <%= project.lecturer?.profile.lastname%>  </span> </li>
                                    <li><b>Date Created:</b> <span><%= new Date(project?.createdAt).toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"})  %></span> </li>
                                    <li>
                                        <ul>
                                            <li class="badgelist"><span class="badge bg-secondary"><%=project.project_type?.name%></span></li>
                                            <li class="badgelist"><span class="badge bg-success"><%=project.student.profile.department?.name%></span></li>
                                            <li class="badgelist"><span class="badge bg-warning"><%=project.student.profile.department?.institute.name%></span></li>
                                            <a href="/research/download/<%= project.id%>" target="_blank" rel="noopener noreferrer"><li><span class="badge" style="background-color: #068F3F;float: right;"><i class="ti-download"></i> Download</span></li></a>
                                        </ul>
                                    </li>
                                  </ul>
                              </div>
                            </div>
                        </div>
                      <%}}%>
                  </div>
                </div>
              </div>
          </div>
          <div class="btn btn-success" id="loadMore">Load more</div>
        </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 src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="/js/corass.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>