{{-- Integración Ternium · Composiciones químicas: tabla que devuelve ExPOController@integracion_data (AJAX).
     Kit ui-ctc (MigracionLayout.MD L3). Antes era HTML armado en PHP con clases Bootstrap y sin escapar.
     Parámetros: $datos (pedidoImportacion, do, codigo, fraccionArancelaria, informacion[colada, atributos[atributo, valor]]),
     $hayDatos (la consulta trajo filas). --}}
<div class="ctc-tabla-caja">
    <table class="ctc-tabla">
        <thead>
            <tr>
                <th class="text-right">No.</th>
                <th>Pedido importación</th>
                <th>Número DO</th>
                <th>Subpartida</th>
                <th>Composición</th>
            </tr>
        </thead>
        <tbody>
            @if (! $hayDatos)
                <tr data-sin-hover><td colspan="5" class="!p-0">
                    <div class="ctc-vacio py-12 text-center text-[14px] text-[var(--texto-suave)]">
                        <x-icono nombre="magnifying-glass" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" />
                        <p class="mt-2">No hay información para mostrar con estos filtros.</p>
                    </div>
                </td></tr>
            @else
                @foreach ($datos as $d)
                    <tr class="align-top">
                        <td class="text-right tabular-nums">{{ $loop->iteration }}</td>
                        <td class="whitespace-nowrap">{{ $d['pedidoImportacion'] }}</td>
                        <td class="whitespace-nowrap font-semibold">{{ $d['do'] }}</td>
                        <td class="whitespace-nowrap">{{ $d['fraccionArancelaria'] }}</td>
                        <td class="min-w-[36rem]">
                            <p class="text-[12px] text-[var(--texto-suave)]">Código producto: <span class="font-semibold text-rose-600 dark:text-rose-400">{{ $d['codigo'] }}</span></p>
                            @foreach ($d['informacion'] as $info)
                                <div class="mt-2 overflow-hidden rounded-lg border border-[var(--borde)]">
                                    <p class="bg-[var(--superficie-2)] px-3 py-1.5 text-[12px] font-semibold text-[var(--texto)]">Colada No. {{ $info['colada'] }}</p>
                                    @if (count($info['atributos']) > 0)
                                        {{-- Antes: filas de 8 atributos ("atributo = valor"). --}}
                                        <div class="grid grid-cols-4 gap-px bg-[var(--borde)] sm:grid-cols-8">
                                            @foreach ($info['atributos'] as $atributo)
                                                <span class="whitespace-nowrap bg-[var(--superficie)] px-2 py-1 text-[12px] tabular-nums hover:bg-[var(--acento-suave)]">{{ $atributo['atributo'] }} = {{ $atributo['valor'] }}</span>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </td>
                    </tr>
                @endforeach
            @endif
        </tbody>
    </table>
</div>