<!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>Meine Bestellungen</title>
    <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>Meine Bestellungen</h1>
    </div>
</div>
<main class="sidebar-layout content-width">
    <nav th:replace="fragments/customer :: sidebar"></nav>
    <div class="content-width detailflex">
        <div th:if="${orderDeliveryDataMap.isEmpty()}">
            <h2>Mit diesem Account wurden noch keine Bestellungen getätigt.</h2>
        </div>
        <div th:if="${!orderDeliveryDataMap.isEmpty()}" th:each="order: ${orderDeliveryDataMap}">
            <div>
                <table class="key-value">
                    <tr>
                        <th>Lieferstatus</th>
                        <td th:if="${order.getValue().allOk()}"><span th:text="${order.getValue().getStatus()}" /></td>
                        <td th:if="${order.getValue().noTrackingID()}">Bestellung wurde elektronisch angekündigt</td>
                        <td th:if="${order.getValue().noData()}">DHL-Server ist gerade nicht erreichbar</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td  th:if="${order.getKey().deliveredAt == null && order.getKey().trackingId!=null && !order.getValue().noData()}">Vorraussichtliche Ankunft: <span th:text="${order.getValue().getEstimatedArrival()}" /></td>
                        <td  th:if="${order.getKey().deliveredAt == null && order.getKey().trackingId!=null && order.getValue().noData()}">Vorraussichtliche Ankunft: --:--:----</td>
                        <td  th:if="${order.getKey().deliveredAt != null && order.getKey().trackingId!=null}"><b>Angekommen</b>  Ankunft: <span th:text="${order.getValue().getEstimatedArrival()}" /></td>
                    </tr>
                    <tr>
                        <th>Sendeverfolgungsnummer</th>
                        <td th:text="${order.getKey().trackingId!=null} ? ${order.getKey().trackingId} : 'Es wurde noch keine Sendungsnummer vergeben'"></td>
                    </tr>
                    <tr>
                        <th></th>
                        <td th:text="${order.getKey().destination.toString()}" />
                    </tr>
                </table>
            </div>
            <table>
                <tr>
                    <th>Bild</th>
                    <th>Name</th>
                    <th>Menge</th>
                    <th>Preis (Brutto)</th>
                </tr>
                <tr th:each="position: ${order.getKey().positions}">
                    <td><a th:href="@{/shop/articles/{id}(id = ${position.article.id})}"><img th:src="@{/shop/articles/{id}/image.jpg(id=${position.article.id})}" class="s"/></a></td>
                    <td><a th:href="@{/shop/articles/{id}(id = ${position.article.id})}" th:text="${position.article.title}" class="s"></a></td>
                    <td th:text="${position.quantity}" />
                    <td th:text="${#numbers.formatDecimal(position.getSumPrice() * 0.01, 1, 'POINT', 2, 'COMMA')}" />
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th>Position</th>
                    <th>Preis</th>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>Artikel (Netto)</td>
                    <td th:text="${#numbers.formatDecimal(order.getKey().totalNetCent * 0.01, 1, 'POINT', 2, 'COMMA')}" />
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>Umsatzsteuer</td>
                    <td th:text="${#numbers.formatDecimal(order.getKey().totalVatCent * 0.01, 1, 'POINT', 2, 'COMMA')}" />
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>
                        <h3>Gesammtpreis</h3>
                    </td>
                    <td>
                        <h3 th:text="${#numbers.formatDecimal(order.getKey().totalGrossCent * 0.01, 1, 'POINT', 2, 'COMMA')}"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>

</html>
