{{-- Contenedores de la OC (Control de Contenedores de la Torre de Control), dentro de editar Orden de Compra.
     Kit ui-ctc; la lógica del componente no cambia. Va dentro del <form> de la OC: los campos de aquí no llevan name. --}}
<div class="space-y-3 rounded-lg border border-[var(--borde)] bg-[var(--superficie-2)] p-4">
    @if($operacion == 0)
        <div class="flex flex-wrap items-center justify-between gap-3">
            <h3 class="text-[14px] font-semibold text-[var(--texto)]">Contenedores de la Torre de Control</h3>
            <x-secondary-button onclick="agregarContenedor()"><x-icono nombre="plus-circle" /> Agregar Contenedor</x-secondary-button>
        </div>
        @if($contenedores != null)
            <div class="overflow-hidden rounded-lg border border-[var(--borde)] bg-[var(--superficie)]">
                <div class="ctc-tabla-caja" style="--alto-tabla: 22rem">
                    <table class="ctc-tabla">
                        <thead>
                            <tr>
                                <th>Número de contenedor</th>
                                <th>Tamaño</th>
                                <th class="text-right">Peso</th>
                                <th class="text-right">Cajas / bultos</th>
                                <th>Productos</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($contenedores as $contenedor)
                                <tr wire:key="contenedor-{{ $contenedor->id }}">
                                    <td><x-etiqueta variante="acento">{{$contenedor->contenedor}}</x-etiqueta></td>
                                    <td>{{$contenedor->tamano}}</td>
                                    <td class="text-right">{{number_format($contenedor->peso_bruto,2)}}</td>
                                    <td class="text-right">{{$contenedor->numero_bultos}}</td>
                                    <td>
                                        <div class="flex flex-wrap gap-1">
                                            @if($contenedor->productos->count() > 0 )
                                                @foreach($contenedor->productos as $producto)
                                                    @if($producto->id_material != 0)
                                                        <x-etiqueta variante="aviso">{{$producto->materiales->nombre}}</x-etiqueta>
                                                    @endif
                                                @endforeach
                                            @else
                                                <x-etiqueta variante="aviso">Contenedor sin información de productos</x-etiqueta>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr data-sin-hover><td colspan="5" class="!p-0">
                                    <div class="ctc-vacio py-8 text-center text-[13px] text-[var(--texto-suave)]">
                                        <x-icono nombre="cube" class="mx-auto h-6 w-6 text-[var(--texto-tenue)]" />
                                        <p class="mt-2">La orden de compra no tiene contenedores en Control de Contenedores.</p>
                                    </div>
                                </td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        @else
            <x-alerta tipo="aviso">
                <strong>Alerta del Sistema.</strong>
                La orden de compra consultada no tiene contenedores asociados en el modulo <strong>Control de Contenedores</strong> de la <strong>Torre de Control.</strong>
            </x-alerta>
        @endif
    @else
        <h3 class="text-[14px] font-semibold text-[var(--texto)]">Información para el registro de un Nuevo Contenedor</h3>
        <div class="grid items-start gap-x-4 gap-y-3.5 [grid-template-columns:repeat(auto-fill,minmax(200px,1fr))]">
            <x-campo etiqueta="Número de Contenedor" para="contenedor">
                <x-input type="text" id="contenedor" placeholder="Número de Contenedor" wire:model.live="contenedor" />
                @error('contenedor') <p class="mt-1 text-[12px] text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
            </x-campo>
            <x-campo etiqueta="Tamaño" para="tamano">
                <x-select id="tamano" wire:model.live="tamano">
                    <option value="">- Seleccione una opcion -</option>
                    @foreach($tamanos as $tam)
                        <option value="{{ $tam->NOMBRE_TAMANO_CONTENEDOR }}">{{ $tam->NOMBRE_TAMANO_CONTENEDOR }}</option>
                    @endforeach
                </x-select>
                @error('tamano') <p class="mt-1 text-[12px] text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
            </x-campo>
            <x-campo etiqueta="Precinto" para="precinto">
                <x-input type="text" id="precinto" placeholder="Número de Precinto" wire:model.live="precinto" />
            </x-campo>
            <div class="pt-[22px]">
                <x-button type="button" wire:click="grabarContenedor()"><x-icono nombre="check" variante="m" class="h-4 w-4" /> Agregar Contenedor</x-button>
            </div>
        </div>
    @endif
    <script>

        function agregarContenedor(){
            @this.set('operacion',1);
        }
    </script>
</div>