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

<!-- Content Header (Page header) -->
 <section class="content-header">
    <h1>
      Dashboard
     </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
      <li class="active">Dashboard</li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content">
    <!-- Small boxes (Stat box) -->
    <div class="row">
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua">
          <div class="inner">
            <h3>{{ $totalCertificates }}</h3>

            <p style="font-size: 16px; font-weight: bolder">Total Participants Enrolled</p>
          </div>
          <div class="icon">
            <i class="fa fa-users"></i>
          </div>
          <a href="{{ route('certificate.index')}}" class="small-box-footer">View List <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-green">
          <div class="inner">
            <h3>{{ $totalSchools }}</h3>

            <p style="font-size: 16px; font-weight: bolder">Total Schools Enrolled</p>
          </div>
          <div class="icon">
            <i class="fa fa-building"></i>
          </div>
          <a href="javaScript:void(0)" class="small-box-footer">Number of Schools onboarded <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-yellow">
          <div class="inner">
            <h3>{{ $totalUsers}}</h3>

            <p style="font-size: 16px; font-weight: bolder">Admin Users</p>
          </div>
          <div class="icon">
            <i class="ion ion-person-add"></i>
          </div>
          <a href="javaScript:void(0)" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-red">
          <div class="inner">
            <h3>BDIC</h3>

            <p style="font-size: 16px; font-weight: bolder">Training Centre</p>
          </div>
          <div class="icon">
            <i class="fa fa-group"></i>
          </div>
          <a href="https://bdic.ng/" class="small-box-footer" target="_blank">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
    </div>
    <!-- /.row -->
    <!-- Main row -->
    <div class="row">
      <!-- Left col -->

      <!-- right col -->
    </div>
    <!-- /.row (main row) -->

  </section>
  <!-- /.content -->
  @endsection