<!--

    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/>.

-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <!--@thymesVar id="#authenticatedP" type="nl.tudelft.labracore.lib.security.user.Person"-->

    <!--@thymesVar id="qSession" type="nl.tudelft.queue.dto.view.labs.AbstractSlottedLabViewDTO"-->

    <!--@thymesVar id="distributeRequestsDto" type="nl.tudelft.queue.dto.util.DistributeRequestsDTO"-->

    <body>
        <div th:fragment="slots-info">
            <div th:if="${@permissionService.canManageSession(qSession.data)}" class="tabs mb-5" role="tablist">
                <button type="button" role="tab" aria-controls="basic-tab" aria-selected="true">
                    <i class="fa fa-clock"></i>
                    Basic view
                </button>
                <button type="button" role="tab" aria-controls="ts-capacity-tab" aria-selected="false">
                    <i class="fa fa-chair"></i>
                    Edit time slot Capacity
                </button>
                <button type="button" role="tab" aria-controls="ts-distribution-tab" aria-selected="false">
                    <i class="fa fa-users-cog"></i>
                    Distribute Requests
                </button>
            </div>

            <div id="basic-tab">
                <div class="grid auto-fill gap-3" style="--col-width: 10rem">
                    <th:block th:each="ts : ${qSession.timeSlots}">
                        <!--@thymesVar id="ts" type="nl.tudelft.queue.model.TimeSlot"-->
                        <div class="surface p-0 flex vertical gap-0 align-center">
                            <div class="p-3">
                                <span
                                    th:text="|${#temporals.format(ts.slot.opensAt, 'HH:mm')} - ${#temporals.format(ts.slot.closesAt, 'HH:mm')} |"></span>
                                <span th:text="|(${ts.countSlotsOccupied()}/${ts.capacity})|"></span>
                            </div>
                            <progress th:value="${ts.countSlotsOccupied()}" th:max="${ts.capacity}"></progress>
                        </div>
                    </th:block>
                </div>
            </div>

            <th:block th:if="${@permissionService.canManageSession(qSession.data)}">
                <div id="ts-capacity-tab" hidden>
                    <form method="post" th:action="@{/lab/{lId}/capacities(lId=${qSession.id})}" class="flex vertical">
                        <div class="banner" data-type="info">
                            <span class="fa-solid fa-info-circle"></span>
                            <p>
                                Adjust capacities per time-slot or use the options 'Set capacity in bulk' to adjust capacities in bulk. Click the
                                'Submit changes' button when your satisfied with your changes. N.B.: we will allow a capacity to go lower than the
                                number currently enqueued, but we will not kick currently enqueued requests.
                            </p>
                        </div>

                        <div>
                            <h4 class="font-400">Set capacity in bulk</h4>
                            <div class="flex align-center gap-3 align-end">
                                <div class="flex vertical gap-0">
                                    <label for="from-select">From</label>
                                    <select data-select id="from-select" class="textfield" data-placeholder="From time slot">
                                        <option
                                            th:selected="${iter.first}"
                                            th:each="ts, iter : ${qSession.timeSlots}"
                                            th:text="|${#temporals.format(ts.slot.opensAt, 'HH:mm')} - ${#temporals.format(ts.slot.closesAt, 'HH:mm')}|"
                                            th:value="${ts.id}"></option>
                                    </select>
                                </div>

                                <div class="flex vertical gap-0">
                                    <label for="to-select">To</label>
                                    <span id="to-error" class="colour-error" hidden>'to' time slot needs to be after 'from'.</span>
                                    <select data-select id="to-select" class="textfield" data-placeholder="To time slot">
                                        <option
                                            th:selected="${iter.last}"
                                            th:each="ts, iter : ${qSession.timeSlots}"
                                            th:text="|${#temporals.format(ts.slot.opensAt, 'HH:mm')} - ${#temporals.format(ts.slot.closesAt, 'HH:mm')}|"
                                            th:value="${ts.id}"></option>
                                    </select>
                                </div>

                                <div class="flex vertical p-0">
                                    <label for="capacity-input">Capcacity</label>
                                    <span id="capacity-error" class="colour-error" hidden>A capacity needs to be filled in.</span>
                                    <input id="capacity-input" class="textfield" placeholder="Capacity" type="number" />
                                </div>

                                <button class="button" type="button" onclick="adjustCapacities()">Change</button>

                                <script type="application/javascript">
                                    function adjustCapacities() {
                                        const fromSelect = document.getElementById("from-select");
                                        const toSelect = document.getElementById("to-select");
                                        const capacity = document.getElementById("capacity-input");

                                        let errors = false;

                                        if (capacity.value === "") {
                                            document.getElementById("capacity-error").removeAttribute("hidden");
                                            errors = true;
                                        } else {
                                            document.getElementById("capacity-error").setAttribute("hidden", "");
                                        }

                                        if (toSelect.value > fromSelect.value) {
                                            document.getElementById("to-error").setAttribute("hidden", "");
                                        } else {
                                            document.getElementById("to-error").removeAttribute("hidden");
                                            errors = true;
                                        }

                                        if (!errors) {
                                            for (let i = fromSelect.value; i <= toSelect.value; i++) {
                                                const inp = document.getElementById(`ts-${i}-capacity-input`);
                                                inp.value = capacity.value;
                                            }
                                        }
                                    }
                                </script>
                            </div>
                        </div>

                        <div>
                            <h4 class="font-400 mb-3">Slots</h4>
                            <div class="grid auto-fill gap-3" style="--col-width: 10rem">
                                <div
                                    class="surface p-0 flex vertical gap-3 align-center"
                                    th:each="ts : ${qSession.timeSlots}"
                                    style="container-type: inline-size">
                                    <!--@thymesVar id="ts" type="nl.tudelft.queue.model.TimeSlot"-->

                                    <div class="p-3 flex vertical gap-3">
                                        <div>
                                            <span
                                                th:text="|${#temporals.format(ts.slot.opensAt, 'HH:mm')} - ${#temporals.format(ts.slot.closesAt, 'HH:mm')} |"></span>
                                            <span th:text="|(${ts.countSlotsOccupied()}/${ts.capacity})|"></span>
                                        </div>

                                        <input
                                            aria-label="Adjust time slot"
                                            th:id="|ts-${ts.id}-capacity-input|"
                                            class="textfield"
                                            data-style="variant"
                                            type="number"
                                            style="max-width: calc(100cqw - 2rem)"
                                            th:name="${'capacities[' + ts.id + ']'}"
                                            th:value="${ts.capacity}" />
                                    </div>

                                    <progress th:value="${ts.countSlotsOccupied()}" th:max="${ts.capacity}"></progress>
                                </div>
                            </div>
                        </div>

                        <div>
                            <button type="submit" class="button">Submit changes</button>
                        </div>
                    </form>
                </div>
            </th:block>

            <th:block th:if="${@permissionService.canManageSession(qSession.data)}">
                <div id="ts-distribution-tab" hidden>
                    <div class="flex vertical gap-5">
                        <h2 class="font-600 fw-400">Distribute Requests</h2>
                        <div class="banner" data-type="info">
                            <span class="fa-solid fa-info-circle"></span>
                            <p>
                                Distribute pending requests relating to specific assignments in a round-robin fashion among selected assistants. The
                                distribution will be done in the order of the assistants selected.
                            </p>
                        </div>

                        <form
                            th:object="${distributeRequestsDto}"
                            th:action="@{/lab/{id}/distribute(id=${qSession.id})}"
                            th:method="POST"
                            class="flex vertical gap-5">
                            <div id="distribute-edition-cards" class="flex vertical space-between">
                                <th:block th:each="edition, editionItemStat : ${qSession.session.editions}">
                                    <div
                                        class="surface p-0"
                                        th:id="'distribute-card-' + ${edition.id}"
                                        th:if="${@permissionService.canManageEdition(edition.id)}">
                                        <h3 class="surface__header" th:text="${editionsToCourses.get(edition.id).name}"></h3>

                                        <div class="surface__content">
                                            <div class="grid col-2 align-center" style="--col-1: minmax(0, 10rem)">
                                                <label th:for="'assignment-distribute-select-' + ${edition.id}">Select Assignments</label>
                                                <div>
                                                    <select
                                                        data-select
                                                        multiple
                                                        class="textfield"
                                                        data-style="variant"
                                                        th:id="'assignment-distribute-select-' + ${edition.id}"
                                                        data-title="Select assignment(s) to distribute"
                                                        th:field="*{editionSelections[__${editionItemStat.index}__].selectedAssignments}">
                                                        <th:block
                                                            th:each="assignment : ${@moduleDTOService.getAssignmentsInEdition(modules, edition.id)}">
                                                            <option th:value="${assignment.id}" th:text="|${assignment.name}|"></option>
                                                        </th:block>
                                                    </select>
                                                </div>

                                                <label th:for="'assistant-distribute-select-' + ${edition.id}">Select Assistants</label>
                                                <div>
                                                    <select
                                                        data-select
                                                        multiple
                                                        class="textfield"
                                                        data-style="variant"
                                                        th:id="'assistant-distribute-select-' + ${edition.id}"
                                                        data-title="Select assistant(s) to distribute among"
                                                        th:field="*{editionSelections[__${editionItemStat.index}__].selectedAssistants}">
                                                        <th:block th:each="person : ${@roleDTOService.staff(edition)}">
                                                            <option th:value="${person.id}" th:text="${person.displayName}"></option>
                                                        </th:block>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </th:block>
                            </div>

                            <div>
                                <button type="submit" data-type="primary" data-style="filled" class="button">Distribute Requests</button>
                            </div>
                        </form>
                    </div>
                </div>
            </th:block>

            <script type="text/javascript" src="/js/form_submission_enhancer.js"></script>
        </div>
    </body>
</html>
