<!--

    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="~{container}">
    <!--@thymesVar id="#authenticatedP" type="nl.tudelft.labracore.lib.security.user.Person"-->

    <!--@thymesVar id="assistant" type="nl.tudelft.labracore.api.dto.PersonDetailsDTO"-->
    <!--@thymesVar id="feedback" type="org.springframework.data.domain.Page<nl.tudelft.queue.dto.view.FeedbackViewDTO>"-->

    <head>
        <title th:text="|Feedback for ${assistant.displayName}|"></title>

        <script src="/webjars/chartjs/Chart.min.js"></script>
    </head>

    <body>
        <main layout:fragment="content">
            <h1 class="font-800 mb-5" th:text="|Feedback for ${assistant.displayName}|"></h1>

            <div th:if="${feedback.isEmpty()}">
                <h4 th:if="${#authenticatedP.id == assistant.id}">You have no feedback yet.</h4>
                <h4 th:if="${#authenticatedP.id != assistant.id}">There is no feedback for this assistant yet.</h4>
            </div>

            <div class="grid col-2 | md:col-1" th:unless="${feedback.isEmpty()}">
                <div class="flex vertical">
                    <div>
                        <h2 class="font-500 mb-3">Feedback comments</h2>

                        <ul class="surface divided list pil-5 pbl-3" role="list">
                            <li class="flex vertical gap-3 pbl-3" th:each="fb : ${feedback}" th:if="${fb.feedback != null && !fb.feedback.isEmpty()}">
                                <p th:text="${fb.feedback}"></p>

                                <p th:if="${fb.rating != null}" class="flex gap-1" style="color: goldenrod">
                                    <span class="fa-solid fa-star" th:each="_ : ${#numbers.sequence(1, fb.rating, 1)}"></span>
                                    <span class="fa-regular fa-star" th:each="_ : ${#numbers.sequence(1, 5 - fb.rating, 1)}"></span>
                                </p>

                                <p class="font-200" th:if="${@permissionService.canViewDeanonimizedFeedback()}">
                                    <span>Feedback</span>
                                    <span th:if="${fb.rating != null}" th:text="|of ${fb.rating + '/5'} |"></span>
                                    <span th:text="|by ${fb.groupName} on Request|"></span>
                                    <a class="link" th:text="${'#' + fb.request.id}" th:href="@{/request/{id}(id = ${fb.request.id})}"></a>
                                    <br />
                                    <span
                                        th:text="|Last updated on ${#temporals.format(fb.lastUpdatedAt, 'dd-MM-yyyy')}, created ${#temporals.format(fb.createdAt, 'dd-MM-yyyy')}|"></span>
                                </p>
                            </li>
                        </ul>
                    </div>

                    <th:block th:replace="pagination :: pagination (page=${feedback}, size=3)"></th:block>
                </div>

                <div>
                    <h2 class="font-500 mb-3">Overview (5 is most positive)</h2>

                    <canvas id="feedback-histogram"></canvas>
                    <script th:inline="javascript" type="text/javascript">
                        //<![CDATA[
                        const stars = /*[[${stars}]]*/ [0, 0, 0, 0, 0];

                        const ctx = document.getElementById("feedback-histogram").getContext("2d");
                        new Chart(ctx, {
                            type: "bar",
                            data: {
                                labels: ["1", "2", "3", "4", "5"],
                                datasets: [
                                    {
                                        label: "# of Votes",
                                        data: stars,
                                        backgroundColor: [
                                            "rgba(255, 99, 132, 0.2)",
                                            "rgba(54, 162, 235, 0.2)",
                                            "rgba(255, 206, 86, 0.2)",
                                            "rgba(75, 192, 192, 0.2)",
                                            "rgba(153, 102, 255, 0.2)",
                                            "rgba(255, 159, 64, 0.2)",
                                        ],
                                        borderColor: [
                                            "rgba(255, 99, 132, 1)",
                                            "rgba(54, 162, 235, 1)",
                                            "rgba(255, 206, 86, 1)",
                                            "rgba(75, 192, 192, 1)",
                                            "rgba(153, 102, 255, 1)",
                                            "rgba(255, 159, 64, 1)",
                                        ],
                                        borderWidth: 1,
                                    },
                                ],
                            },
                            options: {
                                scales: {
                                    yAxes: [
                                        {
                                            ticks: {
                                                beginAtZero: true,
                                                precision: 0,
                                                callback: value => {
                                                    if (value % 1 === 0) return value;
                                                },
                                            },
                                        },
                                    ],
                                },
                            },
                        });
                        //]]>
                    </script>
                </div>
            </div>
        </main>
    </body>
</html>
