<!DOCTYPE html>
<html>

<head>
    <%- include("header") %>
    <script>
        $(document).ready(function() {
            $('.ui.checkbox').checkbox(); // Emable checkbox clicks

            $("#nextBtn").prop("disabled", false);
            if ("<%=backBtn%>" == "true") {
                $("#backBtn").prop("disabled", false);
            }

            // Extracts selected answer and performs form validation for progression
            $(document).on("click", "#nextBtn", function() {
                $("#nextBtn").prop("disabled", true);

                let selection = undefined;
                let item = "<%=item%>";
                let itemCode = "<%=itemCode%>";

                // Extracting input
                console.log(itemCode);
                if (item == "mcq" ) {
                    selection = $('#mcqInput').find('[name="0"]:checked').val();
                }
                else if (item == "multimcq") {
                    selection = [];
                    for (var i = 0; i < $("#mcqcount").val(); i++) {
                        selection.push($('#mcqInput' + i).find('[name=' + i + ']:checked').val());
                    }
                }
                else if (item == "slider") {
                    selection = $("#sliderInput").val();
                }
                else if (item == "written") {
                    selection = $("#writtenInput").val();
                }
                else if (item == "start" ) {
                    selection = $("#startInput").val();
                }
                else if (item == "narrative" || item == "end") {
                    selection = true;
                }

                // Null result cleanup
                if (selection == "") {
                    selection = undefined;
                }

                // AJAX POST request for form validation and progression
                var params = {itemCode: "<%=itemCode%>", selection: selection};
                $.post("next", params, function(response) {
                    document.getElementsByTagName("html")[0].innerHTML = response;
                    window.location = window.location;
                });
            });

            // Pressing enter to proceed
            $(document).bind("keyup", function(e) {
                if (e.keyCode == 13) {
                    if ($("#nextBtn").length) {
                        $("#nextBtn").trigger("click");
                    }
                    else if ($("#downloadBtn").length) {
                        $("#downloadBtn").trigger("click");
                    }
                }
            });

            // Allows users to return to the previous story segment
            $(document).on("click", "#backBtn", function() {
                $("#backBtn").prop("disabled", true);
                $.post("back", function(response) {
                    document.getElementsByTagName("html")[0].innerHTML = response;
                    window.location = window.location;
                });
            });

            // Button to download playthrough log
            $(document).on("click", "#downloadBtn", function() {
                $.post("download", function(response) {
                    var blob = new Blob([response]);
                    var link = document.createElement("a");
                    link.href = window.URL.createObjectURL(blob);
                    link.download = "playthrough-log.csv";
                    link.click();
                });
            })

            // Reset button functionality
            $(document).on("click", "#resetBtn", function() {
                $.get("reset", function(response) {
                    document.getElementsByTagName("html")[0].innerHTML = response;
                    window.location = window.location;
                });
            });
            
            // Dynamically display the slider selection value on slider change
            $("#sliderInput").on('input', function() {
                $("#sliderVal").text($(this).val());
            });
        });
    </script>
</head>

