@extends('layouts.admin')

@section('content')
    <div class="row">
        <div class="col-sm-3">
            <div class="media-body">
                <h3>{{ $users }}</h3>
                <h5>Registered Users</h5>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="media-body">
                <h3>{{ $DiaryCount }}</h3>
                <h5>Total Journal Created</h5>
            </div>
        </div> 

        <div class="col-sm-3">
            <div class="media-body">
                <h3>{{ $used_capacity }}</h3>
                <h5>Used Capacity</h5>
            </div>
        </div> 
    </div>

    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12" style="margin-top: 4em;">
            <canvas id="mybarChart" style="width:100%;"></canvas>
        </div>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
        <script>
            var ctx = document.getElementById("mybarChart").getContext("2d");

            var mybarChart = new Chart(ctx, {
              type: 'bar',
              data: {
                labels: ['1', '2', '3'],
                datasets: [{
                  label: 'Registered Users',
                  backgroundColor: "#000080",
                  data: ['{{ $users }}',0,0]
                }, {
                  label: 'Total Journals Created',
                  backgroundColor: "#d3d3d3",
                  data: [0,'{{ $DiaryCount }}',0]
                }, {
                  label: 'Used Capacity',
                  backgroundColor: "#add8e6",
                  data: [0,0,'$used_capacity']
                }]
              },
            
              options: {
                legend: {
                  display: true,
                  position: 'top',
                  labels: {
                    fontColor: "#000080",
                  }
                },
                scales: {
                  yAxes: [{
                    ticks: {
                      beginAtZero: true
                    }
                  }]
                }
              }
            });
        </script>
    </div>
@endsection