@extends('layouts.app')
@section('titulo','Sistemas')
@section('contenido')
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
  <h4><i class="fa fa-sitemap"></i> Sistemas</h4>
  <a href="{{ route('sistemas.create') }}" class="btn btn-primario"><i class="fa fa-plus"></i> Nuevo</a>
</div>
<form method="GET" class="row g-2 mb-3">
  <div class="col-md-4"><input name="q" value="{{ $busqueda }}" class="form-control" placeholder="Buscar..."></div>
  <div class="col-md-4">
    <select name="area_id" class="form-select"><option value="">— Todas las áreas —</option>
      @foreach($areas as $a)<option value="{{ $a->id }}" @selected($area_id==$a->id)>{{ $a->nombre }}</option>@endforeach
    </select>
  </div>
  <div class="col-md-2"><button class="btn btn-outline-primary w-100"><i class="fa fa-filter"></i> Filtrar</button></div>
</form>
<div class="card"><div class="table-responsive"><table class="table table-hover mb-0">
<thead><tr><th>Código</th><th>Nombre</th><th>Área</th><th>Equipos</th><th>Activo</th><th></th></tr></thead><tbody>
@forelse($registros as $s)
<tr>
  <td><strong>{{ $s->codigo }}</strong></td>
  <td>{{ $s->nombre }}</td>
  <td>{{ optional($s->area)->nombre }}</td>
  <td>{{ $s->equipos_count }}</td>
  <td><span class="badge text-bg-{{ $s->activo?'success':'secondary' }}">{{ $s->activo?'Sí':'No' }}</span></td>
  <td class="text-end">
    <a href="{{ route('sistemas.edit',$s) }}" class="btn btn-sm btn-outline-primary"><i class="fa fa-pen"></i></a>
    <form method="POST" action="{{ route('sistemas.destroy',$s) }}" class="d-inline" onsubmit="return confirm('¿Eliminar?');">
      @csrf @method('DELETE')<button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i></button></form>
  </td>
</tr>
@empty
<tr><td colspan="6" class="text-muted text-center py-4">Sin sistemas</td></tr>
@endforelse
</tbody></table></div></div>
<div class="mt-2">{{ $registros->links() }}</div>
@endsection