<!--

    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="~{lab/create/regular}">
    <head>
        <title>Create Slotted Lab</title>
    </head>

    <!--@thymesVar id="ec" type="nl.tudelft.labracore.api.dto.EditionCollectionDetailsDTO"-->
    <!--@thymesVar id="edition" type="nl.tudelft.labracore.api.dto.EditionDetailsDTO"-->

    <!--@thymesVar id="modules" type="java.util.List<nl.tudelft.labracore.api.dto.ModuleDetailsDTO>"-->
    <!--@thymesVar id="assignments" type="java.util.List<nl.tudelft.labracore.api.dto.AssignmentDetailsDTO>"-->
    <!--@thymesVar id="rooms" type="java.util.List<nl.tudelft.labracore.api.dto.RoomSummaryDTO>"-->

    <!--@thymesVar id="dto" type="nl.tudelft.queue.dto.create.labs.SlottedLabCreateDTO"-->
    <!--@thymesVar id="lType" type="nl.tudelft.queue.model.enums.QueueSessionType"-->

    <body>
        <th:block th:object="${dto}">
            <th:block layout:fragment="advanced-config">
                <th:block th:replace="~{lab/create/components/advanced-slotted :: advanced}"></th:block>
            </th:block>

            <section layout:fragment="slot-config">
                <h3 class="font-500 mb-3">Time slots</h3>

                <!--slotted labs only-->
                <div class="grid col-2 align-center gap-3" style="--col-1: minmax(0, 29rem)">
                    <label for="slot-duration-input">Intervals of x minutes:</label>
                    <div>
                        <input
                            id="slot-duration-input"
                            type="number"
                            th:field="*{slottedLabConfig.duration}"
                            class="textfield"
                            required
                            min="1"
                            placeholder="15" />
                    </div>

                    <label for="slot-capacity-input">Number of requests that you can handle per time-slot (capacity):</label>
                    <div>
                        <input
                            id="slot-capacity-input"
                            type="number"
                            th:field="*{slottedLabConfig.capacity}"
                            class="textfield"
                            required
                            min="1"
                            placeholder="3" />
                    </div>

                    <label for="slot-open-input">Slot selection opens at:</label>
                    <div>
                        <input
                            th:classappend="${#fields.hasErrors('slottedLabConfig.selectionOpensAt')} ? 'is-invalid'"
                            type="datetime-local"
                            id="slot-open-input"
                            th:field="*{slottedLabConfig.selectionOpensAt}"
                            class="textfield"
                            required />
                        <div
                            class="colour-error"
                            th:if="${#fields.hasErrors('slottedLabConfig.selectionOpensAt')}"
                            th:errors="*{slottedLabConfig.selectionOpensAt}">
                            Slot opensAt error
                        </div>
                    </div>

                    <th:block
                        th:with="consecutiveFilling = ${dto.slottedLabConfig.consideredFullPercentage != 0 or dto.slottedLabConfig.previousEmptyAllowedThreshold != 0}">
                        <div style="grid-column: span 2">
                            <input
                                id="consecutive-filling-checkbox"
                                type="checkbox"
                                class="form-check-input"
                                autocomplete="off"
                                th:checked="${consecutiveFilling}"
                                onchange="updateConsecutiveFillingVisibility()" />
                            <label for="consecutive-filling-checkbox">Consecutive Filling</label>
                        </div>

                        <label id="slot-full-percentage-label" for="slot-full-percentage" th:hidden="not ${consecutiveFilling}">
                            The percentage of a slot that has to be filled prior to opening subsequent slots:
                        </label>
                        <div id="slot-full-percentage-div" th:hidden="not ${consecutiveFilling}">
                            <input
                                id="slot-full-percentage"
                                type="number"
                                th:field="*{slottedLabConfig.consideredFullPercentage}"
                                class="textfield"
                                min="1"
                                max="100"
                                placeholder="50"
                                th:disabled="not ${consecutiveFilling}" />
                        </div>

                        <label id="empty-allowed-threshold-label" for="empty-allowed-threshold" th:hidden="not ${consecutiveFilling}">
                            The number of previous slots that are permitted to be below the percentage threshold:
                        </label>
                        <div id="empty-allowed-threshold-div" th:hidden="not ${consecutiveFilling}">
                            <input
                                id="empty-allowed-threshold"
                                type="number"
                                th:field="*{slottedLabConfig.previousEmptyAllowedThreshold}"
                                class="textfield"
                                min="0"
                                placeholder="0"
                                th:disabled="not ${consecutiveFilling}" />
                        </div>
                    </th:block>
                </div>

                <div class="mt-5 underlined"></div>

                <script th:inline="javascript">
                    function updateConsecutiveFillingVisibility() {
                        const checkbox = document.getElementById("consecutive-filling-checkbox");
                        const formElements = ["slot-full-percentage", "empty-allowed-threshold"].map(id => document.getElementById(id));
                        const toHide = [
                            "slot-full-percentage-label",
                            "empty-allowed-threshold-label",
                            "slot-full-percentage-div",
                            "empty-allowed-threshold-div",
                        ].map(id => document.getElementById(id));

                        if (checkbox.checked) {
                            formElements.forEach(elem => {
                                elem.setAttribute("required", "");
                                elem.removeAttribute("disabled");
                            });
                            toHide.forEach(elem => {
                                elem.removeAttribute("hidden");
                            });
                        } else {
                            formElements.forEach(elem => {
                                elem.removeAttribute("required");
                                elem.setAttribute("disabled", "");
                            });
                            toHide.forEach(elem => {
                                elem.setAttribute("hidden", "");
                            });
                        }
                    }
                </script>
            </section>
        </th:block>
    </body>
</html>
