{{-- Solicitud de clasificación de una OC (tarea 2.3). Kit ui-ctc: ficha de cada producto, documentos que pidió el
     analista e historial de estados. Colores: tokens del layout. --}}
@php
    $variantesEstado = [
        'DOCUMENTOS_INCOMPLETOS' => 'aviso', 'DOCUMENTOS_COMPLETOS' => 'info', 'EN_CLASIFICACION' => 'info',
        'SUSPENDIDA' => 'peligro', 'CLASIFICADA' => 'exito', 'PRODUCTO_CREADO' => 'exito',
        'PENDIENTE_RIM' => 'aviso', 'EN_TRAMITE_RIM' => 'aviso', 'RIM_APROBADO' => 'exito', 'VOBO_OTORGADO' => 'exito',
    ];
    // Orden y ancho de cada campo de ClasificacionItem::FICHA (clases completas: Tailwind no arma nombres).
    $disposicionFicha = [
        'nombre_es'                => 'sm:col-span-2 lg:col-span-6',
        'marca'                    => 'lg:col-span-3',
        'referencia'               => 'lg:col-span-3',
        'modelo'                   => 'lg:col-span-2',
        'serial'                   => 'lg:col-span-2',
        'materia_constitutiva'     => 'lg:col-span-4',
        'destino_maquina'          => 'lg:col-span-4',
        'uso_funcion'              => 'sm:col-span-2 lg:col-span-4',
        'principio_funcionamiento' => 'sm:col-span-2 lg:col-span-4',
        'funcion_maquina'          => 'sm:col-span-2 lg:col-span-4',
    ];
    $controlTexto ='form-textarea block w-full rounded-md text-[13px] shadow-sm border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] focus:border-[var(--acento)] focus:ring-[var(--acento)] disabled:cursor-not-allowed disabled:bg-[var(--superficie-2)] disabled:text-[var(--texto-suave)]';
