@extends('layouts.pwa')

@section('title', 'Buscar contenedor')

@section('content')

<form method="GET" class="mb-3">
    <input type="text"
           name="q"
           value="{{ $q ?? '' }}"
           class="form-control form-control-lg text-uppercase"
           placeholder="Buscar contenedor..."
           autofocus
           oninput="this.value = this.value.toUpperCase()">
</form>

@forelse($contenedores as $c)
    <a href="{{ route('pwa.contenedores.show', $c) }}" class="text-decoration-none text-dark">
        <div class="card border-0 shadow-sm rounded-4 mb-2">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <strong>{{ $c->contenedor }}</strong>

                    @if($c->estado === 'EN_PATIO')
                        <span class="badge bg-info">EN PATIO</span>
                    @elseif($c->estado === 'CON_INCIDENCIA')
                        <span class="badge bg-warning text-dark">INCIDENCIA</span>
                    @elseif($c->estado === 'SALIO')
                        <span class="badge bg-success">SALIO</span>
                    @else
                        <span class="badge bg-secondary">{{ $c->estado }}</span>
                    @endif
                </div>

                <small class="text-muted d-block">
                    {{ $c->naviera ?: 'Sin naviera' }}
                </small>

                <small class="text-muted">
                    Entrada: {{ $c->fecha_entrada ?: '—' }}
                </small>
            </div>
        </div>
    </a>
@empty
    @if(!empty($q))
        <div class="alert alert-warning text-center">
            No se encontraron contenedores.
        </div>
    @endif
@endforelse

<a href="{{ route('pwa.dashboard') }}" class="btn btn-light btn-lg w-100 mt-3">
    Volver
</a>

@endsection