<%# Analytics page for contributor stats %>
<%# ARGUMENTS: contributorID - the current contributor's ID %>

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

<%# Backend queries %>
<script>
  $(document).ready(function() {
    // hide no results found
    $('#no-results').hide(0);
    $('#success').hide(0);

    let id = '<%= contributorID %>';

    $.get(
      '/contributors/getContributorStats', {
        id,
      },
      (data) => {
        if (data.status == 'Error') {
          $('#no-results').show(500);
          $('#success').hide(100);
        } else {
          $('#hours').text(data.data.hourSum);
          $('#pending-hours').text(data.data.pendingHourSum);
          $('#average-rating').text(data.data.ratingAverage);

          $('#physics-written').text(data.data.physics.physicsWritten);
          $('#chemistry-written').text(data.data.chemistry.chemistryWritten);
          $('#biology-written').text(data.data.biology.biologyWritten);
          $('#ess-written').text(data.data.ess.essWritten);
          $('#usabo-written').text(data.data.usabo.usaboWritten);
          $('#physics-avg-rating').text(data.data.physics.physicsRatingAverage);
          $('#chemistry-avg-rating').text(
            data.data.chemistry.chemistryRatingAverage
          );
          $('#biology-avg-rating').text(data.data.biology.biologyRatingAverage);
          $('#ess-avg-rating').text(data.data.ess.essRatingAverage);
          $('#usabo-avg-rating').text(data.data.usabo.usaboRatingAverage);
          $('#physics-pending').text(data.data.physics.pendingPhysicsWritten);
          $('#chemistry-pending').text(
            data.data.chemistry.pendingChemistryWritten
          );
          $('#biology-pending').text(data.data.biology.pendingBiologyWritten);
          $('#ess-pending').text(data.data.ess.pendingESSWritten);
          $('#usabo-pending').text(data.data.usabo.pendingUSABOWritten);

          $('#no-results').hide(100);
          $('#success').show(500);
        }
      }
    );
  });
</script>


<h1 class="my-5 container display-2 text-center">Your Contributor Stats (<font color="blue"><%= contributorID %></font>)</h1>

<div class="jumbotron container">
  <% if (adminList.includes(user.username)) { %>
  <div class="container">
    <h3>Enter a Mutorials ID to query:</h3>
    <input class="form-control my-1" type="text" placeholder="MutorialsID" id="MuID">
    <input class="btn btn-primary my-1" value="Send Query" type="button" id="submit">

    <div class="my-2 alert alert-success" id="success"></div>
    <div class="my-2 alert alert-danger" id="no-results">No data was found for this contributor</div>
  </div>
  <% } %>
  <div class="container mt-3">
    <h5>Approximate Confirmed Hours: <span id="hours">XXX</span></h5>
    <h5>Speculative Additional Hours: <span id="pending-hours">XXX</span></h5>
    <h5>Average Rating: <span id="average-rating">XXX</span></h5>
  </div>

  <h3 class="text-center mt-4 mb-3">Question Writing Stats</h3>
  <table class="text-center table">
    <thead>
      <tr>
        <th scope="col"></th>
        <th scope="col">Physics</th>
        <th scope="col">Chemistry</th>
        <th scope="col">Biology</th>
        <th scope="col">USABO</th>
        <th scope="col">ESS</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Finalized</th>
        <td id="physics-written">XXX</td>
        <td id="chemistry-written">XXX</td>
        <td id="biology-written">XXX</td>
        <td id="usabo-written">XXX</td>
        <td id="ess-written">XXX</td>
      </tr>
      <tr>
        <th scope="row">Average Rating</th>
        <td id="physics-avg-rating">XXX</td>
        <td id="chemistry-avg-rating">XXX</td>
        <td id="biology-avg-rating">XXX</td>
        <td id="usabo-avg-rating">XXX</td>
        <td id="ess-avg-rating">XXX</td>
      </tr>
      <tr>
        <th scope="row">Pending Review</th>
        <td id="physics-pending">XXX</td>
        <td id="chemistry-pending">XXX</td>
        <td id="biology-pending">XXX</td>
        <td id="usabo-pending">XXX</td>
        <td id="ess-pending">XXX</td>
      </tr>
    </tbody>
  </table>

</div>
