<!DOCTYPE html>
<html>

<head>
  <%- include ("../partials/header.ejs") %>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.4/dayjs.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/toastr.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    </script>

</head>

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

    <div class="section" style="padding-left: 10rem; padding-right: 10em;">
      <div class="columns">
        <div class="column is-7 has-background-info-light">
          <div class="content">
            <h1 class="title" id="tournament-information-title">Tournament Information</h1>
          </div>

        </div>
        <div class="column is-5 has-background-warning-light">
          <div class="content">
            <h1 class="title">Notes from Officers</h1>

            <div class="block">
              <p id="fillerText" style="text-align: right">Good Luck.</p>
            </div>

          </div>
        </div>

      </div>
    </div>

    <script>
      const urlParams = new URLSearchParams(window.location.search);

      if (!(urlParams.has('tournamentId'))) {
        console.log("there are no cards");
        toastr.warning("no tournament was found. please go to the calendar page and click on a tournament to see the relevant event page.", "Request Error", {
          "closeButton": true,
          "timeOut": "0",
          "positionClass": "toast-bottom-right",
        });
      } else {

        const redirectedTournamentId = urlParams.get('tournamentId');


        console.log('will retrieve information for the following tournament: ' + redirectedTournamentId);

        function addCards(cardHeader, cardContent) {
          $('#fillerText').before('<div class="block"> <div class="card"> <div class="card-header"> <p class="card-header-title">' + cardHeader + '</p> </div> <div class="card-content"> <p>' + cardContent + '</p> </div> </div> </div>')
        }

        //function getCards() {

        axios.post('/api/tournaments/cards', { tournamentId: redirectedTournamentId }).then(function (results) {
          console.log(results);

          if (results.data.length == 1) {

            const tData = results.data[0];

            let n = 0;

            for (n = 0; n < tData.adminAlerts.length; n++) {
              let x = tData.adminAlerts[n];
              console.log(x);
              addCards(x.alertHeader, x.alertContent);
            }

            // add generic tournament data
            let appendable = '<h2 id="tournament-name">Tournament Name: ' + tData.tournamentName + '</h2> <h2 id="tournament-dates">Tournament Dates: ' + (dayjs(tData.startDate).format("M/D") + ' - ' + dayjs(tData.endDate).format("M/D")) + '</h2> <h3 id="judging-information">Judging Information</h3> <ul> ' + '<li> hi </li>' + '</ul> <h3 id = "competitor-slots" > Competitor Slots</h3>' + `<ul> <li>LD - ${tData.slots.ld}</li> <li>CX - ${tData.slots.cx}</li> <li>PF - ${tData.slots.pf}</li> <li>Congress - ${tData.slots.cg}</li> <li>Speech - ${tData.slots.ie}</li> </ul>` + `<h3 id="bid-information">Bid Information</h3> <ul> <li>LD - ${tData.bids.ld}</li> <li>CX - ${tData.bids.cx}</li> <li>PF - ${tData.bids.pf}</li> <li>Congress - ${tData.bids.cg}</li></ul> <h3 id="general-information">General Tournament Information</h3>`;

            $('#tournament-information-title').after(appendable);
            console.log("added");

          }

          else if (results.data.length == 0 || redirectedTournamentId === null || redirectedTournamentId === undefined) {
            console.log("there are no cards");
            toastr.warning("no tournament was found. please go to the calendar page and click on a tournament to see the relevant event page.", "Request Error", {
              "closeButton": true,
              "timeOut": "0",
              "positionClass": "toast-bottom-right",
            });
          }

          else if (results.data.length > 1) {
            console.log("multiple tournaments are associated with this ID");
            toastr.warning("multiple tournaments with the same ID were found. please contact your team's admins", "Data Error", {
              "closeButton": true,
              "timeOut": "0",
              "positionClass": "toast-bottom-right",
            });
          }

          else {
            toastr.error("Something went wrong!", "Error", {
              "closeButton": true,
              "timeOut": "0",
              "positionClass": "toast-bottom-right",
            });
          }
        });

      }

    </script>
</body>

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

</html>