<!--

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

-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{admin/view}">
    <!--@thymesVar id="room" type="nl.tudelft.ewi.queue.model.Room"-->

    <body>
        <section layout:fragment="subcontent">
            <th:block th:with="roomsWithMaps = ${@adminService.roomsWithMaps}">
                <ul class="surface list divided" role="list">
                    <li class="pbl-3 flex align-center space-between" th:each="room : ${rooms}">
                        <div class="flex wrap align-center">
                            <span th:text="|${room.building.name} - ${room.name}|"></span>
                            <span class="chip" data-type="error" th:unless="${roomsWithMaps.contains(room.id)}">Room Map Unavailable</span>
                            <span class="chip" data-type="accept" th:if="${roomsWithMaps.contains(room.id)}">Room Map Available</span>
                        </div>
                        <button class="button p-min" data-style="outlined" th:data-dialog="'room-map-dialog-' + ${room.id}">Modify Room Map</button>
                    </li>
                </ul>
                <div>
                    <dialog th:each="room : ${rooms}" th:id="'room-map-dialog-' + ${room.id}" class="dialog">
                        <div class="flex vertical p-7">
                            <h3 class="underlined font-500" th:text="|Room Map: ${room.building.name} - ${room.name}|"></h3>

                            <div th:if="${roomsWithMaps.contains(room.id)}">
                                <div class="flex gap-3 justify-start mb-5 align-center">
                                    <h4 class="font-300">Current room map</h4>
                                    <a
                                        th:if="${roomsWithMaps.contains(room.id)}"
                                        th:data-room-id="${room.id}"
                                        data-style="outlined"
                                        type="submit"
                                        class="button p-min"
                                        target="_blank">
                                        Download
                                    </a>
                                </div>

                                <img th:data-room-id="${room.id}" th:alt="'Room map for room ' + ${room.id}" src="" />

                                <div class="underlined m-5"></div>
                            </div>

                            <div class="banner" data-type="info" role="banner" th:unless="${roomsWithMaps.contains(room.id)}">
                                <span class="banner__icon fa-solid fa-info-circle"></span>
                                <p>This room does not have a room map.</p>
                            </div>

                            <form class="flex vertical" th:action="@{/admin/room/{id}(id=${room.id})}" method="post" enctype="multipart/form-data">
                                <div>
                                    <label for="map">Upload new map:</label>
                                    <input type="file" id="map" name="map" accept="image/*" />
                                </div>

                                <div class="flex space-between">
                                    <button type="button" data-cancel class="button p-min" data-style="outlined" data-type="error">Cancel</button>
                                    <button type="submit" class="button p-min" data-style="outlined">Upload</button>
                                </div>
                            </form>
                        </div>
                    </dialog>
                </div>

                <script>
                    document.addEventListener("DOMContentLoaded", function () {
                        document.querySelectorAll("[data-room-id]").forEach(element => {
                            fetch(`/room/map/${element.dataset.roomId}`)
                                .then(res => res.json())
                                .then(jsonRes => {
                                    if (element.tagName.toLowerCase() === "a") {
                                        element.setAttribute("href", `/maps/${jsonRes.fileName}`);
                                    } else if (element.tagName.toLowerCase() === "img") {
                                        element.setAttribute("src", `/maps/${jsonRes.fileName}`);
                                    }
                                });
                        });
                    });
                </script>
            </th:block>
        </section>
    </body>
</html>
