<!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">View Tournament Entries</h1>
          </div>

          <div class="box">
            <div class="field">
              <label class="label">Select a Tournament</label>
              <div class="control">
                <div class="select">
                  <select id="userSelectedTournament">
                    <option value="all">All</option>
                    <%- tournamentOptions %>
                  </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>

            <div class="field">
              <label class="label">Select an Entry Status</label>
              <div class="control">
                <div class="select">
                  <select id="userSelectedEntryStatus">
                    <option value="all">All</option>
                    <option value="requested">Requested</option>
                    <option value="approved">Approved</option>
                    <option value="denied">Denied</option>
                  </select>
                </div>
              </div>
            </div>

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

          </div>

        </div>

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

      <script>

        async function updateEntryList() {
          $('#listOfEntries').empty();
          let startHTML = '<div id="listOfEntries" style="margin-top: 1.5rem; margin-left: 0.5rem; margin-right: 2.5rem"><table class="table is-striped is-bordered"><thead><th>Name</th><th>Tournament</th><th>Event</th><th>Entry Status</th></thead><tbody>';
          let endHTML = '</tbody></table></div>';
          let bulkHTML = ``;

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

          axios.post('/api/view/entry', {
            entryTournamentId: userTournamentId,
            entryEvent: userEvent,
            entryStatus: userEntryStatus
          }).then(response => {


            for (entry of response.data) {
              //console.log(entry._id);
              bulkHTML += `<tr id="${entry._id}"></td><td>${entry.entryStudentName}</td><td>${entry.entryTournamentName}</td><td>${entry.entryEvent.toUpperCase()}</td><td>${entry.entryStatus}</td></tr>`
            }
            
            let finalHTML = startHTML + bulkHTML + endHTML;

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

            console.log(response);
          }).catch(error => {
            console.log(error);
            alert("An error occured");
          });
        }
      </script>

</body>

</html>