<!--

    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:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{lab/create}" xmlns="http://www.w3.org/1999/html">
    <head>
        <title>Create Limited Capacity Session</title>
    </head>

    <!--@thymesVar id="dto" type="nl.tudelft.queue.dto.create.labs.CapacitySessionCreateDTO"-->

    <body>
        <th:block layout:fragment="general-config">
            <th:block th:replace="~{lab/create/components/session-general :: session-general}"></th:block>
        </th:block>

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

        <th:block th:object="${dto}">
            <section layout:fragment="capacity-config">
                <h3 class="font-500 mb-3">Limited Capacity Session</h3>

                <div class="grid align-center gap-3 col-2" style="--col-1: minmax(0, 12rem)">
                    <label for="procedure-input">Selection procedure</label>
                    <div>
                        <select
                            id="procedure-input"
                            name="capacitySessionConfig.procedure"
                            required
                            data-select
                            class="selectpicker form-control"
                            data-placeholder="Pick a selection procedure">
                            <option
                                th:each="sp : ${T(nl.tudelft.queue.model.enums.SelectionProcedure).values()}"
                                th:value="${sp}"
                                th:text="${sp.displayName}"
                                th:selected="${dto.capacitySessionConfig.procedure == sp}"></option>
                        </select>
                    </div>

                    <label for="enrolment-open-input">Enrolment opens at</label>
                    <div>
                        <input
                            id="enrolment-open-input"
                            type="datetime-local"
                            class="textfield"
                            th:field="*{capacitySessionConfig.enrolmentOpensAt}"
                            required />
                        <div
                            class="colour-error"
                            th:if="${#fields.hasErrors('capacitySessionConfig.enrolmentOpensAt')}"
                            th:errors="*{capacitySessionConfig.enrolmentOpensAt}">
                            Enrolment opens at error
                        </div>
                    </div>

                    <label for="enrolment-close-input">Enrolment closes at</label>
                    <div>
                        <input
                            th:classappend="${#fields.hasErrors('capacitySessionConfig.enrolmentClosesAt')} ? 'is-invalid'"
                            type="datetime-local"
                            th:field="*{capacitySessionConfig.enrolmentClosesAt}"
                            class="textfield"
                            id="enrolment-close-input"
                            required />
                        <div
                            class="colour-error"
                            th:if="${#fields.hasErrors('capacitySessionConfig.enrolmentOpensAt')}"
                            th:errors="*{capacitySessionConfig.enrolmentClosesAt}">
                            Enrolment closes at error
                        </div>
                    </div>

                    <label for="selection-at-input">Selection happens at</label>
                    <div>
                        <input
                            th:classappend="${#fields.hasErrors('capacitySessionConfig.enrolmentOpensAt')} ? 'is-invalid'"
                            type="datetime-local"
                            th:field="*{capacitySessionConfig.selectionAt}"
                            class="textfield"
                            id="selection-at-input"
                            required />
                        <div
                            class="colour-error"
                            th:if="${#fields.hasErrors('capacitySessionConfig.selectionAt')}"
                            th:errors="*{capacitySessionConfig.selectionAt}">
                            Selection at error
                        </div>
                    </div>
                </div>

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

                <script th:inline="javascript" type="text/javascript">
                    document.addEventListener("ComponentsLoaded", function () {
                        const procedureInput = document.getElementById("procedure-input");

                        const opensAtInput = document.getElementById("opens-at");

                        const enrolmentOpensAtInput = document.getElementById("enrolment-open-input");
                        const enrolmentClosesAtInput = document.getElementById("enrolment-close-input");
                        const selectionAtInput = document.getElementById("selection-at-input");

                        opensAtInput.addEventListener("change", function () {
                            enrolmentClosesAtInput.max = opensAtInput.value;
                            enrolmentClosesAtInput.value = moment(this.value).subtract(1, "days").format("YYYY-MM-DD[T]HH:mm");
                        });

                        enrolmentOpensAtInput.addEventListener("change", function () {
                            enrolmentClosesAtInput.min = this.value;
                        });

                        enrolmentClosesAtInput.addEventListener("change", function () {
                            selectionAtInput.min = this.value;
                        });

                        procedureInput.addEventListener("change", function () {
                            if (this.value === "FCFS") {
                                selectionAtInput.setAttribute("disabled", "");
                            } else {
                                selectionAtInput.removeAttribute("disabled");
                            }
                        });
                    });
                </script>
            </section>
        </th:block>
    </body>
</html>
