@extends('layouts.app')

@section('content')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css">

<script>
    var label = JSON.parse('null');
    var dataPSet = JSON.parse('null');
    var dataVSet = JSON.parse('null');
    var platform = JSON.parse('null');
    var platformPer = JSON.parse('null');
    var country = JSON.parse('null');
    var countryPer = JSON.parse('null');
</script>

            <!-- Page Header -->
            <div class="page-header row no-gutters py-4">
              <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
                <span class="text-uppercase page-subtitle">Dashboard</span>
                <h3 class="page-title">Website Overview</h3>
              </div>
            </div>
                      {{-- @if(auth()->user()->is_admin)
                     
                          @foreach($notifications as $notification)
                              <div class="alert alert-success" role="alert">
                                  [{{ $notification->created_at }}] User {{ $notification->data['message'] }}
                                </div>
                          @endforeach
                     @endif --}}
                  
            <!-- End Page Header -->
            <!-- Small Stats Blocks -->
            <div class="row">
              <div class="col-lg col-md-6 col-sm-6 mb-4">
                <div class="stats-small stats-small--1 card card-small">
                  <div class="card-body p-0 d-flex">
                    <div class="d-flex flex-column m-auto">
                      <div class="stats-small__data text-center">
                        <span class="stats-small__label text-uppercase">Active Users</span>
                      <h6 class="stats-small__value count my-3">{{ $data['activeUsers'] ?? 'N/A' }}</h6>
                      </div>
                    </div>
                    <canvas height="120" class="blog-overview-stats-small-1"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-lg col-md-6 col-sm-6 mb-4">
                <div class="stats-small stats-small--1 card card-small">
                  <div class="card-body p-0 d-flex">
                    <div class="d-flex flex-column m-auto">
                      <div class="stats-small__data text-center">
                        <span class="stats-small__label text-uppercase">New Users</span>
                        <h6 class="stats-small__value count my-3">{{ $data['summary']['newUsers'] ?? 0 }}</h6>
                      </div>
                      {{-- <div class="stats-small__data">
                        <span class="stats-small__percentage stats-small__percentage--increase">12.4%</span>
                      </div> --}}
                    </div>
                    <canvas height="120" class="blog-overview-stats-small-2"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-lg col-md-4 col-sm-6 mb-4">
                <div class="stats-small stats-small--1 card card-small">
                  <div class="card-body p-0 d-flex">
                    <div class="d-flex flex-column m-auto">
                      <div class="stats-small__data text-center">
                        <span class="stats-small__label text-uppercase">Users</span>
                        <h6 class="stats-small__value count my-3">{{ $data['summary']['users'] ?? '0' }}</h6>
                      </div>
                    </div>
                    <canvas height="120" class="blog-overview-stats-small-3"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-lg col-md-4 col-sm-6 mb-4">
                <div class="stats-small stats-small--1 card card-small">
                  <div class="card-body p-0 d-flex">
                    <div class="d-flex flex-column m-auto">
                      <div class="stats-small__data text-center">
                        <span class="stats-small__label text-uppercase">Page Views</span>
                      <h6 class="stats-small__value count my-3">{{ $data['summary']['pageViews'] ?? '0'}}</h6>
                      </div>
                    </div>
                    <canvas height="120" class="blog-overview-stats-small-4"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-lg col-md-4 col-sm-12 mb-4">
                <div class="stats-small stats-small--1 card card-small">
                  <div class="card-body p-0 d-flex">
                    <div class="d-flex flex-column m-auto">
                      <div class="stats-small__data text-center">
                        <span class="stats-small__label text-uppercase">Avg. Session Duration </span>
                        <h6 class="stats-small__value count my-3">{{$data['summary']['averageSession'] ?? '0' }}</h6>
                      </div>
                    </div>
                    <canvas height="120" class="blog-overview-stats-small-5"></canvas>
                  </div>
                </div>
              </div>
            </div>

            <!--Chart Week Summary-->
            <div class="row">
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-4">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Last Week Summary of Page Views</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="pageViews" style="max-height: 400px;"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-4">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Last Week Summary of Visitors</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="visitors" style="max-height: 400px;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <!--End Chart week summary -->

            <!--Chart Platform-->
            <div class="row mt-3">
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-4">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Device Platform</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="devices" style="max-height: 400px;"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-4">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Country Info</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="countries" style="max-height: 400px;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <!--End Chart Platform -->


    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <script src="{{asset('scripts/app/app-blog-overview.1.1.0.js')}}"></script>
    <script type="text/javascript">
        var pageViews = document.getElementById('pageViews');
        var visitors = document.getElementById('visitors');
        var devices = document.getElementById('devices');
        var countries = document.getElementById('countries');
        // console.log(label);
        var pageViewsChart = new Chart(pageViews, {
            type: 'line',
            data: {
                labels: label,
                datasets: [{
                    label: '# of Page Views',
                    data: dataPSet,
                    backgroundColor: 'rgba(440, 0, 0, 0.1)',
                    borderWidth: 1,
                }],
            },
        });
        var visitorsChart = new Chart(visitors, {
            type: 'line',
            data: {
                labels: label,
                datasets: [{
                    label: '# of Visitors',
                    data: dataVSet,
                    borderWidth: 1
                }],
                // options: options
            },
        });

        var deviceChart = new Chart(devices, {
            type: 'pie',
            data: {
                labels: platform,
                datasets: [{
                    label: '# of Platforms',
                    data: platformPer,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(69, 161, 255, 0.2)',
                    ],
                    borderColor: [
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgb(10, 132, 255)',
                    ],
                    borderWidth: 1
                }]
                // options: options
            },
        });

        var countryChart = new Chart(countries, {
            type: 'pie',
            data: {
                labels: country,
                datasets: [{
                    label: '# of Countries',
                    data: countryPer,
                    backgroundColor: [
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(215, 182, 0, 0.3)',
                        'rgba(69, 161, 255, 0.2)',
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgb(215, 182, 0)',
                        'rgb(10, 132, 255)',
                    ],
                    borderWidth: 1
                }]
                // options: options
            },
        });
    </script>
@endsection