@extends('layout')
@section('index-content')
 <div id="content-wrapper">
    <div class="container-fluid">
      <!-- Breadcrumbs-->
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="#">Dashboard</a>
        </li>
        <li class="breadcrumb-item active">Overview</li>
      </ol>

      <!-- Icon Cards-->
      <div class="row">
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-primary o-hidden h-100">
            <div class="card-body">
              <div class="card-body-icon">
                <i class="fa fa-box"></i>
              </div>
              <div class="mr-5">{{$packages}} Packages!</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="{{route('package')}}">
              <span class="float-left">View Details</span>
              <span class="float-right">
                <i class="fas fa-angle-right"></i>
              </span>
            </a>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-warning o-hidden h-100">
            <div class="card-body">
              <div class="card-body-icon">
                <i class="fas fa-fw fa-user"></i>
              </div>
              <div class="mr-5">{{$visitors}} Visitors!</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="{{route('visitor')}}">
              <span class="float-left">View Details</span>
              <span class="float-right">
                <i class="fas fa-angle-right"></i>
              </span>
            </a>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-success o-hidden h-100">
            <div class="card-body">
              <div class="card-body-icon">
                <i class="fab fa-fort-awesome"></i>
              </div>
              <div class="mr-5">{{$events}} Upcoming Events!</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="{{route('event')}}">
              <span class="float-left">View Details</span>
              <span class="float-right">
                <i class="fas fa-angle-right"></i>
              </span>
            </a>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-danger o-hidden h-100">
            <div class="card-body">
              <div class="card-body-icon">
                <i class="fa fa-search"></i>
              </div>
              <div class="mr-5">{{$lost}} Lost and Found!</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="{{route('LostFoundTopicsAdmin')}}">
              <span class="float-left">View Details</span>
              <span class="float-right">
                <i class="fas fa-angle-right"></i>
              </span>
            </a>
          </div>
        </div>


      </div>
      <div class="row">
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-danger o-hidden h-100">
            <div class="card-body">
              <div class="card-body-icon">
                <i class="fa fa-car"></i>
              </div>
              <div class="mr-5">{{$parking}} Available Parking!</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="#">
              <span class="float-left">View Details</span>
              <span class="float-right">
                <i class="fas fa-angle-right"></i>
              </span>
            </a>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-success o-hidden h-100">
            <div class="card-body">
              <div class="card-body-icon">
                <i class="fa fa-bullhorn"></i>
              </div>
              <div class="mr-5">{{$announcement}} Announcement!</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="{{route('announcement')}}">
              <span class="float-left">View Details</span>
              <span class="float-right">
                <i class="fas fa-angle-right"></i>
              </span>
            </a>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-warning o-hidden h-100">
            <div class="card-body">
              <div class="card-body-icon">
                <i class="fa fa-hammer"></i>
              </div>
              <div class="mr-5">{{$repair}} Repair Request!</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="{{route('repair')}}">
              <span class="float-left">View Details</span>
              <span class="float-right">
                <i class="fas fa-angle-right"></i>
              </span>
            </a>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-primary o-hidden h-100">
            <div class="card-body">
              <div class="card-body-icon">
               <i class="fas fa-book"></i>
              </div>
              <div class="mr-5">{{$books}} Lending Books!</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="{{route('lendings')}}">
              <span class="float-left">View Details</span>
              <span class="float-right">
                <i class="fas fa-angle-right"></i>
              </span>
            </a>
          </div>
        </div>
      </div>

      </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $('#li_dashboard').addClass('active');
  });
</script>
@stop