<!--

    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">
    <head>
        <style th:fragment="style">
            @media (width > 48em) {
                .feedback-tab {
                    max-width: 30cqw;
                }
            }

            .feedback label {
                cursor: pointer;
            }
            .feedback :where(.feedback__control > .fa-regular) {
                display: none;
            }
            .feedback :where(input:checked ~ .feedback__control > .fa-regular) {
                display: initial;
            }
            .feedback :where(input:not(:checked) ~ .feedback__control > .fa-solid) {
                display: initial;
            }
            .feedback :where(input:checked ~ .feedback__control > .fa-solid) {
                display: none;
            }
            .feedback :where(:has(input:invalid) .feedback__control > .fa-regular) {
                display: initial;
            }
            .feedback :where(:has(input:invalid) .feedback__control > .fa-solid) {
                display: none;
            }

            .feedback__control {
                min-width: 36px;
            }

            .feedback:hover :where(.feedback__control > *) {
                display: none;
            }
            .feedback:hover :where(.feedback__control:hover ~ .feedback__control > .fa-regular) {
                display: initial;
            }
            .feedback:hover :where(.feedback__control > .fa-solid) {
                display: initial;
            }
            .feedback:hover :where(.feedback__control:hover ~ .feedback__control > .fa-solid) {
                display: none;
            }
        </style>
    </head>

    <body>
        <th:block th:fragment="feedback" th:with="assistants = ${@feedbackService.assistantsInvolvedInRequest(request.id)}">
            <div class="flex vertical gap-3" th:if="${@permissionService.canGiveFeedback(request.id) && !#lists.isEmpty(assistants)}">
                <h3 class="font-500">Feedback</h3>

                <div>
                    <label for="select-assistant">Select TA:</label>
                    <select id="select-assistant" class="textfield">
                        <option disabled selected>Select an assistant</option>
                        <option th:each="assistant, i : ${assistants}" th:value="${assistant.id}" th:text="${assistant.displayName}"></option>
                    </select>
                </div>

                <div th:each="assistant, i : ${assistants}" th:id="|feedback-${assistant.id}|" class="feedback-tab hidden">
                    <form
                        th:action="@{/request/{id}/feedback/{aId}(id=${request.id}, aId=${assistant.id})}"
                        th:with="feedback = ${@feedbackRepository.findById(request.id, assistant.id)}"
                        method="post"
                        class="flex vertical">
                        <div>
                            <div
                                class="feedback flex gap-0 font-700"
                                style="color: goldenrod"
                                th:with="checked = ${feedback.isPresent() ? feedback.get().rating : 0}">
                                <th:block th:each="i : ${#numbers.sequence(1, 5)}">
                                    <div class="feedback__control">
                                        <label th:for="|star-${assistant.id}-${i}|" class="fa-regular fa-star"></label>
                                        <label th:for="|star-${assistant.id}-${i}|" class="fa-solid fa-star"></label>
                                    </div>
                                    <input
                                        th:id="|star-${assistant.id}-${i}|"
                                        type="radio"
                                        th:name="rating"
                                        th:value="${i}"
                                        autocomplete="off"
                                        required
                                        hidden
                                        th:checked="${checked == i}" />
                                </th:block>
                            </div>
                        </div>
                        <textarea
                            id="input-feedback"
                            aria-label="Feedback"
                            maxlength="250"
                            class="textfield"
                            name="feedback"
                            th:text="${feedback.isPresent() ? feedback.get().feedback : ''}"
                            th:placeholder="|Leave feedback about ${assistant.displayName}.|"></textarea>
                        <div>
                            <p class="font-200">
                                Your feedback is
                                <strong class="fw-500">anonymous</strong>
                                : The TA will only be able to see the feedback and score you give, not your name.
                            </p>
                        </div>
                        <div>
                            <button type="submit" class="button">Save feedback</button>
                            <a class="btn btn-danger"
                               th:href="@{/request/{id}/report/{assistantId}(id=${request.id}, assistantId=${assistant.id})}">
                                Report TA</a>
                        </div>
                    </form>

                    <script>
                        $("#select-assistant").on("change", function () {
                            $(`.feedback-tab`).addClass("hidden");
                            $(`#feedback-${$(this).val()}`).removeClass("hidden");
                        });
                    </script>
                </div>
            </div>
        </th:block>
    </body>
</html>
