@extends('admin.partial.template-full')

@section('section')
  <div class="title">
    <h3 class="font-weight-bold">Dashboard</h3>
  </div>

  <hr>

  <div class="row">
    <div class="col-md-4">
      <div class="card" style="min-height:125px">
        <div class="card-body">
          <p class="small text-uppercase font-weight-bold text-muted">Alerts</p>
          <p class="h2 mb-0">0</p>
        </div>
        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="[0,0]"></canvas>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card" style="min-height:125px">
        <div class="card-body">
          <p class="small text-uppercase font-weight-bold text-muted">Failed Jobs (24h)</p>
          <p class="h2 mb-0">{{$data['failedjobs']['count']}}</p>
        </div>
        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['failedjobs']['graph']}}"></canvas>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card" style="min-height:125px">
        <div class="card-body">
          <p class="small text-uppercase font-weight-bold text-muted">Reports</p>
          <p class="h2 mb-0" title="{{$data['reports']['count']}}" data-toggle="tooltip">{{$data['reports']['count']}}</p>
        </div>
        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['reports']['graph']}}"></canvas>
      </div>
    </div>
  </div>

  <div class="row mt-4">
    <div class="col-md-4">
      <div class="card" style="min-height:125px">
        <div class="card-body">
          <p class="small text-uppercase font-weight-bold text-muted">Statuses</p>
          <p class="h2 mb-0" title="{{$data['statuses']['count']}}" data-toggle="tooltip">{{$data['statuses']['count']}}</p>
        </div>
        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['statuses']['graph']}}"></canvas>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card" style="min-height:125px">
        <div class="card-body">
          <p class="small text-uppercase font-weight-bold text-muted">Replies</p>
          <p class="h2 mb-0" title="{{$data['replies']['count']}}" data-toggle="tooltip">{{$data['replies']['count']}}</p>
        </div>
        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['replies']['graph']}}""></canvas>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card" style="min-height:125px">
        <div class="card-body">
          <p class="small text-uppercase font-weight-bold text-muted">Shares (Reblogs)</p>
          <p class="h2 mb-0">{{$data['shares']['count']}}</p>
        </div>
        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['shares']['graph']}}"></canvas>
      </div>
    </div>
  </div>

  <div class="row mt-4">
    <div class="col-md-4">
      <div class="card" style="min-height:125px">
        <div class="card-body">
          <p class="small text-uppercase font-weight-bold text-muted">Likes</p>
          <p class="h2 mb-0">{{$data['likes']['count']}}</p>
        </div>
        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['likes']['graph']}}"></canvas>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card" style="min-height:125px">
        <div class="card-body">
          <p class="small text-uppercase font-weight-bold text-muted">Profiles</p>
          <p class="h2 mb-0">{{$data['profiles']['count']}}</p>
        </div>
        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['profiles']['graph']}}"></canvas>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card" style="min-height:125px">
        <div class="card-body">
          <p class="small text-uppercase font-weight-bold text-muted">Users</p>
          <p class="h2 mb-0">{{$data['users']['count']}}</p>
        </div>
        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['users']['graph']}}"></canvas>
      </div>
    </div>
  </div>

  <div class="row mt-4">
    <div class="col-md-4">
      <div class="card" style="min-height:125px">
        <div class="card-body">
          <p class="small text-uppercase font-weight-bold text-muted">Remote Instances</p>
          <p class="h2 mb-0">{{$data['instances']['count']}}</p>
        </div>
        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['instances']['graph']}}"></canvas>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card" style="min-height:125px">
        <div class="card-body">
          <p class="small text-uppercase font-weight-bold text-muted">Photos Uploaded</p>
          <p class="h2 mb-0">{{$data['media']['count']}}</p>
        </div>
        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['media']['graph']}}"></canvas>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card" style="min-height:125px">
        <div class="card-body">
          <p class="small text-uppercase font-weight-bold text-muted">Storage Used</p>
          <p class="human-size mb-0" data-bytes="{{$data['storage']['count']}}">{{$data['storage']['count']}} bytes</p>
        </div>
        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['storage']['graph']}}"></canvas>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" integrity="sha256-oSgtFCCmHWRPQ/JmR4OoZ3Xke1Pw4v50uh6pLcu+fIc=" crossorigin="anonymous"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.human-size').each(function(d,a) {
        let el = $(a);
        let size = el.data('bytes');
        el.addClass('h2');
        el.text(filesize(size, {round: 0}));
      });
      $('.sparkline').each(function() {
          var ctx = $(this).get(0).getContext("2d");
          var myNewChart = new Chart(ctx);
          var chartData = JSON.parse($(this).attr('data-chart_values'));
          var data = {};
          var labels = [];
          var datasets = {};
          for (var i = 0; i < chartData.length; i++) {
            labels.push('');
          }
          datasets['data'] = chartData;
          datasets['backgroundColor'] = '#ffffff';
          data['labels'] = labels;
          data['datasets'] = [datasets];
          new Chart(ctx, {
            type: 'line',
            data: data,
            options: {
              responsive: true,
              legend: {
                display: false
              },
              elements: {
                line: {
                  borderColor: '#08d',
                  borderWidth: 1
                },
                point: {
                  radius: 0
                }
              },
              tooltips: {
                enabled: false
              },
              scales: {
                yAxes: [
                  {
                    display: false
                  }
                ],
                xAxes: [
                  {
                    display: false
                  }
                ]
              }
            }
          });
      })
    });
  </script>
@endpush