<!--

    Queue - A Queueing system that can be used to handle labs in higher education
    Copyright (C) 2016-2024  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/>.

-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <!--@thymesVar id="dto" type="nl.tudelft.queue.dto.create.labs.LabCreateDTO"-->

    <!--@thymesVar id="clusters" type="java.util.List<nl.tudelft.labracore.api.dto.ClusterSummaryDTO>"-->
    <!--@thymesVar id="divisions" type="java.util.List<nl.tudelft.labracore.api.dto.ModuleDivisionSummaryDTO>"-->

    <body>
        <th:block th:object="${dto}">
            <th:block th:fragment="nav">
                <button type="button" aria-selected="true" aria-controls="constraints-tab" role="tab">
                    <i class="fa fa-link"></i>
                    Request Constraints
                </button>
                <button type="button" aria-selected="false" aria-controls="repeat-tab" role="tab">
                    <i class="fa fa-calendar"></i>
                    Repetition
                </button>
            </th:block>

            <th:block th:fragment="tabs">
                <div id="constraints-tab" role="tabpanel">
                    <div class="grid col-2 align-center gap-3" style="--col-1: minmax(0, 17rem)">
                        <div>
                            <input
                                id="cluster-constraint-toggle"
                                type="checkbox"
                                th:checked="${!#lists.isEmpty(dto.constraints.clusterConstraint.clusters)}" />
                            <label for="cluster-constraint-toggle">Cluster/Mentor Group Restriction</label>
                        </div>

                        <div class="flex vertical gap-0">
                            <label for="cluster-select">Allow:</label>
                            <div>
                                <select
                                    multiple
                                    id="cluster-select"
                                    th:field="*{constraints.clusterConstraint.clusters}"
                                    data-select
                                    th:disabled="${dto.constraints.clusterConstraint.clusters.isEmpty()}"
                                    required>
                                    <th:block th:each="cluster : ${clusters}">
                                        <option
                                            th:value="${cluster.id}"
                                            th:selected="${dto.constraints.clusterConstraint.clusters.contains(cluster.id)}"
                                            th:text="|Cluster ${cluster.name}|"></option>
                                    </th:block>
                                </select>
                            </div>
                        </div>

                        <div>
                            <input
                                id="md-constraint-toggle"
                                class="custom-control-input"
                                type="checkbox"
                                th:checked="${!#lists.isEmpty(dto.constraints.moduleDivisionConstraint.divisions)}" />
                            <label class="custom-control-label" for="md-constraint-toggle">Module Division Restriction</label>
                        </div>

                        <div class="flex vertical gap-0">
                            <label for="md-select">Allow:</label>
                            <div>
                                <select
                                    multiple
                                    data-select
                                    id="md-select"
                                    name="constraints.moduleDivisionConstraint.divisions"
                                    th:disabled="${dto.constraints.moduleDivisionConstraint.divisions.isEmpty()}"
                                    required>
                                    <th:block th:each="division : ${divisions}">
                                        <option
                                            th:value="${division.id}"
                                            th:selected="${dto.constraints.moduleDivisionConstraint.divisions.contains(division.id)}"
                                            th:text="|Division ${'#'}${division.id}|"></option>
                                    </th:block>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="repeat-tab" role="tabpanel" hidden>
                    <div class="grid col-2 align-center gap-3" style="--col-1: minmax(0, 10rem)">
                        <label for="week-repeat-input">Schedule for x Additional Weeks:</label>
                        <div>
                            <input
                                id="week-repeat-input"
                                min="0"
                                type="number"
                                class="textfield"
                                th:field="*{repeatForXWeeks}"
                                placeholder="Number of Recurrences" />
                            <div class="tooltip">
                                <button class="tooltip__control fa-solid fa-question"></button>
                                <p role="tooltip" style="width: 30rem; white-space: initial">
                                    The number you provide dictates how many sessions will be created in the following weeks, beyond the session
                                    you're planning for the specified date.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <script th:inline="javascript" type="text/javascript">
                    document.addEventListener("ComponentsLoaded", function () {
                        document.getElementById("cluster-constraint-toggle").addEventListener("change", function () {
                            const clusterSelect = document.getElementById("cluster-select");
                            if (this.checked) {
                                clusterSelect.removeAttribute("disabled");
                            } else {
                                clusterSelect.setAttribute("disabled", "");
                            }
                            clusterSelect.update();
                        });

                        document.getElementById("md-constraint-toggle").addEventListener("change", function () {
                            const divisionSelect = document.getElementById("md-select");
                            if (this.checked) {
                                divisionSelect.removeAttribute("disabled");
                            } else {
                                divisionSelect.setAttribute("disabled", "");
                            }
                            divisionSelect.update();
                        });
                    });
                </script>
            </th:block>
        </th:block>
    </body>
</html>
