@extends('layouts.pwa')

@section('title', $contenedor->contenedor)

@section('content')

<div class="card border-0 shadow-sm rounded-4 mb-3">
    <div class="card-body">

        <div class="d-flex justify-content-between">
            <h5 class="mb-0">{{ $contenedor->contenedor }}</h5>
            <span class="badge bg-success">{{ $contenedor->estado }}</span>
        </div>

        <small class="text-muted">
            {{ $contenedor->naviera ?? 'Sin naviera' }}
        </small>

        <hr>

        <div class="mb-2">
            <strong>Cliente:</strong> {{ $contenedor->cliente ?? '-' }}
        </div>

        <div class="mb-2">
            <strong>Entrada:</strong>
                {{ optional($contenedor->fecha_entrada)->format('d/m/Y') ?? $contenedor->fecha_entrada }}
                {{ $contenedor->hora_entrada ?: '' }}
        </div>

        <div class="mb-2">
            <strong>Naviera:</strong> {{ $contenedor->navieraRelacion->nombre ?? $contenedor->naviera ?? '—' }}
        </div>

        <div class="mb-2">
            <strong>Transportista:</strong> {{ $contenedor->transportista->nombre ?? '-' }}
        </div>

        <div class="mb-2">
            <strong>Peso:</strong> {{ $contenedor->peso ?: '—' }}
        </div>

        <div class="mb-2">
            <strong>Tipo carga:</strong> {{ $contenedor->tipo_carga ?: '—' }}
        </div>

        {{-- <div class="mb-2">
            <strong>Ubicación:</strong> {{ $contenedor->ubicacion_patio ?: '—' }}
        </div> --}}

        <div class="mb-2">
            <strong>Maniobra:</strong> {{ $contenedor->maniobra ?: '—' }}
        </div>

        <div class="mb-2">
            <strong>Forma pago:</strong> {{ $contenedor->forma_pago ?: '—' }}
        </div>

        <div class="mb-2">
            <strong>Referencia pago:</strong> {{ $contenedor->referencia_pago ?: '—' }}
        </div>

    </div>
</div>

{{-- FOTOS DE ENTRADA --}}
<div class="mb-3">
    <h6>Fotos de entrada</h6>

    <div class="row g-2">
        @for($i = 1; $i <= 10; $i++)
            @php $foto = $contenedor->{'foto_'.$i}; @endphp

            @if($foto)
                <div class="col-6">
                    <img src="{{ asset('uploads/contenedores/'.$foto) }}"
                         class="img-fluid rounded shadow-sm"
                         style="height: 140px; width: 100%; object-fit: cover;"
                         onclick="abrirImagen(this.src)">
                </div>
            @endif
        @endfor
    </div>
</div>

{{-- FOTOS DE SALIDA --}}
<div class="mb-3">
    <h6>Fotos de salida</h6>

    <div class="row g-2">
        @forelse($contenedor->evidencias->where('tipo_evidencia', 'SALIDA') as $evidencia)
            <div class="col-6">
                <img src="{{ asset('storage/'.$evidencia->archivo) }}"
                     class="img-fluid rounded shadow-sm"
                     style="height: 140px; width: 100%; object-fit: cover;"
                     onclick="abrirImagen(this.src)">
            </div>
        @empty
            <div class="col-12">
                <small class="text-muted">Sin fotos de salida</small>
            </div>
        @endforelse
    </div>
</div>

{{-- MOVIMIENTOS --}}
<div class="mb-3">
    <h6>Movimientos</h6>

    @forelse($contenedor->movimientos as $m)
        <div class="card border-0 shadow-sm rounded-4 mb-2">
            <div class="card-body p-2">
                <strong>{{ $m->tipo_movimiento }}</strong><br>
                <small>{{ $m->fecha }} {{ $m->hora }}</small>
            </div>
        </div>
    @empty
        <small class="text-muted">Sin movimientos</small>
    @endforelse
</div>

{{-- ACCIONES --}}
@if($contenedor->estado === 'EN_PATIO')
    {{-- <a href="#"
       class="btn btn-danger btn-lg w-100 mb-2">
        📤 Dar salida
    </a> --}}
    <a href="{{ route('pwa.salidas.create', $contenedor) }}"
        class="btn btn-danger btn-lg w-100 mb-2">
        📤 Dar salida
    </a>
@endif

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

<div id="modalImagen" class="modal-imagen">
    <button type="button" class="btn-cerrar-img" onclick="cerrarImagen()">×</button>
    <img id="imagenGrande">
</div>

@endsection