<!DOCTYPE html>
<html lang="en">
<head>
    <%- include("./partials/_head") %>
    <style type="text/css">
    .md-form textarea.md-textarea:focus:not([readonly]){
    border-bottom: 1px solid yellow;
    -webkit-box-shadow: 0 1px 0 0 yellow;
    box-shadow: 0 1px 0 0 yellow;
  
  }
  .md-form textarea.md-textarea:focus:not([readonly])+label {
    color: yellow;
  }
  a.active{
    background-color: #1b5e20 !important
  }

  .uline{
    text-decoration: underline;
  }

  @media (max-width: 850px) {
    .text-nowrap1 {
        white-space: nowrap !important;
        word-wrap: break-word!important;
    }
  }
  *{
    transition:300ms all;
  }

    </style>

    <title>E-logbook</title>
</head>
<body style="background-color: #555;">
        <nav class="navbar navbar-expand-sm navbar-dark green darken-4">
        <a class="navbar-brand" href="#"><strong>OAMS</strong></a>
          <a class="text-light" href="#"><strong>ONLINE ATTACHMENT MANAGEMENT SYSTEM</strong></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-6"
          aria-controls="navbarSupportedContent-6" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarSupportedContent-6">
          <ul class="navbar-nav ml-auto">
           
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-6" data-toggle="dropdown" aria-haspopup="false"
                aria-expanded="false"><%= user.first_name %> <%= user.last_name %></a>
              <div class="dropdown-menu dropdown-secondary" aria-labelledby="navbarDropdownMenuLink-6">
                <a class="dropdown-item" data-toggle="modal" href="#askmodal">
                  <% if(user.is2faEnabled){ %>
                    Disable 2-Factor Authentication
                  <% }else{ %>
                    Enable 2-Factor Authentication
                  <% } %>
                </a>
                <a class="dropdown-item" href="/dashboard/logout">Logout</a> 
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">JKUAT</a>
            </li>
          </ul>
        </div>
      </nav>
      <section class="container-fluid board">

            <ul class="nav nav-tabs text-md-center" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link lime-text" id="logbook-tab" data-toggle="tab" href="#thelogbook" role="tab" aria-controls="thelogbook" aria-selected="true" aria-disabled="true">The Log Book</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link lime-text active" id="logs-tab" data-toggle="tab" href="#alllogs" role="tab" aria-controls="alllogs" aria-selected="false">All Logs</a>
                </li>
            </ul>

            <div class="tab-content" id="myTabContent">

              <div class="tab-pane fade show" id="thelogbook" role="tabpanel" aria-labelledby="logbook-tab">
              <section class="container text-justify text-white">
                <h5  class="h5 ">DURATION: 12 WEEKS</h5 >

                <ol>
                  <li>
                  <h5 class="uline">INTRODUCTION</h5 >
                  <p>This E-Logbook is to assist the student to keep record of training. It will show the deparrment and sections in which the student has worked and the periods of the time spent section or unit.</p>
                  </li>

                  <li>
                  <h5 class="uline">DAILY REPORT</h5 >
                  <p>The daily work carried out during the periods of training is to be recorded clearly with sketches and diagrams where applicable.</p>
                  </li>

                  <li>
                  <h5 class="uline">WEEKLY REPORT</h5  >
                  <p>This summary of the work done in a week and should cover theory/practical reports on the work covered. You as the supervisor can comment on any day.</p>
                  </li>

                  <li>
                  <h5 class="uline">SPECIAL REQUEST FOR THE INDUSTRY BASED SUPERVISOR</h5 >
                  <p>Please asses the student as per his/her logs.</i>
                  </p>
                  </li>

                  <li>
                  <h5 class="uline">CHANGE OF ATTACHMENT</h5  >
                  <p>In addition to the daily and weekly record, you should submit a summary report of the work done during the attachment duration e.g. full covarage of the course, problems encountered, and sugested improvements to make the programme worthwhile. The report should contain a sumarry of all the activities of the organization, the particular activities you were involved in, challanges and new skills learnt.</i>
                  </p>
                  </li>
                </ol>
              </section>
              </div>
              
              <div class="tab-pane fade show active" id="alllogs" role="tabpanel" aria-labelledby="alllogs-tab">

                <div class="table-responsive">
                    <table class="table text-white">
                        <thead>
                            <tr>
                              <th scope="col">Date</th>
                              <th scope="col" class="text-center text-nowrap">Student Logs</th>
                              <th scope="col" class="text-nowrap">Comments by Supervisor/Lecturer</th>
                            </tr>
                          </thead>
                          <tbody>
                          <% for(let i in rows){ %>
                            <form action="/dashboard/supervisorlogs" method="POST">
                              <tr>
                                <th scope="row" class="text-nowrap"> <%= rows[i].fdate %> </th>
                                <td><p class="text-nowrap1"><%= rows[i].student_logs %></p></td>
                                <td>
                                <div class="md-form">
                                  <textarea class="md-textarea form-control text-white" name="supervisorLogs" id="supervisorLogs" rows="1" cols="1" placeholder="<%= rows[i].supervisors_logs %>" required></textarea>
                                  <button type="submit" class="btn btn-sm btn-outline-success"> <i class="comment">Comment</i></button>
                                      <input type="text" name="logdate" id="logdate" class="d-none" value="<%= rows[i].fdate %>" />
                                      <input type="text" name="userid" id="logdate" class="d-none" value="<%= rows[i].user_id %>" />
                                </div>
                              </td>
                            </tr>
                        </form>
                        <% } %>
                          </tbody>
                    </table>
                </div>

              </div>

            </div>

            <% if(msg.length > 0){ %>
            <div class="_2faAlert alert alert-success">
              <a class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Success: </strong><%= msg %>
            </div>
            <% } %>
        </section>



<footer> <%- include('2-F-A') %> <%- include("./partials/_foot") %> </footer>

<script type="text/javascript" src="/javascripts/logbook.js"></script>
</body>
</html>
