<!DOCTYPE html>
<html>
<head>
    <%- include ("../partials/header.ejs") %>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
    <script src="https://unpkg.com/dayjs@1.8.21/plugin/advancedFormat.js"></script>
    <script>
    dayjs().format();
    dayjs.extend(window.dayjs_plugin_advancedFormat);
    </script>

</head>

<body>

	<%- include ("../partials/nav.ejs") %>
    <section class="section">
    <div class="container">
        <div class="block">
    	<!--<button class="button is-primary" onclick="tableUpdater()">
    	  Update Table
      </button> -->
        </div>

        <div class="block">
        <table class="table is-bordered" id="tournamentTable">
    	    <thead>
    		<tr>
                <th>Name</th>
                <th>Location</th>
                <th>Club Approved</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Circuits</th>
                <th>Register By</th>
                <th>Fees Freeze</th>
                <th>LD Slots</th>
                <th>PF Slots</th>
                <th>CX Slots</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
    	</table>
        </div>
    </section>

    </div>

    <script>

    let tableDateDisplayFormat = "MMM Do"

    function tableUpdater() {

        console.log("hi");

        //$(document).ready(function() {
            $('#tournamentTable tbody').empty();
        //});

		axios.get("api/tournaments")
		.then(function(result) {
			console.log(result);
			let i = 0;
			let appendable = "";
			let thisAppendable = "";
			while(i < result.data.length) {
				let tData = result.data[i];

				//school approved table column colors
				let approvedColor = 'style = "background-color:lightcoral"';
				console.log(tData);
				if (tData.clubApproved) {
					approvedColor = 'style = "background-color:palegreen"';
				}

                //circuits in displayable format
                let displayableCircuit;
                if(tData.circuits.includes("local") && tData.circuits.includes("national")) {
                    displayableCircuit = "National, Local";
                }
                else if (tData.circuits.includes("local")) {
                    displayableCircuit = "Local";
                }
                else if (tData.circuits.includes("national")) {
                    displayableCircuit = "National";
                }
                else {
                    displayableCircuit = "";
                }

				thisAppendable = '<tr>' +  '<td data-label="Name">' + tData.tournamentName + '</td>' + '<td data-label="Location">' + tData.location + '</td>' + '<td data-label="Club Approved"' + approvedColor + '>'  + '</td>' + '<td data-label="Start Date">' + (dayjs(tData.startDate).format(tableDateDisplayFormat)) + '</td>' +  '<td data-label="Start Date">' + (dayjs(tData.endDate).format(tableDateDisplayFormat)) + '</td>' + '<td data-label="Circuits">' + displayableCircuit + '</td>' + '<td data-label="Register By">' + dayjs(tData.internalSignupDeadline).format(tableDateDisplayFormat) + '</td>' + '<td data-label="Fees Freeze">' + dayjs(tData.feesFreeze).format(tableDateDisplayFormat) + '</td>' + '<td data-label="LD Slots">' + tData.slots.ld + '</td>' + '<td data-label="PF Slots">' + tData.slots.pf + '</td>' + '<td data-label="CX Slots">' + tData.slots.cx + '</td>' + '</tr>';
				appendable += thisAppendable;
				i++;
			}
            //$(document).ready(function() {
				$('#tournamentTable tbody').append(appendable);
			//});
		});
    }

    //$(document).ready(function() {
        tableUpdater();
    //});

    </script>
</body>

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

</html>
