@extends('layouts.app', ['activePage' => 'dashboard', 'menuParent' => 'dashboard', 'titlePage' => ''])

@section('content')
@include('includes.tailwind')
@php
$readOnlyDashboard = (bool) ($readOnlyDashboard ?? false);
@endphp

<div class="content">
    <div class="container-fluid mt-2">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="bg-white shadow rounded-lg p-4 expss-dashboard-shell relative dashboard-is-loading" aria-busy="true">
                    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-4">
                        <div>
                            <h2 class="text-lg font-semibold text-gray-800">Dashboard</h2>
                            <p class="text-sm text-gray-500">Matriz de cobertura por archivo y periodo. Ejercicio <span id="dashboardYearLabel">-</span></p>
                        </div>
                        <div>
                            <span id="dashboardCoverageBadge" class="cfdi-history-badge neutral">Esperando datos</span>
                            @if($readOnlyDashboard)
                            <span class="cfdi-history-badge warning ml-2">Cliente: solo visual</span>
                            @endif
                        </div>
                    </div>

                    <div id="dashboardSkeletonOverlay" class="absolute inset-0 z-40 p-4 md:p-5 bg-slate-100/90 backdrop-blur-[2px] pointer-events-auto" aria-hidden="false">
                        <div class="h-full overflow-hidden rounded-lg border border-slate-200 bg-white/95 p-4 animate-pulse">
                            <div class="space-y-3">
                                <div class="dashboard-skeleton shimmer h-5 w-52 rounded"></div>
                                <div class="dashboard-skeleton shimmer h-3 w-80 max-w-full rounded"></div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-4 gap-3 mt-5">
                                <div class="dashboard-skeleton shimmer h-20 rounded-lg"></div>
                                <div class="dashboard-skeleton shimmer h-20 rounded-lg"></div>
                                <div class="dashboard-skeleton shimmer h-20 rounded-lg"></div>
                                <div class="dashboard-skeleton shimmer h-20 rounded-lg"></div>
                            </div>

                            <div class="mt-5 space-y-3">
                                <div class="dashboard-skeleton shimmer h-10 rounded-lg"></div>
                                <div class="dashboard-skeleton shimmer h-8 rounded-lg"></div>
                            </div>

                            <div class="mt-4 grid grid-cols-12 gap-2">
                                <div class="col-span-4 dashboard-skeleton shimmer h-9 rounded"></div>
                                <div class="col-span-1 dashboard-skeleton shimmer h-9 rounded"></div>
                                <div class="col-span-7 dashboard-skeleton shimmer h-9 rounded"></div>
                            </div>

                            <div class="mt-2 grid grid-cols-12 gap-2">
                                <div class="col-span-4 dashboard-skeleton shimmer h-9 rounded"></div>
                                <div class="col-span-1 dashboard-skeleton shimmer h-9 rounded"></div>
                                <div class="col-span-7 dashboard-skeleton shimmer h-9 rounded"></div>
                            </div>

                            <div class="mt-2 grid grid-cols-12 gap-2">
                                <div class="col-span-4 dashboard-skeleton shimmer h-9 rounded"></div>
                                <div class="col-span-1 dashboard-skeleton shimmer h-9 rounded"></div>
                                <div class="col-span-7 dashboard-skeleton shimmer h-9 rounded"></div>
                            </div>
                        </div>
                    </div>

                    @if(!$readOnlyDashboard)
                    <div class="rounded-lg border border-slate-200 bg-slate-50 p-3 mb-4" id="adminDocumentsSwitcher">
                        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                            <div>
                                <h6 class="text-sm font-semibold text-slate-800 mb-0">Documentos</h6>
                                <p class="text-xs text-slate-500 mb-0">Controla que secciones del dashboard quieres ver.</p>
                            </div>

                            <div class="flex flex-wrap items-center gap-2">
                                <span class="inline-flex items-center rounded-md border border-slate-200 bg-white px-2 py-1 text-xs font-semibold text-slate-700">Sueltos: {{ (int) ($archivosSueltosDashboard['total'] ?? 0) }}</span>
                                <span class="inline-flex items-center rounded-md border border-slate-200 bg-white px-2 py-1 text-xs font-semibold text-slate-700">Declaraciones: {{ (int) ($declaracionesAnualesDashboard['total'] ?? 0) }}</span>
                                <span class="inline-flex items-center rounded-md border border-slate-200 bg-white px-2 py-1 text-xs font-semibold text-slate-700">Nominas: {{ (int) ($nominasDashboard['total'] ?? 0) }}</span>
                            </div>
                        </div>

                        <div class="doc-tab-group mt-3" role="tablist" aria-label="Vista de documentos en dashboard admin">
                            <button type="button" class="doc-tab-btn js-doc-tab active" data-tab="all" role="tab" aria-selected="true">Todos</button>
                            <button type="button" class="doc-tab-btn js-doc-tab" data-tab="calendar" role="tab" aria-selected="false">Calendario</button>
                            <button type="button" class="doc-tab-btn js-doc-tab" data-tab="loose" role="tab" aria-selected="false">Sueltos</button>
                            <button type="button" class="doc-tab-btn js-doc-tab" data-tab="declarations" role="tab" aria-selected="false">Declaraciones</button>
                            <button type="button" class="doc-tab-btn js-doc-tab" data-tab="nominas" role="tab" aria-selected="false">Nominas</button>
                        </div>
                    </div>
                    @endif

                    <div class="rounded-lg border border-gray-200 p-4 mb-4 bg-white" id="tourExpssCalendario">
                        <div class="flex flex-wrap items-start justify-between gap-3 border-b border-gray-200 pb-3 mb-3">
                            <div>
                                <h6 class="text-base font-semibold text-slate-900 mb-1">Calendario de Importaciones</h6>
                                <p class="text-xs text-slate-500 mb-0">Haz clic en un periodo para filtrar y priorizar ese mes.</p>
                            </div>

                            <div class="flex flex-wrap items-center gap-2 text-xs">
                                <span class="inline-flex items-center rounded-md bg-emerald-100 px-2 py-1 font-medium text-emerald-700">Cargado</span>
                                <span class="inline-flex items-center rounded-md bg-rose-100 px-2 py-1 font-medium text-rose-700">No coincide</span>
                                <span class="inline-flex items-center rounded-md bg-blue-100 px-2 py-1 font-medium text-blue-700">Sin dato</span>
                                <span class="inline-flex items-center rounded-md bg-slate-50 border border-dashed border-slate-300 px-2 py-1 font-medium text-slate-500">Pendiente</span>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 mb-3" id="tourExpssFiltros">
                            <div class="lg:col-span-2">
                                <label for="dashboardExerciseFilter" class="block text-xs font-medium text-gray-600 mb-1">Ejercicio</label>
                                <select id="dashboardExerciseFilter" class="select2 border border-gray-300 rounded px-2 py-1 text-sm w-full" data-width="100%">
                                    @foreach($ejerciciosCatalogo as $ejercicio)
                                    <option value="{{ $ejercicio->id }}" {{ (int)$selectedExerciseId === (int)$ejercicio->id ? 'selected' : '' }}>{{ $ejercicio->anio }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="lg:col-span-3">
                                <label for="archivoSearchFilter" class="block text-xs font-medium text-gray-600 mb-1">Buscar archivo</label>
                                <input type="text" id="archivoSearchFilter" class="border border-gray-300 rounded px-2 py-1 text-sm w-full" placeholder="Filtrar por nombre de archivo...">
                            </div>

                            <div class="lg:col-span-3">
                                <label for="categoryFilter" class="block text-xs font-medium text-gray-600 mb-1">Categoria</label>
                                <select id="categoryFilter" class="border border-gray-300 rounded px-2 py-1 text-sm w-full">
                                    <option value="">Todas las categorias</option>
                                </select>
                            </div>

                            <div class="lg:col-span-4 flex flex-wrap items-end gap-2">
                                <label class="inline-flex items-center gap-2 text-sm text-gray-600 mb-1">
                                    <input type="checkbox" id="onlyPendingFilter" class="rounded border-slate-300 text-[#0A415F] focus:ring-[#0A415F]">
                                    Solo pendientes
                                </label>

                                <button type="button" id="dashboardRefreshBtn" class="inline-flex items-center gap-1.5 bg-[#0A415F] hover:bg-[#083549] text-white rounded px-3 py-1 text-sm font-medium transition-all duration-200 hover:-translate-y-0.5 mb-1">
                                    <i class="material-icons text-base leading-none">refresh</i>
                                    Actualizar
                                </button>

                                <button type="button" id="exportExcelBtn" class="inline-flex items-center gap-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded px-3 py-1 text-sm font-medium transition-all duration-200 hover:-translate-y-0.5 mb-1">
                                    <i class="material-icons text-base leading-none">table_view</i>
                                    Excel
                                </button>

                                <button type="button" id="exportPdfBtn" class="inline-flex items-center gap-1.5 bg-rose-600 hover:bg-rose-700 text-white rounded px-3 py-1 text-sm font-medium transition-all duration-200 hover:-translate-y-0.5 mb-1">
                                    <i class="material-icons text-base leading-none">picture_as_pdf</i>
                                    PDF
                                </button>

                                <span class="text-xs text-gray-500 mb-1">Ultima actualizacion: <span id="dashboardLastRefresh">-</span></span>
                            </div>

                            <div class="lg:col-span-12">
                                <label class="block text-xs font-medium text-gray-600 mb-1">Filtro rapido por estado</label>
                                <div id="statusQuickFilters" class="flex flex-wrap gap-2">
                                    <button type="button" class="status-filter-btn" data-status="all">Todos</button>
                                    <button type="button" class="status-filter-btn" data-status="pendiente">Pendiente</button>
                                    <button type="button" class="status-filter-btn" data-status="cargado">Cargado</button>
                                    <button type="button" class="status-filter-btn" data-status="no_coincide">No coincide</button>
                                    <button type="button" class="status-filter-btn" data-status="sin_dato">Sin dato</button>
                                </div>
                            </div>

                            <div class="lg:col-span-12 flex flex-wrap items-center gap-2">
                                <span id="selectedPeriodFilterWrap" class="hidden inline-flex items-center gap-2 bg-blue-50 text-blue-700 border border-blue-200 rounded-md px-2 py-1 text-xs font-medium">
                                    Periodo filtrado: <span id="selectedPeriodFilterLabel">-</span>
                                    <button type="button" id="clearPeriodFilterBtn" class="text-blue-700 underline">Limpiar</button>
                                </span>
                                <button type="button" id="clearFiltersBtn" class="inline-flex items-center gap-1 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded px-2 py-1 text-xs">Limpiar filtros</button>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3" id="dashboardGoalsPanel">
                            <div class="rounded-lg border border-indigo-200 bg-indigo-50 p-3">
                                <div class="flex items-center justify-between mb-1">
                                    <p class="text-xs font-semibold text-indigo-700 mb-0">Cobertura del ejercicio</p>
                                    <span class="text-xs text-indigo-700" id="goalCoverageCurrent">0%</span>
                                </div>
                                <div class="h-2.5 bg-white border border-indigo-200 rounded-full overflow-hidden">
                                    <div id="goalCoverageBar" class="h-full bg-indigo-500" style="width: 0%;"></div>
                                </div>
                                <div class="flex items-center justify-between mt-2 text-xs text-indigo-700">
                                    <span>Base esperada: 100%</span>
                                    <span id="goalCoverageDelta">Brecha: 0%</span>
                                </div>
                            </div>

                            <div class="rounded-lg border border-emerald-200 bg-emerald-50 p-3">
                                <div class="flex items-center justify-between mb-1">
                                    <p class="text-xs font-semibold text-emerald-700 mb-0">Avance del periodo actual</p>
                                    <span class="text-xs text-emerald-700" id="goalPeriodCurrent">0%</span>
                                </div>
                                <div class="h-2.5 bg-white border border-emerald-200 rounded-full overflow-hidden">
                                    <div id="goalPeriodBar" class="h-full bg-emerald-500" style="width: 0%;"></div>
                                </div>
                                <div class="flex items-center justify-between mt-2 text-xs text-emerald-700">
                                    <span id="goalPeriodLabel">Periodo: -</span>
                                    <span id="goalPeriodStatus">Sin referencia</span>
                                </div>
                            </div>
                        </div>

                        <div class="calendar-scroll-wrapper mt-2">
                            <table id="calendarMatrixTable" class="min-w-full border-collapse">
                                <thead id="calendarMatrixHead"></thead>
                                <tbody id="calendarMatrixBody"></tbody>
                                <tfoot id="calendarMatrixFoot"></tfoot>
                            </table>
                        </div>
                    </div>

                    @if(!$readOnlyDashboard)
                    @php
                        $archivosSueltosItems = $archivosSueltosDashboard['items'] ?? collect();
                        $archivosSueltosTotal = (int) ($archivosSueltosDashboard['total'] ?? 0);
                        $declaracionesDashboardColumns = $declaracionesAnualesDashboard['columns'] ?? collect();
                        $declaracionesDashboardTotal = (int) ($declaracionesAnualesDashboard['total'] ?? 0);
                        $declaracionesDashboardMaxRows = max((int) ($declaracionesAnualesDashboard['max_rows'] ?? 0), 1);
                        $nominasDashboardColumns = $nominasDashboard['columns'] ?? collect();
                        $nominasDashboardTotal = (int) ($nominasDashboard['total'] ?? 0);
                        $archivosSueltosExtensiones = $archivosSueltosItems
                            ->map(function ($archivo) {
                                return mb_strtolower((string) pathinfo((string) ($archivo->nombre_original ?? ''), PATHINFO_EXTENSION));
                            })
                            ->filter(function ($extension) {
                                return trim((string) $extension) !== '';
                            })
                            ->unique()
                            ->sort()
                            ->values();
                    @endphp
                    <div class="rounded-lg border border-gray-200 p-4 mb-4 bg-white" id="tourExpssArchivosSueltos">
                        <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-3 border-b border-gray-200 pb-3 mb-3">
                            <div>
                                <h6 class="text-base font-semibold text-slate-900 mb-1">Documentos sueltos</h6>
                                <p class="text-xs text-slate-600 mb-0">Seccion independiente del calendario de importaciones para cargar y consultar documentos sueltos.</p>
                            </div>
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="inline-flex items-center rounded-md bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">Total: {{ $archivosSueltosTotal }}</span>
                                <button type="button" data-toggle="modal" data-target="#looseFileUploadModal" class="inline-flex items-center gap-1 rounded-md bg-[#0A415F] px-2.5 py-1.5 text-xs font-semibold text-white hover:bg-[#083549] transition-colors">
                                    <span class="material-icons text-sm leading-none">add</span>
                                    <span>Nuevo documento suelto</span>
                                </button>
                                <a href="{{ route('expediente-seguridad-social.importacion.archivos-sueltos') }}" class="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50 transition-colors">Ver modulo completo</a>
                            </div>
                        </div>

                        @if(session('success'))
                        <div class="mb-3 rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-700">
                            {{ session('success') }}
                        </div>
                        @endif

                        @if($errors->any())
                        <div class="mb-3 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
                            {{ $errors->first() }}
                        </div>
                        @endif

                        <div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
                            <div class="px-3 py-2 border-b border-slate-200 bg-slate-50 flex items-center justify-between gap-3">
                                <p class="text-xs font-semibold text-slate-700 mb-0">Explorador de documentos</p>
                                <p class="text-[11px] text-slate-500 mb-0">Visibles: <span id="looseExplorerVisibleCount">{{ count($archivosSueltosItems) }}</span> de {{ count($archivosSueltosItems) }}</p>
                            </div>

                            <div class="px-3 py-2 border-b border-slate-200 bg-white">
                                <div class="grid grid-cols-1 md:grid-cols-12 gap-2">
                                    <div class="md:col-span-6">
                                        <label for="looseExplorerSearch" class="block text-[11px] font-semibold text-slate-600 mb-1">Buscar en explorador</label>
                                        <input type="text" id="looseExplorerSearch" class="w-full rounded-md border border-slate-300 px-2 py-1.5 text-xs" placeholder="Nombre, descripcion, archivo o usuario">
                                    </div>

                                    <div class="md:col-span-3">
                                        <label for="looseExplorerExtension" class="block text-[11px] font-semibold text-slate-600 mb-1">Extension</label>
                                        <select id="looseExplorerExtension" class="w-full rounded-md border border-slate-300 px-2 py-1.5 text-xs">
                                            <option value="all">Todas</option>
                                            @foreach($archivosSueltosExtensiones as $extension)
                                            <option value="{{ $extension }}">{{ mb_strtoupper((string) $extension) }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="md:col-span-3">
                                        <label for="looseExplorerOrder" class="block text-[11px] font-semibold text-slate-600 mb-1">Orden</label>
                                        <select id="looseExplorerOrder" class="w-full rounded-md border border-slate-300 px-2 py-1.5 text-xs">
                                            <option value="recent">Mas recientes</option>
                                            <option value="oldest">Mas antiguos</option>
                                            <option value="name_asc">Nombre A-Z</option>
                                            <option value="name_desc">Nombre Z-A</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="p-3">
                                @if(count($archivosSueltosItems) > 0)
                                <div id="looseExplorerGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-2.5">
                                    @foreach($archivosSueltosItems as $archivoSuelto)
                                    @php
                                        $bytes = (int) ($archivoSuelto->tamano_bytes ?? 0);
                                        if ($bytes <= 0) {
                                            $sizeLabel = '-';
                                        } elseif ($bytes < 1024) {
                                            $sizeLabel = $bytes . ' B';
                                        } elseif ($bytes < 1048576) {
                                            $sizeLabel = number_format($bytes / 1024, 2) . ' KB';
                                        } elseif ($bytes < 1073741824) {
                                            $sizeLabel = number_format($bytes / 1048576, 2) . ' MB';
                                        } else {
                                            $sizeLabel = number_format($bytes / 1073741824, 2) . ' GB';
                                        }
                                        $usuarioNombre = trim((string) optional($archivoSuelto->usuario)->name);
                                        if ($usuarioNombre === '') {
                                            $usuarioNombre = trim((string) optional($archivoSuelto->usuario)->nombres . ' ' . (string) optional($archivoSuelto->usuario)->apellidos);
                                        }
                                        if ($usuarioNombre === '') {
                                            $usuarioNombre = '-';
                                        }
                                        $extensionLabel = mb_strtoupper((string) pathinfo((string) $archivoSuelto->nombre_original, PATHINFO_EXTENSION));
                                        if ($extensionLabel === '') {
                                            $extensionLabel = 'FILE';
                                        }
                                        $extensionValue = mb_strtolower((string) pathinfo((string) $archivoSuelto->nombre_original, PATHINFO_EXTENSION));
                                        $createdTimestamp = optional($archivoSuelto->created_at)->timestamp ?: 0;
                                    @endphp

                                    <article
                                        class="file-folder-card js-loose-file-card"
                                        data-name="{{ $archivoSuelto->nombre }}"
                                        data-description="{{ $archivoSuelto->descripcion_corta }}"
                                        data-file="{{ $archivoSuelto->nombre_original }}"
                                        data-user="{{ $usuarioNombre }}"
                                        data-ext="{{ $extensionValue }}"
                                        data-created="{{ $createdTimestamp }}"
                                    >
                                        <div class="file-folder-card-head">
                                            <span class="file-folder-tab"></span>
                                            <span class="material-icons text-slate-500 text-base leading-none">folder</span>
                                            <span class="file-folder-ext">{{ $extensionLabel }}</span>
                                        </div>

                                        <div class="file-folder-card-body">
                                            <h6 class="text-xs font-semibold text-slate-900 mb-1 truncate" title="{{ $archivoSuelto->nombre }}">{{ $archivoSuelto->nombre }}</h6>
                                            <p class="text-[10px] text-slate-600 mb-1.5 h-7 overflow-hidden">{{ $archivoSuelto->descripcion_corta ?: 'Sin descripcion corta' }}</p>

                                            <div class="text-[10px] text-slate-500 space-y-0.5 mb-2">
                                                <p class="mb-0 truncate"><span class="font-semibold text-slate-700">Archivo:</span> {{ $archivoSuelto->nombre_original }}</p>
                                                <p class="mb-0"><span class="font-semibold text-slate-700">Tamano:</span> {{ $sizeLabel }}</p>
                                                <p class="mb-0"><span class="font-semibold text-slate-700">Fecha:</span> {{ optional($archivoSuelto->created_at)->format('d/m/Y H:i') ?: '-' }}</p>
                                                <p class="mb-0 truncate"><span class="font-semibold text-slate-700">Usuario:</span> {{ $usuarioNombre }}</p>
                                            </div>

                                            <div class="flex justify-end gap-1.5">
                                                <a href="{{ route('expediente-seguridad-social.importacion.download-archivo-suelto', ['id' => $archivoSuelto->id]) }}" class="loose-action-btn inline-flex items-center gap-1 rounded-md border border-slate-300 bg-white text-[10px] font-semibold text-slate-700 hover:bg-slate-50 transition-colors">
                                                    <span class="material-icons text-xs leading-none">download</span>
                                                    <span>Abrir</span>
                                                </a>

                                                <form method="POST" action="{{ route('expediente-seguridad-social.importacion.delete-archivo-suelto', ['id' => $archivoSuelto->id]) }}" class="js-swal-delete-form" data-confirm-title="Eliminar documento suelto" data-confirm-message="Se eliminara este documento suelto. Esta accion no se puede deshacer.">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="loose-action-btn inline-flex items-center gap-1 rounded-md border border-rose-300 bg-rose-50 text-[10px] font-semibold text-rose-700 hover:bg-rose-100 transition-colors">
                                                        <span class="material-icons text-xs leading-none">delete</span>
                                                        <span>Eliminar</span>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </article>
                                    @endforeach
                                </div>
                                <div id="looseExplorerNoResults" class="hidden rounded-lg border border-dashed border-slate-300 bg-slate-50 p-5 text-center mt-3">
                                    <p class="text-sm font-semibold text-slate-700 mb-1">Sin coincidencias</p>
                                    <p class="text-xs text-slate-500 mb-0">No hay documentos sueltos que cumplan con los filtros del explorador.</p>
                                </div>
                                @else
                                <div class="rounded-lg border border-dashed border-slate-300 bg-slate-50 p-6 text-center">
                                    <span class="material-icons text-slate-400 text-3xl">folder_open</span>
                                    <p class="text-sm font-semibold text-slate-700 mt-2 mb-1">Carpeta vacia</p>
                                    <p class="text-xs text-slate-500 mb-0">Sin Documentos sueltos registrados aun.</p>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="rounded-lg border border-gray-200 p-4 mb-4 bg-white" id="tourExpssDeclaracionesAnuales">
                        <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-3 border-b border-gray-200 pb-3 mb-3">
                            <div>
                                <h6 class="text-base font-semibold text-slate-900 mb-1">Declaraciones anuales</h6>
                                <p class="text-xs text-slate-600 mb-0">Carga desde dashboard y consulta en formato de columnas por ejercicio.</p>
                            </div>
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="inline-flex items-center rounded-md bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">Total: {{ $declaracionesDashboardTotal }}</span>
                                <button type="button" data-toggle="modal" data-target="#annualDeclarationUploadModal" class="inline-flex items-center gap-1 rounded-md bg-[#0A415F] px-2.5 py-1.5 text-xs font-semibold text-white hover:bg-[#083549] transition-colors">
                                    <span class="material-icons text-sm leading-none">add</span>
                                    <span>Nueva declaracion anual</span>
                                </button>
                                <a href="{{ route('expediente-seguridad-social.importacion.declaraciones-anuales') }}" class="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50 transition-colors">Ver modulo completo</a>
                            </div>
                        </div>

                        @if($declaracionesDashboardTotal > 0 && count($declaracionesDashboardColumns) > 0)
                        <div class="overflow-x-auto pb-1">
                            <div class="flex gap-3 min-w-max">
                                @foreach($declaracionesDashboardColumns as $column)
                                <section class="w-72 shrink-0 rounded-xl border border-slate-200 bg-slate-50 overflow-hidden">
                                    <header class="px-3 py-2 border-b border-slate-200 bg-gradient-to-r from-slate-900 to-slate-700 text-white">
                                        <p class="text-[10px] uppercase tracking-wide text-slate-200 mb-0.5">Ejercicio</p>
                                        <p class="text-sm font-semibold mb-0">{{ (int) ($column['anio'] ?? 0) }}</p>
                                        <p class="text-[11px] text-slate-200 mb-0">Documentos: {{ count($column['items'] ?? []) }}</p>
                                    </header>

                                    <div class="p-2.5 space-y-2 max-h-[420px] overflow-y-auto">
                                        @forelse(($column['items'] ?? collect()) as $item)
                                        @php
                                            $tituloCatalogo = optional($item->archivo)->titulo;
                                            $descripcionCatalogo = optional($item->archivo)->descripcion;
                                        @endphp
                                        <article class="rounded-lg border border-slate-200 bg-white p-2.5 shadow-sm">
                                            <p class="text-[12px] font-semibold text-slate-800 mb-1 truncate" title="{{ $tituloCatalogo ?: $item->nombre_original }}">{{ $tituloCatalogo ?: $item->nombre_original }}</p>
                                            @if(filled($descripcionCatalogo))
                                            <p class="text-[11px] text-slate-500 mb-1 line-clamp-2" title="{{ $descripcionCatalogo }}">{{ $descripcionCatalogo }}</p>
                                            @endif
                                            <p class="text-[11px] text-slate-400 mb-1 truncate">{{ $item->nombre_original }}</p>
                                            <div class="flex items-center justify-between gap-2">
                                                <span class="text-[10px] text-slate-400">{{ optional($item->created_at)->format('d/m/Y') ?: '-' }}</span>
                                                <a href="{{ route('expediente-seguridad-social.importacion.download-declaracion-anual', ['id' => $item->id]) }}" class="inline-flex items-center rounded-md bg-slate-900 px-2 py-1 text-[10px] font-semibold text-white hover:bg-slate-800 transition-colors">Descargar</a>
                                            </div>
                                        </article>
                                        @empty
                                        <div class="rounded-lg border border-dashed border-slate-300 bg-white p-3 text-center">
                                            <p class="text-[11px] text-slate-400 mb-0">Sin documentos</p>
                                        </div>
                                        @endforelse
                                    </div>
                                </section>
                                @endforeach
                            </div>
                        </div>
                        @else
                        <div class="rounded-lg border border-dashed border-slate-300 bg-slate-50 p-6 text-center">
                            <span class="material-icons text-slate-400 text-3xl">description</span>
                            <p class="text-sm font-semibold text-slate-700 mt-2 mb-1">Sin declaraciones anuales</p>
                            <p class="text-xs text-slate-500 mb-0">Aun no hay archivos cargados para este modulo.</p>
                        </div>
                        @endif
                    </div>

                    <div class="rounded-lg border border-gray-200 p-4 mb-4 bg-white" id="tourExpssNominas">
                        <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-3 border-b border-gray-200 pb-3 mb-3">
                            <div>
                                <h6 class="text-base font-semibold text-slate-900 mb-1">Documentos de nominas</h6>
                                <p class="text-xs text-slate-600 mb-0">Carga desde dashboard y consulta por ejercicio segun el catalogo de nominas.</p>
                            </div>
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="inline-flex items-center rounded-md bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">Total: {{ $nominasDashboardTotal }}</span>
                                <button type="button" data-toggle="modal" data-target="#nominaUploadModal" class="inline-flex items-center gap-1 rounded-md bg-[#0A415F] px-2.5 py-1.5 text-xs font-semibold text-white hover:bg-[#083549] transition-colors">
                                    <span class="material-icons text-sm leading-none">add</span>
                                    <span>Nuevo documento de nomina</span>
                                </button>
                                <a href="{{ route('expediente-seguridad-social.importacion.documentos-nominas') }}" class="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50 transition-colors">Ver modulo completo</a>
                            </div>
                        </div>

                        @if($nominasDashboardTotal > 0 && count($nominasDashboardColumns) > 0)
                        <div class="overflow-x-auto pb-1">
                            <div class="flex gap-3 min-w-max">
                                @foreach($nominasDashboardColumns as $column)
                                <section class="w-72 shrink-0 rounded-xl border border-slate-200 bg-slate-50 overflow-hidden">
                                    <header class="px-3 py-2 border-b border-slate-200 bg-gradient-to-r from-emerald-900 to-emerald-700 text-white">
                                        <p class="text-[10px] uppercase tracking-wide text-emerald-100 mb-0.5">Ejercicio</p>
                                        <p class="text-sm font-semibold mb-0">{{ (int) ($column['anio'] ?? 0) }}</p>
                                        <p class="text-[11px] text-emerald-100 mb-0">Documentos: {{ count($column['items'] ?? []) }}</p>
                                    </header>

                                    <div class="p-2.5 space-y-2 max-h-[420px] overflow-y-auto">
                                        @forelse(($column['items'] ?? collect()) as $item)
                                        @php
                                            $tituloCatalogo = optional($item->archivo)->titulo;
                                            $descripcionCatalogo = optional($item->archivo)->descripcion;
                                            $periodoLabel = optional($item->periodo)->descripcion ?: ('Periodo ' . (optional($item->periodo)->periodo ?: '-'));
                                        @endphp
                                        <article class="rounded-lg border border-slate-200 bg-white p-2.5 shadow-sm">
                                            <p class="text-[12px] font-semibold text-slate-800 mb-1 truncate" title="{{ $tituloCatalogo ?: $item->nombre_original }}">{{ $tituloCatalogo ?: $item->nombre_original }}</p>
                                            @if(filled($descripcionCatalogo))
                                            <p class="text-[11px] text-slate-500 mb-1 line-clamp-2" title="{{ $descripcionCatalogo }}">{{ $descripcionCatalogo }}</p>
                                            @endif
                                            <p class="text-[10px] text-emerald-700 mb-1 truncate">{{ $periodoLabel }}</p>
                                            <p class="text-[11px] text-slate-400 mb-1 truncate">{{ $item->nombre_original }}</p>
                                            <div class="flex items-center justify-between gap-2">
                                                <span class="text-[10px] text-slate-400">{{ optional($item->created_at)->format('d/m/Y') ?: '-' }}</span>
                                                <a href="{{ route('expediente-seguridad-social.home.download-nomina-document', ['id' => $item->id]) }}" class="inline-flex items-center rounded-md bg-slate-900 px-2 py-1 text-[10px] font-semibold text-white hover:bg-slate-800 transition-colors">Descargar</a>
                                            </div>
                                        </article>
                                        @empty
                                        <div class="rounded-lg border border-dashed border-slate-300 bg-white p-3 text-center">
                                            <p class="text-[11px] text-slate-400 mb-0">Sin documentos</p>
                                        </div>
                                        @endforelse
                                    </div>
                                </section>
                                @endforeach
                            </div>
                        </div>
                        @else
                        <div class="rounded-lg border border-dashed border-slate-300 bg-slate-50 p-6 text-center">
                            <span class="material-icons text-slate-400 text-3xl">payments</span>
                            <p class="text-sm font-semibold text-slate-700 mt-2 mb-1">Sin documentos de nominas</p>
                            <p class="text-xs text-slate-500 mb-0">Aun no hay archivos cargados para este modulo.</p>
                        </div>
                        @endif
                    </div>
                    @endif

                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-3" id="tourExpssKPIsPrincipales">
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-blue-50 to-white flex items-center gap-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-md">
                            <span class="inline-flex items-center justify-center rounded-full bg-blue-100 p-2">
                                <i class="material-icons text-blue-500 text-2xl">calendar_month</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Archivos cargados mes</div>
                                <div class="mt-1 text-xl font-semibold text-blue-700" id="metricCargadosMes">0</div>
                                <div class="text-xs text-gray-400 mt-1">Con carga en el mes actual</div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-emerald-50 to-white flex items-center gap-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-md">
                            <span class="inline-flex items-center justify-center rounded-full bg-emerald-100 p-2">
                                <i class="material-icons text-emerald-500 text-2xl">event_available</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Archivos cargados año</div>
                                <div class="mt-1 text-xl font-semibold text-emerald-700" id="metricCargadosAnio">0</div>
                                <div class="text-xs text-gray-400 mt-1">Acumulado del ejercicio</div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-indigo-50 to-white flex items-center gap-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-md">
                            <span class="inline-flex items-center justify-center rounded-full bg-indigo-100 p-2">
                                <i class="material-icons text-indigo-500 text-2xl">priority_high</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Faltantes mes</div>
                                <div class="mt-1 text-xl font-semibold text-indigo-700" id="metricFaltantesMes">0</div>
                                <div class="text-xs text-gray-400 mt-1">Pendientes del mes actual</div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-amber-50 to-white flex items-center gap-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-md">
                            <span class="inline-flex items-center justify-center rounded-full bg-amber-100 p-2">
                                <i class="material-icons text-amber-500 text-2xl">event_busy</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Faltantes año</div>
                                <div class="mt-1 text-xl font-semibold text-amber-700" id="metricFaltantesAnio">0</div>
                                <div class="text-xs text-gray-400 mt-1">Pendientes del ejercicio</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if(!$readOnlyDashboard)
<div class="modal fade" id="quickUploadModal" tabindex="-1" aria-labelledby="quickUploadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border border-slate-200 rounded-xl overflow-hidden">
            <div class="modal-header border-b border-slate-200 bg-slate-50 px-4 py-3">
                <h5 class="text-base font-semibold text-slate-900 mb-0" id="quickUploadModalLabel">Carga rapida de archivo</h5>
                <button type="button" class="close text-slate-500 hover:text-slate-800 opacity-100" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4 bg-white space-y-3">
                <div class="rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs text-slate-700 space-y-1">
                    <p class="mb-0"><span class="font-semibold">Archivo:</span> <span id="quickUploadArchivo">-</span></p>
                    <p class="mb-0"><span class="font-semibold">Ejercicio:</span> <span id="quickUploadEjercicio">-</span></p>
                    <p class="mb-0"><span class="font-semibold">Periodo:</span> <span id="quickUploadPeriodo">-</span></p>
                </div>

                <div>
                    <label for="quickUploadFile" class="block text-xs font-medium text-slate-700 mb-1">PDF a cargar</label>
                    <input type="file" id="quickUploadFile" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" accept="application/pdf,.pdf,application/vnd.ms-excel,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xlsx">
                </div>

                <div id="quickUploadStatus" class="rounded-lg border border-slate-200 bg-slate-50 text-slate-600 px-3 py-2 text-xs">Selecciona el archivo y confirma la carga.</div>
            </div>
            <div class="modal-footer border-t border-slate-200 bg-slate-50 px-4 py-3">
                <button type="button" class="inline-flex items-center gap-1 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded px-3 py-1 text-sm" data-dismiss="modal">Cancelar</button>
                <button type="button" id="quickUploadSubmit" class="inline-flex items-center gap-1 bg-[#0A415F] hover:bg-[#083549] text-white rounded px-3 py-1 text-sm">Subir y procesar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="looseFileUploadModal" tabindex="-1" aria-labelledby="looseFileUploadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border border-slate-200 rounded-xl overflow-hidden">
            <div class="modal-header border-b border-slate-200 bg-slate-50 px-4 py-3">
                <h5 class="text-base font-semibold text-slate-900 mb-0" id="looseFileUploadModalLabel">Nuevo documento suelto</h5>
                <button type="button" class="close text-slate-500 hover:text-slate-800 opacity-100" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ route('expediente-seguridad-social.importacion.store-archivo-suelto') }}" enctype="multipart/form-data" class="js-ajax-create-loose-file">
                @csrf
                <input type="hidden" name="redirect_to" value="dashboard">

                <div class="modal-body p-4 bg-white space-y-3">
                    <div>
                        <label for="modal_suelto_nombre" class="block text-xs font-medium text-slate-700 mb-1">Nombre</label>
                        <input id="modal_suelto_nombre" name="nombre" type="text" maxlength="180" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm" placeholder="Ejemplo: Alta IMSS sucursal norte" required>
                    </div>

                    <div>
                        <label for="modal_suelto_descripcion" class="block text-xs font-medium text-slate-700 mb-1">Descripcion corta</label>
                        <input id="modal_suelto_descripcion" name="descripcion_corta" type="text" maxlength="300" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm" placeholder="Referencia breve del archivo">
                    </div>

                    <div>
                        <label for="modal_suelto_archivo" class="block text-xs font-medium text-slate-700 mb-1">Archivo</label>
                        <input id="modal_suelto_archivo" name="archivo" type="file" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm" required>
                        <p class="text-[11px] text-slate-500 mt-1 mb-0">Tamano maximo 50 MB.</p>
                    </div>
                </div>

                <div class="modal-footer border-t border-slate-200 bg-slate-50 px-4 py-3">
                    <button type="button" class="inline-flex items-center gap-1 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded px-3 py-1 text-sm" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="inline-flex items-center gap-1 bg-[#0A415F] hover:bg-[#083549] text-white rounded px-3 py-1 text-sm">Guardar archivo</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="annualDeclarationUploadModal" tabindex="-1" aria-labelledby="annualDeclarationUploadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border border-slate-200 rounded-xl overflow-hidden">
            <div class="modal-header border-b border-slate-200 bg-slate-50 px-4 py-3">
                <h5 class="text-base font-semibold text-slate-900 mb-0" id="annualDeclarationUploadModalLabel">Nueva declaracion anual</h5>
                <button type="button" class="close text-slate-500 hover:text-slate-800 opacity-100" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            @php
                $dashMaxYear = (int) date('Y');
                $dashMinYear = $dashMaxYear - 10;
            @endphp

            <div class="px-4 py-2.5 border-b border-slate-200 bg-indigo-50">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                    <div class="flex items-center gap-1.5 text-[11px] text-indigo-900">
                        <span class="material-icons text-[15px] leading-none">info</span>
                        <span>Si falta un ejercicio, puedes crearlo sin salir del modal.</span>
                    </div>

                    <button type="button" class="js-toggle-ejercicio-form inline-flex items-center gap-1 rounded border border-indigo-300 bg-white px-2 py-1 text-[11px] font-semibold text-indigo-700 hover:bg-indigo-100 transition-colors" data-target="#expssModalDeclaracionEjercicioForm" data-open-label="Crear ejercicio" data-close-label="Ocultar">
                        <span class="material-icons text-[14px] leading-none">add</span>
                        <span>Crear ejercicio</span>
                    </button>
                </div>

                <form id="expssModalDeclaracionEjercicioForm" method="POST" action="{{ route('expediente-seguridad-social.importacion.store-declaracion-ejercicio') }}" class="js-ajax-create-declaracion-ejercicio hidden mt-2.5 flex flex-wrap items-center gap-2">
                    @csrf
                    <input type="hidden" name="redirect_to" value="dashboard">

                    <input id="modal_declaracion_nuevo_ejercicio" type="number" name="anio" min="{{ $dashMinYear }}" max="{{ $dashMaxYear }}" class="w-24 rounded-md border border-indigo-300 bg-white px-2 py-1.5 text-xs" placeholder="{{ $dashMaxYear }}" required>
                    <button type="submit" class="inline-flex items-center rounded-md bg-indigo-700 px-2.5 py-1.5 text-xs font-semibold text-white hover:bg-indigo-800 transition-colors">Guardar ejercicio</button>
                    <span class="text-[10px] text-indigo-700">Se crean automaticamente sus 12 periodos.</span>
                </form>
            </div>

            <form method="POST" action="{{ $declAnualUploadRoute }}" enctype="multipart/form-data" class="js-ajax-create-declaracion-anual">
                @csrf

                <div class="modal-body p-4 bg-white space-y-3">
                    <div>
                        <label for="modal_declaracion_archivo_catalogo" class="block text-xs font-medium text-slate-700 mb-1">Tipo de documento</label>
                        <select id="modal_declaracion_archivo_catalogo" name="id_archivo" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm" required>
                            <option value="">Selecciona del catalogo</option>
                            @foreach($declAnualCatalogo as $catalogoItem)
                                <option value="{{ (int) $catalogoItem->id }}" data-descripcion="{{ $catalogoItem->descripcion }}">{{ $catalogoItem->titulo }}</option>
                            @endforeach
                        </select>
                        <p id="modal_declaracion_descripcion_preview" class="text-[11px] text-slate-500 mt-1 mb-0 hidden"></p>
                    </div>

                    <div>
                        <label for="modal_declaracion_ejercicio" class="block text-xs font-medium text-slate-700 mb-1">Ejercicio</label>
                        <select id="modal_declaracion_ejercicio" name="id_ejercicio" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm" required>
                            <option value="">Selecciona</option>
                            @foreach($ejerciciosCatalogo as $ejercicio)
                                <option value="{{ (int) $ejercicio->id }}">{{ (int) $ejercicio->anio }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label for="modal_declaracion_archivo" class="block text-xs font-medium text-slate-700 mb-1">Archivo</label>
                        <input id="modal_declaracion_archivo" name="archivo" type="file" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm" required>
                        <p class="text-[11px] text-slate-500 mt-1 mb-0">Tamano maximo 50 MB.</p>
                    </div>
                </div>

                <div class="modal-footer border-t border-slate-200 bg-slate-50 px-4 py-3">
                    <button type="button" class="inline-flex items-center gap-1 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded px-3 py-1 text-sm" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="inline-flex items-center gap-1 bg-[#0A415F] hover:bg-[#083549] text-white rounded px-3 py-1 text-sm">Guardar declaracion</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="nominaUploadModal" tabindex="-1" aria-labelledby="nominaUploadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border border-slate-200 rounded-xl overflow-hidden">
            <div class="modal-header border-b border-slate-200 bg-slate-50 px-4 py-3">
                <h5 class="text-base font-semibold text-slate-900 mb-0" id="nominaUploadModalLabel">Nuevo documento de nomina</h5>
                <button type="button" class="close text-slate-500 hover:text-slate-800 opacity-100" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form method="POST" action="{{ $nominaUploadRoute }}" enctype="multipart/form-data" class="js-ajax-create-nomina">
                @csrf

                <div class="modal-body p-4 bg-white space-y-3">
                    <div>
                        <label for="modal_nomina_archivo_catalogo" class="block text-xs font-medium text-slate-700 mb-1">Tipo de documento</label>
                        <select id="modal_nomina_archivo_catalogo" name="id_archivo" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm" required>
                            <option value="">Selecciona del catalogo</option>
                            @foreach($nominaCatalogo as $catalogoItem)
                                <option value="{{ (int) $catalogoItem->id }}" data-descripcion="{{ $catalogoItem->descripcion }}">{{ $catalogoItem->titulo }}</option>
                            @endforeach
                        </select>
                        <p id="modal_nomina_descripcion_preview" class="text-[11px] text-slate-500 mt-1 mb-0 hidden"></p>
                    </div>

                    <div>
                        <label for="modal_nomina_ejercicio" class="block text-xs font-medium text-slate-700 mb-1">Ejercicio</label>
                        <select id="modal_nomina_ejercicio" name="id_ejercicio" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm js-nomina-ejercicio-select" required>
                            <option value="">Selecciona</option>
                            @foreach($ejerciciosCatalogo as $ejercicio)
                                <option value="{{ (int) $ejercicio->id }}">{{ (int) $ejercicio->anio }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label for="modal_nomina_periodo" class="block text-xs font-medium text-slate-700 mb-1">Periodo</label>
                        <select id="modal_nomina_periodo" name="id_periodo" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm" required disabled>
                            <option value="">Selecciona ejercicio primero</option>
                        </select>
                    </div>

                    <div>
                        <label for="modal_nomina_archivo" class="block text-xs font-medium text-slate-700 mb-1">Archivo</label>
                        <input id="modal_nomina_archivo" name="archivo" type="file" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm" required>
                        <p class="text-[11px] text-slate-500 mt-1 mb-0">Tamano maximo 50 MB.</p>
                    </div>
                </div>

                <div class="modal-footer border-t border-slate-200 bg-slate-50 px-4 py-3">
                    <button type="button" class="inline-flex items-center gap-1 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded px-3 py-1 text-sm" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="inline-flex items-center gap-1 bg-[#0A415F] hover:bg-[#083549] text-white rounded px-3 py-1 text-sm">Guardar documento</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script id="expss-periodos-catalogo-json" type="application/json">
    @json($periodosCatalogo->map(function ($periodo) {
        return [
            'id' => (int) $periodo->id,
            'id_ejercicio' => (int) $periodo->id_ejercicio,
            'periodo' => (int) $periodo->periodo,
            'descripcion' => (string) ($periodo->descripcion ?? ''),
        ];
    })->values())
</script>
@endif

<div id="cellDetailOverlay" class="fixed inset-0 hidden cell-detail-overlay" style="z-index: 1048;"></div>
<aside id="cellDetailPanel" class="fixed top-0 right-0 h-full w-full max-w-lg cell-detail-panel shadow-2xl transform translate-x-full transition-transform duration-200 ease-out" style="z-index: 1049;">
    <div class="h-full flex flex-col">
        <div class="px-5 py-4 border-b border-slate-200/90 bg-white/95 backdrop-blur-sm">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-500 mb-1">Calendario</p>
                    <h6 class="text-base font-semibold text-slate-900 mb-1">Detalle del documento</h6>
                    <p class="text-xs text-slate-500 mb-0">Resumen rapido del elemento seleccionado.</p>
                </div>

                <button type="button" id="cellDetailCloseBtn" class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-slate-300 text-slate-500 hover:bg-slate-100 hover:text-slate-800" aria-label="Cerrar detalle">
                    <span class="material-icons text-base leading-none">close</span>
                </button>
            </div>
        </div>

        <div class="p-5 space-y-4 overflow-y-auto">
            <div class="rounded-xl border border-slate-200 bg-white/90 shadow-sm px-3 py-3">
                <div class="flex items-center justify-between gap-2">
                    <span id="detailEstadoBadge" class="detail-badge detail-badge-neutral inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold">-</span>
                    <span class="text-[11px] text-slate-500">Estado de validacion</span>
                </div>

                <div class="mt-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-700" id="detailContextInfo">-</div>
            </div>

            <div class="grid grid-cols-1 gap-2.5 text-xs">
                <div class="detail-info-card"><p class="detail-info-label">Archivo</p><p id="detailArchivo" class="detail-info-value">-</p></div>
                <div class="detail-info-card"><p class="detail-info-label">Categoria</p><p id="detailCategoria" class="detail-info-value">-</p></div>
                <div class="detail-info-card"><p class="detail-info-label">Periodo</p><p id="detailPeriodo" class="detail-info-value">-</p></div>
                <div class="grid grid-cols-2 gap-2.5">
                    <div class="detail-info-card"><p class="detail-info-label">Versiones</p><p id="detailVersiones" class="detail-info-value">-</p></div>
                    <div class="detail-info-card"><p class="detail-info-label">Similitud</p><p id="detailSimilitud" class="detail-info-value">-</p></div>
                </div>
                <div class="detail-info-card"><p class="detail-info-label">Fecha de carga</p><p id="detailFecha" class="detail-info-value">-</p></div>
                <div class="detail-info-card"><p class="detail-info-label">Usuario</p><p id="detailUsuario" class="detail-info-value">-</p></div>
                <div class="detail-info-card"><p class="detail-info-label">Nombre original</p><p id="detailNombre" class="detail-info-value">-</p></div>
            </div>
        </div>

        <div class="px-5 py-3 border-t border-slate-200 bg-white/95 backdrop-blur-sm">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                @if(!$readOnlyDashboard)
                <a href="#" target="_blank" rel="noopener noreferrer" id="detailOpenFileBtn" class="hidden inline-flex items-center justify-center gap-1 rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white hover:bg-blue-700">Abrir archivo</a>
                <!-- <button type="button" id="detailQuickUploadBtn" class="inline-flex items-center justify-center gap-1 rounded-lg bg-sky-600 px-3 py-2 text-xs font-semibold text-white hover:bg-sky-700">Carga rapida</button> -->
                <a href="#" id="detailImportBtn" class="inline-flex items-center justify-center gap-1 rounded-lg bg-emerald-600 px-3 py-2 text-xs font-semibold text-white hover:bg-emerald-700">Abrir importacion</a>
                @endif
            </div>
        </div>
    </div>
</aside>

<script id="expss-dashboard-initial-json" type="application/json">
    @json($dashboardData)
</script>
<div id="expss-dashboard-meta" class="hidden" data-read-only="{{ $readOnlyDashboard ? '1' : '0' }}"></div>

<style>
    .dashboard-skeleton {
        background-color: #e2e8f0;
    }

    .shimmer {
        background-image: linear-gradient(90deg, #e2e8f0 0%, #f8fafc 50%, #e2e8f0 100%);
        background-size: 200% 100%;
        animation: dashboardShimmer 1.15s linear infinite;
    }

    @keyframes dashboardShimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    .dashboard-is-loading #tourExpssCalendario,
    .dashboard-is-loading #tourExpssKPIsPrincipales {
        filter: saturate(0.2);
    }

    .dashboard-is-loading> :not(#dashboardSkeletonOverlay) {
        opacity: 0;
    }

    .cell-detail-overlay {
        background: rgba(15, 23, 42, 0.36);
        backdrop-filter: blur(3px);
    }

    .cell-detail-panel {
        border-left: 1px solid #e2e8f0;
        background: linear-gradient(165deg, #f8fafc 0%, #eef2ff 60%, #f1f5f9 100%);
    }

    .detail-badge {
        border: 1px solid transparent;
    }

    .detail-badge-neutral {
        background: #e2e8f0;
        color: #334155;
        border-color: #cbd5e1;
    }

    .detail-badge-success {
        background: #dcfce7;
        color: #166534;
        border-color: #86efac;
    }

    .detail-badge-danger {
        background: #fee2e2;
        color: #991b1b;
        border-color: #fca5a5;
    }

    .detail-badge-info {
        background: #dbeafe;
        color: #1d4ed8;
        border-color: #93c5fd;
    }

    .detail-info-card {
        border: 1px solid #dbe4ef;
        border-radius: 0.7rem;
        background: #ffffff;
        padding: 0.55rem 0.65rem;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .detail-info-label {
        margin-bottom: 0.15rem;
        color: #64748b;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .detail-info-value {
        margin-bottom: 0;
        color: #0f172a;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.3;
        word-break: break-word;
    }

    .cfdi-history-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0.85rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        border: 1px solid #cbd5f5;
        transition: all 0.2s ease-in-out;
    }

    .cfdi-history-badge.neutral {
        background-color: #f8fafc;
        color: #475569;
        border-color: #cbd5f5;
    }

    .cfdi-history-badge.success {
        background-color: #dcfce7;
        color: #166534;
        border-color: #86efac;
    }

    .cfdi-history-badge.warning {
        background-color: #fef3c7;
        color: #92400e;
        border-color: #fcd34d;
    }

    .cfdi-history-badge.danger {
        background-color: #fee2e2;
        color: #991b1b;
        border-color: #fecaca;
    }

    .status-filter-btn {
        border: 1px solid #cbd5e1;
        background: #ffffff;
        color: #334155;
        border-radius: 9999px;
        padding: 0.2rem 0.7rem;
        font-size: 12px;
        font-weight: 600;
        transition: all 0.2s ease;
    }

    .status-filter-btn:hover {
        background: #f8fafc;
        border-color: #94a3b8;
    }

    .status-filter-btn.active {
        background: #0f172a;
        color: #ffffff;
        border-color: #0f172a;
    }

    .doc-tab-group {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.35rem;
        padding: 0.2rem;
        border: 1px solid #e2e8f0;
        border-radius: 9999px;
        background: #ffffff;
    }

    .doc-tab-btn {
        border: 1px solid transparent;
        border-radius: 9999px;
        background: transparent;
        color: #475569;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        padding: 0.42rem 0.75rem;
        transition: all 0.2s ease;
    }

    .doc-tab-btn:hover {
        color: #0f172a;
        background: #f1f5f9;
        border-color: #e2e8f0;
    }

    .doc-tab-btn.active {
        color: #ffffff;
        background: #0f172a;
        border-color: #0f172a;
        box-shadow: 0 6px 14px -10px rgba(15, 23, 42, 0.75);
    }

    .archivo-category-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        border-radius: 9999px;
        border: 1px solid #bfdbfe;
        background: #eff6ff;
        color: #1e3a8a;
        padding: 0.1rem 0.45rem;
        font-size: 10px;
        font-weight: 700;
    }

    .archivo-category-badge.uncategorized {
        border-style: dashed;
        border-color: #cbd5e1;
        background: #f8fafc;
        color: #475569;
    }

    .file-folder-card {
        border: 1px solid #e2e8f0;
        border-radius: 0.7rem;
        background: #ffffff;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .file-folder-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 7px 16px rgba(15, 23, 42, 0.1);
    }

    .file-folder-card-head {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.4rem 0.55rem;
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
    }

    .file-folder-tab {
        width: 18px;
        height: 6px;
        border-radius: 6px 6px 0 0;
        background: #94a3b8;
        opacity: 0.7;
    }

    .file-folder-ext {
        margin-left: auto;
        font-size: 9px;
        font-weight: 700;
        color: #334155;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 9999px;
        padding: 0.05rem 0.4rem;
    }

    .file-folder-card-body {
        padding: 0.55rem;
    }

    .loose-action-btn {
        min-width: 5.4rem;
        height: 1.65rem;
        justify-content: center;
        padding: 0 0.45rem;
    }

    .calendar-scroll-wrapper {
        max-height: 78vh;
        overflow: auto;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
    }

    #calendarMatrixTable th,
    #calendarMatrixTable td {
        border: 1px solid #e2e8f0;
        padding: 0.4rem 0.5rem;
        font-size: 11px;
        vertical-align: top;
        white-space: nowrap;
    }

    #calendarMatrixTable thead th {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #f8fafc;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #475569;
    }

    #calendarMatrixTable .sticky-col-1 {
        position: sticky;
        left: 0;
        z-index: 25;
        background: #ffffff;
        min-width: 290px;
        max-width: 360px;
    }

    #calendarMatrixTable .sticky-col-2 {
        position: sticky;
        left: 290px;
        z-index: 25;
        background: #ffffff;
        min-width: 95px;
        text-align: center;
    }

    #calendarMatrixTable thead .sticky-col-1,
    #calendarMatrixTable thead .sticky-col-2 {
        background: #f1f5f9;
        z-index: 35;
    }

    #calendarMatrixTable tfoot td {
        background: #f8fafc;
        font-weight: 600;
    }

    .calendar-cell {
        min-width: 190px;
        line-height: 1.35;
    }

    .calendar-cell.pending {
        background: #f8fafc;
        border-style: dashed;
        color: #64748b;
    }

    .calendar-cell.coincide {
        background: #ecfdf5;
        color: #065f46;
    }

    .calendar-cell.no_coincide {
        background: #fef2f2;
        color: #991b1b;
    }

    .calendar-cell.sin_dato {
        background: #eff6ff;
        color: #1d4ed8;
    }

    .calendar-cell .cell-actions {
        margin-top: 4px;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .calendar-cell .calendar-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid transparent;
        cursor: pointer;
    }

    .calendar-cell .calendar-action-btn.action-open {
        background: #fdfdfd;
        color: #555456;
        border-color: #666568;
    }

    .calendar-cell .calendar-action-btn.action-upload {
        background: #fdfdfd;
        color: #555456;
        border-color: #666568;
    }

    .calendar-cell .calendar-action-btn.action-detail {
        background: #fdfdfd;
        color: #555456;
        border-color: #666568;
    }

    .calendar-cell .calendar-action-btn.action-quick {
        background: #fdfdfd;
        color: #555456;
        border-color: #666568;
    }

    .calendar-cell .calendar-action-btn:hover {
        filter: brightness(0.96);
        text-decoration: none;
    }

    .alert-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: 700;
        text-decoration: none;
        border: 1px solid transparent;
        cursor: pointer;
        white-space: nowrap;
    }

    .alert-action-btn.alert-action-primary {
        background: #0f172a;
        color: #ffffff;
        border-color: #0f172a;
    }

    .alert-action-btn.alert-action-secondary {
        background: #e2e8f0;
        color: #1e293b;
        border-color: #cbd5e1;
    }

    .alert-action-btn.alert-action-accent {
        background: #bae6fd;
        color: #075985;
        border-color: #7dd3fc;
    }

    .alert-action-btn:hover {
        filter: brightness(0.95);
        text-decoration: none;
    }

    .period-filter-btn {
        width: 100%;
        border: 1px solid transparent;
        border-radius: 8px;
        padding: 4px 6px;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        line-height: 1.2;
        transition: all 0.2s ease;
    }

    .period-filter-btn.period-good {
        background: #ecfdf5;
        color: #166534;
        border-color: #86efac;
    }

    .period-filter-btn.period-medium {
        background: #fffbeb;
        color: #92400e;
        border-color: #fcd34d;
    }

    .period-filter-btn.period-bad {
        background: #fef2f2;
        color: #991b1b;
        border-color: #fca5a5;
    }

    .period-filter-btn.active {
        box-shadow: inset 0 0 0 2px #0f172a;
    }

    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 34px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 34px !important;
    }

    @media (max-width: 1024px) {

        #calendarMatrixTable .sticky-col-1,
        #calendarMatrixTable .sticky-col-2 {
            position: static;
            left: auto;
        }

        .calendar-scroll-wrapper {
            max-height: 64vh;
        }
    }
