<!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>Kunden Details</title>
    <script th:src="@{/js/filterTable.js}"></script>

    <script>
      function toggle(id) {
         document.getElementById(id).classList.toggle("invisible");
      }

    </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 th:text="|Kunde ${user.id}|"></h1>

        <script th:src="@{/js/back.js}"></script>
        <div class="back" data-group="intern" data-insert="true"></div>
    </div>
</div>
<main class="sidebar-layout content-width">
    <nav th:replace="fragments/intern :: sidebar"></nav>
    <div class="content-width">
        <h2>Allgemein</h2>
        <p>
        <table class="key-value">
            <tr>
                <th>Nutzer</th>
                <td><a th:href="@{/intern/customers/{id}(id=${user.id})}" th:text="${user.id}"></a></td>
            </tr>
            <tr>
                <th>Name</th>
                <td th:text="${user.defaultDeliveryAddress != null ? user.defaultDeliveryAddress.name : '-'}"></td>
            </tr>
            <tr>
                <th>E-Mail</th>
                <td th:text="${user.email}"></td>
            </tr>
            <tr>
                <th>Status</th>
                <td>
                    <span th:text="${user.isActive} ? 'Aktiv,' : 'Inaktiv,'"></span>
                    <span th:text="${user.isEmployee} ? 'Mitarbeiter' : 'Kunde'"></span>
                </td>
            </tr>
            <tr>
                <th>Adresse</th>
                <td th:Text="${user.defaultDeliveryAddress != null ? user.defaultDeliveryAddress : ''}"></td>
            </tr>
        </table>
        </p>
        <p>
            <a class="button smaller" href="javascript:void(0)" onclick="toggle('add-actions');">Weitere Aktionen
                anzeigen</a>
        </p>
        <div id="add-actions" class="invisible info-box secondary hero">
            <h2>Status bearbeiten</h2>
            <p>
            <form method="POST" th:action="@{/intern/customers/{id}/changeState(id=${user.id})}">
                <fieldset>
                    <input type="checkbox" name="active" id="active" th:checked="${user.isActive}">
                    <label for="active">Aktiv</label> <br/>
                </fieldset>

                <fieldset>

                    <input type="checkbox" name="ma" id="ma" th:checked="${user.isEmployee}">
                    <label for="ma">Mitarbeiter-Status</label> <br/>
                </fieldset>

                <button class="smaller" type="submit" name="action" value="login"
                        onclick="return confirm('Sind Sie sicher, dass Sie den Status dieses Accounts setzen möchten?');">
                    Speichern
                </button>
            </form>
            </p>
            <h2>Passwort zurücksetzen</h2>
            <p>
            <form method="POST" th:action="@{/intern/customers/{id}/resetPassword(id=${user.id})}">
                <div>
                    <label for="password">Passwort</label>
                    <input class="full-width" type="password" name="password" placeholder="Passwort" id="password"
                           pattern="(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,}"
                           required>
                    <small>Das Passwort muss mindestens 8 Zeichen enthalten. Es muss aus mindestens einem
                        Großbuchstaben, einem Kleinbuchstaben und einer Zahl bestehen.</small>
                </div>

                <div>
                    <label for="password2">Passwort wiederholen</label>
                    <input class="full-width" type="password" name="password2" placeholder="Passwort" id="password2"
                           required>
                </div>

                <button class="smaller" type="submit" name="action" value="login"
                        onclick="return confirm('Sind Sie sicher, dass Sie das Passwort dieses Accounts zurücksetzen móchten?');">
                    Speichern
                </button>
            </form>
            </p>
        </div>

        <h2>Bestellungen</h2>
        <p>
        <table id="main-table">
            <tr>
                <th>Bestellnummer</th>
                <th>Bestelldatum</th>
                <th>Betrag</th>
                <th>Status</th>
                <th></th>
            </tr>
            <tr th:each="order: ${orders}">
                <td th:text="${order.id}"></td>
                <td th:text="${order.formatCreated()}"></td>
                <td th:text="${#numbers.formatDecimal(order.totalGrossCent * 0.01, 1, 'POINT', 2, 'COMMA')}"></td>
                <td th:if="${order.deliveredAt == null}">In Zustellung</td>
                <td th:if="${order.deliveredAt != null}">Zugestellt</td>
            </tr>
        </table>
        </p>

        <h2>Buchungen</h2>
        <div>
            <h4> Kontostand </h4>
            <h3 th:text="${balance}" />
        </div>
        <p>
        <table id="main-table">
            <tr>
                <th colspan="8">
                    <input type="text" placeholder="Filtern" class="jsFilterTable full-width"
                           data-target-id="main-table">
                </th>
            </tr>
            <tr>
                <th>Zeitpunkt</th>
                <th>Betrag</th>
                <th>Von</th>
                <th>Kontostand</th>
                <th>Grund</th>
                <th>Referenz</th>
            </tr>
            <tr th:each="booking: ${bookings}">
                <td th:text="${booking.datetime}" />
                <td th:text="${booking.amount}" />

                <td th:if="${booking.sourceAddr}"><a th:href="@{${booking.sourceAddr}}" th:text="${booking.source}" /></td>
                <td th:unless="${booking.sourceAddr}" th:text="${booking.source}" />

                <td th:text="${booking.balance}" />

                <td th:text="${booking.reason}" />
                <td th:if="${booking.referenceAddr}"><a th:href="@{${booking.referenceAddr}}" th:text="${booking.reference}" /></td>
                <td th:unless="${booking.referenceAddr}" th:text="${booking.reference}" />
            </tr>
        </table>
        </p>
    </div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>

</html>
