<%- include("./partials/teheader.ejs") %>
</head>

<%- include("./partials/tenav.ejs") %>
<div class="container mt-4">

  <div class="row">
    <div class="col-md-4">
      <h5>Add Students</h5>
      <form class="" action="/te/exam/<%=id%>/students" method="post">
        <div class="form-group">
          <input type="text" name="student" class="form-control" placeholder="Student Roll Number" id="s">
        </div>
        <div class="form-group">
          <button class="btn btn-outline-success">Add</button>
        </div>
      </form>
    </div>
    <div class="col-md-4">
      <h5>Remove Students</h5>
      <form class="" action="/te/exam/<%=id%>/students?_method=DELETE" method="POST">
        <div class="form-group">
          <input type="text" name="student" class="form-control" placeholder="Student Roll Number" id="r">
        </div>
        <div class="form-group">
          <button class="btn btn-outline-danger">Remove</button>
        </div>
      </form>
    </div>
    <div class="col-md-4">
      <h5>Access Code</h5>
      <div>
        <input type="text" value="<%=access%>" id="copy"> <span id="share"><i class="far fa-copy"></i></span>
      </div>
    </div>
  </div>
  <hr>

  <h2 class="text-center m-4">Students</h2>
  <h5>Number of Students: <%=students.length%></h5>



  <table class="table text-center">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Number</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <% for(var i=0;i<=students.length-1;i++){ %>
      <tr>
        <th scope="row"><%=i+1%></th>
        <td id="student<%=i%>"><%=students[i]%></td>
        <td id="statusTag<%=i%>">Not Viewed</td>
      </tr>
      <% }%>
    </tbody>
  </table>
  <hr />
  <a href="/te/exam/ready" class="btn btn-outline-primary">Back</a>











  <!-- <div class="container mx-5 px-3">
    <center>
      <h3 style="padding:30px">Submitted</h3>
    </center>
    <div class="row">
      <div class="col-md-4">
        <h5>S.No</h5>
      </div>
      <div class="col-md-4">
        <h5>Reg No</h5>
      </div>
      <div class="col-md-4">
        <h5>Status</h5>
      </div>
    </div>
    <% for(var i=0;i<=attempted.length-1;i++){ %>
    <div class="row">
      <div class="col-md-4">
        <%=i+1%>
      </div>
      <div class="col-md-4">
        <%=attempted[i]%>
      </div>
      <div class="col-md-4">
        Submitted
      </div>
    </div>
    <hr>
    <%  }%>


    <center>
      <h3 style="padding:30px">Viewed</h3>
    </center>
    <div class="row">
      <div class="col-md-4">
        <h5>S.No</h5>
      </div>
      <div class="col-md-4">
        <h5>Reg No</h5>
      </div>
      <div class="col-md-4">
        <h5>Status</h5>
      </div>
    </div>
    <% for(var i=0;i<=students.length-1;i++){ %>
    <div class="row">
      <div class="col-md-4">
        <%=i+1%>
      </div>
      <div class="col-md-4">
        <%=students[i]%>
      </div>
      <div class="col-md-4">
        Viewed / Absent
      </div>
    </div>
    <hr>
    <%  }%>
  </div>


</div> -->










  <script src="/scripts/examstudents.js"></script>
  <script src="https://kit.fontawesome.com/30ef029f33.js" crossorigin="anonymous"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script type="text/javascript">
    const socket = io();
    var students = <%-JSON.stringify(students)%>;
    socket.on("view",(data) => {
      //console.log(data,"view");
      var index = students.findIndex(s => s === data.student);
       var tag = document.getElementById("statusTag"+index);
      //localStorage.setItem(document.getElementById("statusTag"+index).innerHTML,data.status);
      tag.innerHTML = data.status;
    });
  </script>
  <%- include("./partials/footer.ejs") %>
