{{-- Archivo digital: documentos de los DO del cliente, con filtros, descarga en ZIP y revisión con comentarios.
     Layout nuevo con el kit ui-ctc (MigracionLayout.MD, L3). La ventana de comentarios es de Alpine (antes, modal
     Bootstrap con jQuery) y los muestra como texto: antes se insertaban como HTML sin escapar. --}}
@php
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    $copia = '#F87171';
@endphp
<div x-data="{
        abierto: false, idDocumento: 0, comentarios: [], texto: '',
        abrir(json, id) {
            this.idDocumento = id; this.texto = '';
            try { this.comentarios = (JSON.parse(json) || []).slice().reverse(); } catch (e) { this.comentarios = []; }
            this.abierto = true;
            this.$nextTick(() => this.$refs.comentario.focus());
        },
        guardar() {
            const comentario = this.texto.trim();
            if (comentario === '') { alert('El comentario no puede estar vacío.'); return; }
            if (!confirm('¿Confirma que desea guardar este comentario?')) { return; }
            $wire.guardarComentario(comentario, this.idDocumento);
            this.abierto = false;
        },
     }"
     x-on:keydown.escape.window="abierto = false">
<x-pagina>
    <x-icono-simbolos :nombres="['o:document-text', 'o:chat-bubble-left-ellipsis']" />

    <x-encabezado-pagina ruta="Administración · Gestión documental" titulo="Archivo digital">
        <x-slot name="acciones">
            <x-secondary-button wire:click="zipArchivoDigital" wire:loading.attr="disabled" wire:target="zipArchivoDigital">
                <x-icono nombre="arrow-down-tray" /> Descargar ZIP
            </x-secondary-button>
        </x-slot>
    </x-encabezado-pagina>

    <x-barra-busqueda modelo="campo_texto_buscar" accion="consultar" placeholder="Buscar por DO, pedido u orden de compra" :activos="count($chips)" :abierto="true">
        <x-slot name="filtros">
            <x-campo etiqueta="Texto a buscar" para="campo_busqueda" ayuda="Número del documento o del pedido.">
                <x-input id="campo_busqueda" type="text" wire:model="campo_busqueda" wire:keydown.enter="consultar" />
            </x-campo>
            <x-campo etiqueta="Régimen" para="campo_tipo_regimen">
                <x-select id="campo_tipo_regimen" wire:model="campo_tipo_regimen">
                    <option value="I,E">Todos</option>
                    <option value="I">Importaciones</option>
                    <option value="E">Exportaciones</option>
                </x-select>
            </x-campo>
            <x-campo etiqueta="Fecha del filtro" para="campo_fecha_filtro">
                <x-select id="campo_fecha_filtro" wire:model="campo_fecha_filtro">
                    <option value="">Seleccione…</option>
                    <option value="APERTURA">Fecha de apertura</option>
                    <option value="SUBIDA">Fecha de subida</option>
                </x-select>
            </x-campo>
            <x-campo etiqueta="Desde" para="campo_desde"><x-input id="campo_desde" type="date" wire:model="campo_desde" /></x-campo>
            <x-campo etiqueta="Hasta" para="campo_hasta"><x-input id="campo_hasta" type="date" wire:model="campo_hasta" /></x-campo>
            <x-campo etiqueta="Tipos de documento" para="campo_tipo_documento" ayuda="Ctrl o Cmd + clic para elegir varios." class="sm:col-span-2">
                <x-select id="campo_tipo_documento" wire:model="campo_tipo_documento" multiple size="5">
                    <option value="0">Todos los documentos</option>
                    @foreach ($tipos_documentos as $t)
                        <option value="{{ $t['id'] }}">{{ $t['nombre'] }}</option>
                    @endforeach
                </x-select>
            </x-campo>
        </x-slot>
        @if (count($chips))
            <x-slot name="chips">
                @foreach ($chips as $campo => [$etiqueta, $valor])
                    <x-chip-filtro :etiqueta="$etiqueta" :valor="$valor" wire:click="limpiarFiltro('{{ $campo }}')" />
                @endforeach
                <button type="button" wire:click="limpiarFiltros" class="text-[12px] text-[var(--texto-suave)] underline">Limpiar todo</button>
            </x-slot>
        @endif
    </x-barra-busqueda>

    <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3">
            <p class="flex items-center gap-2 text-[13px] text-[var(--texto-suave)]">
                <span><span class="font-semibold tabular-nums text-[var(--texto)]">{{ number_format($data_documentos->total(), 0, ',', '.') }}</span> documentos</span>
                <span wire:loading.flex class="items-center gap-1.5 text-[12px]" role="status"><x-icono nombre="arrow-path" class="h-3.5 w-3.5 animate-spin" /> Consultando…</span>
            </p>
            <span class="inline-flex items-center gap-1.5 text-[12px] text-[var(--texto-suave)]">
                <span class="h-2.5 w-2.5 rounded-sm border border-black/10" style="background-color: color-mix(in srgb, {{ $copia }} 45%, var(--superficie));" aria-hidden="true"></span>
                Documento en copia
            </span>
        </div>
        <div class="ctc-tabla-caja">
            <table class="ctc-tabla">
                <thead>
                    <tr>
                        <th class="ctc-fija ctc-fija-ultima" style="left: 0">Acciones</th>
                        <th>#</th>
                        <th>Régimen</th>
                        <th>DO</th>
                        <th>Pedido / OC</th>
                        <th>Apertura</th>
                        <th>Subida</th>
                        <th>Tipo de documento</th>
                        <th>Número</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($data_documentos as $d)
                        @php
                            $comentarios = json_decode($d['REVISION_CTC'], true) ?: [];
                            $esCopia = str_contains((string) $d['ESTILO'], 'FFDDDB');
                            $fondo = $esCopia ? "background-color: color-mix(in srgb, $copia 18%, var(--superficie));" : '';
                        @endphp
                        <tr wire:key="doc-{{ $d['ID_DOCUMENTO'] }}" @if ($esCopia) data-sin-hover style="{{ $fondo }}" @endif>
                            <td class="ctc-fija ctc-fija-ultima !px-2" style="left: 0; {{ $fondo }}">
                                <div class="flex items-center gap-0.5">
                                    <a href="{{ $d['RUTA'] }}" target="_blank" rel="noopener" class="ctc-accion" aria-label="Ver el documento" title="Ver el documento">
                                        <x-icono nombre="document-text" sprite class="h-[18px] w-[18px]" />
                                    </a>
                                    <button type="button" x-on:click="abrir({{ \Illuminate\Support\Js::from($d['REVISION_CTC']) }}, {{ $d['ID_DOCUMENTO'] }})"
                                            aria-label="Revisión del documento ({{ count($comentarios) }} comentarios)" title="Revisión del documento"
                                            class="{{ count($comentarios) ? 'inline-flex h-[30px] items-center gap-1 rounded-md bg-rose-50 px-1.5 text-[12px] font-semibold text-rose-700 dark:bg-rose-500/10 dark:text-rose-300' : 'ctc-accion' }}">
                                        <x-icono nombre="chat-bubble-left-ellipsis" sprite class="h-[18px] w-[18px]" />
                                        @if (count($comentarios)){{ count($comentarios) }}@endif
                                    </button>
                                </div>
                            </td>
                            <td class="text-right text-[var(--texto-tenue)]">{{ $data_documentos->firstItem() + $loop->index }}</td>
                            <td><x-etiqueta :variante="$d['TIPO_REGIMEN'] == 'I' ? 'info' : 'acento'">{{ $d['TIPO_REGIMEN'] == 'I' ? 'IMPO' : 'EXPO' }}</x-etiqueta></td>
                            <td class="whitespace-nowrap font-semibold">{{ $d['NUMERO_DO'] }}</td>
                            <td>
                                <span class="whitespace-nowrap">{!! $d['NUMERO_PEDIDO'] ? e($d['NUMERO_PEDIDO']) : $vacio !!}</span>
                                <span class="block whitespace-nowrap text-[11.5px] text-[var(--texto-suave)]">OC {{ $d['NUMERO_ORDEN_COMPRA'] ?: '—' }}</span>
                            </td>
                            <td class="whitespace-nowrap">{{ substr($d['FECHA_APERTURA'], 0, 10) }}</td>
                            <td class="whitespace-nowrap">{{ substr($d['FECHA_SUBIDA'], 0, 10) }}</td>
                            <td class="min-w-[160px]">{{ $nombre_documentos[$d['TIPO_DOCUMENTO']] ?? '' }}</td>
                            <td class="max-w-[260px] break-all">{!! $d['NUMERO'] !== null && $d['NUMERO'] !== '' ? e($d['NUMERO']) : $vacio !!}</td>
                        </tr>
                    @empty
                        <tr data-sin-hover>
                            <td colspan="9" 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 documentos con estos filtros.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($data_documentos->hasPages())
            <div class="border-t border-[var(--borde)] px-5 py-3">{{ $data_documentos->links('vendor.pagination.ctc-livewire') }}</div>
        @endif
    </section>
