{{-- Seguimiento del DO (seguimiento-imp/{do}, seguimiento-exp/{do}): información del pedido, documentos, correos y fotos
     cargados, con un diálogo por grupo. Parámetros: $info ([etiqueta => valor]), $gestionDocumental (del componente),
     $obligatorios (bool: incluye el resumen de documentos obligatorios, solo importación), $numeroDo. Kit ui-ctc. --}}
@php
    $grupos = collect($gestionDocumental)->keyBy('modal');
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    $titulos = ['documentos' => 'Documentos cargados', 'correos' => 'Correos recibidos', 'fotos' => 'Fotografías cargadas'];
@endphp
<div x-data="{ dialogo: null, correo: null }" x-on:keydown.escape.window="dialogo = null" class="space-y-5">
    @include('livewire.partials.seguimiento-do.info-pedido')

    <section aria-labelledby="gestion-documental">
        <h2 id="gestion-documental" class="mb-3 text-[15px] font-bold text-[var(--texto)]">Gestión documental</h2>
        <div class="grid gap-3 sm:grid-cols-3">
            @foreach ($grupos as $clave => $gd)
                <x-indicador :titulo="'Total ' . mb_strtolower($gd['titulo_card'])" :valor="$gd['total_registros']" :barra="false"
                             x-on:click="dialogo = {{ \Illuminate\Support\Js::from($clave) }}" wire:key="gd-{{ $clave }}">
                    <span class="flex items-center gap-1.5 font-semibold text-[var(--acento-texto)]">
                        <x-icono :nombre="$gd['icono']" class="h-4 w-4" /> Ver {{ mb_strtolower($gd['titulo_card']) }}
                    </span>
                </x-indicador>
            @endforeach
        </div>
    </section>

    @if ($obligatorios)
        @livewire('documentos.obligatoriosprocesoresumen', ['numdo' => (string) $numeroDo, 'numfase' => 0], key('obligatorios-' . $numeroDo))
    @endif

    {{-- Diálogos: documentos, correos y fotos --}}
    <template x-teleport="body">
        <div x-show="dialogo" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4 py-6" role="dialog" aria-modal="true" aria-labelledby="gd-titulo">
            <div class="fixed inset-0 bg-black/40" x-on:click="dialogo = null"></div>
            <div class="relative flex max-h-full w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                <header class="flex items-center gap-3 border-b border-[var(--borde)] px-5 py-4">
                    <h2 id="gd-titulo" class="flex-1 text-[15px] font-bold text-[var(--texto)]">
                        @foreach ($titulos as $clave => $titulo)<span x-show="dialogo === '{{ $clave }}'">{{ $titulo }} · DO {{ $numeroDo }}</span>@endforeach
                    </h2>
                    <x-boton-icono etiqueta="Cerrar" x-on:click="dialogo = null"><x-icono nombre="x-mark" class="h-5 w-5" /></x-boton-icono>
                </header>

                <div class="min-h-0 overflow-y-auto">
                    {{-- Documentos --}}
                    <div x-show="dialogo === 'documentos'">
                        <div class="ctc-tabla-caja" style="--alto-tabla: 60vh">
                            <table class="ctc-tabla">
                                <thead><tr><th>Tipo de documento</th><th>Número</th><th>Fecha</th><th>Comentarios</th><th><span class="sr-only">Ver</span></th></tr></thead>
                                <tbody>
                                    @forelse ($grupos['documentos']['data'] ?? [] as $det)
                                        <tr>
                                            <td class="font-semibold">{{ $det->nombre }}</td>
                                            <td class="whitespace-nowrap">{!! $det->numero ? e($det->numero) : $vacio !!}</td>
                                            <td class="whitespace-nowrap tabular-nums">{{ $det->fecha_registro }}</td>
                                            <td class="min-w-[200px] text-[12.5px]">{!! $det->comentarios ? e($det->comentarios) : $vacio !!}</td>
                                            <td class="!py-1.5">
                                                <a href="{{ $det->ruta }}" target="_blank" rel="noopener" class="ctc-accion" title="Ver documento {{ $det->nombre }}" aria-label="Ver documento {{ $det->nombre }}">
                                                    <x-icono nombre="arrow-top-right-on-square" class="h-[18px] w-[18px]" />
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr data-sin-hover><td colspan="5" class="!p-0"><div class="ctc-vacio py-10 text-center text-[14px] text-[var(--texto-suave)]">Sin documentos cargados para este DO.</div></td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Correos: el detalle se abre bajo la fila --}}
                    <div x-show="dialogo === 'correos'">
                        <div class="ctc-tabla-caja" style="--alto-tabla: 60vh">
                            <table class="ctc-tabla">
                                <thead><tr><th class="w-10"><span class="sr-only">Detalle</span></th><th>Asunto</th><th>Fecha</th></tr></thead>
                                <tbody>
                                    @forelse ($grupos['correos']['data'] ?? [] as $det)
                                        <tr class="cursor-pointer" x-on:click="correo = correo === {{ \Illuminate\Support\Js::from((string) $det->ID) }} ? null : {{ \Illuminate\Support\Js::from((string) $det->ID) }}">
                                            <td class="!py-1.5">
                                                <button type="button" class="ctc-accion" :aria-expanded="correo === {{ \Illuminate\Support\Js::from((string) $det->ID) }}" title="Ver correo" aria-label="Ver correo {{ $det->ASUNTO }}">
                                                    <x-icono nombre="chevron-right" variante="m" class="h-4 w-4 transition-transform" ::class="correo === {{ \Illuminate\Support\Js::from((string) $det->ID) }} && 'rotate-90'" />
                                                </button>
                                            </td>
                                            <td class="min-w-[280px] font-medium">{{ $det->ASUNTO }}</td>
                                            <td class="whitespace-nowrap tabular-nums">{{ $det->FECHA }}</td>
                                        </tr>
                                        <tr x-show="correo === {{ \Illuminate\Support\Js::from((string) $det->ID) }}" x-cloak data-sin-hover>
                                            <td colspan="3" class="!p-0">
                                                <div class="ctc-vacio space-y-3 bg-[var(--superficie-2)] px-5 py-4 text-[13px]">
                                                    <dl class="grid gap-x-4 gap-y-1 sm:grid-cols-[110px_1fr]">
                                                        <dt class="font-semibold text-[var(--texto-suave)]">Remitente</dt><dd class="break-all text-[var(--texto)]">{{ $det->DE }}</dd>
                                                        <dt class="font-semibold text-[var(--texto-suave)]">Para</dt><dd class="break-all text-[var(--texto)]">{{ $det->enviadoa }}</dd>
                                                        <dt class="font-semibold text-[var(--texto-suave)]">Copiados</dt><dd class="break-all text-[var(--texto)]">{!! $det->copiados ? e($det->copiados) : $vacio !!}</dd>
                                                    </dl>
                                                    {{-- Texto plano: antes se pintaba sin escapar. --}}
                                                    <div class="max-h-80 overflow-y-auto rounded-lg border border-[var(--borde)] bg-[var(--superficie)] p-3 leading-relaxed text-[var(--texto)]">{!! nl2br(e(aLatin1($det->contenido))) !!}</div>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr data-sin-hover><td colspan="3" class="!p-0"><div class="ctc-vacio py-10 text-center text-[14px] text-[var(--texto-suave)]">Sin correos asociados a este DO.</div></td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Fotos --}}
                    <div x-show="dialogo === 'fotos'" class="p-5">
                        @if (count($grupos['fotos']['data'] ?? []))
                            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                                @foreach ($grupos['fotos']['data'] as $det)
                                    <figure class="overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie-2)]">
                                        <a href="{{ $det->ruta }}" target="_blank" rel="noopener noreferrer" title="Ver imagen ampliada" class="block aspect-[4/3] overflow-hidden">
                                            <img src="{{ $det->ruta }}" alt="{{ $det->comentarios }}" loading="lazy" class="h-full w-full object-cover transition hover:scale-[1.02]">
                                        </a>
                                        <figcaption class="flex items-center justify-between gap-2 px-3 py-2 text-[12px]">
                                            <span class="text-[var(--texto-suave)]">Número <b class="text-[var(--texto)]">{{ $det->numero }}</b></span>
                                            <a href="{{ $det->ruta }}" target="_blank" rel="noopener noreferrer" class="font-semibold text-[var(--acento-texto)] hover:underline">Ver ampliada</a>
                                        </figcaption>
                                    </figure>
                                @endforeach
                            </div>
                        @else
                            <x-alerta tipo="aviso">Sin imágenes cargadas en el sistema.</x-alerta>
                        @endif
                    </div>
                </div>

                <footer class="flex items-center justify-between gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3 text-[12px] text-[var(--texto-suave)]">
                    <span>
                        @foreach ($grupos as $clave => $gd)<span x-show="dialogo === '{{ $clave }}'">Total de registros: <b class="text-[var(--texto)]">{{ $gd['total_registros'] }}</b></span>@endforeach
                    </span>
                    <x-secondary-button x-on:click="dialogo = null">Cerrar</x-secondary-button>
                </footer>
            </div>
        </div>
    </template>
</div>