<!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;
  }
  *{
    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>
      <div class="menu active">
        <ul>
            <li><a class="item" href="/dashboard">Home</a></li>
            <li><a class="item text-light" href="/dashboard/e-logbook">E-Logbook</a></li>
            <li><a class="item" href="/dashboard/dForm">Submit</a></li>
        </ul>
        </div>
      <section class="container-fluid board active">
          <em class="icon"></em>
        

        <% if(user.approved !== 1){ %>
            <div class="row h-100">
                <article class="col my-auto text-md-center">
                    <h3 class="display-4">Please await for approval</h3><hr class="green darken-2">
                    <p class="text-light mb-md-0">You will be able to get your E-logbook once your attachment application is approved!</p>
                    <footer><small>If you haven't submitted your attachment details, please click <a class="badge lime darken-2" href="/dashboard/dForm">here.</a></small></footer>
                </article>
            </div>
            <% }else { %>

              <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 active lime-text " id="progress-tab" data-toggle="tab" href="#progress" role="tab" aria-controls="progress" aria-selected="false">Daily Progress Chart</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link lime-text " 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 you 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 scetches 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. The supervisor can comment on any day </p>
                  </li>

                  <li>
                  <h5 class="uline">CHANGE OF ATTACHMENT</h5 >
                  <p>You are expected to start and finish your industrial attachment in one establishment. If is becomes absolutely necessary that you must change your attachment, the you should first secure pemission in writing from the college.
                  Applicatin fot change of place should indicate the name and the addtess (not just the Post Office Box) of the company of industry to which your are to transfer. <i> An attachment not properly authorized will be cancelled.</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="progress" role="tabpanel" aria-labelledby="progress-tab">
              <form action="/dashboard/e-logbook" method="POST">
              
              <section class="table-responsive text-nowrap">
              <table class="table text-white">
              <caption class="uline">Log book</caption>
                <thead>
                  <tr>
                    <th scope="col">DAY</th>
                    <th scope="col">DESCRIPTION OF WORK DONE DAILY</th>
                    <th scope="col">ACTION</th>
                  </tr>
                </thead>
                
                <tbody>
                  <tr>
                    <!-- HTML 5 DATA ATTRIBUTES -->
                    <p class="d-none" id="data" data-startdate = "<%= user.from_date %>" data-enddate ="<%= user.to_date %>"
                      <% if(rows[0] !== undefined){ %> data-studentlogs = "<%= rows[0].student_logs %>" data-logdate ="<%= rows[0].log_date %>" <% } %> ></p>

                    <th scope="row"><p id="dateHere"></p></th>
                    <td>
                      <div class="md-form">

                      <textarea class="md-textarea form-control text-white" aria-label="With textarea" name="logtext" id="logtext" rows="3" cols="40" style="min-width:100%; resize:vertical;" <% if(rows[0] == undefined){ %> required <% }else { %> disabled <% } %>></textarea>
                      <label for="logtext text-white" id="logtextlabel">DESCRIPTION OF WORK DONE AND NEW SKILLS LEARNT</label>
                      </div>  
                    </td>
                    <td>  <input class="btn btn-sm green darken-4 btn-block lime-text" id="logsubmit" type="submit" value="<% if(rows[0] == undefined){ %> submit<% }else {%>logs submited <% } %>" <% if(rows[0] !== undefined){%> disabled<% } %> >  </td>
                  </tr>
                </tbody>
              </table>
          
            </section>
              </form>
              </div>
              
              <div class="tab-pane fade show" 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">Logs</th>
                        <th scope="col">Supvervisor Comments</th>
                      </tr>
                    </thead>
                    <tbody>
                      
                      <% for(let i in allrows){ %>
                      <tr>
                        <th scope="row" class="text-nowrap"> <%= allrows[i].fdate %> </th>
                        <td><%= allrows[i].student_logs %></td>
                        <td><%= allrows[i].supervisors_logs %></td>
                      </tr>
                      <% } %>
                      
                    </tbody>
                  </table>


                </div>
              </div>

            </div>
          </div>
          <% if(msg.length > 0){ %>
            <div class="alert alert-success alert-dismissable text-center">
              <span><%= msg %></span>
              <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
          <% } %>
        </section>
        <% } %>
        </section>


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

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