<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">

    <title>Packliste</title>
    <script th:src="@{/js/filterTable.js}"></script>
    <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
</head>

<body>
<nav th:replace="fragments/header :: header">Header</nav>
<div class="sidebar-layout content-width">
    <nav></nav>
    <div>
        <h1>Packliste</h1>

        <script th:src="@{/js/back.js}"></script>
        <div class="back" data-group="intern" data-name="Zurück zur Packliste." data-insert="false"></div>
    </div>
</div>
<main class="sidebar-layout content-width">
    <nav th:replace="fragments/intern :: sidebar"></nav>
    <div class="content-width">
        <h2 th:if="${bookings.size() == 0}">Es gibt keine offenen Lagerbuchungen!</h2>
        <p>
        <table id="main-table">
            <tr>
                <th colspan="7">
                    <input type="text" placeholder="Filtern" class="smaller jsFilterTable full-width"
                           data-target-id="main-table"></input>
                </th>
            </tr>
            <tr>
                <th>Zeitpunkt</th>
                <th>Artikel</th>
                <th>Anzahl</th>
                <th>Von</th>
                <th>Nach</th>
                <th>Status</th>
            </tr>

            <th:block th:each="booking : ${bookings}">
                <tr th:data-group="${booking.id}">
                    <td th:text="${booking.created.toString()}"></td>
                    <td th:if="${booking.reason.isManuel}" colspan="4" class="l">
                        Manuell:
                        <pre th:text="${booking.reason.comment}"></pre>
                    </td>
                    <td th:if="${booking.reason.isStartBooking}" colspan="4" class="l">
                        Startbuchung
                    </td>
                    <td th:if="${booking.reason.customerOrder != null}" colspan="4" class="l">
                        <a th:href="${'/intern/customerOrders/' + booking.reason.customerOrder.id}">
                            Bestellung: <span th:text="${booking.reason.customerOrder.id}"></span>
                        </a>
                        <pre th:text="${booking.reason.customerOrder.destination.toString()}"></pre>
                    </td>
                    <td th:if="${booking.reason.supplierOrder != null}" colspan="4" class="l">
                        <a th:href="${'/intern/supplierOrders/#q=' + booking.reason.supplierOrder.id}">
                            Lieferung: <span th:text="${booking.reason.supplierOrder.id}"></span>
                        </a>
                    </td>

                    <td th:if="${!booking.isInProgress}">
                        <form th:action="${'/intern/warehouse/progress/' + booking.id}" method="post">
                            <button type="submit">Beginnen</button>
                        </form>
                    </td>
                    <td th:if="${booking.isInProgress}">
                        <form th:action="${'/intern/warehouse/progress/' + booking.id}" method="get">
                            <button class="secondary" type="submit">Abschließen</button>
                        </form>
                    </td>
                </tr>

                <tr th:each="pos : ${booking.positions}" th:data-group="${booking.id}">
                    <td><img th:src="@{/shop/articles/{id}/image.jpg(id=${pos.article.id})}" class="s"/></td>
                    <td><a th:href="@{/intern/articles/{id}(id=${pos.article.id})}"
                           th:text="${pos.article.title}"></a></td>
                    <th:block th:if="${pos.amount > 0}">
                        <td th:text="${pos.amount}"></td>
                        <td> -</td>
                        <td><a th:href="${'/intern/warehouse/slots/#q=%23' + pos.slotEntry.slot.slotNum}">Lagerplatz
                            <span th:text="${pos.slotEntry.slot.slotNum}"></span> </a></td>
                    </th:block>
                    <th:block th:if="${pos.amount < 0}">
                        <td th:text="${pos.amount * -1}"></td>
                        <td><a th:href="${'/intern/warehouse/slots/#q=%23' + pos.slotEntry.slot.slotNum}">Lagerplatz
                            <span th:text="${pos.slotEntry.slot.slotNum}"></span> </a></td>
                        <td> -</td>
                    </th:block>
                    <th:block th:if="${pos.amount == 0}">
                        <td th:text="${pos.amount}"></td>
                        <td> -</td>
                        <td> -</td>
                    </th:block>
                </tr>
            </th:block>
        </table>
        </p>
    </div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>

</html>
