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

<head>
    <meta charset="utf-8">
    <title>Checkout</title>
    <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
    <link rel="stylesheet" th:href="@{/css/listedArticles.css}"/>
    <script th:src="@{/js/filterTable.js}"></script>

</head>

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

        <script th:src="@{/js/back.js}"></script>
        <p class="back" data-group="shop" data-insert="true"></p>
    </div>
    <nav></nav>
</div>
<main th:if="${checkoutItems.size() == 0}">
    <div class="detailflex m">
        <h2> Noch keine Artikel im Warenkorb. </h2>
        <p>
            <img th:src="@{/img/undraw_successful_purchase_secondary.svg}"/>
        </p>
        <a class="button" th:href="@{/}"> Weiter shoppen </a>
    </div>

</main>
<main th:if="${checkoutItems.size() > 0}" class="content-width sidebar-layout" style="min-height: 100vh;">
    <div style="max-width: 45em; width: 100%;">
        <table>
            <tr>
                <th>Bild</th>
                <th>Name</th>
                <th>Preis (Brutto)</th>
                <th>Menge</th>
                <th></th>
            </tr>
            <th:block th:each="item : ${checkoutItems}">
                <tr>
                    <td><a th:href="@{/shop/articles/{id}(id = ${item.article.id})}"><img
                            th:src="@{/shop/articles/{id}/image.jpg(id=${item.article.id})}" class="s"/></a></td>

                    <td><a th:href="@{/shop/articles/{id}(id = ${item.article.id})}"
                           th:text="${item.article.title}"></a></td>
                    <td><span
                            th:text="${#numbers.formatDecimal(item.article.getPriceGross() * 0.01, 1, 'POINT', 2, 'COMMA')}"></span>
                        EUR <b>x</b></td>
                    <td>
                        <form method="POST" th:action="@{/shop/articles/{id}(id = ${item.article.id})}">
                            <input type="hidden" name="fastcheckout" value="true"/>
                            <input type="hidden" name="set_amount" value="true"/>
                            <select name="quantity" size="1">
                                <option th:value="${item.amount}" th:text="${item.amount}" selected></option>
                                <option value="0">Entfernen</option>
                                <option th:each="quantity : ${#numbers.sequence(1,10)}"
                                        th:value="${quantity}"
                                        th:text="${quantity}"></option>
                            </select>
                            <button class="small">Ändern</button>
                        </form>
                    </td>
                </tr>
                <th:block>
        </table>
    </div>
    <form method="POST" th:action="@{/shop/checkoutFinish}" style="min-width: 30em; max-width: 45em;">
        <div class="detailflex hero">
            <div>
                <h1>Checkout</h1>
            </div>
            <div th:if="${user}">
                <input type="hidden" name="shopping_cart_revision" th:value="${shoppingCart.getRevision()}"/>
                <input type="hidden" name="expected_total" th:value="${checkoutTotals.total}"/>

                <h2>Lieferadresse:</h2>
                <textarea rows="5" class="full-width" type="text" name="address"
                          placeholder="Name&#10;Optional: Zusatz&#10;Optional: Unternehmen&#10;Straße Hausnummer&#10;Postleitzeit Ort&#10;Land"
                          th:text="${user.defaultDeliveryAddress != null ? user.defaultDeliveryAddress.toString() : ''}"
                          required>
Max Mustermann
Musterstraße 4
42424 Mustertal
               </textarea>
            </div>
            <div th:if="${user}">
                <h2>Zahlung:</h2>
                <fieldset>
                    <input type="radio" name="type" value="priv" id="payment-card" required checked>
                    <label for="payment-card">Kartenzahlung</label> <br/>
                    <input class="full-width" type="text" id="cardnumber" name="cardnumber" placeholder="Kartennummer"
                           th:value="${user.defaultPayment != null ? user.defaultPayment.creditCardNumber : ''}"
                           pattern="[0-9]{6,16}"
                           required/>
                </fieldset>
            </div>
            <div>
                <h2>Bestellübersicht</h2>
                <!-- Dirty  TODO: -->
                <table>
                    <tr>
                        <th>Artikel (Netto)</th>
                        <th><span
                                th:text="${#numbers.formatDecimal(checkoutTotals.net * 0.01, 1, 'POINT', 2, 'COMMA')}"></span>
                            EUR
                        </th>
                    </tr>
                    <th:block th:each="item : ${checkoutTotals.vatAmounts.entrySet()}">
                        <tr>
                            <th>Umsatzsteuer (<span th:text="${item.getKey()}"></span>%)</th>
                            <th><span
                                    th:text="${#numbers.formatDecimal(item.getValue() * 0.01, 1, 'POINT', 2, 'COMMA')}"></span>
                                EUR
                            </th>
                        </tr>
                    </th:block>
                    <tr class="secondary">
                        <th>Gesamt:</th>
                        <th><span
                                th:text="${#numbers.formatDecimal(checkoutTotals.total * 0.01, 1, 'POINT', 2, 'COMMA')}"></span>
                            EUR
                        </th>
                    </tr>
                    <tr th:if="${user}" class="secondary">
                        <th colspan="2" class=" no-padding"></th>
                    </tr>
                </table>
            </div>
            <div th:if="${user}">
                <button class=" no-margin secondary full-width">jetzt kostenpflichtig bestellen</button>
            </div>
            <div th:unless="${user}">
                <a th:href="@{/login}" class="button secondary no-margin full-width">Einloggen und forfahren.</a>
            </div>
        </div>
    </form>
</main>
<footer th:replace="fragments/footer :: footer"></footer>

</body>

</html>
