<!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">
    <script src="/js/chart.js"></script>
    <script>
      function chart(id, name, data, unit) {
         document.addEventListener("DOMContentLoaded", function() {
            let elm = document.getElementById(id);
            let cs = getComputedStyle(elm)
            let ctx = elm.getContext('2d');
            let base = cs.getPropertyValue('color');
            let baseHl = base;

            let chart = new Chart(ctx, {
               // The type of chart we want to create
               type: 'line',

               // The data for our dataset
               data: {
                  labels: ['Freitag', 'Donnerstag', 'Mittwoch', 'Dienstag', 'Montag'],
                  datasets: [{
                     label: name,
                     backgroundColor: cs.getPropertyValue('--c-primary'),
                     borderColor: cs.getPropertyValue('--c-secondary'),
                     data: data
                  }]
               },


               // Configuration options go here
               options: {
                  legend: {
                     labels: {
                        fontColor: base
                     }
                  },
                  scales: {
                     yAxes: [{
                        ticks: {
                           beginAtZero: true,
                           fontColor: base,
                           callback: function(value) {
                              return `${value} ${unit || ""}`
                           }
                        },
                        gridLines: {
                           color: baseHl
                        }
                     }],
                     xAxes: [{
                        ticks: {
                           fontColor: base
                        },
                        gridLines: {
                           color: baseHl
                        }
                     }]
                  }
               }
            });
         });
      }

    </script>
    <title>Dashboard</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>Dashboard</h1>

        <script th:src="@{/js/back.js}"></script>
        <div class="back" data-group="intern" data-name="Zurück zum Dashboard." data-insert="false"></div>
    </div>
</div>
<main class="sidebar-layout content-width">
    <nav th:replace="fragments/intern :: sidebar"></nav>
    <div>

        <h2>Buchhaltung</h2>
        <div class="grid xl">
            <section class="primary hero">
                <h3>Hauptkonto</h3>
                <h2>4080,00&nbsp;EUR</h2>
            </section>

            <section class="primary hero">
                <h3>Umsatzsteuerkonto</h3>
                <h2>-505,00&nbsp;EUR</h2>
            </section>

            <section class="spacer"></section>
            <section class="spacer"></section>
        </div>


        <h2>Verkauf</h2>
        <div class="grid xl">
            <section class="">
                <h3>Verkäufe (Anzahl)</h3>
                <canvas id="sales"></canvas>
                <script>
                  chart('sales', 'Verkäufe/Tag', [15, 12, 14, 8, 7])

                </script>
            </section>

            <section class="">
                <h3>Verkäufe (Umsatz)</h3>
                <canvas id="umsatz"></canvas>
                <script>
                  chart('umsatz', 'Umsatz/Tag', [1512.45, 1225.15, 1452.54, 814.54, 746.00], "EUR")

                </script>
            </section>

            <section class="">
                <h3>Neukunden</h3>
                <canvas id="Neukunden"></canvas>
                <script>
                  chart('Neukunden', 'Neukunden', [1, 1, 0, 5, 0], "")

                </script>
            </section>
            <section class="spacer"></section>
            <section class="spacer"></section>
        </div>

        <h2>Lager</h2>
        <div class="grid xl">
            <section class="">
                <h2>Lagerauslastung</h2>
                <canvas id="warehouse"></canvas>
                <script>
                  chart('warehouse', 'Lagerauslastung', [50, 30, 20, 80, 60], "%")

                </script>
            </section>

            <section class="">
                <h2>Lagereffizienz</h2>
                <canvas id="warehouse-ef"></canvas>
                <script>
                  chart('warehouse-ef', 'Lagereffizienz', [80, 70, 60, 75, 54], "%")

                </script>
            </section>
            <section class="spacer"></section>
            <section class="spacer"></section>
        </div>
    </div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>

</html>
