<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include('./partials/_head') %>
    <style type="text/css">
    .custom-file-label{
      left:1em;
      right: 1em;
    }
    </style>
    <title>OnlineAMS</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
              s<% }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" href="/dashboard/e-logbook">E-Logbook</a></li>
        <li><a class="item text-light" href="/dashboard/dForm">Submit</a></li>
    </ul>
    </div>
  <section class="container-fluid board active">
    <header class="container transparent header1">
      <em class="icon"></em>
    </header>

    <main>
      <div>
        <form action="/dashboard/attachfrm" method="POST" enctype="multipart/form-data" class="mx-auto form">
        <% if(user.institution_id !== null && user.approved == 0){ %>
          <div class="row h-100">
          <article class="col my-auto text-md-center">
              <h4 class="display-4">Your attachment details have been submitted Successfully</h4><hr class="green darken-2">
              <p class="text-light mb-md-0">Please await as we validate your details </p>
          </article>
          </div> 
       <% }else if(user.approved == 1) { %>
         
          <div class="row h-100">
          <article class="col my-auto text-md-center">
              <h4 class="display-4 text-responsive">You have been approved to startyour atachment programme</h4><hr class="green darken-2">
              <footer>Please procede in filling your E_Logbook <a class="badge lime darken-2 text-wrap" href="/dashboard/e-logbook">here.</a></footer>
          </article>
          </div> 

      <% }else { %>
        <h4 class="text-center">Please fill in the form and attach the letter from institution below.</h4>
        <hr class="green darken-2">
        <div class="mx-auto mform">
            
            <div class="form-group">
              <input type="text" name="institution" id="institution" class="form-control" required />
              <label class="form-label" for="institution">Name of Institution attached</label>
            </div>   

            <div class="form-group">
              <input type="text" name="position" id="position" class="form-control" required/>
              <label class="form-label" for="position">Department/Work Position </label>
            </div>

            <div class="form-group">
              <input type="text" name="location" id="location" class="form-control" required/>
              <label class="form-label" for="location">Location</label>
            </div>
    
            <div class="row">
              <div class="form-group col-lg-6">
                <input type="date" name="startDate" id="startDate" class="form-control" min="<%= minDate %>" required/>
                <label class="form-label" for="startDate">Start Date</label>
              </div>
              <div class="form-group mb-4 col-lg-6">
                <input type="date" name="endDate" id="endDate" class="form-control" />
                <label class="form-label" for="endDate">End Date</label>
              </div>
            </div> 

            <div class="row">
              <div class=" form-group col-lg-6">
                <input class="form-control" type="email" name="email" id="email" required />
                <label class="form-label" for="email" >Institution email</label>
              </div>

              <div class=" form-group col-lg-6">
                <input class="form-control" type="text" name="website" id="website" placeholder="Optional..."/>
                <label class="form-label" for="website" >Institution Website</label>
              </div>
              </div>
              
              <div class="row">
              <div class="custom-file col-lg-6 mb-3">
                <input type="file" class="custom-file-input" id="attachFile" name="attachFile" required />
                <label class="custom-file-label" for="attachFile">Upload letter from Institution</label>
              </div> <%= typeof msg !='undefined' ? msg: ''%>

              <div class="form-group col-lg-6">
              <textarea class="form-control" rows="1" name="moreInfo" id="moreInfo" placeholder="optional..."></textarea> 
              <label class="form-label" for="txtArea">Additional Information</label>
              </div>
            </div>

            <h4> Please Fill in Your Supervisors Details</h4>
            <hr class="green darken-2">
              
              <div class="form-group">
              <input type="text" name="supFirstName" id="supFirstName" class="form-control form-control" required />
              <label class="form-label" for="supFirstName">First Name</label>
              </div>

              <div class="form-group">
              <input type="text" name="supLastName" id="supLastName" class="form-control form-control" required />
              <label class="form-label" for="supLastName">Last Name</label>
              </div>  

              <div class="form-group">
              <input type="email" name="supEmail" id="supEmail" class="form-control form-control" required />
              <label class="form-label" for="supEmail">Email</label>
              </div>

              <div class="form-group">
              <input type="number" name="supContact" id="supContact" class="form-control form-control" required />
              <label class="form-label" for="supContact">Contact</label>
              </div>
          </div>

            <% if(user.institution_id == null) { %>
              <input type="submit" class="btn  btn-block mb-4 green" value="Submit" />
            <% }else { %>
              <input type="submit" class="btn  btn-block mb-4 green" value="You have already submitted" />
            <% } %>
            <% } %>
          </form>
      </div>
        
    </main>
  </section>


<footer>
  <%- include('2-F-A') %>
  <%- include('./partials/_foot') %> 
   <script type="text/javascript">
      $(".custom-file-input").on("change", function() {
      var fileName = $(this).val().split("\\").pop();
      $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
      });
   </script>
</footer>

</body>
</html>
    