@endphp
<div>
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Órdenes de compra · Clasificación"
                             :titulo="'Solicitud de clasificación ' . $solicitud->id"
                             :descripcion="'OC ' . $solicitud->po . ($solicitud->pedido ? ' · Pedido ' . $solicitud->pedido : '') . ' · ' . $solicitud->cantidad_items . ' producto(s)'">
            <x-slot name="acciones">
                <x-enlace-boton href="{{ pantalla(route('oc-clasificaciones', [], false)) }}">
                    <x-icono nombre="queue-list" class="h-4 w-4" /> Todas las solicitudes
                </x-enlace-boton>
                <x-enlace-boton href="{{ pantalla(route('purchase-procesar-v2', ['idPurchaseOrder' => $solicitud->id_po, 'status' => 'editar'], false)) }}">
                    <x-icono nombre="arrow-left" variante="m" class="h-4 w-4" /> Ver la orden
                </x-enlace-boton>
            </x-slot>
        </x-encabezado-pagina>

        <div class="flex flex-wrap items-center gap-3">
            <x-etiqueta :variante="$variantesEstado[$solicitud->estado] ?? 'neutro'">{{ $solicitud->nombreEstado() }}</x-etiqueta>
            <span class="text-[12px] text-[var(--texto-suave)]">
                Creada el {{ \Carbon\Carbon::parse($solicitud->created_at)->format('d/m/Y H:i') }} por {{ $solicitud->usuario_creador }}
                @if ($solicitud->fecha_documentos_completos)
                    · Documentos completos el {{ \Carbon\Carbon::parse($solicitud->fecha_documentos_completos)->format('d/m/Y H:i') }}
                    @if ($solicitud->dias_ans) · plazo de clasificación {{ $solicitud->dias_ans }} días hábiles @endif
                @endif
            </span>
        </div>

        @if ($solicitud->estado === 'DOCUMENTOS_INCOMPLETOS')
            <x-alerta tipo="aviso">
                <p class="font-semibold">Para enviar la solicitud a clasificación falta:</p>
                <ul class="mt-1 list-disc space-y-0.5 pl-5">
                    @foreach ($faltantes as $faltante)
                        <li>{{ $faltante }}</li>
                    @endforeach
                </ul>
                <p class="mt-2 text-[12px]">Cuando la ficha de todos los productos y sus documentos estén completos, la solicitud pasa sola a "Documentos completos" y empieza el plazo de clasificación.</p>
            </x-alerta>
        @endif

        @if (!$editable && $solicitud->estado === 'DOCUMENTOS_INCOMPLETOS')
            <x-alerta tipo="info">Tu usuario tiene acceso de consulta: puedes revisar la solicitud pero no diligenciarla.</x-alerta>
        @endif

        @foreach ($items as $item)
            <x-tarjeta wire:key="item-{{ $item->id }}" :titulo="$item->texto_breve"
                       :descripcion="trim(($item->codigo_sap ? 'SAP ' . $item->codigo_sap : 'Sin código SAP') . ($item->proveedor ? ' · ' . $item->proveedor : ''))">
                <x-slot name="acciones">
                    <x-etiqueta :variante="$item->fichaCompleta() ? 'exito' : 'aviso'">{{ $item->fichaCompleta() ? 'Ficha completa' : 'Ficha incompleta' }}</x-etiqueta>
                </x-slot>

                <div class="space-y-5">
                    {{-- Ficha estructurada (Módulo 2): 5 campos obligatorios (decidido 29/10). Rejilla de 12 en
                         pantallas anchas: códigos cortos en 2, textos de una línea en 4–6, los de varias líneas de a 3. --}}
                    <div class="grid gap-x-4 gap-y-3 sm:grid-cols-2 lg:grid-cols-12">
                        @foreach ($disposicionFicha as $campo => $ancho)
                            @php
                                $definicion = \App\Models\Cti\ClasificacionItem::FICHA[$campo];
                                $id = 'ficha-' . $item->id . '-' . $campo;
                            @endphp
                            <x-campo :etiqueta="$definicion[0] . ($definicion[1] ? ' *' : '')" :para="$id" :error="'fichas.' . $item->id . '.' . $campo"
                                     :class="$ancho">
                                @if ($definicion[2] > 255)
                                    <textarea id="{{ $id }}" rows="3" maxlength="{{ $definicion[2] }}" wire:model="fichas.{{ $item->id }}.{{ $campo }}"
                                              class="{{ $controlTexto }}" @disabled(!$editable)></textarea>
                                @else
                                    <x-input id="{{ $id }}" type="text" maxlength="{{ $definicion[2] }}" wire:model="fichas.{{ $item->id }}.{{ $campo }}" :disabled="!$editable" />
                                @endif
                            </x-campo>
                        @endforeach
                    </div>

                    @if ($editable)
                        <div class="flex justify-end">
                            <x-button type="button" wire:click="guardarFicha({{ $item->id }})" wire:loading.attr="disabled" wire:target="guardarFicha({{ $item->id }})">
                                <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" wire:loading wire:target="guardarFicha({{ $item->id }})" />
                                Guardar ficha
                            </x-button>
                        </div>
                    @endif

                    {{-- Documentos que pidió el analista (RN-2.2). --}}
                    <div>
                        <h3 class="mb-2 text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--texto-tenue)]">Documentos requeridos</h3>
                        @if ($item->documentos->isEmpty())
                            <p class="rounded-lg bg-[var(--superficie-2)] px-3 py-2.5 text-[13px] text-[var(--texto-suave)]">
                                El analista aún no ha definido los documentos que necesita para este producto.
                            </p>
                        @else
                            <div class="divide-y divide-[var(--borde)] overflow-hidden rounded-lg border border-[var(--borde)]">
                                @foreach ($item->documentos as $documento)
                                    <div wire:key="documento-{{ $documento->id }}" class="flex flex-wrap items-center justify-between gap-3 px-3 py-2.5">
                                        <div class="min-w-0">
                                            <p class="text-[13px] font-semibold text-[var(--texto)]">{{ $documento->tipo->nombre ?? 'Documento' }}</p>
                                            @if ($documento->cargado)
                                                <p class="truncate text-[12px] text-[var(--texto-suave)]">
                                                    {{ $documento->nombre_archivo }} · {{ \Carbon\Carbon::parse($documento->fecha_carga)->format('d/m/Y H:i') }}
                                                    @if ($documento->sistema_carga === 'CENTRAL') · cargado por el analista @endif
                                                </p>
                                            @endif
                                            <x-input-error :for="'archivos.' . $documento->id" />
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <x-etiqueta :variante="$documento->cargado ? 'exito' : 'peligro'">{{ $documento->cargado ? 'Cargado' : 'Pendiente' }}</x-etiqueta>
                                            @if ($documento->cargado)
                                                <x-boton-icono etiqueta="Abrir el documento" :href="route('oc-clasificacion-documento', $documento->id)" target="_blank" rel="noopener">
                                                    <x-icono nombre="arrow-top-right-on-square" class="h-[18px] w-[18px]" />
                                                </x-boton-icono>
                                            @endif
                                            @if ($editable)
                                                <label class="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-lg border border-[var(--borde-fuerte)] bg-[var(--superficie)] px-3 text-[12.5px] font-semibold text-[var(--texto)] hover:bg-[var(--nav-hover)]">
                                                    <x-icono nombre="arrow-up-tray" class="h-4 w-4" />
                                                    <span wire:loading.remove wire:target="archivos.{{ $documento->id }}">{{ $documento->cargado ? 'Reemplazar' : 'Cargar' }}</span>
                                                    <span wire:loading wire:target="archivos.{{ $documento->id }}">Subiendo…</span>
                                                    <input type="file" class="hidden" wire:model="archivos.{{ $documento->id }}" accept=".{{ implode(',.', \App\Services\OrdenCompra\ArchivosOc::EXTENSIONES) }}">
                                                </label>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </x-tarjeta>
        @endforeach

        {{-- Historial de estados (RN-7.7): solo lectura. --}}
        <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
            <header class="border-b border-[var(--borde)] px-4 py-3">
                <h2 class="text-[15px] font-bold text-[var(--texto)]">Historial</h2>
            </header>
            <div class="ctc-tabla-caja" style="--alto-tabla: 20rem">
                <table class="ctc-tabla">
                    <thead>
                        <tr><th>Fecha</th><th>Estado</th><th>Comentario</th><th>Usuario</th></tr>
                    </thead>
                    <tbody>
                        @foreach ($historial as $fila)
                            <tr wire:key="historial-{{ $fila->id }}">
                                <td class="whitespace-nowrap font-mono">{{ \Carbon\Carbon::parse($fila->fecha)->format('d/m/Y H:i') }}</td>
                                <td class="whitespace-nowrap">{{ \App\Models\Cti\ClasificacionSolicitud::NOMBRES[$fila->estado_nuevo] ?? $fila->estado_nuevo }}</td>
                                <td>{{ $fila->comentario }}</td>
                                <td class="whitespace-nowrap">{{ $fila->usuario }}@if ($fila->sistema === 'CENTRAL') <x-etiqueta variante="info" class="ml-1">Central</x-etiqueta>@endif</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </section>
    </x-pagina>
</div>