@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 expf-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>

                    <div class="rounded-lg border border-gray-200 p-4 mb-4 bg-white" id="tourExpfCalendario">
                        <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">Coincide</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="tourExpfFiltros">
                            <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="coincide">Coincide</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="rounded-lg border border-rose-200 bg-rose-50 p-2.5 mb-3" id="dashboardAlertsPanel">
                            <div class="flex items-center justify-between gap-2 mb-1.5">
                                <h6 class="text-xs font-semibold text-rose-700 mb-0">Atencion hoy</h6>
                                <span class="text-[10px] text-rose-700">Criticos: vacios del mes actual y meses anteriores</span>
                            </div>
                            <div id="proactiveAlertsList" class="space-y-1.5 max-h-36 overflow-y-auto pr-1"></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>

                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-3" id="tourExpfKPIsPrincipales">
                        <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">
                </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>
@endif

<div id="cellDetailOverlay" class="fixed inset-0 hidden" style="z-index: 1048; background: rgba(15, 23, 42, 0.35);"></div>
<aside id="cellDetailPanel" class="fixed top-0 right-0 h-full w-full max-w-md bg-white 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-4 py-3 border-b border-slate-200 bg-slate-50 flex items-center justify-between">
            <h6 class="text-sm font-semibold text-slate-900 mb-0">Detalle de celda</h6>
            <button type="button" id="cellDetailCloseBtn" class="text-slate-500 hover:text-slate-800">Cerrar</button>
        </div>

        <div class="p-4 space-y-3 overflow-y-auto">
            <span id="detailEstadoBadge" class="inline-flex items-center rounded-md px-2 py-1 text-xs font-semibold bg-slate-100 text-slate-700">-</span>

            <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="detailArchivo">-</span></p>
                <p class="mb-0"><span class="font-semibold">Categoria:</span> <span id="detailCategoria">-</span></p>
                <p class="mb-0"><span class="font-semibold">Periodo:</span> <span id="detailPeriodo">-</span></p>
                <p class="mb-0"><span class="font-semibold">Fecha:</span> <span id="detailFecha">-</span></p>
                <p class="mb-0"><span class="font-semibold">Usuario:</span> <span id="detailUsuario">-</span></p>
                <p class="mb-0"><span class="font-semibold">Versiones:</span> <span id="detailVersiones">-</span></p>
                <p class="mb-0"><span class="font-semibold">Similitud:</span> <span id="detailSimilitud">-</span></p>
                <p class="mb-0"><span class="font-semibold">Nombre original:</span> <span id="detailNombre">-</span></p>
            </div>

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

            <div class="flex flex-wrap gap-2">
                @if(!$readOnlyDashboard)
                <a href="#" target="_blank" rel="noopener noreferrer" id="detailOpenFileBtn" class="hidden inline-flex items-center gap-1 bg-blue-600 hover:bg-blue-700 text-white rounded px-3 py-1 text-xs">Abrir archivo</a>
                <button type="button" id="detailQuickUploadBtn" class="inline-flex items-center gap-1 bg-sky-600 hover:bg-sky-700 text-white rounded px-3 py-1 text-xs">Carga rapida</button>
                <a href="#" id="detailImportBtn" class="inline-flex items-center gap-1 bg-emerald-600 hover:bg-emerald-700 text-white rounded px-3 py-1 text-xs">Abrir importacion</a>
                @endif
            </div>
        </div>
    </div>
</aside>

<script id="expf-dashboard-initial-json" type="application/json">
    @json($dashboardData)
