@extends('layouts.app')
@section('titulo','Componentes')
@section('contenido')
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
  <h4><i class="fa fa-cogs"></i> Componentes</h4>
  <a href="{{ route('componentes.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="equipo_id" class="form-select"><option value="">— Equipo —</option>
    @foreach($equipos as $e)<option value="{{ $e->id }}" @selected($equipo_id==$e->id)>{{ $e->nombre }}</option>@endforeach
  </select></div>
  <div class="col-md-2"><button class="btn btn-outline-primary w-100"><i class="fa fa-filter"></i></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>Equipo</th><th>Área</th><th>Unidad</th><th>Activo</th><th></th></tr></thead><tbody>
@forelse($registros as $c)
<tr>
  <td><strong>{{ $c->codigo }}</strong></td>
  <td>{{ $c->nombre }}</td>
  <td>{{ optional($c->equipo)->nombre }}</td>
  <td>{{ optional(optional($c->equipo)->area)->nombre }}</td>
  <td>{{ $c->unidad }}</td>
  <td><span class="badge text-bg-{{ $c->activo?'success':'secondary' }}">{{ $c->activo?'Sí':'No' }}</span></td>
  <td class="text-end">
    <a href="{{ route('componentes.edit',$c) }}" class="btn btn-sm btn-outline-primary"><i class="fa fa-pen"></i></a>
    <form method="POST" action="{{ route('componentes.destroy',$c) }}" 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="7" class="text-muted text-center py-4">Sin componentes</td></tr> @endforelse
</tbody></table></div></div>
<div class="mt-2">{{ $registros->links() }}</div>
@endsection