@extends('adminlte::layouts.app')

@section('htmlheader_title')
  {{ trans('Dashboard') }}
@endsection

@section('contentheader_title')
  {{ trans('Dashboard') }}
@endsection


@section('main-content')
  <div class="container-fluid spark-screen">
    <div class="row">
        
        @if (Session::has('message'))
          <div class="col-lg-12 alert alert-info">{!! Session::get('message') !!}</div>
        @endif
        @if (Session::has('error'))
          <div class="col-lg-12 alert alert-danger">{!! Session::get('error') !!}</div>
        @endif
        @if (Session::has('success'))
          <div class="col-lg-12 alert alert-success">{!! Session::get('success') !!}</div>
        @endif

        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-aqua">
            <div class="inner">
              <h3>150</h3>

              <p><!-- New Orders --></p>
            </div>
            <div class="icon">
              <i class="ion ion-bag"></i>
            </div>
            <a href="#" 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-green">
            <div class="inner">
              <h3>53<sup style="font-size: 20px">%</sup></h3>

              <p><!-- Bounce Rate --></p>
            </div>
            <div class="icon">
              <i class="ion ion-stats-bars"></i>
            </div>
            <a href="#" 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-yellow">
            <div class="inner">
              <h3>44</h3>

              <p><!-- User Registrations --></p>
            </div>
            <div class="icon">
              <i class="ion ion-person-add"></i>
            </div>
            <a href="#" 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>65</h3>

              <p><!-- Unique Visitors --></p>
            </div>
            <div class="icon">
              <i class="ion ion-pie-graph"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
    </div>
@endsection