</x-pagina>

    {{-- Comentarios de revisión del documento --}}
    <template x-teleport="body">
        <div x-show="abierto" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="comentarios-titulo">
            <div class="fixed inset-0 bg-black/40" x-on:click="abierto = false"></div>
            <div class="relative w-full max-w-md overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                <header class="flex items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-4">
                    <h2 id="comentarios-titulo" class="text-[15px] font-bold text-[var(--texto)]">Comentarios</h2>
                    <x-boton-icono etiqueta="Cerrar" x-on:click="abierto = false"><x-icono nombre="x-mark" class="h-5 w-5" /></x-boton-icono>
                </header>
                <div class="space-y-3 px-5 py-4">
                    <textarea x-ref="comentario" x-model="texto" rows="4" aria-label="Nuevo comentario" placeholder="Escriba un comentario"
                              class="form-textarea block w-full rounded-md border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[13px] text-[var(--texto)] shadow-sm placeholder:text-[var(--texto-tenue)] focus:border-[var(--acento)] focus:ring-[var(--acento)]"></textarea>
                    <div x-show="comentarios.length" class="max-h-56 space-y-2 overflow-y-auto">
                        <template x-for="(c, i) in comentarios" :key="i">
                            <div class="rounded-lg border border-[var(--borde)] bg-[var(--superficie-2)] p-2.5 text-[12px] text-[var(--texto-suave)]">
                                <p><span class="font-semibold text-[var(--texto)]" x-text="c.usuario"></span> · <span x-text="c.fecha"></span></p>
                                <p class="mt-1 whitespace-pre-line text-[var(--texto)]" x-text="c.comentario"></p>
                            </div>
                        </template>
                    </div>
                    <p x-show="!comentarios.length" class="text-[12px] text-[var(--texto-tenue)]">Este documento no tiene comentarios.</p>
                </div>
                <div class="flex flex-row-reverse flex-wrap gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                    <x-button type="button" x-on:click="guardar()">Guardar</x-button>
                    <x-secondary-button x-on:click="abierto = false">Cerrar</x-secondary-button>
                </div>
            </div>
        </div>
    </template>
</div>