<!DOCTYPE html>
<html>

<head>
  <%- include("../../partials/header.ejs") %>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/c65a03b059.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>

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

    <div class="columns">
      <div class="column is-3"></div>
      <div class="column is-6">
        <div class="section">
          <div class="block">
            <h1 class="title">Approve Tournament Entries</h1>
          </div>
          <div class="box" style="padding: 2rem">

            <div class="field">
              <label class="label">Select a Tournament</label>
              <div class="control">
                <div class="select">
                  <select id="userSelectedTournament">
                    <option value="all">All</option>
                  </select>
                </div>
              </div>
            </div>


            <div class="field">
              <label class="label">Select an Event</label>
              <div class="control">
                <div class="select">
                  <select id="userSelectedEvent">
                    <option value="all">All</option>
                    <option value="pf">Public Forum</option>
                    <option value="ld">Lincoln Douglas</option>
                    <option value="cx">Policy</option>
                  </select>
                </div>
              </div>
            </div>

            <button class="button is-dark" id="createPostButton" onclick="updateEntryList()"
              style="margin-top: 1rem">Update List</button>

            <!-- <div id="listOfEntries" style="margin-top: 1.5rem">
              <table class="table is-striped">
                <thead>
                  <th>Approve</th>
                  <th>Deny</th>
                  <th>Name</th>
                  <th>Tournament</th>
                  <th>Event</th>
                </thead>
                <tbody>
                  <tr id="192014210948190">
                    <td><button id="a 192014210948190" onclick="approveEntry(192014210948190)"
                        class="button is-small approve" style="color:green">Approve</button></td>
                    <td><button id="d 192014210948190" onclick="denyEntry(192014210948190)" class="button is-small deny"
                        style="color: maroon;">Deny</button></td>
                    <td>Tanush Yadav</td>
                    <td>Berkley</td>
                    <td>LD</td>
                  </tr>
                  <tr>
                    <td><button class="button is-small">Approve</button></td>
                    <td><button class="button is-small">Deny</button></td>
                    <td>Tanush Yadav</td>
                    <td>Berkley</td>
                    <td>LD</td>
                  </tr>
                </tbody>
              </table>
            </div>-->

          </div>
        </div>
      </div>
      <div class="column is-3"></div>
    </div>

</body>

<script>

  /*<div id="listOfEntries" style="margin-top: 1.5rem">
              <table class="table is-striped">
                <thead>
                  <th>Approve</th>
                  <th>Deny</th>
                  <th>Name</th>
                  <th>Tournament</th>
                  <th>Event</th>
                </thead>
                <tbody>
                  <tr id="192014210948190">
                    <td><button id="a 192014210948190" onclick="approveEntry(192014210948190)" class="button is-small approve" style="color:green">Approve</button></td>
                    <td><button id="d 192014210948190" onclick="denyEntry(192014210948190)" class="button is-small deny" style="color: maroon;">Deny</button></td>
                    <td>Tanush Yadav</td>
                    <td>Berkley</td>
                    <td>LD</td>
                  </tr>
                  <tr>
                    <td><button class="button is-small">Approve</button></td>
                    <td><button class="button is-small">Deny</button></td>
                    <td>Tanush Yadav</td>
                    <td>Berkley</td>
                    <td>LD</td>
                  </tr>
                </tbody>
              </table>
            </div>*/

  let startHTML = '<div id="listOfEntries" style="margin-top: 1.5rem"><table class="table is-striped"><thead><th>Approve</th><th>Deny</th><th>Name</th><th>Tournament</th><th>Event</th><th>Entry Notes</th></thead><tbody>';
  let endHTML = '</tbody></table></div>';
  let bulkHTML = ``;

  function test(x) {
    console.log(x)
  }

  function approveEntry(providedId) {
    //post request to change state of providedId entry to approved
    axios.post('/admin/approve/entry/yes', {
      entryId: providedId
    }).then(response => {
      console.log("success!");
      $('#' + providedId).remove();
    }).catch(err => {
      $('#createPostButton').after('<article id="creationError" class="message is-danger is-normal post-error" style="margin-top: 2rem"> <div class="message-header"><p>Server Error</p></div><div class="message-body">Our servers had some unknown issues. Please try again in a few minutes. If the issue persists, contact support.</div></article>');
      console.log(err);
    })

  }

  function denyEntry(providedId) {

    axios.post('/admin/approve/entry/no', {
      entryId: providedId
    }).then(response => {
      console.log("success!");
      $('#' + providedId).remove();
    }).catch(err => {
      $('#createPostButton').after('<article id="creationError" class="message is-danger is-normal post-error" style="margin-top: 2rem"> <div class="message-header"><p>Server Error</p></div><div class="message-body">Our servers had some unknown issues. Please try again in a few minutes. If the issue persists, contact support.</div></article>');
      console.log(err);
    })

  }

  async function updateEntryList() {

    $('#listOfEntries').empty();

    bulkHTML = ``;

    let userTournamentId = document.getElementById("userSelectedTournament").value;
    let userEvent = document.getElementById("userSelectedEvent").value;

    console.log(`Tournament: ${userTournamentId}. Event: ${userEvent}`);

    axios.post('/admin/approve/entry/list', {
      tournamentId: userTournamentId,
      event: userEvent,
    }).then(response => {
      //console.log(response);

      for (entry of response.data) {
        //console.log(entry._id);
        bulkHTML += `<tr id="${entry._id}"> <td><button id="a ${entry._id}" onclick="approveEntry('${entry._id}')" class="button is-small approve" style="color:green">Approve</button></td> <td><button id="d ${entry._id}" onclick="denyEntry('${entry._id}')" class="button is-small deny" style="color: maroon;">Deny</button></td><td>${entry.entryStudentName}</td><td>${entry.entryTournamentName}</td><td>${entry.entryEvent.toUpperCase()}</td><td>${entry.entryNotes}</td></tr>`
      }

      let finalHTML = startHTML + bulkHTML + endHTML;

      $('#createPostButton').after(finalHTML);


    }).catch(error => {
      console.log(error)
      $('#createPostButton').after('<article id="creationError" class="message is-danger is-normal post-error" style="margin-top: 2rem"> <div class="message-header"><p>Server Error</p></div><div class="message-body">Our servers had some unknown issues. Please try again in a few minutes. If the issue persists, contact support.</div></article>');

    });

  }

</script>

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

</html>