</script>
<div id="expf-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 #tourExpfCalendario,
    .dashboard-is-loading #tourExpfKPIsPrincipales {
        filter: saturate(0.2);
    }

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

    .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;
    }

    .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;
    }

    .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('expf-dashboard-meta');
    const dashboardPermissions = {
        readOnly: String(dashboardMetaElement && dashboardMetaElement.dataset ? dashboardMetaElement.dataset.readOnly : '0') === '1'
    };

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

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

    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 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 = $('.expf-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 renderProactiveAlerts(data, displayedPeriodIds, sourceRows) {
        const rows = Array.isArray(sourceRows) ?
            sourceRows :
            ((data && Array.isArray(data.rows)) ? data.rows : []);
        const periodos = (data && Array.isArray(data.periodos)) ? data.periodos : [];
        const periodIdSet = displayedPeriodIds || new Set();
        const currentMonth = (new Date()).getMonth() + 1;
        const periodNumberMap = {};

        periodos.forEach(function(periodo) {
            periodNumberMap[String(periodo.id)] = Number(periodo.periodo || 0);
        });

        const alerts = [];

        rows.forEach(function(row) {
            (row.cells || []).forEach(function(cell) {
                if (!!cell.has_document) {
                    return;
                }

                const periodId = String(cell.periodo_id || '');
                if (periodIdSet.size > 0 && !periodIdSet.has(periodId)) {
                    return;
                }

                const periodNumber = Number(periodNumberMap[periodId] || cell.periodo || 0);
                if (periodNumber > currentMonth) {
                    return;
                }

                const age = row.dias_sin_carga === null ? 3650 : Number(row.dias_sin_carga || 0);
                const pending = Number(row.pendientes || 0);
                const score = (pending * 1000) + age + ((13 - periodNumber) * 10);

                alerts.push({
                    score: score,
                    row: row,
                    cell: cell
                });
            });
        });

        alerts.sort(function(a, b) {
            return b.score - a.score;
        });

        const top = alerts.slice(0, 6);
        const container = $('#proactiveAlertsList');

        if (!top.length) {
            container.html('<div class="rounded-md border border-emerald-200 bg-emerald-50 text-emerald-700 px-2.5 py-2 text-[11px]">No hay vacios criticos del mes actual y meses anteriores.</div>');
            return;
        }

        const html = top.map(function(item) {
            const row = item.row || {};
            const cell = item.cell || {};
            const age = row.dias_sin_carga === null ?
                'Sin cargas previas' :
                ('Sin carga desde hace ' + String(row.dias_sin_carga || 0) + ' dias');

            const payload = buildDetailPayload(row, cell, data);

            return [
                '<div class="rounded-md border border-rose-200 bg-white px-2.5 py-2 text-[11px]">',
                '<div class="flex flex-wrap items-start justify-between gap-2">',
                '<div class="min-w-0">',
                '<p class="mb-0 font-semibold text-slate-800 truncate">' + escapeHtml(String(row.archivo_titulo || '-')) + '</p>',
                '<p class="mb-0 text-slate-600">' + escapeHtml(String(cell.periodo_label || '-')) + ' | ' + escapeHtml(age) + ' | Cat: ' + escapeHtml(String(row.archivo_categoria_nombre || 'Sin categoria')) + '</p>',
                '</div>',
                '<div class="flex flex-wrap justify-end gap-1">',
                '<button type="button" class="alert-action-btn alert-action-secondary js-open-cell-detail" data-detail="' + escapeHtml(encodeURIComponent(JSON.stringify(payload))) + '">Detalle</button>',
                dashboardPermissions.readOnly ?
                '' :
                '<button type="button" class="alert-action-btn alert-action-accent js-open-quick-upload" data-archivo-id="' + escapeHtml(String(payload.archivo_id)) + '" data-archivo-titulo="' + escapeHtml(payload.archivo_titulo) + '" data-periodo-id="' + escapeHtml(String(payload.periodo_id)) + '" data-periodo-label="' + escapeHtml(payload.periodo_label) + '" data-ejercicio-id="' + escapeHtml(String(payload.ejercicio_id)) + '">Carga rapida</button>',
                dashboardPermissions.readOnly ?
                '' :
                '<a href="' + escapeHtml(payload.import_url) + '" class="alert-action-btn alert-action-primary">Ir a carga</a>',
                '</div>',
                '</div>',
                '</div>'
            ].join('');
        }).join('');

        container.html(html);
    }

    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('');
            renderProactiveAlerts(data, displayedPeriodIds, filteredRows);
            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">',
                        '<div class="font-semibold">Pendiente</div>',
                        '<div class="text-[10px]">Sin importacion</div>',
                        '<div class="cell-actions">',
                        '<button type="button" class="calendar-action-btn action-detail js-open-cell-detail" data-detail="' + escapeHtml(encodedDetail) + '">Detalle</button>',
                        dashboardPermissions.readOnly ?
                        '' :
                        '<button type="button" class="calendar-action-btn action-quick js-open-quick-upload" data-archivo-id="' + escapeHtml(String(detail.archivo_id)) + '" data-archivo-titulo="' + escapeHtml(detail.archivo_titulo) + '" data-periodo-id="' + escapeHtml(String(detail.periodo_id)) + '" data-periodo-label="' + escapeHtml(detail.periodo_label) + '" data-ejercicio-id="' + escapeHtml(String(detail.ejercicio_id)) + '">Carga rapida</button>',
                        dashboardPermissions.readOnly ?
                        '' :
                        '<a href="' + escapeHtml(detail.import_url) + '" class="calendar-action-btn action-upload">Abrir importacion</a>',
                        '</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]">Similitud: ' + String(detail.similitud || 0) + '%</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>',
                    dashboardPermissions.readOnly ?
                    '' :
                    '<button type="button" class="calendar-action-btn action-quick js-open-quick-upload" data-archivo-id="' + escapeHtml(String(detail.archivo_id)) + '" data-archivo-titulo="' + escapeHtml(detail.archivo_titulo) + '" data-periodo-id="' + escapeHtml(String(detail.periodo_id)) + '" data-periodo-label="' + escapeHtml(detail.periodo_label) + '" data-ejercicio-id="' + escapeHtml(String(detail.ejercicio_id)) + '">Reemplazo rapido</button>',
                    dashboardPermissions.readOnly ?
                    '' :
                    '<a href="' + escapeHtml(detail.import_url) + '" class="calendar-action-btn action-upload">Nueva carga</a>',
                    '</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(''));

        renderProactiveAlerts(data, displayedPeriodIds, filteredRows);
    }

    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('bg-slate-100 text-slate-700 bg-emerald-100 text-emerald-700 bg-rose-100 text-rose-700 bg-blue-100 text-blue-700');

        if (status === 'coincide') {
            badge.addClass('bg-emerald-100 text-emerald-700').text(label || 'Coincide');
            return;
        }

        if (status === 'no_coincide') {
            badge.addClass('bg-rose-100 text-rose-700').text(label || 'No coincide');
            return;
        }

        if (status === 'sin_dato') {
            badge.addClass('bg-blue-100 text-blue-700').text(label || 'Sin dato');
            return;
        }

        badge.addClass('bg-slate-100 text-slate-700').text(label || 'Pendiente');
    }

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

    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');
    }

    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 PDF para continuar.');
            return;
        }

        const file = input.files[0];
        const extension = (String(file.name || '').split('.').pop() || '').toLowerCase();
        if (extension !== 'pdf') {
            setQuickUploadStatus('danger', 'Solo se permiten archivos PDF.');
            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_fiscal_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 Fiscal';
        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('expf-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();
        });

        if (!dashboardPermissions.readOnly) {
            $(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.');
            });
        }
    });
</script>
@endpush