@php
use Carbon\Carbon;

$anioActual = Carbon::now()->format('Y');
$anioAnterior = Carbon::now()->subYear()->format('Y');

// Agrupar documentos por tipo de solicitud, luego por año y finalmente por expediente
$documentosPorTipoYAnio = $documentos
    ->groupBy('tipo_solicitud')
    ->map(function($docsPorTipo) {
        return $docsPorTipo
            ->groupBy(fn($doc) => Carbon::parse($doc->fecha_subida)->format('Y'))
            ->map(fn($docsPorAnio) => $docsPorAnio->groupBy(fn($doc) => $doc->expediente_id))
            ->sortKeys();
    })
    ->sortKeys();

$mostrarTodos = !$auditor->tipo_solicitud;
@endphp

<div class="mt-6 w-full space-y-6" x-data="{
    modalCotejo: false,
    verMas: false,
    documentoSeleccionado: null,
    seleccionarDocumento(url) { this.documentoSeleccionado = url; },
    cerrarVisor() { this.documentoSeleccionado = null; }
}" x-init="Livewire.on('notaCotejada', () => { modalCotejo = false; });">

    {{-- Mostrar archivo de cotejo si existe --}}
   @if ($auditor->cotejo_url)
    <div class="mb-6 border rounded-md p-3 bg-green-50">
        <h3 class="text-sm font-bold text-green-700 flex items-center gap-2 mb-2">
            <x-heroicon-o-check-circle class="w-5 h-5" />
            Última Nota de Cotejo:
        </h3>

        <div class="flex items-center gap-2 p-2 border rounded bg-white hover:bg-gray-100 transition cursor-pointer"
           @click="seleccionarDocumento('{{ asset('storage/' . ltrim($auditor->cotejo_url, '/')) }}')"

            <x-heroicon-o-document-text class="w-4 h-4 text-green-600" />
            <span class="text-xs truncate" style="max-width: 220px;">
                Nota de Cotejo.pdf
            </span>
        </div>
    </div>
@endif


    <div class="border p-4 rounded-md">
        <h2 class="text-base font-semibold flex items-center gap-2 mb-3">
            <x-heroicon-o-document-duplicate class="w-5 h-5" />
            Documentos Adjuntos
        </h2>

        {{-- Botón cotejo --}}
        @if ($auditor->tipo_solicitud && !$auditor->es_cotejado && auth()->user()->can('cotejar auditor'))
            <div class="mb-4 flex justify-end items-center gap-4">
                <p class="text-xs text-gray-500">Coteja los documentos antes de registrar el auditor.</p>
                <x-filament::button color="warning" size="sm" x-on:click="modalCotejo = true">
                    Cotejar Documentos
                </x-filament::button>
            </div>
        @elseif ($auditor->es_cotejado)
            <p class="text-xs text-green-600 font-semibold">✔ Documentos cotejados</p>
        @endif

        {{-- Documentos --}}
        @if ($documentos->isEmpty())
            <p class="text-center italic text-sm text-gray-500">No hay documentos adjuntos.</p>
        @else
            @foreach ($documentosPorTipoYAnio as $tipoSolicitud => $anios)
                <div class="mb-4">
                    <h3 class="text-lg font-bold mb-2 capitalize">{{ $tipoSolicitud ?: 'Sin tipo de solicitud' }}</h3>

                    @foreach ($anios as $anio => $expedientes)
                        @php
                            $esVisible = $mostrarTodos || $anio == $anioActual || $anio == $anioAnterior;
                        @endphp
                        <div x-show="{{ $esVisible ? 'true' : 'verMas' }}" x-collapse
                             class="border rounded-md p-3 space-y-3 mb-3">
                            <div class="flex justify-between items-start">
                                <h4 class="text-sm font-medium">{{ $anio }}</h4>
                            </div>

                            @foreach ($expedientes as $expId => $docsExp)
                                <h5 class="text-xs font-semibold mb-2">
                                    Expediente: {{ $docsExp->first()->expediente?->numero_expediente ?? 'Sin expediente' }}
                                </h5>

                                <div class="grid grid-cols-2 md:grid-cols-3 gap-2 mb-3">
                                    @foreach ($docsExp as $documento)
                                        <div
                                            class="flex flex-col items-start gap-2 p-2 border rounded hover:bg-gray-100 transition cursor-pointer"
@click="seleccionarDocumento('{{ asset('storage/' . ltrim($documento->url_archivo, '/')) }}')"


                                            title="Ver documento"
                                        >
                                            <div class="flex items-center gap-2">
                                                <x-heroicon-o-paper-clip class="w-4 h-4" />
                                                <span class="text-xs truncate" style="max-width: 180px;">
                                                    {{ $documento->nombre_documento ?? ($documento->nombreDocumento->nombre_documento ?? 'Documento sin nombre') }}
                                                </span>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            @endforeach
                        </div>
                    @endforeach
                </div>
            @endforeach

            @if (!$mostrarTodos)
                <div class="text-center mt-3">
                    <button type="button" class="text-xs underline text-gray-600 hover:text-gray-800"
                            x-on:click="verMas = !verMas">
                        <span x-show="!verMas">Mostrar años anteriores</span>
                        <span x-show="verMas">Ocultar años anteriores</span>
                    </button>
                </div>
            @endif
        @endif
    </div>

    {{-- Modal Alpine para subir resolución de cotejo --}}
    <div x-show="modalCotejo" x-transition class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
         @click.self="modalCotejo = false">
        <div class="bg-white rounded-md shadow-lg p-6 w-full max-w-md">
            <h2 class="text-lg font-semibold mb-4">Subir nota de cotejo</h2>
            <input type="file" wire:model="resolucionCotejo" accept=".pdf" class="mb-3" />
            @error('resolucionCotejo')
                <span class="text-red-600 text-xs">{{ $message }}</span>
            @enderror

            <div class="flex justify-end gap-2 mt-4">
                <x-filament::button color="secondary" size="sm" x-on:click="modalCotejo = false">Cancelar</x-filament::button>
                <x-filament::button color="primary" size="sm" wire:click="cotejarAuditor" wire:loading.attr="disabled">
                    Guardar y Cotejar
                </x-filament::button>
            </div>
        </div>
    </div>

    {{-- Modal visor PDF --}}
    <div x-show="documentoSeleccionado" x-transition style="background-color: rgba(0,0,0,0.5);"
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         x-on:keydown.escape.window="cerrarVisor()" @click.self="cerrarVisor()">
        <div class="bg-white rounded-md shadow-lg w-full max-w-5xl h-screen relative flex flex-col">
            <button @click="cerrarVisor()"
                    class="absolute top-3 left text-gray-600 hover:text-gray-900 rounded-full p-1 bg-gray-100 hover:bg-gray-200 shadow cursor-pointer"
                    title="Cerrar visor" aria-label="Cerrar visor" style="font-size: 24px; line-height: 1;">&times;</button>
            <iframe :src="documentoSeleccionado" class="flex-grow w-full rounded-b-md" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</div>