<!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>DEPARTMENT -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">
  <link rel="stylesheet" href="../vendors/staff_sidebar/style.css" />
</head>

<body class="crm_body_bg">
  <%- include('./component/header.ejs')%>

    <div id="uploadSidenav" class="sidenav" style="background-color: white;">
      <a href="javascript:void(0)" class="closebtn" onclick="closeSideNav()">&times;</a>
      <div class="container">
        <h5>Edit Department</h5>
        <div class="row">
          <div class="col-lg-12">
            <form action="/admin/update-department" method="POST">
              <div>

                <label>Institute</label>
                <select name="institute_id" id="institute_id" class="form-select shadow-none">
                  <option id="firstInstitute"></option>
                  <% if(institutes && institutes.length> 0){
                    for(var institute of institutes){
                    %>
                    <option value="<%= institute.id %>">
                      <%= institute.name %>
                    </option>

                    <%}}%>
                </select>
              </div><br>
              <div>
                <label>Department Name</label>
                <input type="text" name="name" id="name" class="form-control" placeholder="Department Name">

              </div><br>
              <div>
                <label>Department Code</label>
                <input type="text" name="code" id="code" class="form-control" placeholder="Department Code">

              </div><br>
              <div>
                <label>Department Color Code</label>
                <input type="text" name="projet_color" id="projet_color" class="form-control"
                  placeholder="Project Code">
                <input type="hidden" name="department_id" id="department_id" class="form-control"
                  placeholder="Project Code">

              </div><br>
              <div>
                <label>Department Status</label>
                <select name="active" id="active" class="form-select shadow-none">
                  <option id="activeStatus">Select Status</option>
                  <option value="1">Active</option>
                  <option value="0">InActive</option>
                </select>

              </div><br>

              <br>
              <div>
              </div><br>
              <button type="submit" class="btn" style="background-color: #068F3F;color:white;"> Update </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/create-department"method="POST">
              <div>
                <label>Institute</label>
                <select name="institute_id" id="institute_id" required class="form-select shadow-none">
                  <option value="">Select Institute</option>
                  <% if(institutes && institutes.length> 0){
                    for(var institute of institutes){
                    %>
                    <option value="<%= institute.id %>">
                      <%= institute.name %>
                    </option>

                    <%}}%>
                </select>
              </div><br>
              <div>
                <div>
                  <label>Department Name</label>
                  <input type="text" name="department_name" required class="form-control shadow-none" placeholder="Computer Science">
                </div>
              </div><br>
              <div>
                <div>
                  <label>Project Color</label>
                  <input type="text" name="project_color" required class="form-control shadow-none" placeholder="#FFFFF">
                </div>
              </div><br>
              <button type="submit" class="btn" style="background-color: #068F3F;color:white;"> create </button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="main_content_iner">
      <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 class="pt-3">
                          <button class="btn  mx-2" style="background-color: #068F3F;color:white;" onclick="openSideNavSingle()">Create New</button>
                          <!-- <button class="btn btn-success btcr2">Batch Upload</button> -->
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="QA_table mb_30 table-responsive">
                    <!-- <p><%= JSON.stringify(departments)%></p> -->
                    <table class="table display table" id="table_id">
                      <thead>
                        <tr>
                          <th scope="col">DEPARTMENT</th>
                          <th scope="col">PROJECT COLOR</th>
                          <th scope="col">INSTITUTE</th>
                          <th scope="col">DATE UPLOADED</th>
                          <th scope="col">STATUS</th>
                          <th scope="col">ACTIONS</th>
                        </tr>
                      </thead>
                      <tbody>
                        <% for(const department of departments){%>
                          <tr>
                            <td class="text-dark">
                              <%=department.name %> (<%=department.code %> )
                            </td>
                            <td class="text-dark"><button
                                style="padding:5px;background-color: <%=department.projet_color %> ">Color</button></td>
                            <td class="text-dark">
                              <%=department["institute.name"] %> (<%=department["institute.code"] %> )
                            </td>
                            <td class="text-dark">
                              <%=department?.createdAt %>
                            </td>
                            <td><strong>Active</strong></td>
                            <td class="text-dark d-flex">
                              <i class="fa-regular fa-pen-to-square" onclick="openSideNav('<%= department.id %>')"></i>
                              <i class="fa-regular fa-circle-xmark mx-3"></i>
                            </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();
      });
      function openSideNav(department) {
        jQuery.ajax({
          url: `/admin/department/${department}`,
          method: 'GET',
          error: function (request, error) {
            console.log(error)
          },
          success: function (data) {
            document.getElementById("name").value = data.department.name;
            document.getElementById("department_id").value = data.department.id;
            document.getElementById("code").value = data.department.code;
            document.getElementById("projet_color").value = data.department.projet_color;
            document.getElementById("firstInstitute").innerHTML = data.department["institute.name"];
            document.getElementById("firstInstitute").value = data.department["institute.id"];
            document.getElementById("activeStatus").innerHTML = data.department.active;

          }
        });
        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>

</html>