<%# class details page %>
<%# ARGUMENTS: currentClass, students, physicsAvg, chemistryAvg, biologyAvg %>

<%- include("../../partials/header") -%>
<%- include("../../partials/navigationPrivate") -%>

<div class="container mt-5 mb-1">
  <div class="mb-2">
    <%- include("../../partials/flashes") -%>
  </div>
  <h1 class="text-center display-3"><%= currentClass.name %></h1>
  <h4 class="text-center">Class code: <%= currentClass.classCode %><h4>
      <span class="text-center">Give this to your students and tell them to go to <a href="https://www.mutorials.org/class/join">https://www.mutorials.org/class/join</a> to join your class!</span>
</div>

<div class="jumbotron container">
  <h1>Analytics</h1>
  <h2>Average Physics Rating: <%= physicsAvg %></h2>
  <h2>Average Chemistry Rating: <%= chemistryAvg %></h2>
  <h2>Average Biology Rating: <%= biologyAvg %></h2>
</div>

<script>
  function removeStudentConfirm(ign) {
    $('#student-remove-' + ign).hide();
    $('#student-remove-' + ign + '-confirm').show();
  }

  function removeStudent(ign) {
    let classId = "<%= currentClass._id %>";
    $.post("/class/removeStudent", {
      ign,
      classId
    }, function(data) {
      if (data.status) {
        $('#student-stats-' + ign).html("<b>" + ign + "</b> removed");
      }
    });
  }
</script>
<div class="jumbotron container">
  <h1>Student Stats</h1>
  <% students.forEach((student, studentIndex) => { %>
  <div id="student-stats-<%= student.ign %>" class="student-stats">
    <a class="btn btn-primary" href="/stats/<%= student.ign %>"><%= student.profile.name || student.ign %>'s stats</a>
    <button id="student-remove-<%= student.ign %>" class="btn btn-danger float-end" onclick="removeStudentConfirm('<%= student.ign %>')">Remove <%= student.profile.name || student.ign %></button>
    <button id="student-remove-<%= student.ign %>-confirm" class="btn btn-danger float-end" style="display: none" onclick="removeStudent('<%= student.ign %>')">Are you sure you want to remove <%= student.profile.name || student.ign %>?</button>
  </div><br>
  <% }) %>
</div>

<div class="container">
  <form method="post" action="/class/generateNewClassCode">
    <input type="text" name="classId" value="<%= currentClass._id %>" style="display: none">
    <input type="text" name="classCode" value="<%= currentClass.classCode %>" style="display: none">
    <input type="submit" class="btn btn-secondary" value="Generate new class code">
  </form>
  <br>
  <form method="post" id="delete-class-form" action="/class/delete">
    <input type="text" name="classId" value="<%= currentClass._id %>" style="display: none">
    <input type="text" name="className" value="<%= currentClass.name %>" style="display: none;">
    <input type="button" class="btn btn-danger" value="Delete this class" data-toggle="modal" data-target="#confirm-delete-class">
  </form>
  <br>
</div>

<div class="modal fade" id="confirm-delete-class" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        Confirm Delete Class
      </div>
      <div class="modal-body">
        Are you sure you want to delete this class? Your students will be removed from this class as well.
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <a href="#" id="delete-class-confirm" class="btn btn-danger">Delete</a>
      </div>
    </div>
  </div>
</div>


<script>
  $('#delete-class-confirm').click(function() {
    /* when the submit button in the modal is clicked, submit the form */
    $('#delete-class-form').submit();
  });
</script>

<%- include("../../partials/footer") -%>
