<!--

    Queue - A Queueing system that can be used to handle labs in higher education
    Copyright (C) 2016-2020  Delft University of Technology

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{edition/view}">
    <!--@thymesVar id="edition" type="nl.tudelft.labracore.api.dto.EditionDetailsDTO"-->
    <!--@thymesVar id="assignment" type="nl.tudelft.labracore.api.dto.AssignmentDetailsDTO"-->

    <body>
        <section layout:fragment="subcontent">
            <script type="text/javascript" src="/webjars/bootstrap-select/js/bootstrap-select.min.js"></script>
            <link rel="stylesheet" href="/webjars/bootstrap-select/css/bootstrap-select.min.css" type="text/css" />

            <div class="page-sub-header">
                <h3 th:text="|Question for ${assignment.name} - ${edition.course.name}|"></h3>
            </div>

            <form
                th:action="@{/lab/{id}/enqueue/question/{assignment}(id=${qSession.id},assignment=${assignment.id})}"
                method="get"
                class="form-horizontal">
                <div class="form-group">
                    <label for="input-question" class="col-sm-3 control-label">Hi! What's your question?</label>
                    <div class="col-sm-8">
                        <textarea
                            minlength="15"
                            class="form-control"
                            id="input-question"
                            name="question"
                            placeholder="Write your question here"
                            required></textarea>
                    </div>
                </div>

                <div id="answer-div" class="form-group col-sm-8 d-none">
                    <span>Does any of this help?</span>

                    <div id="results-list"></div>
                </div>

                <div id="no-answer-div" class="form-group col-sm-8 d-none">
                    <p>No questions related to your question were found. Click below to enqueue.</p>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" id="enqueue" class="btn btn-success ctrl-enter-submit">Enqueue</button>
                        <script type="text/javascript" src="/js/form_submission_enhancer.js"></script>
                    </div>
                </div>
            </form>

            <script type="text/javascript" th:inline="javascript">
                //<![CDATA[
                let timer;
                const questionInput = $("#input-question");

                questionInput.on("keyup", function () {
                    clearTimeout(timer);
                    timer = setTimeout(searchForQuestions, 250);
                });

                questionInput.on("keydown", function () {
                    clearTimeout(timer);
                });

                function searchForQuestions() {
                    const query = questionInput.val();
                    const editionId = /*[[${edition.id}]]*/ 0;

                    if (/^\s*$/.test(query)) {
                        $("#answer-div")[0].classList.add("d-none");
                        $("#enqueue")[0].innerText = "Enqueue";
                    } else {
                        $.get(`/edition/${editionId}/questions/search?q=${query}`, res => updateResults(res));
                    }
                }

                function updateResults(res) {
                    const list = $("#results-list")[0];
                    list.innerHTML = "";

                    for (let r of res) {
                        let button = document.createElement("button");
                        button.classList.add("btn");
                        button.classList.add("btn-link");
                        button.classList.add("collapsed");
                        button.type = "button";
                        button.setAttribute("data-toggle", "collapse");
                        button.setAttribute("aria-expanded", "false");
                        button.setAttribute("data-target", "#answer-" + r.id);
                        button.setAttribute("aria-controls", "answer-" + r.id);
                        button.innerText = r.question;

                        let heading = document.createElement("h5");
                        heading.classList.add("mb-0");
                        heading.appendChild(button);

                        let header = document.createElement("div");
                        header.classList.add("card-header");
                        header.id = "question-" + r.id;
                        header.appendChild(heading);

                        let answerP = document.createElement("p");

                        if (r.answer.startsWith("http://") || r.answer.startsWith("https://")) {
                            let link = document.createElement("a");
                            link.href = r.answer;
                            link.innerText = r.answer;
                            answerP.appendChild(link);
                        } else {
                            answerP.innerText = r.answer;
                        }

                        let answerButton = document.createElement("button");
                        answerButton.classList.add("btn");
                        answerButton.classList.add("btn-success");
                        answerButton.innerText = "This answer helped me";

                        let csrfInput = document.createElement("input");
                        csrfInput.type = "hidden";
                        csrfInput.name = "_csrf";
                        csrfInput.value = $("meta[name='_csrf']")[0].content;

                        let answerForm = document.createElement("form");
                        answerForm.action = /*[[|/edition/${edition.id}/questions/|]]*/ "";
                        answerForm.action += r.id + "/vote";
                        answerForm.method = "post";
                        answerForm.appendChild(csrfInput);
                        answerForm.appendChild(answerButton);
                        // <input type="hidden" name="_csrf" value="172da2f3-3763-49c1-b5d8-86f995bf641d">

                        let answer = document.createElement("div");
                        answer.classList.add("card-body");
                        answer.appendChild(answerP);
                        answer.appendChild(answerForm);

                        let collapse = document.createElement("div");
                        collapse.id = "answer-" + r.id;
                        collapse.classList.add("collapse");
                        collapse.setAttribute("aria-labelledby", "answer-" + r.id);
                        collapse.setAttribute("data-parent", "#results-list");
                        collapse.appendChild(answer);

                        let card = document.createElement("div");
                        card.classList.add("card");
                        card.appendChild(header);
                        card.appendChild(collapse);

                        list.appendChild(card);
                    }

                    if (res.length === 0) {
                        $("#answer-div")[0].classList.add("d-none");
                        $("#no-answer-div")[0].classList.remove("d-none");
                        $("#enqueue")[0].innerText = "Enqueue";
                    } else {
                        $("#answer-div")[0].classList.remove("d-none");
                        $("#no-answer-div")[0].classList.add("d-none");
                        $("#enqueue")[0].innerText = "None of these answers help me";
                    }
                }
                //]]>
            </script>
        </section>
    </body>
</html>
