@extends('adminlte::page')
@section('content_header')
    <h1 class="m-0 text-dark">Dashboard</h1>
@stop

@section('content')
    <!--<div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <p class="mb-0">You are logged in!</p>
                </div>
            </div>
        </div>
    </div>-->
    <div class="row">
        <div class="col-lg-3 col-6">
            <div class="small-box bg-warning">
              <div class="inner">
                <h3>{{$active_user_count}}</h3>
                <p>Active User Registrations</p>
              </div>
              <div class="icon">
                <i class="fas fa-address-card"></i>
              </div>

              <!--<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>-->
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-6">
            <div class="chart-container">
                <div class="pie-chart-container">
                    <canvas id="pie-chart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="chart-container">
                <div class="bar-chart-container">
                    <canvas id="bar-chart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <br><br>
    <div class="row">
        <div class="col-6">
            <div class="chart-container">
                <div class="doughnut-chart-container">
                    <canvas id="doughnut-chart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="chart-container">
                <div class="bar-chart-container">
                    <canvas id="bar-chart_role"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
      /*
        $(function(){
              //get the pie chart canvas
              var cData = JSON.parse(`<?php echo $datajson; ?>`);
              //var cData = "";
              var ctx = $("#pie-chart");
         
              //pie chart data
              var data = {
                labels: cData.label,
                datasets: [
                  {
                    label: "Users Count",
                    data: cData.data,
                    backgroundColor: [
                      "#DEB887",
                      "#A9A9A9",
                      "#DC143C",
                      "#F4A460",
                      "#2E8B57",
                      "#1D7A46",
                      "#CDA776",
                    ],
                    borderColor: [
                      "#CDA776",
                      "#989898",
                      "#CB252B",
                      "#E39371",
                      "#1D7A46",
                      "#F4A460",
                      "#CDA776",
                    ],
                    borderWidth: [1, 1, 1, 1, 1,1,1]
                  }
                ]
              };
         
              //options
              var options = {
                responsive: true,
                title: {
                  display: true,
                  position: "top",
                  text: "Active Registered Users",
                  fontSize: 18,
                  fontColor: "#111"
                },
                legend: {
                  display: true,
                  position: "bottom",
                  labels: {
                    fontColor: "#333",
                    fontSize: 16
                  }
                }
              };
         
              //create Pie Chart class object
              var chart1 = new Chart(ctx, {
                type: "pie",
                data: data,
                options: options
              });
         
        });

        $(function(){
              //get the pie chart canvas
              var cData = JSON.parse(`<?php echo $datajson; ?>`);
              //var cData = "";
              var ctx = $("#bar-chart");
         
              //pie chart data
              var data = {
                labels: cData.label,
                datasets: [
                  {
                    label: "Users Count",
                    data: cData.data,
                    backgroundColor: [
                      "#DEB887",
                      "#A9A9A9",
                      "#DC143C",
                      "#F4A460",
                      "#2E8B57",
                      "#1D7A46",
                      "#CDA776",
                    ],
                    borderColor: [
                      "#CDA776",
                      "#989898",
                      "#CB252B",
                      "#E39371",
                      "#1D7A46",
                      "#F4A460",
                      "#CDA776",
                    ],
                    borderWidth: [1, 1, 1, 1, 1,1,1]
                  }
                ]
              };
         
              //options
              var options = {
                responsive: true,
                title: {
                  display: true,
                  position: "top",
                  text: "Active Registered Users",
                  fontSize: 18,
                  fontColor: "#111"
                },
                legend: {
                  display: true,
                  position: "bottom",
                  labels: {
                    fontColor: "#333",
                    fontSize: 16
                  }
                }
              };
         
              //create Pie Chart class object
              var chart1 = new Chart(ctx, {
                type: "bar",
                data: data,
                options: options
              });
         
        });

        $(function(){
              //get the pie chart canvas
              var cData = JSON.parse(`<?php echo $datajson; ?>`);
              //var cData = "";
              var ctx = $("#doughnut-chart");
         
              //pie chart data
              var data = {
                labels: cData.label,
                datasets: [
                  {
                    label: "Users Count",
                    data: cData.data,
                    backgroundColor: [
                      "#74eda3",
                      "#67f0dd",
                      "#c69af5",
                      "#c476a6",
                      "#f2ca99",
                      "#f5a795",
                      "#cc6272",
                    ],
                    borderColor: [
                      "#CDA776",
                      "#989898",
                      "#CB252B",
                      "#E39371",
                      "#1D7A46",
                      "#F4A460",
                      "#CDA776",
                    ],
                    borderWidth: [1, 1, 1, 1, 1,1,1]
                  }
                ]
              };
         
              //options
              var options = {
                responsive: true,
                title: {
                  display: true,
                  position: "top",
                  text: "Active Registered Users",
                  fontSize: 18,
                  fontColor: "#111"
                },
                legend: {
                  display: true,
                  position: "bottom",
                  labels: {
                    fontColor: "#333",
                    fontSize: 16
                  }
                }
              };
         
              //create Pie Chart class object
              var chart1 = new Chart(ctx, {
                type: "doughnut",
                data: data,
                options: options
              });
         
        });

        $(function(){
              //get the pie chart canvas
              var cData = JSON.parse(`<?php echo $datajson_bar; ?>`);
              //var cData = "";
              var ctx = $("#bar-chart_role");
         
              //pie chart data
              var data = {
                labels: cData.label,
                datasets: [
                  {
                    label: "Roles",
                    data: cData.data,
                    backgroundColor: [
                      "#DEB887",
                      "#A9A9A9",
                      "#DC143C",
                      "#F4A460",
                      "#2E8B57",
                      "#1D7A46",
                      "#CDA776",
                      "#c476a6",
                      "#f2ca99",
                      "#f5a795",
                      "#cc6272",
                      "#74eda3",
                      "#67f0dd",
                      "#c69af5",
                    ],
                    borderColor: [
                      "#CDA776",
                      "#989898",
                      "#CB252B",
                      "#E39371",
                      "#1D7A46",
                      "#F4A460",
                      "#CDA776",
                      "#74eda3",
                      "#67f0dd",
                      "#c69af5",
                      "#74eda3",
                      "#67f0dd",
                      "#c69af5",
                    ],
                    borderWidth: [1, 1, 1, 1, 1,1,1]
                  }
                ]
              };
         
              //options
              var options = {
                responsive: true,
                title: {
                  display: true,
                  position: "bottom",
                  text: "Roles",
                  fontSize: 18,
                  fontColor: "#111"
                },
                legend: {
                  display: true,
                  position: "bottom",
                  labels: {
                    fontColor: "#333",
                    fontSize: 16
                  }
                }
              };
         
              //create Pie Chart class object
              var chart1 = new Chart(ctx, {
                type: "bar",
                data: data,
                options: options
              });
         
        });
        */
    </script>
@stop