@extends('admin.layouts.main')
@section('title')
Dashboard
@endsection
@section('content')

<script>
  documentReady(function() {
    app.addCSS([
      'theme/plugins/jqvmap/jqvmap.css',
      'theme/plugins/chart.js/Chart.css',
      'theme/plugins/daterangepicker/daterangepicker.css',
      'theme/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css'
    ]);
    app.addJS([
      'theme/plugins/jquery-ui/jquery-ui.min.js',
      'theme/plugins/moment/moment.min.js',
      'theme/plugins/chart.js/Chart.min.js',
      'theme/plugins/jqvmap/jquery.vmap.min.js',
      'theme/plugins/jqvmap/maps/jquery.vmap.world.js',
      'theme/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js',
      'theme/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js',
      'theme/plugins/sparklines/sparkline.js'
    ]);
  });
</script>

<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        @csrf
        <h1 class="m-0 text-dark">Dashboard</h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="admin/dashboard" class="noroute">Dashboard</a></li>
          <li class="breadcrumb-item active">Dashboard</li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Info boxes -->

<div class="row">
</div>
<section class="content">
  <div class="container-fluid">
    <!-- Small boxes (Stat box) -->
    <div class="row">
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-info">
          <div class="inner">
            <h3>{{$totalUser}}</h3>
            <p>Total User</p>
          </div>
          <div class="icon">
            <i class="ion ion-bag"></i>
          </div>
          <a href="{{route('admin/user')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-success">
          <div class="inner">
            <h3>{{$activeUser}}</h3>

            <p>Active User</p>
          </div>
          <div class="icon">
            <i class="ion ion-stats-bars"></i>
          </div>
          <a href="{{route('admin/user')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-warning">
          <div class="inner">
            <h3>{{$deactiveUser}}</h3>

            <p>Deactive User</p>
          </div>
          <div class="icon">
            <i class="ion ion-person-add"></i>
          </div>
          <a href="{{route('admin/user')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-danger">
          <div class="inner">
            <h3>{{$totalUser}}</h3>

            <p>Total User</p>
          </div>
          <div class="icon">
            <i class="ion ion-pie-graph"></i>
          </div>
          <a href="{{route('admin/user')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
    </div>
  </div>
</section>
<div class="row">
  <!-- Left col -->
  <section class="col-lg-7 connectedSortable">
    <!-- Custom tabs (Charts with tabs)-->
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">
          <i class="fas fa-chart-pie mr-1"></i>
          Sales
        </h3>
        <div class="card-tools">
          <ul class="nav nav-pills ml-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#revenue-chart" data-toggle="tab">Area</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#sales-chart" data-toggle="tab">Donut</a>
            </li>
          </ul>
        </div>
      </div><!-- /.card-header -->
      <!-- <div class="card-body"> -->