<!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>Supervisor -CORASS</title>
    
    <link rel="icon" href="../img2/kp.png" type="image/png" />

    <link rel="stylesheet" href="../css2/bootstrap1.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <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 href="../js/toastr.css" rel="stylesheet">
    <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')%>
      <!-- Main body starts here -->

      <div id="regSupervisorNav" class="sidenav" style="background-color: white;">
        <a href="javascript:void(0)" class="closebtn" onclick="closeSideNav()">&times;</a>
        <div class="container">
            <h5>Create Supervisor</h5>
            <div class="row">
                <div class="col-lg-12">
                      <div>
                        <label>Username</label>
                        <input type="text" class="form-control shadow-none mb-2" id="usernameReg" name="">


                        <label>Surname</label>
                        <input type="text" class="form-control shadow-none mb-2" id="lastnameReg" >

                        <label>Firstname</label>
                        <input type="text" class="form-control shadow-none mb-2" id="firstnameReg" >


                        <label>Middlename</label>
                        <input type="text" class="form-control shadow-none mb-2" id="middlenameReg" >

                        <label>Title</label>
                        <input type="text" class="form-control shadow-none mb-2" id="titleReg" >

                        <label>Gender</label>
                        <select name="gender" id="gender" class="form-select mb-2 shadow-none">
                            <option  value="male">Male</option>
                            <option  value="female">Female</option>
                        </select>

                        <label>Department</label>
                        <select id="department_idReg" class="form-select shadow-none">
                            <% if(departments && departments.length > 0){
                              for(var department of departments){
                            %>
                            <option  value="<%=department.id%>"><%=department.name%></option>
                            <%}}%>
                        </select>
                      </div><br>
  
                        <div>
  
                        <label>Role</label><br>
                          <label>
                            <span class="badge badge-success mb-2">
                            <span id="mainRoleReg"> Supervisor </span> <span class="badge badge-light">√</span>
                          </span>
                          </label>
                        <label id="mainRole2BlockReg" >
                          <span class="badge badge-success mb-2">
                          <span id="mainRole2Reg"> </span> <span class="badge badge-light">√</span>
                        </span>
                        </label>
                          <select id="roleReg" class="form-select shadow-none">
                            <option value="">Please select role</option>
                              <% if(roles && roles.length > 0){
                                for(var role of roles){
                              %>
                              <option  value="<%=role.alias%>"><%=role.alias%></option>
                              <%}}%>
                              
                          </select>
                        </div><br>
                    <div >
                      <button class="btn btn-success" id="createSupervisor" >Create</button>
                  </div><br>
                </div>
            </div>
        </div>
      </div> 
    <div id="uploadSidenav" class="sidenav" style="background-color: white;">
      <a href="javascript:void(0)" class="closebtn" onclick="closeSideNav()">&times;</a>
      <div class="container">
          <h5>Supervisor</h5>
          <div class="row">
              <div class="col-lg-12">
                    <div>
                      <label>Username</label>
                      <input type="text" class="form-control shadow-none mb-2" id="username" name="username">
                      <label>Department</label>
                      <select name="department" id="department" class="form-select shadow-none">
                          <option selected id="ativeDept" >1</option>
                          <% if(departments && departments.length > 0){
                            for(var department of departments){
                          %>
                          <option  value="<%=department.id%>"><%=department.name%></option>
                          <%}}%>
                      </select>
                    </div><br>

                      <div>

                      <label>Role</label><br>
                        <label>
                          <span class="badge badge-success mb-2">
                          <span id="mainRole"> </span> <span class="badge badge-light">√</span>
                        </span>
                        </label>
                      <label id="mainRole2Block" >
                        <span class="badge badge-success mb-2">
                          <input type="hidden" id="secondRoleId">
                        <span id="mainRole2"> </span> <span onclick="deleteRole()" class="badge badge-light">x</span>
                      </span>
                      </label>
                        <select name="role" id="role" class="form-select shadow-none">
                          <option value="">Please select role</option>
                            <% if(roles && roles.length > 0){
                              for(var role of roles){
                            %>
                            <option  value="<%=role.alias%>"><%=role.alias%></option>
                            <%}}%>
                            
                        </select>
                      </div><br>
                      <div >
                          <label> Firstname</label><br>
                          <input type="text" class="form-control shadow-none" id="firstname" name="firstname">
                          <input type="hidden" id="id">
                      </div><br>
                      <!-- <div >
                        <label> Middlename</label><br>
                        <input type="text" class="form-control shadow-none" id="middlename" name="middlename">
                        
                    </div><br> -->
                    <div >
                      <label> Surname</label><br>
                      <input type="text" class="form-control shadow-none" id="lastname" name="lastname">
                      
                  </div><br>
                  <div >
                    <button class="btn btn-success" id="updateSupervisor" >Update</button>
                </div><br>
              </div>
          </div>
      </div>
    </div>
      
      <div class="main_content_iner"> 
        <div class="container-fluid p-0 mb-3">
          <div class="row">
              <div class="">
                <div class="white_card_header">
                      <h6 class="m-0 text-dark">Supervisor</h6>
                     <p>To create or upload a new supervisor, click on the corresponding action button below.</p>
                  </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="pt-3">
        <button class="btn btn-success  " onclick="openRegNav()" >Create Supervisor</button>
        <button class="btn btcr1">Batch Upload</button>
    </div>
      </div>
      </div>
      </div>
      <div class="QA_table mb_30 table-responsive">
      
      <table class="table display table" id="table_id">
      <thead>
      <tr>
      <th scope="col">SUPERVISOR</th>  
      <th scope="col">DEPARTMENT</th>
      <th scope="col">DATE UPLOADED</th>
      <th scope="col">STATUS</th>
      <th scope="col">ACTIONS</th>
      </tr>
      </thead>
      <tbody>
        <% if(supervisors && supervisors.length > 0){
          for(var supervisor of supervisors){
        %>
        <tr >
          <td class="text-dark"> <a href="/admin/student-account?user_id=<%=supervisor.user_id%>&type=staff"><%= supervisor.firstname %> <%= supervisor.lastname %><br><span><%= supervisor.user?.username %></a> </span></td>
          <td class="text-dark"><%= supervisor?.department?.name %> </td>
          <td class="text-dark"><%= supervisor.createdAt %> </td>
          <td><strong>Active</strong></td>
          <td class="text-dark d-flex">
              <span onclick="openSideNav('<%= supervisor.id %> ')"><i class="fa-regular fa-pen-to-square"></i></span>
              <span><i class="fa-regular fa-circle-xmark mx-3"></i></span>
          </td>
       </tr>
       <%}}%>
      </tbody>
      </table>
      </div>
      </div>
      </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>
    </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="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.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="../js/toastr.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>
  $(document).ready(function () {
  $('#table_id').DataTable();

  $('#role').on('change', function(){
   $("#mainRole2Block").show();
   $('#mainRole2').html(this.value)
  });
  $('#roleReg').on('change', function(){
   $("#mainRole2BlockReg").show();
   $('#mainRole2Reg').html(this.value)
  });

$('#updateSupervisor').on('click', function(){

    const username = $('#username').val()
    const firstname = $('#firstname').val()
    const department = $('#department').val()
    const role = $('#role').val()
    const lastname = $('#lastname').val()
    const id = $('#id').val()

    jQuery.ajax({
    url:`/admin/update-supervisor/${id}`,
    method:'POST',
    data:{
      username,
      firstname,
      department,
      role,
      lastname,
      id
    },
     success:function(data)
        {
          if(data.success == false){
            toastr.error(
              data.message,
              "ERROR", {
                timeOut: 9000
              }
            ); 
          return
          }
          toastr.success(
              data.message,
              "SUCCESS", {
                timeOut: 11000
              }
            );
          
       document.getElementById("uploadSidenav").style.width = "0px";       
        }
    });

  });
});

