<!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>Kunde 1510</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/498}">1510</a></td>
            </tr>
            <tr>
                <th>Bonuspunktestand</th>
                <td>50</td>
            </tr>

            <tr>
                <th>Name</th>
                <td>Hans Maier</td>
            </tr>
            <tr>
                <th>E-Mail</th>
                <td>hans.maier@example.com</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Geschäftskunde, Aktiv</td>
            </tr>
            <tr>
                <th>Adresse</th>
                <td>
                    Hans Maier <br/>
                    Hauptstraße 12<br/>
                    74880 Musterstadt<br/>
                    Deutschland <br/>
                </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>
                <fieldset>
                    <input type="checkbox" name="activ" id="activ" checked>
                    <label for="activ">Aktiv</label> <br/>
                </fieldset>

                <fieldset>

                    <input type="checkbox" name="ma" id="ma">
                    <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>
                <div>
                    <label for="password">Passwort</label>
                    <input class="full-width" type="password" name="password" placeholder="Passwort" id="password"
                           required>
                </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>
                <td>440</td>
                <td>2019-12-54</td>
                <td>10,13&nbsp;EUR</td>
                <td>Zugestellt</td>
                <td><a th:href="@{/intern/customerOrders/48584}" class="button smaller">Details</a></td>
            </tr>
            <tr>
                <td>241</td>
                <td>2019-11-10</td>
                <td>40,13&nbsp;EUR</td>
                <td>In Zustellung</td>
                <td><a th:href="@{/intern/customerOrders/48584}" class="button smaller">Details</a></td>
            </tr>
        </table>
        </p>
        <h2>Buchungen</h2>
        <div>
            <h4> Kontostand </h4>
            <h3> 0,00&nbsp;EUR </h3>
        </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>
                <td>10.09.2019 14:10</td>
                <td>119,00&nbsp;EUR</td>
                <td> -</td>
                <td>0&nbsp;EUR</td>
                <td>Kunden-Bezahlung</td>
                <td>Bezahlung mit Kreditkarte XXXXXXXX480</td>
            </tr>
            <tr>
                <td>10.09.2019 13:45</td>
                <td>-100,00&nbsp;EUR</td>
                <td><a th:href="@{/intern/accounting/main}">Hauptkonto</a></td>
                <td>-100,00&nbsp;EUR</td>
                <td>Kunden-Bestellung</td>
                <td><a th:href="@{/intern/customerOrders/450}">2504</a></td>
            </tr>
        </table>
        </p>
    </div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>

</html>
