<!DOCTYPE html>
<html>
<head>
    <%- include ("../../partials/header.ejs") %>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <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/privateNav.ejs") %>

<section class="section">
    <div class="container">
    <div class="block">
    <form id="createTournamentForm">
        <div class="field is-horizontal">
            <div class="field-label is-normal">
                <label class="label">Colloquial Tournament Name</label>
            </div>
            <div class="field-body">
            <div class="field">
                 <input class="input is-primary is-rounded" id="informalName" type="text" placeholder="informal tourney name">
            </div>
            </div>
            <div class="field-label is-normal">
                <label class="label">Official Tabroom Name</label>
            </div>
            <div class="field-body">
            <div class="field">
                <input class= "input is-primary is-rounded"  id="formalName" type="text" placeholder="tab tourney name">
            </div>
            </div>
        </div>
        </div>
        <div class="field is-horizontal">
        <div class="field">
            <label class="label">Start Date</label>
            <input type="text" name="startDateCalendar" value="" id="startDate"/>
        </div>
        <div class="field">
            <label class="label">End Date</label>
            <input type="text" name="endDateCalendar" value="" id="endDate"/>
        </div>
        </div>
        <div class="field">
            <label style="margin-right:2rem">Applicable Circuits:</label>
            <input type="checkbox" id="localCircuitCheckbox" value="" style="margin-left:1rem"> Local Circuit </input>
            <input type="checkbox" id="natCircuitCheckbox" value="" style="margin-left:1rem"> National Circuit </input>
        </div>
        <div class="field">
            <label style="margin-right:2rem">Formal Classifications:</label>
            <input type="checkbox" id="schoolApprovedToggleBox" value="" style="margin-left:1rem"> School Approved? </input>
            <input type="checkbox" id="asIndependentToggleBox" value="" style="margin-left:1rem"> As Independent? </input>
        </div>
        <div class="field">
            <label style="margin-right:2rem">Target Judges:</label>
            <input type="checkbox" id="parentsJudgesCheckbox" value="" style="margin-left:1rem"> Parent / Volunteers </input>
            <input type="checkbox" id="hiresJudgesCheckbox" value="" style="margin-left:1rem"> Hires </input>
        </div>

        <div class="field is-horizontal">
            <div class="field-label is-normal">
                <label class="label"> Slots</label>
            </div>
            <div class="field-body">
              <div class="field">
                  <input class="input" type="text" id="ldSlots" placeholder="Number of LD Slots">
              </div>
              <div class="field">
                  <input class="input" type="text" id="pfSlots" placeholder="Number of PF Slots">
              </div>
              <div class="field">
                  <input class="input" type="text" id="cxSlots" placeholder="Number of CX Slots">
              </div>
            </div>
      </div>

    </form>
    <div class="block">
        <button class="button is-primary" id="submitButton">Submit</button>
    </div>
    </div>
</section>

  <script>
  // setting up basic variables
  let userTournamentID = "";
  let userTournamentName = "";
  let userTabroomName = "";
  let userCircuits = [];
  let userJudges = [];
  let userSchoolApproved = false;
  let userAsIndependent = false;
  let userClubApproved = false;
  let currentYear = new Date().getFullYear();
  let userStartDate = "";
  let userEndDate = "";
  let userSlots = {'ld': "&infin;", 'pf': "&infin;", 'cx': "&infin;"};
  let adminAlerts = [{'adminHeader': "Automatically Generated Note", 'alertContent': "Please ensure that you have paid all fees previously assessed to your account."}];

  //date picker js stuff
  $(function() {
      $('input[name="startDateCalendar"]').daterangepicker({
          singleDatePicker: true,
          showDropdowns: true,
          minYear: 2019,
          maxYear: 2030
      }, function(start, end, label) {
          userStartDate = start.format("YYYY-MM-DD");
          //console.log(userStartDate);
      });
  });

  $(function() {
      $('input[name="endDateCalendar"]').daterangepicker({
          singleDatePicker: true,
          showDropdowns: true,
          minYear: 2019,
          maxYear: 2030
      }, function(start, end, label) {
          userEndDate = start.format("YYYY-MM-DD");
          //console.log(userEndDate);
      });
  });


    // getting user inptu via jquery
    $('#submitButton').click(function() {

      userTournamentName = $('#informalName').val();
      userTabroomName = $('#formalName').val();
      userTournamentID = userTournamentName.toLowerCase() + currentYear;
      userSlots.ld = $('#ldSlots').val();
      userSlots.pf = $('#pfSlots').val();
      userSlots.cx = $('#cxSlots').val();

      if($('#natCircuitCheckbox').prop('checked')) {
        userCircuits.push("national");
      }
      if ($('#localCircuitCheckbox').prop('checked')) {
        userCircuits.push("local");
      }

      if($('#parentsJudgesCheckbox').prop('checked')) {
        userJudges.push("parents");
      }

      if($('#hiresJudgesCheckbox').prop('checked')) {
        userJudges.push("hires");
      }

      if($('#schoolApprovedToggleBox').prop('checked')) {
        userSchoolApproved = true;
      }
      if($('#asIndependentToggleBox').prop('checked')) {
        userAsIndependent = true;
      }

      //dates are stored as ISO 8601 format to ensure compatibility with MongoDB query

      axios.post("/api/tournaments", {
        tournamentId: userTournamentID,
        tournamentName: userTournamentName,
        tabroomName: userTabroomName,
        circuits: userCircuits,
        judgeTypes: userJudges,
        schoolApproved: userSchoolApproved,
        asIndependent: userAsIndependent,
        startDate: userStartDate,
        endDate: userEndDate,
        slots: userSlots,
        clubApproved: userClubApproved
    })
      .then(function (response) {
          toastr.success("The tournament has been added", "Success", {
              "closeButton": true,
              "timeOut": "0",
              "positionClass": "toast-bottom-left",
          });
      })
      .catch(function (error) {
          console.log(error);
          toastr.error("There was an error serving your requeset to the database", "Request Error", {
              "closeButton": true,
              "timeOut": "0",
              "positionClass": "toast-bottom-left",
          });
      })
  });

  </script>

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

</body>

</html>
