<!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>Research Library</title>
<link rel="icon" href="/img/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="../css2/style1.css" />
<link rel="stylesheet" href="../css2/colors/default.css" id="colorSkinCSS">

</head>
<body class="crm_body_bg">
  
<%- include('../admin/component/header.ejs')%>
    <div class="main_content_iner">
        <div class="container-fluid p-0">
          <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 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 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>
        </div>
      </div>
      
</section>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<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 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/datepicker/datepicker.js"></script>
<script src="../vendors2/datepicker/datepicker.en.js"></script>
<script src="../vendors2/datepicker/datepicker.custom.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 src="../js2/custom.js"></script>
<script src="/js/corass.js"></script>
</body>

</html>