<body>
    <div class="ui middle aligned grid">
        <div class="eight column wide">
            <div class="ui raised very padded text container segment">
                <div class="ui form" id="module">

                    <% if (item == "mcq") { %>
                        <!-- MCQ Item -->
                        <h2 class="ui header"><%=title%></h2>
                        <h4 class="ui header"><%=question%></h4>
                        <% if (imgDir) { %>
                            <img class="ui fluid image" src="<%=baseUrl+imgDir%>">
                        <% } %>
                        <% if (description) { %>
                            <p><%=description%></p>
                        <% } %>
                        <div class="grouped fields" id="mcqInput">
                            <% for (var i = 0; i < options.length; i++) { %>
                                <div class="field">
                                    <div class="ui radio checkbox">
                                    <input type="radio" name="0" class="hidden" value="<%=options[i]%>">
                                    <label>
                                        <% if (optionType == "img") { %>
                                            <img class="ui fluid image" src="<%=baseUrl+options[i]%>">
                                        <% } else { %>
                                            <%=options[i]%>
                                        <% } %>
                                    </label>
                                    </div>
                                </div>
                            <% } %>
                        </div>

                    <% } else if (item == "multimcq") { %>
                        <!-- Multi MCQ Item -->
                        <input type="hidden" value="<%=question.length%>" id="mcqcount">
                        <% for (var j = 0; j < question.length; j++) { %>
                            <h2 class="ui header"><%=question[j]%></h2>
                            <% if (imgDir[j]) { %>
                                <img class="ui fluid image" src="<%=baseUrl+imgDir[j]%>">
                            <% } %>
                            <% if (description[j]) { %>
                                <p><%=description[j]%></p>
                            <% } %>
                            <div class="grouped fields" id="mcqInput<%=j%>">
                                <% for (var i = 0; i < options[j].length; i++) { %>
                                    <div class="field">
                                        <div class="ui radio checkbox">
                                        <input type="radio" name="<%=j%>" class="hidden" value="<%=options[j][i]%>">
                                        <label><%=options[j][i]%></label>
                                        </div>
                                    </div>
                                <% } %>
                            </div>
                            <% if (j < question.length - 1) { %>
                                <div class="ui horizontal divider">•</div>
                            <% } %>
                        <% } %>

                    <% } else if (item == "slider") { %>
                        <!-- Range Slider Item -->
                        <h2 class="ui header"><%=question%></h2>
                        <% if (imgDir) { %>
                            <img class="ui fluid image" src="<%=baseUrl+imgDir%>">
                        <% } %>
                        <% if (description) { %>
                            <p><%=description%></p>
                        <% } %>
                        <div class="inline fields">
                            <input type="range" min="<%=min%>" max="<%=max%>" value="<%=min%>" style="width:95%;" id="sliderInput">
                            <span>&nbsp;&nbsp;</span>
                            <span id="sliderVal"><%=min%></span>
                        </div>

                    <% } else if (item == "written") { %>
                        <!-- Written Answer Item -->
                        <h2 class="ui header"><%=title%></h2>
                        <h4 class="ui header"><%=question%></h4>
                        <% if (imgDir) { %>
                            <img class="ui fluid image" src="<%=baseUrl+imgDir%>">
                        <% } %>
                        <% if (description) { %>
                            <p><%=description%></p>
                        <% } %>
                        <% if (imgDir_sub) { %>
                            <img class="ui fluid image" src="<%=baseUrl+imgDir_sub%>">
                        <% } %>
                        <div class="ui input labeled fluid focus">
                            <input type="text" id="writtenInput" style="margin-top: 15px; margin-bottom: 15px;" placeholder="Your Answer">
                        </div>

                    <% } else if (item == "narrative") { %>
                        <!-- Narrative Item -->
                        <% for (var i = 0; i < objectType.length; i++) { %>
                            <% if (objectType[i] == "title") { %>
                                <h2 class="ui header"><%=objectDescription[i]%></h2>
                            <% } else if (objectType[i] == "info" ) { %>
                                <p><%=objectDescription[i]%></p>
                            <% } else if (objectType[i] == "image" ) { %>
                                <img class="ui fluid image" src="<%=baseUrl+objectDescription[i]%>">
                            <% } %>
                        <% } %>

                    <% } else if (item == "start") { %>
                        <!-- Start Item -->
                        <h2 class="ui header centered"><%=title%></h2>
                        <% if (imgDir) { %>
                            <img class="ui fluid image" src="<%=baseUrl+imgDir%>">
                        <% } %>
                        <% if (description) { %>
                            <p><%=description%></p>
                        <% } %>
                        <p>Please enter your name to continue.</p>
                        <div class="ui input labeled fluid focus">
                            <input type="text" id="startInput" style="margin-bottom: 15px;" placeholder="Your Name">
                        </div>

                    <% } else if (item == "end") { %>
                        <!-- End Item -->
                        <h2 class="ui header centered">Your Playthrough Stats</h2>
                        <div class="ui two statistics fluid">
                            <div class="statistic">
                                <div class="value">
                                    <i class="clock outline icon"></i>
                                    <%=timeTaken%>
                                  </div>
                                  <div class="label">
                                    Time Taken (min:sec)
                                  </div>
                            </div>
                            <div class="statistic">
                                <div class="value">
                                    <i class="close icon"></i>
                                    <%=incorrectAttempts%>
                                  </div>
                                  <div class="label">
                                    Incorrect Attempt(s)
                                  </div>
                            </div>
                        </div>
                        <div class="ui horizontal divider">•</div>
                        <h2 class="ui header centered"><%=title%></h2>
                        <% if (imgDir) { %>
                            <img class="ui fluid image" src="<%=baseUrl+imgDir%>">
                        <% } %>
                        <% if (description) { %>
                            <p><%=description%></p>
                        <% } %>
                    <% } %>

                    <!-- Control Buttons -->
                    <% if (item != "end") { %>
                        <button class="ui fluid teal right labeled icon button" id="nextBtn">
                            <i class="arrow alternate circle right icon"></i>
                            <% if (item == "start") { %>
                                Begin
                            <% } else { %>
                                Next
                            <% } %>
                        </button>
                    <% } else {%>
                        <button class="ui fluid green right labeled icon button" id="downloadBtn">
                            <i class="download right icon"></i>
                            Download Playthrough Log
                        </button>
                        <% if (backBtn) { %>
                        <button style="margin-top: 2px;" class="ui fluid labeled icon button" id="resetBtn">
                            <i class="arrow alternate circle left icon"></i>
                            Reset
                        </button>
                        <% } %>
                    <% } %>

                    <% if (item != "start" && item != "end") { %>
                        <% if (backBtn) { %>
                            <button style="margin-top: 2px;" class="ui fluid labeled icon button" id="backBtn">
                                <i class="arrow alternate circle home icon"></i>
                                Back
                            </button>
                        <% } %>
                    <% } %>

                </div>
            </div>
        </div>
    </div>
</body>

</html>
