<!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 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="../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 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">Project Report</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">

                  <div class="container-fluid p-0">
                    <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><%= projectCompleted[0].projectInprogress%></h3>
                          <p>Total Projects</p>
                        </div>
                      </div>
                      </div>
                    </div>
                  </div>
                  <br><br>
                    <div class="row">
                        <!-- <div class="col-lg-8">
                            <label for="" class="mb-1">Department</label>
                            <select name="" 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 mt-4">
                        <button class="btn btn-success text-center form-control">Filter Record</button>
                    </div> -->
                    <div class="col-lg-8">
                        <label for="" class="mb-1">Filter by Student :</label>
                        <input type="text" class="form-control mb-3" placeholder="Matric Number" id="searchTearm" >
                  </div>
              <div class="col-lg-4 mt-4">
                  <button class="btn btn-success text-center form-control" id="SearchRecord" >Filter Record</button>
              </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 id="studentList" class="table lms_table_active">
          <thead>
            <tr>
              <th scope="col">Topic</th>
              <th scope="col">Document Category</th>
              <th scope="col">Student</th>
              <th scope="col">Student Matric</th>
              <th scope="col">Status</th>
              <th scope="col">Date Submitted</th>
              <th scope="col">Actions</th>
            </tr>
          </thead>
          <tbody id="projectList">
            <% if(projects && projects.length > 0){
              for(var project of projects){
            %>
            <tr>
              <th scope="row">
                <a href="#" class="question_content">
                  <%= project.project_topic.topic %>
                </a>
              </th>
              <td>
                <%= project.document_category?.name %>
              </td>
              <td>
                  <div class="col-lg-12"> <%= project.project_topic.student?.profile?.firstname %> <%= project.project_topic.student?.profile?.middlename%> <%= project.project_topic.student?.profile?.lastname%></div>

              </td>
              <td><%= project.project_topic.student?.username %> </td>
              <% if (project.active == false){%>
                <td class=""><span class="badge bg-danger">Rejected</span></td>
              <%}else if(project.is_approved == false){%>
                <td class=""><span class="badge bg-warning">Unapproved</span></td>
              <%}else if(project.is_approved == true){%>
                <td class=""><span class="badge bg-success">Approved</span></td>
              <%}%>%>
              <td><%= new Date(project.createdAt).toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"})  %></td>
              <td><a  target="_blank"  href="view-project/<%= project.id %>"><i class="ti-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 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 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 searchTearm = document.getElementById("searchTearm").value
    if(!searchTearm)
      return alert("Matric Number can not be empty")
    window.location.href = `/all-project?username=${searchTearm}`
    });
</script>
</html>
