@extends('layouts.master')

@section('css')
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/morris/morris.css')}}">
@endsection
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script> --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@section('content')
            <div class="container-fluid">

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="page-title-box">
                                    <h4 class="page-title">Dashboard</h4>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item active">
                                            Welcome to {{ config('app.name') }} Dashboard
                                        </li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->

                        <div class="row">
                                <div class="col-xl-3 col-md-6">
                                    <div class="card mini-stat bg-primary">
                                        <div class="card-body mini-stat-img">
                                            <div class="mini-stat-icon">
                                                <i class="mdi mdi-cube-outline float-right"></i>
                                            </div>
                                            <div class="text-white">
                                                <h6 class="text-uppercase mb-3">AUFTRÄGE</h6>
                                                <h4 class="mb-4">{{ count($ORDERCOUNT) }}</h4>
                                                {{-- <span class="badge badge-info"> +11% </span> <span class="ml-2">From previous period</span> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-md-6">
                                    <div class="card mini-stat bg-primary">
                                        <div class="card-body mini-stat-img">
                                            <div class="mini-stat-icon">
                                                <i class="mdi mdi-buffer float-right"></i>
                                            </div>
                                            <div class="text-white">
                                                <h6 class="text-uppercase mb-3">Einnahmen</h6>
                                                @php
                                                  $REVENUE =  $REVENUE->first();
                                                @endphp
                                                <h4 class="mb-4">{{ config('app.symbol') }}{{ number_format($REVENUE->total,2) }}</h4>
                                                {{-- <span class="badge badge-danger"> -29% </span> <span class="ml-2">From previous period</span> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-md-6">
                                    <div class="card mini-stat bg-primary">
                                        <div class="card-body mini-stat-img">
                                            <div class="mini-stat-icon">
                                                <i class="mdi mdi-tag-text-outline float-right"></i>
                                            </div>
                                            <div class="text-white">
                                                <h6 class="text-uppercase mb-3">GESAMT KUNDE
                                                </h6>
                                                <h4 class="mb-4">{{ COUNT($Customer) }}</h4>
                                                {{-- <span class="badge badge-warning"> 0% </span> <span class="ml-2">From previous period</span> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-md-6">
                                    <div class="card mini-stat bg-primary">
                                        <div class="card-body mini-stat-img">
                                            <div class="mini-stat-icon">
                                                <i class="mdi mdi-briefcase-check float-right"></i>
                                            </div>
                                            <div class="text-white">
                                                <h6 class="text-uppercase mb-3">Produkt verkauft
                                                </h6>
                                                <h4 class="mb-4">{{ count($SOLD) }}</h4>
                                                {{-- <span class="badge badge-info"> +89% </span> <span class="ml-2">From previous period</span> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                  <br>
                                {{-- <div class="col-xl-12 col-md-6">
                                    <canvas id="myChart" height="100px"></canvas>
                                </div>

                                <div class="col-xl-6 col-md-6">
                                    <canvas id="MonthRevenu" height="100px"></canvas>
                                </div>
                                <div class="col-xl-6 col-md-6">
                                    <canvas id="myChart2" height="100px">ddd</canvas>
                                </div> --}}

                                <div class="col-xl-6 col-md-6">
                                    <div class="card mini-stat">
                                        <div class="pie-chart-container">
                                            <canvas id="myChart" height=""></canvas>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-6 col-md-6">
                                    <div class="card mini-stat">
                                        <div class="pie-chart-container">
                                            <canvas id="MonthRevenu" height=""></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end row -->
                    </div> <!-- container-fluid -->
@endsection

@section('script')
<script type="text/javascript">

    var labels =  {{ Js::from($labels) }};
    var users =  {{ Js::from($data) }};

    const data = {
      labels: labels,
      datasets: [{
        label: 'Neukunde nach Monat',
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 205, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(201, 203, 207, 0.2)'
            ],
            borderColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
            'rgb(54, 162, 235)',
            'rgb(153, 102, 255)',
            'rgb(201, 203, 207)'
            ],
            borderWidth: 1,
        data: users,
      }]
    };

    const config = {
      type: 'bar',
      data: data,
      options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
    };

    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );

//

    var labels =  {{ Js::from($Revenulabels) }};
    var Revenudata =  {{ Js::from($Revenudata) }};

    const datas = {
      labels: labels,
      datasets: [{
        label: 'Einnahmen nach Monat',
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 205, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(201, 203, 207, 0.2)'
            ],
            borderColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
            'rgb(54, 162, 235)',
            'rgb(153, 102, 255)',
            'rgb(201, 203, 207)'
            ],
            borderWidth: 1,
        data: Revenudata,
      }]
    };

    const configs = {
      type: 'line',
      data: datas,
      options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
    };

    const MonthRevenu = new Chart(
      document.getElementById('MonthRevenu'),
      configs
    );

</script>
		<!--Morris Chart-->
        <script src="{{ URL::asset('assets/plugins/morris/morris.min.js')}}"></script>
        <script src="{{ URL::asset('assets/plugins/raphael/raphael-min.js')}}"></script>

		<script src="{{ URL::asset('assets/pages/dashboard.js')}}"></script>
@endsection