$('#createSupervisor').on('click', function(){

const usernameReg = $('#usernameReg').val()
const firstnameReg = $('#firstnameReg').val()
const department_idReg = $('#department_idReg').val()
const roleReg = $('#roleReg').val()
const lastnameReg = $('#lastnameReg').val()
const middlenameReg = $('#middlenameReg').val()
const titleReg = $('#titleReg').val()
if(!usernameReg || !firstnameReg || !department_idReg || !roleReg || !lastnameReg ){
  toastr.error(
          "All field are required!",
          "ERROR", {
            timeOut: 9000
          }
        ); 
        return false
}
jQuery.ajax({
url:`/admin/create-supervisor`,
method:'POST',
data:{
  username:usernameReg,
  firstname:firstnameReg,
  department_id:department_idReg,
  role:roleReg,
  lastname:lastnameReg,
  title:titleReg,
  middlename:middlenameReg
},
 success:function(data)
    {
      if(data.success == false){
        toastr.error(
          data.message,
          "ERROR", {
            timeOut: 9000
          }
        ); 
      return
      }
      toastr.success(
          data.message,
          "SUCCESS", {
            timeOut: 11000
          }
        );
      
   document.getElementById("regSupervisorNav").style.width = "0px";       
    }
});

});
</script>
<script>
  function openRegNav(){
    document.getElementById("regSupervisorNav").style.width = "350px";
  }
  function openSideNav(id) {
    
    $('#mainRole').html("")
    $('#mainRole2').html("")
   jQuery.ajax({
    url:`/admin/one-supervisor/${id}`,
    method:'GET',
     success:function(data)
        {
          console.log(data)
          if(data.success == false){
            toastr.error(
              data.message,
              "ERROR", {
                timeOut: 9000
              }
            ); 
          return
          }
          $('#username').val(data.supervisor.user?.username)
          $('#ativeDept').val(data.supervisor.department.id)
          $('#ativeDept').html(data.supervisor.department.name)
          $('#id').val(data.supervisor.user_id)
          $('#firstname').val(data.supervisor.firstname)
          $('#lastname').val(data.supervisor.lastname)
          $('#mainRole').html(data.supervisor.firstRole.alias)
          $('#mainRole2').html(data.supervisor.secondRole.alias)
          toastr.success(
              data.message,
              "SUCCESS", {
                timeOut: 11000
              }
            );       
        }
    });
    document.getElementById("uploadSidenav").style.width = "350px";
  }
  
  function closeSideNav() {
    document.getElementById("uploadSidenav").style.width = "0";
    document.getElementById("regSupervisorNav").style.width = "0";
  }
  function deleteRole(){
    
    const username = $('#username').val()
    const firstname = $('#firstname').val()
    const department = $('#department').val()
    const role = 0
    const lastname = $('#lastname').val()
    const id = $('#id').val()

    jQuery.ajax({
    url:`/admin/cancel-supervisor/${id}`,
    method:'POST',
    data:{
      username,
      firstname,
      department,
      role,
      lastname,
      id
    },
     success:function(data)
        {
          if(data.success == false){
            toastr.error(
              data.message,
              "ERROR", {
                timeOut: 9000
              }
            ); 
          return
          }
          toastr.success(
              data.message,
              "SUCCESS", {
                timeOut: 11000
              }
            );
        
        $('#mainRole2Reg').html("")
       document.getElementById("uploadSidenav").style.width = "0px";       
        }
    });

  }
  </script>
</html>
