<!--

    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}">
    <head>
        <link rel="stylesheet" href="/css/presentation.css" />

        <link rel="stylesheet" href="/webjars/simplemde/dist/simplemde.min.css" />
        <script src="/webjars/simplemde/dist/simplemde.min.js"></script>
    </head>

    <body>
        <form class="flex vertical" layout:fragment="subcontent" id="form" th:action="@{/lab/{id}/presentation/edit(id=${lab.id})}" method="post">
            <h3 class="font-500">Edit presentation</h3>

            <div>
                <div>
                    <h4 class="font-400 mb-2">Default slides</h4>
                    <div>
                        <div>
                            <input
                                id="show-current-room"
                                name="showCurrentRoom"
                                type="checkbox"
                                th:checked="${presentation.defaultSlides.showCurrentRoom}" />
                            <label for="show-current-room">Include current room slide</label>
                        </div>
                        <div>
                            <input
                                id="show-queue-site"
                                name="showQueueSite"
                                type="checkbox"
                                th:checked="${presentation.defaultSlides.showQueueSite}" />
                            <label for="show-queue-site">Include Queue site slide</label>
                        </div>
                        <div>
                            <input id="show-lab-info" name="showLabInfo" type="checkbox" th:checked="${presentation.defaultSlides.showLabInfo}" />
                            <label for="show-lab-info">Include lab info slide</label>
                        </div>
                        <div>
                            <input
                                id="show-feedback-reminder"
                                name="showFeedbackReminder"
                                type="checkbox"
                                th:checked="${presentation.defaultSlides.showFeedbackReminder}" />
                            <label for="show-feedback-reminder">Include TA feedback reminder slide</label>
                        </div>
                        <div>
                            <input
                                id="show-exam-enrolment"
                                name="showExamEnrolment"
                                type="checkbox"
                                th:checked="${presentation.defaultSlides.showExamEnrolment}" />
                            <label for="show-exam-enrolment">Include exam enrolment slide</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="underlined"></div>

            <div>
                <h4 class="font-400 mb-3">Custom slides</h4>
                <div class="flex align-center">
                    <label for="custom-slide-amount">Amount</label>
                    <input id="custom-slide-amount" class="textfield" type="number" min="0" th:value="${presentation.customSlides.size()}" />
                </div>
                <div id="custom-slides" class="flex vertical mt-5" th:classappend="${presentation.customSlides.size() == 0} ? 'hidden' : ''">
                    <div th:each="slide, iter : ${presentation.customSlides}">
                        <input class="textfield mb-3" th:name="|customSlides[${iter.index}].title|" th:value="${slide.title}" />
                        <textarea
                            th:id="|custom-slide-${iter.index}|"
                            th:name="|customSlides[${iter.index}].content|"
                            th:text="${slide.content}"></textarea>
                    </div>
                </div>
            </div>

            <div class="underlined"></div>

            <div>
                <button class="button" type="submit">Save</button>
            </div>

            <script th:inline="javascript" type="text/javascript">
                let ides = [];

                document.getElementById("form").addEventListener("submit", function () {
                    for (let i = 0; i < ides.length; i++) {
                        document.getElementById(`custom-slide-${i}`).innerText = ides[i].value();
                    }
                });

                const customSlides = document.getElementById("custom-slides");

                const customContent = customSlides.querySelectorAll("textarea");
                for (let i = 0; i < customContent.length; i++) {
                    ides.push(
                        new SimpleMDE({
                            element: customContent[i],
                            forceSync: true,
                        })
                    );
                }

                document.getElementById("custom-slide-amount").addEventListener("change", function () {
                    const oldAmount = customSlides.children.length;

                    if (this.value === "0") {
                        customSlides.classList.add("hidden");
                    }

                    if (oldAmount > this.value) {
                        customSlides.children[customSlides.children.length - 1].remove();
                        ides.pop();
                    } else {
                        customSlides.classList.remove("hidden");

                        const div = document.createElement("div");
                        const label = document.createElement("input");
                        label.classList.add("textfield", "mb-3");
                        label.setAttribute("name", `customSlides[${this.value - 1}].title`);
                        label.setAttribute("placeholder", "Slide title");
                        label.value = `Slide ${this.value}`;
                        div.appendChild(label);
                        const slide = document.createElement("textarea");
                        slide.setAttribute("id", `custom-slide-${this.value}`);
                        slide.setAttribute("name", `customSlides[${this.value - 1}].content`);
                        slide.innerText = "Slide content";
                        div.appendChild(slide);
                        customSlides.appendChild(div);

                        ides.push(
                            new SimpleMDE({
                                element: slide,
                                forceSync: true,
                            })
                        );
                    }
                });
            </script>
        </form>
    </body>
</html>
