<!--

    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/edit}">
    <head>
        <title>Edit Limited Capacity Session</title>
    </head>

    <!--@thymesVar id="lab" type="nl.tudelft.queue.model.labs.CapacitySession"-->
    <!--@thymesVar id="dto" type="nl.tudelft.queue.dto.patch.labs.CapacitySessionPatchDTO"-->

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

        <th:block layout:fragment="advanced-config">
            <th:block th:replace="~{lab/edit/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
                            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="${lab.capacitySessionConfig.procedure == sp}"></option>
                        </select>
                    </div>

                    <label for="enrolment-open-input">Enrolment opens at</label>
                    <div>
                        <input
                            th:classappend="${#fields.hasErrors('capacitySessionConfig.enrolmentOpensAt')} ? 'is-invalid'"
                            type="datetime-local"
                            name="capacitySessionConfig.enrolmentOpensAt"
                            th:value="${#temporals.format(lab.capacitySessionConfig.enrolmentOpensAt, 'yyyy-MM-dd''T''HH:mm')}"
                            class="textfield"
                            id="enrolment-open-input"
                            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"
                            name="capacitySessionConfig.enrolmentClosesAt"
                            th:value="${#temporals.format(lab.capacitySessionConfig.enrolmentClosesAt, 'yyyy-MM-dd''T''HH:mm')}"
                            class="textfield"
                            placeholder="Choose a time ideally a day beforehand"
                            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
                            type="datetime-local"
                            class="textfield"
                            name="capacitySessionConfig.selectionAt"
                            th:value="${#temporals.format(lab.capacitySessionConfig.selectionAt, 'yyyy-MM-dd''T''HH:mm')}"
                            id="selection-at-input"
                            th:disabled="${lab.capacitySessionConfig.procedure.isFcfs()}" />
                        <div
                            class="colour-error"
                            th:if="${#fields.hasErrors('capacitySessionConfig.selectionAt')}"
                            th:errors="*{capacitySessionConfig.selectionAt}">
                            Selection at error
                        </div>
                    </div>
                </div>

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

                <dialog class="dialog" id="confirm-modal">
                    <div class="flex vertical p-7">
                        <h3 class="underlined font-500">Are you sure?</h3>
                        <div>
                            <p>Changing selection procedure will cause any current selection to be deleted!</p>
                            <p>We recommend you notify the students about this change</p>
                        </div>
                        <div class="flex space-between">
                            <button type="button" class="button p-less" data-style="outlined" data-cancel>Cancel</button>
                            <button type="button" class="button p-less" data-type="warning" id="continue">Continue</button>
                        </div>
                    </div>
                </dialog>

                <script 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;
                        });

                        let procedureChanged = false;
                        procedureInput.addEventListener("change", function () {
                            if (this.value === "FCFS") {
                                selectionAtInput.setAttribute("disabled", "");
                            } else {
                                selectionAtInput.removeAttribute("disabled");
                            }
                            procedureChanged = true;
                        });

                        document.getElementById("form").addEventListener("submit", function (e) {
                            if (procedureChanged) {
                                e.preventDefault();
                                document.getElementById("confirm-modal").showModal();
                            }
                        });

                        document.getElementById("continue").addEventListener("click", function () {
                            procedureChanged = false;
                            document.getElementById("form").submit();
                        });
                    });
                </script>
            </section>
        </th:block>
    </body>
</html>
