@extends('layouts.admin')
@section('content')

<style type="text/css">
  .widget,
  .widget.widget-note,
  .widget-note {
    background-color: #f3fbf7;
    max-width: 100%;
    padding: 14px;
    margin: 35px 0;
    border-radius: 9px;
    overflow-wrap: break-word;
    border-left: 5px solid #5ac891;
    font-size: 1rem;
    color: rgba(0, 0, 0, .87);
  }

  .widget.widget-warning {
    background-color: #f2564d;
    border-left: 5px solid #6b0d08;
    color: white;
  }

  .widget.widget-important {
    background-color: #fef7ed;
    border-left: 5px solid #f3a12c;
  }
</style>
<script>
  $(document).ready(function() {
    // seo ecommerce start
    $(function() {

      var chart = AmCharts.makeChart("r-barchart", {
        "type": "serial",
        "theme": "light",
        "marginTop": 0,
        "marginRight": 0,
        "dataProvider": [],
        "valueAxes": [{
          "axisAlpha": 0,
          "gridAlpha": 0,
          "dashLength": 6,
          "position": "left"
        }],
        "graphs": [{
          "id": "g1",
          "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
          "bullet": "round",
          "bulletSize": 8,
          "fillAlphas": 0.1,
          "lineColor": "#448aff",
          "lineThickness": 2,
          "negativeLineColor": "#ff5252",
          "type": "smoothedLine",
          "valueField": "value"
        }],
        "chartScrollbar": {
          "graph": "g1",
          "gridAlpha": 0,
          "color": "#888888",
          "scrollbarHeight": 55,
          "backgroundAlpha": 0,
          "selectedBackgroundAlpha": 0.1,
          "selectedBackgroundColor": "#888888",
          "graphFillAlpha": 0,
          "autoGridCount": true,
          "selectedGraphFillAlpha": 0,
          "graphLineAlpha": 0.2,
          "graphLineColor": "#c2c2c2",
          "selectedGraphLineColor": "#888888",
          "selectedGraphLineAlpha": 1
        },
        "chartCursor": {
          "categoryBalloonDateFormat": "YYYY-MM",
          "cursorAlpha": 0,
          "valueLineEnabled": true,
          "valueLineBalloonEnabled": true,
          "valueLineAlpha": 0.5,
          "fullWidth": true
        },
        "dataDateFormat": "YYYY-MM",
        "categoryField": "month",
        "categoryAxis": {
          "minPeriod": "YYYY-MM",
          "gridAlpha": 0,
          "parseDates": false,
        },
      });
      chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.1), Math.round(chart.dataProvider.length * 1));
    });
    // seo ecommerce end
  });
</script>

<section class="">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-4 ">
        <div class="card2 box-text text-center">
          <i class="fa fa-users blue" aria-hidden="true"></i>
          <h2 class="blue">{{$total_users}} Total Users</h2>
          <p>{{$total_active_candidates}} active | {{$total_pending_candidates}} inactive</p>
          <button type="button" class="btn btn-primary blue-bg border-none">Register Users</button>
        </div>
      </div>
      <div class="col-lg-4 text-center">
        <div class="card2 box-text">
          <i class="fa fa-video-camera green" aria-hidden="true"></i>
          <h2 class="green">{{$total_videos}} Total Videos</h2>
          <p>{{$total_active_videos}} active | {{$total_inactive_videos}} disabled | {{$total_flagged_videos}} Flagged</p>
          <button type="button" class="btn btn-success btn-shadow green-bg border-none">Published Videos</button>
        </div>
      </div>
      <div class="col-lg-4 text-center">
        <div class="card2 box-text">
          <i class="fa fa-briefcase red" aria-hidden="true"></i>
          <h2 class="red">{{$total_likes+ $total_comments+ $total_views}} User Engagement</h2>
          <p>{{$total_likes}} Likes | {{$total_comments}} Comments | {{$total_views}} Views</p>
          <button type="button" class="btn btn-danger btn-shadow red-bg border-none">Engagement</button>
        </div>
      </div>
    </div>
  </div>
</section>



<div class="clearfix"></div>
<br>

<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6">
        <div class="card table-card customers-profile">
          <h3>Registration Analytics</h3>
          <div class="card-body">
            <div id="r-barchart" style="height: 375px"></div>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="card table-card customers-profile" style="height: 484px;">
          <h3>Version Status <i class="fa fa-refresh"></i></h3>
          <div class="card-body">
            @if (session('success'))
            <div class="alert alert-success" role="alert">
              {{ session('success') }}
            </div>
            @endif