</style>
@endsection

@push('js')
<script>
    const historyBadgeStates = ['neutral', 'success', 'warning', 'danger'];
    const dashboardMetaElement = document.getElementById('expss-dashboard-meta');
    const dashboardPermissions = {
        readOnly: String(dashboardMetaElement && dashboardMetaElement.dataset ? dashboardMetaElement.dataset.readOnly : '0') === '1'
    };

    const routeConfig = {
        getData: "{{ $getDataRoute ?? route('expediente-seguridad-social.home.getData') }}",
        importIndex: "{{ $importIndexRoute ?? route('expediente-seguridad-social.importacion.index') }}",
        previewDocumentTemplate: "{{ !$readOnlyDashboard ? route('expediente-seguridad-social.importacion.preview-document', ['id' => '__DOC_ID__']) : '' }}",
        upload: "{{ !$readOnlyDashboard ? route('expediente-seguridad-social.importacion.upload-file') : '' }}",
        validate: "{{ !$readOnlyDashboard ? route('expediente-seguridad-social.importacion.valid-file') : '' }}",
        importFile: "{{ !$readOnlyDashboard ? route('expediente-seguridad-social.importacion.import-file') : '' }}"
    };

    const dashboardState = {
        currentData: null,
        statusFilter: 'all',
        selectedPeriodId: null,
        currentSnapshot: {
            periodos: [],
            rows: [],
            totals: {},
            ejercicio: {}
        }
    };

    const docsUiState = {
        activeTab: 'all'
    };

    const loadingState = {
        active: true,
        startedAt: Date.now(),
        hideTimer: null,
        minDurationMs: 450
    };

    let quickUploadContext = null;

    function parseJsonScript(scriptId) {
        const element = document.getElementById(scriptId);
        if (!element) {
            return null;
        }

        try {
            return JSON.parse(element.textContent || '{}');
        } catch (error) {
            return null;
        }
    }

    function escapeHtml(value) {
        return String(value || '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function resolveRouteTemplate(template, replacement) {
        return String(template || '').replace('__DOC_ID__', String(replacement || ''));
    }

    function normalizePercent(value) {
        const num = Number(value || 0);
        return Math.max(0, Math.min(num, 100));
    }

    function formatDateTime(value) {
        if (!value) {
            return '-';
        }

        const date = new Date(value);
        if (Number.isNaN(date.getTime())) {
            return '-';
        }

        return date.toLocaleString('es-MX');
    }

    function confirmWithSwal(options) {
        const title = String(options && options.title ? options.title : 'Confirmar accion');
        const message = String(options && options.message ? options.message : 'Confirma para continuar.');
        const confirmText = String(options && options.confirmText ? options.confirmText : 'Continuar');
        const cancelText = String(options && options.cancelText ? options.cancelText : 'Cancelar');

        if (typeof Swal !== 'undefined') {
            return Swal.fire({
                icon: 'warning',
                title: title,
                text: message,
                showCancelButton: true,
                confirmButtonText: confirmText,
                cancelButtonText: cancelText,
                reverseButtons: true,
            }).then(function(result) {
                return !!(result && result.isConfirmed);
            });
        }

        return Promise.resolve(window.confirm(message));
    }

    function normalizeLooseExplorerValue(value) {
        return String(value || '').trim().toLowerCase();
    }

    function applyLooseExplorerFilters() {
        const $grid = $('#looseExplorerGrid');
        if (!$grid.length) {
            return;
        }

        const search = normalizeLooseExplorerValue($('#looseExplorerSearch').val());
        const extension = normalizeLooseExplorerValue($('#looseExplorerExtension').val() || 'all');
        const order = String($('#looseExplorerOrder').val() || 'recent');
        const cards = $grid.find('.js-loose-file-card').toArray();

        cards.sort(function(a, b) {
            const $a = $(a);
            const $b = $(b);
            const aCreated = Number($a.attr('data-created') || 0);
            const bCreated = Number($b.attr('data-created') || 0);
            const aName = String($a.attr('data-name') || '');
            const bName = String($b.attr('data-name') || '');

            if (order === 'oldest') {
                return aCreated - bCreated;
            }

            if (order === 'name_asc') {
                return aName.localeCompare(bName, 'es', { sensitivity: 'base' });
            }

            if (order === 'name_desc') {
                return bName.localeCompare(aName, 'es', { sensitivity: 'base' });
            }

            return bCreated - aCreated;
        });

        cards.forEach(function(card) {
            $grid.append(card);
        });

        let visibleCount = 0;
        cards.forEach(function(card) {
            const $card = $(card);
            const haystack = [
                $card.attr('data-name') || '',
                $card.attr('data-description') || '',
                $card.attr('data-file') || '',
                $card.attr('data-user') || ''
            ].join(' ').toLowerCase();
            const cardExt = normalizeLooseExplorerValue($card.attr('data-ext') || '');

            const textMatch = search === '' || haystack.indexOf(search) !== -1;
            const extensionMatch = extension === 'all' || cardExt === extension;
            const shouldShow = textMatch && extensionMatch;

            $card.toggleClass('hidden', !shouldShow);
            if (shouldShow) {
                visibleCount++;
            }
        });

        $('#looseExplorerVisibleCount').text(String(visibleCount));
        $('#looseExplorerNoResults').toggleClass('hidden', visibleCount > 0);
    }

    function applyDocumentTabState() {
        const activeTab = String(docsUiState.activeTab || 'all');
        const showCalendar = activeTab === 'all' || activeTab === 'calendar';
        const showLoose = activeTab === 'all' || activeTab === 'loose';
        const showDeclarations = activeTab === 'all' || activeTab === 'declarations';
        const showNominas = activeTab === 'all' || activeTab === 'nominas';

        $('#tourExpssCalendario').toggleClass('hidden', !showCalendar);
        $('#tourExpssArchivosSueltos').toggleClass('hidden', !showLoose);
        $('#tourExpssDeclaracionesAnuales').toggleClass('hidden', !showDeclarations);
        $('#tourExpssNominas').toggleClass('hidden', !showNominas);

        $('.js-doc-tab').removeClass('active').attr('aria-selected', 'false');
        $('.js-doc-tab[data-tab="' + activeTab + '"]').addClass('active').attr('aria-selected', 'true');
    }

    function getCellStatus(cell) {
        if (!cell || !cell.has_document) {
            return 'pendiente';
        }

        const status = String(cell.estado || 'sin_dato');
        return status === 'revisar' ? 'no_coincide' : status;
    }

    function buildImportUrl(row, cell, data) {
        if (dashboardPermissions.readOnly || String(routeConfig.importIndex || '') === '') {
            return '#';
        }

        const ejercicioId = data && data.ejercicio && data.ejercicio.id ?
            data.ejercicio.id :
            ($('#dashboardExerciseFilter').val() || '');

        const params = new URLSearchParams({
            source: 'dashboard',
            id_archivo: String(row.archivo_id || ''),
            id_ejercicio: String(ejercicioId || ''),
            id_periodo: String(cell.periodo_id || '')
        });

        return routeConfig.importIndex + '?' + params.toString();
    }

    function updateDashboardStatus(message) {
        $('#dashboardStatus').text(message || 'Sin estado');
    }

    function setDashboardLoading(isLoading) {
        const shell = $('.expss-dashboard-shell');
        const overlay = $('#dashboardSkeletonOverlay');
        const refreshButton = $('#dashboardRefreshBtn');

        const finalizeHide = function() {
            loadingState.active = false;
            shell.removeClass('dashboard-is-loading').attr('aria-busy', 'false');
            overlay.addClass('hidden').attr('aria-hidden', 'true');
            refreshButton.prop('disabled', false).removeClass('opacity-70 cursor-not-allowed');
        };

        if (isLoading) {
            if (loadingState.hideTimer) {
                clearTimeout(loadingState.hideTimer);
                loadingState.hideTimer = null;
            }

            if (loadingState.active) {
                return;
            }

            loadingState.active = true;
            loadingState.startedAt = Date.now();
            shell.addClass('dashboard-is-loading').attr('aria-busy', 'true');
            overlay.removeClass('hidden').attr('aria-hidden', 'false');
            refreshButton.prop('disabled', true).addClass('opacity-70 cursor-not-allowed');
            return;
        }

        if (!loadingState.active) {
            return;
        }

        const elapsed = Date.now() - loadingState.startedAt;
        const remaining = Math.max(loadingState.minDurationMs - elapsed, 0);

        if (remaining > 0) {
            loadingState.hideTimer = setTimeout(function() {
                loadingState.hideTimer = null;
                finalizeHide();
            }, remaining);
            return;
        }

        finalizeHide();
    }

    function refreshDashboardTimestamp(isoDate) {
        const value = isoDate ? formatDateTime(isoDate) : new Date().toLocaleString('es-MX');
        $('#dashboardLastRefresh').text(value);
    }

    function setCoverageBadge(totalEsperadas, pendientes) {
        const badge = $('#dashboardCoverageBadge');
        badge.removeClass(historyBadgeStates.join(' '));

        const total = Number(totalEsperadas || 0);
        const missing = Number(pendientes || 0);

        if (total === 0) {
            badge.addClass('neutral').text('Sin configuracion');
            return;
        }

        if (missing === 0) {
            badge.addClass('success').text('Cobertura completa');
            return;
        }

        const ratio = missing / total;
        if (ratio >= 0.5) {
            badge.addClass('danger').text('Critico: ' + missing + ' pendientes');
            return;
        }

        badge.addClass('warning').text('Pendientes: ' + missing);
    }

    function getPeriodCoverageClass(coveragePct) {
        const coverage = Number(coveragePct || 0);

        if (coverage >= 90) {
            return 'period-good';
        }

        if (coverage >= 70) {
            return 'period-medium';
        }

        return 'period-bad';
    }

    function setStatusFilterButtons() {
        $('.status-filter-btn').removeClass('active');
        $('.status-filter-btn[data-status="' + dashboardState.statusFilter + '"]').addClass('active');
    }

    function resolveRowCategoryValue(row) {
        const categoryId = Number(row && row.archivo_categoria_id ? row.archivo_categoria_id : 0);
        return categoryId > 0 ? String(categoryId) : 'sin_categoria';
    }

    function populateCategoryFilter(rows) {
        const select = $('#categoryFilter');
        if (!select.length) {
            return;
        }

        const previousValue = String(select.val() || '');
        const categoryMap = {};

        (rows || []).forEach(function(row) {
            const value = resolveRowCategoryValue(row);
            const label = String(row.archivo_categoria_nombre || 'Sin categoria').trim() || 'Sin categoria';

            if (!categoryMap[value]) {
                categoryMap[value] = label;
            }
        });

        const categories = Object.keys(categoryMap).map(function(value) {
            return {
                value: value,
                label: categoryMap[value]
            };
        }).sort(function(a, b) {
            return a.label.localeCompare(b.label, 'es', {
                sensitivity: 'base'
            });
        });

        const optionsHtml = ['<option value="">Todas las categorias</option>'];
        categories.forEach(function(item) {
            optionsHtml.push('<option value="' + escapeHtml(item.value) + '">' + escapeHtml(item.label) + '</option>');
        });

        select.html(optionsHtml.join(''));

        const hasPrevious = categories.some(function(item) {
            return item.value === previousValue;
        });

        select.val(hasPrevious ? previousValue : '');
    }

    function resetFilterState() {
        $('#archivoSearchFilter').val('');
        $('#categoryFilter').val('');
        $('#onlyPendingFilter').prop('checked', false);
        dashboardState.statusFilter = 'all';
        dashboardState.selectedPeriodId = null;
        setStatusFilterButtons();
        renderDashboard(dashboardState.currentData || {});
    }

    function renderPeriodFilterChip(periodos) {
        const wrap = $('#selectedPeriodFilterWrap');
        const label = $('#selectedPeriodFilterLabel');

        if (!dashboardState.selectedPeriodId) {
            wrap.addClass('hidden');
            label.text('-');
            return;
        }

        const selected = (periodos || []).find(function(item) {
            return String(item.id) === String(dashboardState.selectedPeriodId);
        });

        if (!selected) {
            dashboardState.selectedPeriodId = null;
            wrap.addClass('hidden');
            label.text('-');
            return;
        }

        label.text(String(selected.label || '-'));
        wrap.removeClass('hidden');
    }

    function renderGoalsPanel(data) {
        const totals = (data && data.totals) ? data.totals : {};
        const periodSummary = (data && Array.isArray(data.period_summary)) ? data.period_summary : [];

        const coverage = Number(totals.cobertura_pct || 0);

        $('#goalCoverageCurrent').text(coverage + '%');
        $('#goalCoverageBar').css('width', normalizePercent(coverage) + '%');

        const remaining = Number(Math.max(0, 100 - coverage).toFixed(1));
        const deltaLabel = remaining === 0 ?
            'Cobertura completa' :
            'Pendiente por cubrir: ' + remaining + '%';

        $('#goalCoverageDelta').text(deltaLabel);

        const currentMonth = (new Date()).getMonth() + 1;
        let periodItem = periodSummary.find(function(item) {
            return Number(item.periodo || 0) === currentMonth;
        });

        if (!periodItem && periodSummary.length) {
            periodItem = periodSummary[periodSummary.length - 1];
        }

        if (!periodItem) {
            $('#goalPeriodLabel').text('Periodo: -');
            $('#goalPeriodCurrent').text('0%');
            $('#goalPeriodBar').css('width', '0%');
            $('#goalPeriodStatus').text('Sin referencia');
            return;
        }

        const periodCoverage = Number(periodItem.cobertura_pct || 0);
        const periodLabel = String(periodItem.label || ('Periodo ' + String(periodItem.periodo || '-')));

        $('#goalPeriodLabel').text('Periodo: ' + periodLabel);
        $('#goalPeriodCurrent').text(periodCoverage + '%');
        $('#goalPeriodBar').css('width', normalizePercent(periodCoverage) + '%');

        if (periodCoverage >= 100) {
            $('#goalPeriodStatus').text('Cobertura completa');
        } else if (periodCoverage >= 85) {
            $('#goalPeriodStatus').text('Avance alto');
        } else if (periodCoverage >= 70) {
            $('#goalPeriodStatus').text('Avance medio');
        } else {
            $('#goalPeriodStatus').text('Atencion requerida');
        }
    }

    function renderSummary(data) {
        const totals = (data && data.totals) ? data.totals : {};
        const periodSummary = (data && Array.isArray(data.period_summary)) ? data.period_summary : [];
        const ejercicio = (data && data.ejercicio) ? data.ejercicio : {};
        const currentMonth = (new Date()).getMonth() + 1;

        const currentPeriod = periodSummary.find(function(item) {
            return Number(item.periodo || 0) === currentMonth;
        }) || null;

        const cargadosMes = Number(currentPeriod ? currentPeriod.completadas : 0);
        const faltantesMes = Number(currentPeriod ? currentPeriod.pendientes : 0);
        const cargadosAnio = Number(totals.combinaciones_cubiertas || 0);
        const faltantesAnio = Number(totals.pendientes || 0);

        $('#metricCargadosMes').text(String(cargadosMes));
        $('#metricCargadosAnio').text(String(cargadosAnio));
        $('#metricFaltantesMes').text(String(faltantesMes));
        $('#metricFaltantesAnio').text(String(faltantesAnio));

        $('#dashboardYearLabel').text(String(ejercicio.anio || '-'));

        setCoverageBadge(totals.combinaciones_esperadas || 0, totals.pendientes || 0);
        renderGoalsPanel(data);
    }

    function buildDetailPayload(row, cell, data) {
        const payload = {
            archivo_id: Number(row.archivo_id || 0),
            archivo_titulo: String(row.archivo_titulo || '-'),
            archivo_categoria_nombre: String(row.archivo_categoria_nombre || 'Sin categoria'),
            periodo_id: Number(cell.periodo_id || 0),
            periodo_label: String(cell.periodo_label || '-'),
            ejercicio_id: Number((data && data.ejercicio && data.ejercicio.id) ? data.ejercicio.id : ($('#dashboardExerciseFilter').val() || 0)),
            has_document: !!cell.has_document,
            estado: getCellStatus(cell),
            estado_label: String(cell.estado_label || 'Pendiente'),
            similitud: Number(cell.similitud || 0),
            fecha_importacion: String(cell.fecha_importacion || '-'),
            usuario: String(cell.usuario || '-'),
            versiones: Number(cell.versiones || 0),
            nombre_original: String(cell.nombre_original || '-'),
            documento_id: Number(cell.documento_id || 0),
            dias_sin_carga: row.dias_sin_carga,
            ultima_importacion: String(row.ultima_importacion || 'Sin cargas')
        };

        payload.import_url = buildImportUrl(row, cell, data);
        payload.preview_url = payload.documento_id > 0 ?
            resolveRouteTemplate(routeConfig.previewDocumentTemplate, payload.documento_id) :
            '';

        return payload;
    }

    function renderCalendar(data) {
        const periodos = (data && Array.isArray(data.periodos)) ? data.periodos : [];
        const rows = (data && Array.isArray(data.rows)) ? data.rows : [];
        const periodSummary = (data && Array.isArray(data.period_summary)) ? data.period_summary : [];

        renderPeriodFilterChip(periodos);

        const summaryMap = {};
        periodSummary.forEach(function(item) {
            summaryMap[String(item.periodo_id)] = item;
        });

        let displayedPeriodos = periodos.slice();
        if (dashboardState.selectedPeriodId) {
            displayedPeriodos = periodos.filter(function(periodo) {
                return String(periodo.id) === String(dashboardState.selectedPeriodId);
            });

            if (!displayedPeriodos.length) {
                dashboardState.selectedPeriodId = null;
                displayedPeriodos = periodos.slice();
                renderPeriodFilterChip(periodos);
            }
        }

        const displayedPeriodIds = new Set(displayedPeriodos.map(function(periodo) {
            return String(periodo.id);
        }));

        const searchTerm = String($('#archivoSearchFilter').val() || '').trim().toLowerCase();
        const selectedCategory = String($('#categoryFilter').val() || '');
        const onlyPending = $('#onlyPendingFilter').is(':checked');
        const statusFilter = String(dashboardState.statusFilter || 'all');

        const filteredRows = rows.filter(function(row) {
            const title = String(row.archivo_titulo || '').toLowerCase();
            const matchesSearch = searchTerm === '' || title.indexOf(searchTerm) !== -1;
            if (!matchesSearch) {
                return false;
            }

            if (selectedCategory !== '' && resolveRowCategoryValue(row) !== selectedCategory) {
                return false;
            }

            const matchesPending = !onlyPending || Number(row.pendientes || 0) > 0;
            if (!matchesPending) {
                return false;
            }

            if (statusFilter === 'all') {
                return true;
            }

            const cellsInView = (row.cells || []).filter(function(cell) {
                return displayedPeriodIds.has(String(cell.periodo_id || ''));
            });

            return cellsInView.some(function(cell) {
                return getCellStatus(cell) === statusFilter;
            });
        });

        filteredRows.sort(function(a, b) {
            const pendingDiff = Number(b.pendientes || 0) - Number(a.pendientes || 0);
            if (pendingDiff !== 0) {
                return pendingDiff;
            }

            const aAge = a.dias_sin_carga === null ? 99999 : Number(a.dias_sin_carga || 0);
            const bAge = b.dias_sin_carga === null ? 99999 : Number(b.dias_sin_carga || 0);
            if (bAge !== aAge) {
                return bAge - aAge;
            }

            return String(a.archivo_titulo || '').localeCompare(String(b.archivo_titulo || ''));
        });

        const displayRows = filteredRows.map(function(row) {
            const displayCells = (row.cells || []).filter(function(cell) {
                return displayedPeriodIds.has(String(cell.periodo_id || ''));
            });

            return {
                archivo_id: row.archivo_id,
                archivo_titulo: row.archivo_titulo,
                archivo_categoria_id: row.archivo_categoria_id,
                archivo_categoria_nombre: row.archivo_categoria_nombre,
                archivo_destacado: row.archivo_destacado,
                completadas: row.completadas,
                pendientes: row.pendientes,
                ultima_importacion: row.ultima_importacion,
                ultima_importacion_iso: row.ultima_importacion_iso,
                dias_sin_carga: row.dias_sin_carga,
                display_cells: displayCells
            };
        });

        dashboardState.currentSnapshot = {
            periodos: displayedPeriodos,
            rows: displayRows,
            totals: (data && data.totals) ? data.totals : {},
            ejercicio: (data && data.ejercicio) ? data.ejercicio : {}
        };

        const headerColumns = displayedPeriodos.map(function(periodo) {
            const periodData = summaryMap[String(periodo.id)] || {};
            const pending = Number(periodData.pendientes || 0);
            const coverage = Number(periodData.cobertura_pct || 0);
            const toneClass = getPeriodCoverageClass(coverage);
            const isActive = dashboardState.selectedPeriodId && String(dashboardState.selectedPeriodId) === String(periodo.id);

            return [
                '<th>',
                '<button type="button" class="period-filter-btn js-period-filter ' + toneClass + (isActive ? ' active' : '') + '" data-period-id="' + escapeHtml(String(periodo.id)) + '">',
                '<span>' + escapeHtml(String(periodo.label || '-')) + '</span>',
                '</button>',
                '<div class="text-[10px] text-slate-500 mt-1">Cob: ' + coverage + '% | Pend: ' + pending + '</div>',
                '</th>'
            ].join('');
        }).join('');

        $('#calendarMatrixHead').html([
            '<tr>',
            '<th class="sticky-col-1">Archivo</th>',
            '<th class="sticky-col-2">Pend.</th>',
            headerColumns,
            '</tr>'
        ].join(''));

        if (!displayRows.length) {
            $('#calendarMatrixBody').html('<tr><td class="sticky-col-1" colspan="2">Sin resultados</td><td colspan="' + Math.max(displayedPeriodos.length, 1) + '">No hay archivos que coincidan con los filtros aplicados.</td></tr>');
            $('#calendarMatrixFoot').html('');
            return;
        }

        const bodyRows = displayRows.map(function(row) {
            const ageLabel = row.dias_sin_carga === null ?
                'Sin cargas previas' :
                (String(row.dias_sin_carga || 0) + ' dias sin carga');

            const firstCol = [
                '<td class="sticky-col-1">',
                '<div class="font-semibold text-slate-800">' + escapeHtml(String(row.archivo_titulo || 'Archivo sin titulo')) + '</div>',
                '<div class="mt-1"><span class="archivo-category-badge' + (Number(row.archivo_categoria_id || 0) > 0 ? '' : ' uncategorized') + '">' + escapeHtml(String(row.archivo_categoria_nombre || 'Sin categoria')) + '</span></div>',
                '<div class="text-[10px] text-slate-500">Ultima carga: ' + escapeHtml(String(row.ultima_importacion || 'Sin cargas')) + '</div>',
                '<div class="text-[10px] text-rose-600">Antiguedad: ' + escapeHtml(ageLabel) + '</div>',
                Number(row.archivo_destacado || 0) === 1 ? '<div class="text-[10px] text-emerald-600">Archivo destacado</div>' : '',
                '</td>'
            ].join('');

            const secondCol = '<td class="sticky-col-2"><span class="font-semibold text-rose-600">' + String(row.pendientes || 0) + '</span></td>';

            const cellsHtml = (row.display_cells || []).map(function(cell) {
                const status = getCellStatus(cell);
                const hasDocument = !!cell.has_document;
                const cellClass = hasDocument ? status : 'pending';
                const detail = buildDetailPayload(row, cell, data);
                const encodedDetail = encodeURIComponent(JSON.stringify(detail));


                if (!hasDocument) {
                    return [
                        '<td class="calendar-cell pending js-open-cell-detail" data-detail="' + escapeHtml(encodedDetail) + '">',
                        '<div class="font-semibold">Pendiente</div>',
                        '<div class="text-[10px]">Sin importacion</div>',
                        '</td>'
                    ].join('');
                }

                const tooltip = [
                    'Estado: ' + String(detail.estado_label || '-'),
                    'Fecha: ' + String(detail.fecha_importacion || '-'),
                    'Archivo: ' + String(detail.nombre_original || '-'),
                    'Usuario: ' + String(detail.usuario || '-'),
                    'Versiones: ' + String(detail.versiones || 1),
                    'Similitud: ' + String(detail.similitud || 0) + '%'
                ].join(' | ');

                return [
                    '<td class="calendar-cell ' + cellClass + '" title="' + escapeHtml(tooltip) + '">',
                    '<div class="font-semibold">' + escapeHtml(String(detail.estado_label || '-')) + '</div>',
                    '<div class="text-[10px]">' + escapeHtml(String(detail.fecha_importacion || '-')) + '</div>',
                    Number(detail.versiones || 0) > 1 ? '<div class="text-[10px]">Versiones: ' + String(detail.versiones) + '</div>' : '',
                    '<div class="cell-actions">',
                    (!dashboardPermissions.readOnly && detail.preview_url !== '') ?
                    '<a href="' + escapeHtml(detail.preview_url) + '" target="_blank" rel="noopener noreferrer" class="calendar-action-btn action-open">Abrir archivo</a>' :
                    '',
                    '<button type="button" class="calendar-action-btn action-detail js-open-cell-detail" data-detail="' + escapeHtml(encodedDetail) + '">Detalle</button>',
                    '</div>',
                    '</td>'
                ].join('');
            }).join('');

            return '<tr>' + firstCol + secondCol + cellsHtml + '</tr>';
        }).join('');

        $('#calendarMatrixBody').html(bodyRows);

        const totals = (data && data.totals) ? data.totals : {};
        const footerCells = displayedPeriodos.map(function(periodo) {
            const periodData = summaryMap[String(periodo.id)] || {};
            const pending = Number(periodData.pendientes || 0);
            const className = pending > 0 ? 'text-rose-600' : 'text-emerald-600';

            return '<td class="text-center ' + className + '">Pendientes: ' + pending + '</td>';
        }).join('');

        $('#calendarMatrixFoot').html([
            '<tr>',
            '<td class="sticky-col-1 font-semibold">Totales pendientes por periodo</td>',
            '<td class="sticky-col-2 font-semibold text-rose-600">' + String(totals.pendientes || 0) + '</td>',
            footerCells,
            '</tr>'
        ].join(''));

    }

    function renderDashboard(data) {
        dashboardState.currentData = data || {};
        populateCategoryFilter(Array.isArray(dashboardState.currentData.rows) ? dashboardState.currentData.rows : []);
        renderSummary(dashboardState.currentData);
        renderCalendar(dashboardState.currentData);
    }

    function loadDashboardData() {
        updateDashboardStatus('Actualizando calendario...');
        setDashboardLoading(true);

        $.ajax({
            url: routeConfig.getData,
            method: 'POST',
            data: {
                id_ejercicio: $('#dashboardExerciseFilter').val() || ''
            },
            success: function(response) {
                if (!response || !response.success) {
                    updateDashboardStatus('No fue posible actualizar los datos');
                    setDashboardLoading(false);
                    return;
                }

                renderDashboard(response.data || {});
                updateDashboardStatus('Calendario actualizado');
                refreshDashboardTimestamp(response.data && response.data.totals ? response.data.totals.generated_at : null);
                setDashboardLoading(false);
            },
            error: function() {
                updateDashboardStatus('No fue posible actualizar los datos');
                setDashboardLoading(false);
            }
        });
    }

    function setDetailBadge(status, label) {
        const badge = $('#detailEstadoBadge');

        badge.removeClass('detail-badge-neutral detail-badge-success detail-badge-danger detail-badge-info');

        if (status === 'coincide') {
            badge.addClass('detail-badge-success').text('Cargado');
            return;
        }

        if (status === 'no_coincide') {
            badge.addClass('detail-badge-danger').text(label || 'No coincide');
            return;
        }

        if (status === 'sin_dato') {
            badge.addClass('detail-badge-info').text(label || 'Sin dato');
            return;
        }

        badge.addClass('detail-badge-neutral').text(label || 'Pendiente');
    }

    function closeCellDetailPanel() {
        $('#cellDetailOverlay').addClass('hidden');
        $('#cellDetailPanel').addClass('translate-x-full');
        $('body').removeClass('overflow-hidden');
    }

    function openCellDetailPanel(detail) {
        if (!detail) {
            return;
        }

        setDetailBadge(String(detail.estado || 'pendiente'), String(detail.estado_label || 'Pendiente'));

        $('#detailArchivo').text(String(detail.archivo_titulo || '-'));
        $('#detailCategoria').text(String(detail.archivo_categoria_nombre || 'Sin categoria'));
        $('#detailPeriodo').text(String(detail.periodo_label || '-'));
        $('#detailFecha').text(String(detail.fecha_importacion || '-'));
        $('#detailUsuario').text(String(detail.usuario || '-'));
        $('#detailVersiones').text(String(detail.versiones || 0));
        $('#detailSimilitud').text(String(detail.similitud || 0) + '%');
        $('#detailNombre').text(String(detail.nombre_original || '-'));

        const ageText = detail.dias_sin_carga === null ?
            'Sin cargas previas registradas.' :
            ('Ultima carga hace ' + String(detail.dias_sin_carga || 0) + ' dias.');

        $('#detailContextInfo').text(ageText);

        if (!dashboardPermissions.readOnly && String(detail.preview_url || '') !== '') {
            $('#detailOpenFileBtn').attr('href', String(detail.preview_url)).removeClass('hidden');
        } else {
            $('#detailOpenFileBtn').attr('href', '#').addClass('hidden');
        }

        if (!dashboardPermissions.readOnly) {
            $('#detailImportBtn').attr('href', String(detail.import_url || '#'));
        }

        $('#detailQuickUploadBtn')
            .attr('data-archivo-id', String(detail.archivo_id || 0))
            .attr('data-archivo-titulo', String(detail.archivo_titulo || ''))
            .attr('data-periodo-id', String(detail.periodo_id || 0))
            .attr('data-periodo-label', String(detail.periodo_label || ''))
            .attr('data-ejercicio-id', String(detail.ejercicio_id || 0));

        $('#cellDetailOverlay').removeClass('hidden');
        $('#cellDetailPanel').removeClass('translate-x-full');
        $('body').addClass('overflow-hidden');
    }

    function openQuickUploadModal(payload) {
        if (dashboardPermissions.readOnly) {
            return;
        }

        if (!payload || Number(payload.archivo_id || 0) <= 0 || Number(payload.periodo_id || 0) <= 0 || Number(payload.ejercicio_id || 0) <= 0) {
            return;
        }

        quickUploadContext = {
            archivo_id: Number(payload.archivo_id || 0),
            archivo_titulo: String(payload.archivo_titulo || '-'),
            periodo_id: Number(payload.periodo_id || 0),
            periodo_label: String(payload.periodo_label || '-'),
            ejercicio_id: Number(payload.ejercicio_id || 0)
        };

        $('#quickUploadArchivo').text(quickUploadContext.archivo_titulo);
        $('#quickUploadEjercicio').text(String(quickUploadContext.ejercicio_id));
        $('#quickUploadPeriodo').text(quickUploadContext.periodo_label);
        $('#quickUploadFile').val('');

        setQuickUploadStatus('info', 'Selecciona el archivo y confirma la carga.');
        $('#quickUploadModal').modal('show');
    }

    function setQuickUploadStatus(type, message) {
        const box = $('#quickUploadStatus');

        box.removeClass('border-slate-200 bg-slate-50 text-slate-600 border-emerald-200 bg-emerald-50 text-emerald-700 border-rose-200 bg-rose-50 text-rose-700 border-blue-200 bg-blue-50 text-blue-700 border-amber-200 bg-amber-50 text-amber-700');

        if (type === 'success') {
            box.addClass('border-emerald-200 bg-emerald-50 text-emerald-700');
        } else if (type === 'danger') {
            box.addClass('border-rose-200 bg-rose-50 text-rose-700');
        } else if (type === 'warning') {
            box.addClass('border-amber-200 bg-amber-50 text-amber-700');
        } else {
            box.addClass('border-blue-200 bg-blue-50 text-blue-700');
        }

        box.text(message || 'Sin estado');
    }

    function getQuickUploadPayloadFromElement(element) {
        const el = $(element);

        return {
            archivo_id: Number(el.attr('data-archivo-id') || 0),
            archivo_titulo: String(el.attr('data-archivo-titulo') || ''),
            periodo_id: Number(el.attr('data-periodo-id') || 0),
            periodo_label: String(el.attr('data-periodo-label') || ''),
            ejercicio_id: Number(el.attr('data-ejercicio-id') || 0)
        };
    }

    function runQuickUpload() {
        if (dashboardPermissions.readOnly) {
            return;
        }

        if (!quickUploadContext) {
            setQuickUploadStatus('danger', 'No se detecto el contexto de archivo/periodo.');
            return;
        }

        const input = document.getElementById('quickUploadFile');
        if (!input || !input.files || !input.files.length) {
            setQuickUploadStatus('warning', 'Selecciona un archivo PDF o Excel para continuar.');
            return;
        }

        const file = input.files[0];
        const extension = (String(file.name || '').split('.').pop() || '').toLowerCase();
        if (!['pdf', 'xls', 'xlsx'].includes(extension)) {
            setQuickUploadStatus('danger', 'Solo se permiten archivos PDF o Excel (.xls, .xlsx).');
            return;
        }

        const maxSize = 50 * 1024 * 1024;
        if ((file.size || 0) > maxSize) {
            setQuickUploadStatus('danger', 'El archivo excede 50 MB.');
            return;
        }

        const button = $('#quickUploadSubmit');
        button.prop('disabled', true).text('Procesando...');

        const basePayload = {
            id_archivo: quickUploadContext.archivo_id,
            id_ejercicio: quickUploadContext.ejercicio_id,
            id_periodo: quickUploadContext.periodo_id
        };

        const completeButton = function() {
            button.prop('disabled', false).text('Subir y procesar');
        };

        const executeImport = function(tempToken, acceptReview) {
            setQuickUploadStatus('info', '3/3 Importando archivo...');

            $.ajax({
                url: routeConfig.importFile,
                method: 'POST',
                data: {
                    temp_token: tempToken,
                    id_archivo: basePayload.id_archivo,
                    id_ejercicio: basePayload.id_ejercicio,
                    id_periodo: basePayload.id_periodo,
                    accept_review: acceptReview ? 1 : 0
                },
                success: function(response) {
                    if (!response || response.result !== 1) {
                        setQuickUploadStatus('danger', String(response && response.message ? response.message : 'No fue posible completar la importacion.'));
                        completeButton();
                        return;
                    }

                    setQuickUploadStatus('success', String(response.message || 'Importacion completada correctamente.'));
                    loadDashboardData();

                    setTimeout(function() {
                        $('#quickUploadModal').modal('hide');
                        completeButton();
                    }, 900);
                },
                error: function(xhr) {
                    const message = (xhr && xhr.responseJSON && xhr.responseJSON.message) ?
                        xhr.responseJSON.message :
                        'Ocurrio un error en la importacion.';
                    setQuickUploadStatus('danger', String(message));
                    completeButton();
                }
            });
        };

        const executeValidation = function(tempToken) {
            setQuickUploadStatus('info', '2/3 Validando archivo...');

            $.ajax({
                url: routeConfig.validate,
                method: 'POST',
                data: {
                    temp_token: tempToken,
                    id_archivo: basePayload.id_archivo,
                    id_ejercicio: basePayload.id_ejercicio,
                    id_periodo: basePayload.id_periodo,
                    accept_review: 0
                },
                success: function(response) {
                    const report = response && response.data ? response.data : {};
                    const status = String(report.status || (response && response.result === 1 ? 'success' : 'error'));

                    if (status === 'error') {
                        setQuickUploadStatus('danger', String(response && response.message ? response.message : 'La validacion no permitio importar.'));
                        completeButton();
                        return;
                    }

                    if (status === 'review_needed') {
                        const reviewMessage = 'La validacion requiere confirmacion adicional. Deseas continuar con la importacion?';

                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Validacion adicional',
                                text: reviewMessage,
                                showCancelButton: true,
                                confirmButtonText: 'Continuar',
                                cancelButtonText: 'Cancelar'
                            }).then(function(result) {
                                if (!result.isConfirmed) {
                                    setQuickUploadStatus('warning', 'Importacion cancelada por el usuario.');
                                    completeButton();
                                    return;
                                }

                                executeImport(tempToken, true);
                            });

                            return;
                        }

                        if (!window.confirm(reviewMessage)) {
                            setQuickUploadStatus('warning', 'Importacion cancelada por el usuario.');
                            completeButton();
                            return;
                        }

                        executeImport(tempToken, true);
                        return;
                    }

                    executeImport(tempToken, false);
                },
                error: function(xhr) {
                    const message = (xhr && xhr.responseJSON && xhr.responseJSON.message) ?
                        xhr.responseJSON.message :
                        'Ocurrio un error al validar el archivo.';
                    setQuickUploadStatus('danger', String(message));
                    completeButton();
                }
            });
        };

        const formData = new FormData();
        formData.append('file', file);

        setQuickUploadStatus('info', '1/3 Subiendo archivo...');

        $.ajax({
            url: routeConfig.upload,
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (!response || response.result !== 1 || !response.data || !response.data.temp_token) {
                    setQuickUploadStatus('danger', String(response && response.message ? response.message : 'No fue posible subir el archivo.'));
                    completeButton();
                    return;
                }

                executeValidation(String(response.data.temp_token));
            },
            error: function(xhr) {
                const message = (xhr && xhr.responseJSON && xhr.responseJSON.message) ?
                    xhr.responseJSON.message :
                    'Ocurrio un error al subir el archivo.';
                setQuickUploadStatus('danger', String(message));
                completeButton();
            }
        });
    }

    function downloadBlob(filename, blob, mimeType) {
        const url = URL.createObjectURL(new Blob([blob], {
            type: mimeType || 'application/octet-stream'
        }));

        const link = document.createElement('a');
        link.href = url;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        setTimeout(function() {
            URL.revokeObjectURL(url);
        }, 300);
    }

    function buildExportMatrix() {
        const snapshot = dashboardState.currentSnapshot || {};
        const periodos = Array.isArray(snapshot.periodos) ? snapshot.periodos : [];
        const rows = Array.isArray(snapshot.rows) ? snapshot.rows : [];

        const headers = ['Archivo', 'Categoria', 'Pendientes', 'Ultima importacion', 'Dias sin carga'];
        periodos.forEach(function(periodo) {
            headers.push(String(periodo.label || '-'));
        });

        const tableRows = rows.map(function(row) {
            const cellsMap = {};
            (row.display_cells || []).forEach(function(cell) {
                cellsMap[String(cell.periodo_id)] = cell;
            });

            const baseRow = [
                String(row.archivo_titulo || '-'),
                String(row.archivo_categoria_nombre || 'Sin categoria'),
                String(row.pendientes || 0),
                String(row.ultima_importacion || 'Sin cargas'),
                row.dias_sin_carga === null ? 'Sin cargas previas' : (String(row.dias_sin_carga) + ' dias')
            ];

            periodos.forEach(function(periodo) {
                const cell = cellsMap[String(periodo.id)] || null;
                if (!cell || !cell.has_document) {
                    baseRow.push('Pendiente');
                    return;
                }

                baseRow.push(String(cell.estado_label || '-') + ' | ' + String(cell.fecha_importacion || '-'));
            });

            return baseRow;
        });

        return {
            headers: headers,
            rows: tableRows
        };
    }

    function exportMatrixToExcel() {
        const matrix = buildExportMatrix();

        if (!matrix.rows.length) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'info',
                    title: 'Sin datos',
                    text: 'No hay filas para exportar con los filtros actuales.'
                });
            }
            return;
        }

        const headerHtml = matrix.headers.map(function(item) {
            return '<th style="border:1px solid #cbd5e1;padding:6px;background:#f1f5f9;">' + escapeHtml(item) + '</th>';
        }).join('');

        const bodyHtml = matrix.rows.map(function(row) {
            const cols = row.map(function(col) {
                return '<td style="border:1px solid #cbd5e1;padding:6px;">' + escapeHtml(col) + '</td>';
            }).join('');

            return '<tr>' + cols + '</tr>';
        }).join('');

        const html = [
            '<html><head><meta charset="UTF-8"></head><body>',
            '<table>',
            '<thead><tr>', headerHtml, '</tr></thead>',
            '<tbody>', bodyHtml, '</tbody>',
            '</table>',
            '</body></html>'
        ].join('');

        const now = new Date();
        const fileName = 'expediente_seguridad_social_matriz_' +
            now.getFullYear() +
            String(now.getMonth() + 1).padStart(2, '0') +
            String(now.getDate()).padStart(2, '0') +
            '_' +
            String(now.getHours()).padStart(2, '0') +
            String(now.getMinutes()).padStart(2, '0') +
            '.xls';

        downloadBlob(fileName, '\ufeff' + html, 'application/vnd.ms-excel;charset=utf-8;');
    }

    function exportMatrixToPdf() {
        const matrix = buildExportMatrix();

        if (!matrix.rows.length) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'info',
                    title: 'Sin datos',
                    text: 'No hay filas para exportar con los filtros actuales.'
                });
            }
            return;
        }

        const headerHtml = matrix.headers.map(function(item) {
            return '<th>' + escapeHtml(item) + '</th>';
        }).join('');

        const bodyHtml = matrix.rows.map(function(row) {
            const cols = row.map(function(col) {
                return '<td>' + escapeHtml(col) + '</td>';
            }).join('');

            return '<tr>' + cols + '</tr>';
        }).join('');

        const win = window.open('', '_blank');
        if (!win) {
            return;
        }

        const title = 'Matriz de importaciones - Expediente Seguridad Social';
        win.document.write([
            '<html><head><title>' + escapeHtml(title) + '</title>',
            '<style>',
            'body{font-family:Arial,sans-serif;padding:18px;color:#0f172a;}',
            'h1{font-size:16px;margin-bottom:10px;}',
            'table{border-collapse:collapse;width:100%;font-size:10px;}',
            'th,td{border:1px solid #cbd5e1;padding:4px;vertical-align:top;text-align:left;}',
            'th{background:#f1f5f9;}',
            '</style>',
            '</head><body>',
            '<h1>' + escapeHtml(title) + '</h1>',
            '<table><thead><tr>', headerHtml, '</tr></thead><tbody>', bodyHtml, '</tbody></table>',
            '</body></html>'
        ].join(''));

        win.document.close();

        setTimeout(function() {
            win.focus();
            win.print();
        }, 300);
    }

    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        if ($.fn.select2) {
            $('.select2').select2({
                width: '100%'
            });
        }

        setStatusFilterButtons();

        setDashboardLoading(true);
        const initial = parseJsonScript('expss-dashboard-initial-json') || {};
        renderDashboard(initial);
        updateDashboardStatus('Calendario inicial cargado');
        refreshDashboardTimestamp(initial && initial.totals ? initial.totals.generated_at : null);
        setDashboardLoading(false);

        $('#dashboardRefreshBtn').on('click', function() {
            loadDashboardData();
        });

        $('#dashboardExerciseFilter').on('change', function() {
            loadDashboardData();
        });

        $('#archivoSearchFilter').on('input', function() {
            renderCalendar(dashboardState.currentData || {});
        });

        $('#categoryFilter').on('change', function() {
            renderCalendar(dashboardState.currentData || {});
        });

        $('#onlyPendingFilter').on('change', function() {
            renderCalendar(dashboardState.currentData || {});
        });

        $('#statusQuickFilters').on('click', '.status-filter-btn', function() {
            dashboardState.statusFilter = String($(this).attr('data-status') || 'all');
            setStatusFilterButtons();
            renderCalendar(dashboardState.currentData || {});
        });

        $(document).on('click', '.js-period-filter', function() {
            const periodId = String($(this).attr('data-period-id') || '');

            if (dashboardState.selectedPeriodId && String(dashboardState.selectedPeriodId) === periodId) {
                dashboardState.selectedPeriodId = null;
            } else {
                dashboardState.selectedPeriodId = periodId;
            }

            renderCalendar(dashboardState.currentData || {});
        });

        $('#clearPeriodFilterBtn').on('click', function() {
            dashboardState.selectedPeriodId = null;
            renderCalendar(dashboardState.currentData || {});
        });

        $('#clearFiltersBtn').on('click', function() {
            resetFilterState();
        });

        $('#exportExcelBtn').on('click', function() {
            exportMatrixToExcel();
        });

        $('#exportPdfBtn').on('click', function() {
            exportMatrixToPdf();
        });

        $(document).on('click', '.js-open-cell-detail', function() {
            const encoded = String($(this).attr('data-detail') || '');
            if (encoded === '') {
                return;
            }

            try {
                const detail = JSON.parse(decodeURIComponent(encoded));
                openCellDetailPanel(detail);
            } catch (error) {
                // Ignora payload invalido.
            }
        });

        $('#cellDetailCloseBtn, #cellDetailOverlay').on('click', function() {
            closeCellDetailPanel();
        });

        $(document).on('keydown', function(event) {
            if (event.key === 'Escape') {
                closeCellDetailPanel();
            }
        });

        $(document).on('submit', '.js-swal-delete-form', function(event) {
            event.preventDefault();
            const form = this;
            const $form = $(form);

            confirmWithSwal({
                title: String($form.attr('data-confirm-title') || 'Eliminar registro'),
                message: String($form.attr('data-confirm-message') || 'Esta accion no se puede deshacer.'),
                confirmText: 'Si, eliminar',
                cancelText: 'Cancelar'
            }).then(function(isConfirmed) {
                if (isConfirmed) {
                    form.submit();
                }
            });
        });

        if (!dashboardPermissions.readOnly) {
            const extractAjaxErrorMessage = function(xhr, fallback) {
                const fallbackMessage = String(fallback || 'No fue posible completar la operacion.');
                if (!xhr || !xhr.responseJSON) {
                    return fallbackMessage;
                }

                const response = xhr.responseJSON;
                if (response.errors && typeof response.errors === 'object') {
                    const firstField = Object.keys(response.errors)[0] || '';
                    const firstError = firstField !== '' && Array.isArray(response.errors[firstField])
                        ? response.errors[firstField][0]
                        : '';

                    if (firstError) {
                        return String(firstError);
                    }
                }

                if (response.message) {
                    return String(response.message);
                }

                return fallbackMessage;
            };

            const notifyAjaxResult = function(icon, message) {
                const text = String(message || 'Operacion completada.');
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: icon,
                        title: icon === 'success' ? 'Listo' : 'Atencion',
                        text: text,
                        timer: icon === 'success' ? 1800 : undefined,
                        showConfirmButton: icon !== 'success'
                    });
                    return;
                }

                if (icon !== 'success') {
                    window.alert(text);
                }
            };

            const reloadDashboardFragments = function(selectors) {
                return $.get(window.location.href).then(function(html) {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(String(html || ''), 'text/html');

                    (selectors || []).forEach(function(selector) {
                        const currentNode = document.querySelector(selector);
                        const nextNode = doc.querySelector(selector);
                        if (currentNode && nextNode) {
                            currentNode.replaceWith(nextNode);
                        }
                    });

                    applyDocumentTabState();
                });
            };

            const submitCreationFormAjax = function(form, fallbackMessage) {
                const $form = $(form);
                const $submitBtn = $form.find('button[type="submit"]').first();
                const originalText = String($submitBtn.text() || 'Guardar');
                const formData = new FormData(form);

                $submitBtn.prop('disabled', true).text('Guardando...');

                return $.ajax({
                    url: String($form.attr('action') || window.location.href),
                    method: String($form.attr('method') || 'POST').toUpperCase(),
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                }).always(function() {
                    $submitBtn.prop('disabled', false).text(originalText);
                }).then(function(response) {
                    return response;
                }, function(xhr) {
                    notifyAjaxResult('error', extractAjaxErrorMessage(xhr, fallbackMessage));
                    return $.Deferred().reject(xhr);
                });
            };

            $(document).on('click', '.js-toggle-ejercicio-form', function() {
                const $btn = $(this);
                const targetSelector = String($btn.attr('data-target') || '');
                if (targetSelector === '') {
                    return;
                }

                const $target = $(targetSelector);
                if (!$target.length) {
                    return;
                }

                $target.toggleClass('hidden');
                const isOpen = !$target.hasClass('hidden');
                const label = isOpen
                    ? String($btn.attr('data-close-label') || 'Ocultar')
                    : String($btn.attr('data-open-label') || 'Crear ejercicio');

                $btn.attr('aria-expanded', isOpen ? 'true' : 'false').find('span').last().text(label);
                if (isOpen) {
                    $target.find('input[name="anio"]').trigger('focus');
                }
            });

            $('#annualDeclarationUploadModal').on('hidden.bs.modal', function() {
                const $modal = $(this);
                $modal.find('.js-ajax-create-declaracion-ejercicio').addClass('hidden').each(function() {
                    this.reset();
                });

                $modal.find('.js-toggle-ejercicio-form').each(function() {
                    const $btn = $(this);
                    $btn.attr('aria-expanded', 'false').find('span').last().text(String($btn.attr('data-open-label') || 'Crear ejercicio'));
                });
            });

            $(document).on('submit', '.js-ajax-create-loose-file', function(event) {
                event.preventDefault();
                const form = this;

                submitCreationFormAjax(form, 'No fue posible cargar el archivo suelto.')
                    .then(function(response) {
                        form.reset();
                        $('#looseFileUploadModal').modal('hide');

                        return reloadDashboardFragments(['#tourExpssArchivosSueltos']).then(function() {
                            applyLooseExplorerFilters();
                            notifyAjaxResult('success', String(response && response.message ? response.message : 'Archivo suelto cargado correctamente.'));
                        });
                    });
            });

            $(document).on('submit', '.js-ajax-create-declaracion-ejercicio', function(event) {
                event.preventDefault();
                const form = this;

                submitCreationFormAjax(form, 'No fue posible crear el ejercicio para declaraciones anuales.')
                    .then(function(response) {
                        const ejercicio = response && response.data && response.data.ejercicio ? response.data.ejercicio : null;
                        const $select = $('#modal_declaracion_ejercicio');

                        if (ejercicio && $select.length) {
                            const value = String(ejercicio.id || '');
                            if (value !== '' && $select.find('option[value="' + value + '"]').length === 0) {
                                $select.prepend('<option value="' + escapeHtml(value) + '">' + escapeHtml(String(ejercicio.anio || '')) + '</option>');
                            }

                            if (value !== '') {
                                $select.val(value);
                            }
                        }

                        const yearInput = form.querySelector('input[name="anio"]');
                        if (yearInput) {
                            yearInput.value = '';
                        }

                        return reloadDashboardFragments(['#tourExpssDeclaracionesAnuales']).then(function() {
                            notifyAjaxResult('success', String(response && response.message ? response.message : 'Ejercicio creado correctamente con sus 12 periodos.'));
                        });
                    });
            });

            $(document).on('submit', '.js-ajax-create-declaracion-anual', function(event) {
                event.preventDefault();
                const form = this;

                submitCreationFormAjax(form, 'No fue posible cargar la declaracion anual.')
                    .then(function(response) {
                        form.reset();
                        $('#modal_declaracion_descripcion_preview').addClass('hidden').text('');
                        $('#annualDeclarationUploadModal').modal('hide');

                        return reloadDashboardFragments(['#tourExpssDeclaracionesAnuales']).then(function() {
                            notifyAjaxResult('success', String(response && response.message ? response.message : 'Declaracion anual cargada correctamente.'));
                        });
                    });
            });

            $(document).on('change', '#modal_declaracion_archivo_catalogo', function() {
                const $option = $(this).find('option:selected');
                const descripcion = String($option.attr('data-descripcion') || '').trim();
                const $preview = $('#modal_declaracion_descripcion_preview');

                if (descripcion === '') {
                    $preview.addClass('hidden').text('');
                    return;
                }

                $preview.removeClass('hidden').text(descripcion);
            });

            const periodosCatalogoData = (function() {
                const node = document.getElementById('expss-periodos-catalogo-json');
                if (!node) {
                    return [];
                }

                try {
                    const parsed = JSON.parse(String(node.textContent || '[]'));
                    return Array.isArray(parsed) ? parsed : [];
                } catch (error) {
                    return [];
                }
            })();

            function renderNominaPeriodoOptions(ejercicioId) {
                const $select = $('#modal_nomina_periodo');
                const options = ['<option value="">Selecciona periodo</option>'];

                periodosCatalogoData
                    .filter(function(item) {
                        return String(item.id_ejercicio || '') === String(ejercicioId || '');
                    })
                    .forEach(function(item) {
                        const label = String(item.descripcion || '').trim() !== ''
                            ? String(item.descripcion)
                            : ('Periodo ' + String(item.periodo || '-'));
                        options.push('<option value="' + escapeHtml(String(item.id || '')) + '">' + escapeHtml(label) + '</option>');
                    });

                $select.html(options.join(''));
                $select.prop('disabled', String(ejercicioId || '') === '');
            }

            $(document).on('change', '#modal_nomina_ejercicio', function() {
                renderNominaPeriodoOptions(String($(this).val() || ''));
            });

            $(document).on('change', '#modal_nomina_archivo_catalogo', function() {
                const $option = $(this).find('option:selected');
                const descripcion = String($option.attr('data-descripcion') || '').trim();
                const $preview = $('#modal_nomina_descripcion_preview');

                if (descripcion === '') {
                    $preview.addClass('hidden').text('');
                    return;
                }

                $preview.removeClass('hidden').text(descripcion);
            });

            $(document).on('submit', '.js-ajax-create-nomina', function(event) {
                event.preventDefault();
                const form = this;

                submitCreationFormAjax(form, 'No fue posible cargar el documento de nomina.')
                    .then(function(response) {
                        form.reset();
                        $('#modal_nomina_descripcion_preview').addClass('hidden').text('');
                        renderNominaPeriodoOptions('');
                        $('#nominaUploadModal').modal('hide');

                        return reloadDashboardFragments(['#tourExpssNominas']).then(function() {
                            notifyAjaxResult('success', String(response && response.message ? response.message : 'Documento de nomina cargado correctamente.'));
                        });
                    });
            });

            $('#nominaUploadModal').on('hidden.bs.modal', function() {
                const form = this.querySelector('.js-ajax-create-nomina');
                if (form) {
                    form.reset();
                }
                $('#modal_nomina_descripcion_preview').addClass('hidden').text('');
                renderNominaPeriodoOptions('');
            });

            $(document).on('click', '.js-open-quick-upload', function() {
                const payload = getQuickUploadPayloadFromElement(this);
                openQuickUploadModal(payload);
            });

            $('#detailQuickUploadBtn').on('click', function() {
                const payload = getQuickUploadPayloadFromElement(this);
                openQuickUploadModal(payload);
            });

            $('#quickUploadSubmit').on('click', function() {
                runQuickUpload();
            });

            $('#quickUploadModal').on('hidden.bs.modal', function() {
                quickUploadContext = null;
                $('#quickUploadFile').val('');
                setQuickUploadStatus('info', 'Selecciona el archivo y confirma la carga.');
            });

            $(document).on('input', '#looseExplorerSearch', function() {
                applyLooseExplorerFilters();
            });

            $(document).on('change', '#looseExplorerExtension, #looseExplorerOrder', function() {
                applyLooseExplorerFilters();
            });

            applyLooseExplorerFilters();
        }

        $(document).on('click', '.js-doc-tab', function() {
            docsUiState.activeTab = String($(this).attr('data-tab') || 'all');
            applyDocumentTabState();
        });

        applyDocumentTabState();
    });
</script>
@endpush