<div class="container-fluid">
    <h4 class="fw-bold mb-4"> Gestión de Equipos</h4>

    @if (session()->has('mensaje'))
        <div class="alert alert-success shadow-sm">{{ session('mensaje') }}</div>
    @endif

    <!-- Formulario de Registro / Edición -->
    <form wire:submit.prevent="{{ $modoEdicion ? 'actualizar' : 'guardar' }}" class="bg-light p-3 rounded shadow-sm mb-4">
        <div class="row g-3 mb-2">
            <div class="col-md-4">
                <input type="text" class="form-control" placeholder="Código" wire:model="codigo">
                @error('codigo') <small class="text-danger">{{ $message }}</small> @enderror
            </div>
            <div class="col-md-8">
                <input type="text" class="form-control" placeholder="Descripción" wire:model="descripcion">
                @error('descripcion') <small class="text-danger">{{ $message }}</small> @enderror
            </div>
        </div>

        <div class="row g-3 mb-2">
            <div class="col-md-4">
                <input type="text" class="form-control" placeholder="Marca" wire:model="marca">
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control" placeholder="Modelo" wire:model="modelo">
            </div>
            <div class="col-md-4">
                <input type="number" class="form-control" placeholder="Año" wire:model="anio">
            </div>
        </div>

        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label fw-semibold">Estado</label>
                <select wire:model="estado" class="form-select">
                    <option value="activo">Activo</option>
                    <option value="inactivo">Inactivo</option>
                </select>
                @error('estado') <small class="text-danger">{{ $message }}</small> @enderror
            </div>
            <div class="col-md-4">
                <label class="form-label fw-semibold">Propiedad</label>
                <input type="text" wire:model="propiedad" class="form-control">
                @error('propiedad') <small class="text-danger">{{ $message }}</small> @enderror
            </div>
            <div class="col-md-4">
                <label class="form-label fw-semibold">Unidad</label>
                <select wire:model="unidad_id" class="form-select">
                    <option value="">Seleccione una unidad</option>
                    @foreach($unidades as $unidad)
                        <option value="{{ $unidad->id }}">{{ $unidad->nombre }}</option>
                    @endforeach
                </select>
                @error('unidad_id') <small class="text-danger">{{ $message }}</small> @enderror
            </div>
        </div>

        <div class="mt-3">
            <button type="submit" class="btn btn-primary">
                {{ $modoEdicion ? 'Actualizar' : 'Guardar' }}
            </button>
            @if ($modoEdicion)
                <button type="button" class="btn btn-secondary" wire:click="cancelar">Cancelar</button>
            @endif
        </div>
    </form>

    <!-- Filtros -->
    <div class="row mb-3 g-3">
        <div class="col-md-4">
            <input type="text" class="form-control" placeholder="Buscar por descripción, marca o modelo" wire:model.debounce.500ms="busqueda">
        </div>
        <div class="col-md-3">
            <select wire:model="filtroEstado" class="form-select">
                <option value="">-- Filtrar por estado --</option>
                <option value="activo">Activo</option>
                <option value="inactivo">Inactivo</option>
            </select>
        </div>
        <div class="col-md-5">
            <select wire:model="unidadFiltro" class="form-select">
                <option value="">-- Filtrar por unidad --</option>
                @foreach ($unidades as $unidad)
                    <option value="{{ $unidad->id }}">{{ $unidad->nombre }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <!-- Tabla de Equipos -->
    <div class="table-responsive shadow-sm">
        <table class="table table-bordered table-hover align-middle">
            <thead class="table-dark">
                <tr>
                    <th>Código</th>
                    <th>Descripción</th>
                    <th>Marca</th>
                    <th>Modelo</th>
                    <th>Año</th>
                    <th>Unidad</th>
                    <th>Estado</th>
                    <th>Propiedad</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($equipos as $equipo)
                    <tr>
                        <td>{{ $equipo->codigo }}</td>
                        <td>{{ $equipo->descripcion }}</td>
                        <td>{{ $equipo->marca }}</td>
                        <td>{{ $equipo->modelo }}</td>
                        <td>{{ $equipo->anio }}</td>
                        <td>{{ $equipo->unidad->nombre ?? 'Sin unidad' }}</td>
                        <td><span class="badge bg-{{ $equipo->estado === 'activo' ? 'success' : 'secondary' }}">{{ ucfirst($equipo->estado) }}</span></td>
                        <td>{{ $equipo->propiedad }}</td>
                        <td>
                            <button class="btn btn-sm btn-info me-1" wire:click="editar({{ $equipo->id }})">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            <button class="btn btn-sm btn-danger" wire:click="eliminar({{ $equipo->id }})"
                                onclick="return confirm('¿Eliminar este equipo?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="text-center text-muted">No hay equipos encontrados.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Paginación -->
    <div class="d-flex justify-content-center mt-3">
        {{ $equipos->links() }}
    </div>
</div>
