{{-- Asignación de productos en contenedor (dentro del formulario de Control de contenedores). Kit ui-ctc (L3). --}}
<div>
    <x-tarjeta titulo="Asignación de productos en contenedor">
        <div class="flex flex-wrap items-end gap-3">
            <x-campo etiqueta="Productos" para="producto-contenedor" class="min-w-[16rem] flex-1">
                <x-select name="itr" id="producto-contenedor" wire:model="producto">
                    <option value="">- SELECCIONE UNA OPCIÓN</option>
                    @foreach($productos as $producto)
                    <option value="{{ $producto->id }}">{{ $producto->codigo }} - {{ $producto->nombre }}</option>
                    @endforeach
                </x-select>
            </x-campo>
            <x-secondary-button wire:click="agregarProducto()" wire:loading.attr="disabled">
                <x-icono nombre="plus-circle" /> Agregar producto
            </x-secondary-button>
        </div>

        <div class="ctc-tabla-caja mt-4" style="--alto-tabla: 20rem">
            <table class="ctc-tabla">
                <thead>
                    <tr>
                        <th>Producto</th>
                        <th class="text-right">Cantidad</th>
                        <th>Unidad medida</th>
                        <th class="text-right">Valor total</th>
                        <th><span class="sr-only">Operaciones</span></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($productos_contenedor as $index => $pr_conte)
                        <tr wire:key="pc-{{ $pr_conte->id }}">
                            <td>{{ $pr_conte->codigo }} - {{ $pr_conte->nombre }}</td>
                            <td class="text-right tabular-nums">{{ $pr_conte->cantidad_material }}</td>
                            <td>{{ $pr_conte->unidad_medida }}</td>
                            <td class="text-right tabular-nums">{{ $pr_conte->valor_total }}</td>
                            <td class="text-right">
                                <button type="button" wire:click="eliminarProducto({{ $pr_conte->id }})" class="ctc-accion"
                                        title="Quitar el producto del contenedor" aria-label="Quitar el producto del contenedor">
                                    <x-icono nombre="trash" class="h-[18px] w-[18px]" />
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr data-sin-hover>
                            <td colspan="5" class="!p-0">
                                <div class="ctc-vacio py-6 text-center text-[13px] text-[var(--texto-suave)]">El contenedor no tiene productos asignados.</div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </x-tarjeta>
</div>