<!--

    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/enqueue}">
    <!--@thymesVar id="edition" type="nl.tudelft.labracore.api.dto.EditionDetailsDTO"-->

    <!--@thymesVar id="qSession" type="nl.tudelft.queue.dto.view.labs.CapacitySessionViewDTO"-->
    <!--@thymesVar id="request" type="nl.tudelft.queue.dto.create.requests.SelectionRequestCreateDTO"-->

    <!--@thymesVar id="modules" type="java.util.List<nl.tudelft.labracore.api.dto.ModuleSummaryDTO>"-->
    <!--@thymesVar id="rooms" type="java.util.List<nl.tudelft.labracore.api.dto.RoomDetailsDTO>"-->

    <body>
        <th:block th:obj="${request}">
            <th:block layout:fragment="enqueue-body">
                <div
                    th:if="${qSession.capacitySessionConfig.procedure == T(nl.tudelft.queue.model.enums.SelectionProcedure).FCFS}"
                    th:with="countMap = ${qSession.selectedOrPendingCountsPerRoom()}">
                    <label for="input-room">Room:</label>

                    <div>
                        <select
                            class="textfield"
                            th:classappend="${#fields.hasErrors('room')} ? 'is-invalid'"
                            id="input-room"
                            name="room"
                            required
                            onchange="updateRoomWarning()">
                            <option
                                th:each="room : ${rooms}"
                                th:value="${room.id}"
                                th:text="|${room.building.name}: ${room.name} (${countMap.get(room)}/${room.capacity})|"></option>
                        </select>
                        <div class="invalid-feedback" th:if="${#fields.hasErrors('room')}" th:errors="*{room}">Module error</div>

                        <p
                            class="colour-error font-400"
                            th:if="${!rooms.isEmpty()}"
                            th:classappend="${countMap.get(rooms[0]) >= rooms[0].capacity ? '' : 'hidden'}">
                            This room is already full and you might not get in. We advise you to pick another room if possible.
                        </p>
                    </div>
                </div>

                <div>
                    <th:block th:if="${#lists.size(modules) == 1}">
                        <input name="module" th:value="${modules.get(0).id}" type="hidden" />
                    </th:block>
                    <th:block th:unless="${#lists.size(modules) == 1}">
                        <label for="input-module" class="col-sm-2 control-label">Module:</label>

                        <div class="col-sm-8">
                            <select
                                class="textfield"
                                th:classappend="${#fields.hasErrors('module')} ? 'is-invalid'"
                                id="input-module"
                                name="module"
                                required>
                                <option th:each="module : ${modules}" th:value="${module.id}" th:text="${module.name}" th:selected="${true}"></option>
                            </select>
                            <div class="colour-error" th:if="${#fields.hasErrors('module')}" th:errors="*{module}">Module error</div>
                        </div>
                    </th:block>
                </div>

                <script>
                    function updateRoomWarning() {
                        const roomSelect = $("#input-room")[0];
                        const roomText = roomSelect.options[roomSelect.selectedIndex].text;
                        const capacityRegex = /\((\d+)\/(\d+)\)/;
                        const match = roomText.match(capacityRegex);

                        const warning = $("#room-warning")[0];
                        if (parseInt(match[1]) >= parseInt(match[2])) {
                            warning.classList.remove("hidden");
                        } else {
                            warning.classList.add("hidden");
                        }
                    }
                </script>
            </th:block>
        </th:block>
    </body>
</html>
