@extends('plantilla')

@section('seccion')


<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0">Inicio</h1>
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">Dashboard v2</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <!-- Info boxes -->
      <div class="row">
        <div class="col-12 col-sm-6 col-md-3">
          <div class="info-box">
            <span class="info-box-icon bg-secondary elevation-1"><i class="fas fa-laptop"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">LAPTOPS LIBRES</span>
              <span class="info-box-number">{{$TotalLaptopsLibres}}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-12 col-sm-6 col-md-3">
          <div class="info-box mb-3">
            <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-laptop-house"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">LAPTOPS ASIGNADAS</span>
              <span class="info-box-number">{{$TotalLaptopsOcupadas}}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix hidden-md-up"></div>

        <div class="col-12 col-sm-6 col-md-3">
          <div class="info-box mb-3">
            <span class="info-box-icon bg-success elevation-1"><i class="fas fa-mobile"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">CELULARES LIBRES</span>
              <span class="info-box-number">{{$TotalCelularesLibres}}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-12 col-sm-6 col-md-3">
          <div class="info-box mb-3">
            <span class="info-box-icon bg-primary elevation-1"><i class="fas fa-mobile-alt"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">CELULARES ASIGNADOS</span>
              <span class="info-box-number">{{$TotalCelularesOcupados}}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

      <div class="row">
        <div class="col-12 col-sm-6 col-md-6">
            <!-- Info Boxes Style 2 -->
            <div class="info-box mb-3 bg-info">
              <span class="info-box-icon"><i class="fas fa-tag"></i></span>
              <div class="info-box-content">
                <span class="info-box-text">Total inventario</span>
                <span class="info-box-number">{{ $TotalEquiposGeneral }}</span>
              </div>
              <!-- /.info-box-content -->
            </div>
          </div>
          <!-- /.col -->
          <div class="col-12 col-sm-6 col-md-6">
            <!-- Info Boxes Style 2 -->
            <div class="info-box mb-3 bg-warning">
              <span class="info-box-icon"><i class="fas fa-wrench"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">Equipos en observación</span>
                <span class="info-box-number">0</span>
              </div>
              <!-- /.info-box-content -->
            </div>
          </div>
          <!-- /.col -->
      </div>
      <!-- /.row -->
            
     
    </div><!--/. container-fluid -->
  </section>
  <!-- /.content -->

  @endsection