@extends('sistema.layouts.default')
@section('content')
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <!-- A "row" deve envolver o loop para permitir colunas lado a lado -->
        <div class="row">
          @foreach ($dispositivos as $dispositivo)
            <!-- Definimos col-md-4 para exibir 3 por linha, ou col-lg-3 para 4 por linha -->
            <div class="col-md-4 col-sm-6 mb-4">
              <div class="card h-100">
                <div class="card-body">
                  
                  @if ($dispositivo->status == 'ACTIVE')
                    <div class="card text-white bg-success h-100" style="border-radius: 15px;">
                      <div class="card-header"><i class="fas fa-microchip"></i><span class="hide-menu"> Dispositivo</span></div>
                      <div class="card-body">
                        <h5 class="card-title">Serial: {{ mb_substr($dispositivo->serial, 0, 5) }}</h5>
                        <p class="card-text">Status: {{ $dispositivo->status }}</p>
                      </div>
                    </div>

                  @elseif ($dispositivo->status === 'PENDING')
                    <div class="card text-white bg-warning h-100" style="border-radius: 15px;">
                      <div class="card-header"><i class="fas fa-microchip"></i><span class="hide-menu"> Dispositivo</span></div>
                      <div class="card-body">
                        <h5 class="card-title">Serial: {{ mb_substr($dispositivo->serial, 0, 5) }}</h5>
                        <p class="card-text">Status: {{ $dispositivo->status }}</p>
                      </div>
                    </div>

                  @elseif ($dispositivo->status === 'BLOCKED')
                    <div class="card text-white bg-danger h-100" style="border-radius: 15px;">
                      <div class="card-header"><i class="fas fa-microchip"></i><span class="hide-menu"> Dispositivo</span></div>
                      <div class="card-body">
                        <h5 class="card-title">Serial: {{ mb_substr($dispositivo->serial, 0, 5) }}</h5>
                        <p class="card-text">Status: {{ $dispositivo->status }}</p>
                      </div>
                    </div>
                  @endif

                </div>
              </div>
            </div>
          @endforeach
        </div> <!-- Fim da row interna -->
      </div>
    </div>
  </div>
@endsection