<!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>Payment Plan-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 id="uploadSidenav" 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>
                      </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 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">Payment Plan</h6>
                      <p>To create a new payment plan, click on the action button below.</p>
                  </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="pt-3">
                    <button class="btn btn-success btcr2 mx-3">Create Payment Plan</button>
                </div>
                <div  class="table-responsive">
                    <table class="table">
                        <th class="tablehd">
                            <tr class="px-2" style="background-color: rgba(128, 128, 128, 0.363);">
                                <th>PAYMENT</th>
                                <th>ACCESS FEE</th>
                                <th>DATE CREATED</th>
                                <th>STATUS</th>
                                <th>ACTIONS</th>
                            </tr>
                        </th>
                        <tbody>
                          <% for(var package of packages){
                            %>
                            <tr>
                                <td><%= package.name%> <smal>(<%= package.code%> )</smal></td>
                                <td><%= package.amount%></td>
                                <td><%= (package.createdAt).toString()%></td>
                                <% if(package.active){%>
                                  <td class="actv"><strong>Active</strong></td>
                                <%}else{%>
                                  <td class="text text-danger"><strong>Inactive</strong></td>
                                <%}%>
                                <span  onclick="openSideNav('<%= package.id %> ')"><td><i class="fa-regular fa-pen-to-square"></i></td></span>
                            </tr>
                           <%}%>
                        </tbody>
                    </table>
                </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="../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>
      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";
  }
    </script>
  </body>

</html>
