<!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">Sign Up for a Tournament</h1>
          </div>
          <div class="box" style="padding: 2rem">

            <div class="field">
              <label class="label">Tournament Name</label>
              <div class="control">
                <div class="select">
                  <select id="userTournamentName">
                    <%- tournamentOptions %>
                  </select>
                </div>
              </div>
            </div>

            <div class="field">
              <label class="label">Event Name</label>
              <div class="control">
                <div class="select">
                  <select id="userEvent">
                    <option value="pf">Public Forum</option>
                    <option value="ld">Lincoln Douglas</option>
                    <option value="cx">Policy</option>
                    <option value="cg">Congress</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="field">
              <label class="label">Additional Notes</label>
              <article class="message">
                <div class="message-body">If you are in PF or CX, please put your partner's name here. If you are in a speech event, please enter the event name, the piece title, the piece's author, and any additional information a tournament may want.</div>
              </article>
              <textarea class="textarea"
                placeholder="Enter required information (see above) here. You can also include anything that you want the person reviewing your entry to see (ex: extenuating circumstances)."
                id="userAdditionalNotes" rows="3" maxlength="500"></textarea>
            </div>

            <button class="button is-dark" id="createPostButton" onclick="attemptEventCreate()"
              style="margin-top: 1rem">Create Entry</button>

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

</body>

<script>

  async function attemptEventCreate() {

    let nameDom = document.getElementById("userTournamentName");
    let userTournamentId = nameDom.value;
    let userTournamentName = nameDom.options[nameDom.selectedIndex].text;
    let userEvent = document.getElementById("userEvent").value;
    let userAdditionalNotes = document.getElementById("userAdditionalNotes").value;

    axios.post('/private/entry/create', {
      tournamentId: userTournamentId,
      tournamentName: userTournamentName,
      event: userEvent,
      additionalNotes: userAdditionalNotes
    }).then(response => {

      if (response.data == "duplicate") {
        $('#createPostButton').after('<article id="duplicationError" class="message is-danger is-normal post-error" style="margin-top: 2rem"> <div class="message-header"><p>Error: Duplicates Detected</p></div><div class="message-body">You have already requested an entry for this event at this tournament. Duplicate requests are not allowed.</div></article>');
      } else {

        $('#createPostButton').after('<article id="creationSuccess" class="message is-success is-normal" style="margin-top: 2rem"> <div class="message-header"><p>Entry Request Successfully Created</p></div><div class="message-body">Your entry request has been created! PLEASE DOUBLE-CHECK THIS on the dashboard page to ensure that the entry went through. An admin will review it shortly.</div></article>');

        $('.post-error').remove();
      };

      $('#createPostButton').prop("disabled", true);

    }).catch(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>