@include('includes.tailwind')
@php
    $routePrefix = $routePrefix ?? '';
    $moduleTitle = $moduleTitle ?? 'Importacion';
    $moduleDescription = $moduleDescription ?? '';
    $scope = $scope ?? ['periodo', 'categoria'];
    $type = $type ?? 'periodico';
    $endpointOverrides = $endpointOverrides ?? [];

    $bootPayload = $bootPayload ?? [
        'scope' => $scope,
        'type' => $type,
        'endpoints' => [
            'pendientes' => route($endpointOverrides['pendientes'] ?? ($routePrefix . 'pendientes-por-periodo')),
            'cargarDocumento' => route($endpointOverrides['cargarDocumento'] ?? ($routePrefix . 'cargar-documento-pendiente')),
            'storeArchivo' => route($endpointOverrides['storeArchivo'] ?? ($routePrefix . 'store-archivo-catalog')),
            'updateArchivoTemplate' => route($endpointOverrides['updateArchivoTemplate'] ?? ($routePrefix . 'update-archivo-catalog'), ['id' => '__ID__']),
            'storeCategoria' => route($endpointOverrides['storeCategoria'] ?? ($routePrefix . 'store-categoria-catalog')),
            'storeEjercicio' => route($endpointOverrides['storeEjercicio'] ?? ($routePrefix . 'store-ejercicio-catalog')),
        ],
        'catalogos' => [
            'categorias' => $categoriasCatalogo->map(function ($item) {
                return [
                    'id' => (int) $item->id,
                    'nombre' => (string) $item->nombre,
                    'descripcion' => (string) ($item->descripcion ?? ''),
                ];
            })->values()->all(),
            'archivos' => $archivosCatalogo->map(function ($item) {
                return [
                    'id' => (int) $item->id,
                    'id_categoria' => (int) ($item->id_categoria ?? 0),
                    'categoria_nombre' => (string) optional($item->categoria)->nombre,
                    'titulo' => (string) $item->titulo,
                    'descripcion' => (string) ($item->descripcion ?? ''),
                    'aplica' => (string) ($item->aplica ?? 'Si'),
                    'fecha_limite' => !empty($item->fecha_limite)
                        ? \Illuminate\Support\Carbon::parse($item->fecha_limite)->format('Y-m-d')
                        : null,
                ];
            })->values()->all(),
            'ejercicios' => $ejerciciosCatalogo->map(function ($item) {
                return [
                    'id' => (int) $item->id,
                    'anio' => (int) $item->anio,
                ];
            })->values()->all(),
            'periodos' => $periodosCatalogo->map(function ($item) {
                return [
                    'id' => (int) $item->id,
                    'id_ejercicio' => (int) $item->id_ejercicio,
                    'periodo' => (int) $item->periodo,
                    'descripcion' => (string) $item->descripcion,
                ];
            })->values()->all(),
        ],
    ];
    $bootPayload['scope'] = $scope;
    $bootPayload['type'] = $type;

    $importacionNavigationTabs = [
        ['route' => $routePrefix . 'index', 'label' => 'Documentos por periodo', 'active' => ($activeTab ?? '') === 'periodo'],
        ['route' => $routePrefix . 'archivos-sueltos', 'label' => 'Documentos sueltos', 'active' => ($activeTab ?? '') === 'sueltos'],
        ['route' => $routePrefix . 'declaraciones-anuales', 'label' => 'Documentos de declaraciones anuales', 'active' => ($activeTab ?? '') === 'declaraciones-anuales'],
    ];

    if (!empty($includeNominasTab)) {
        $importacionNavigationTabs[] = [
            'route' => $routePrefix . 'documentos-nominas',
            'label' => 'Documentos nominas',
            'active' => ($activeTab ?? '') === 'nominas',
        ];
    }
@endphp
@include('expediente.partials.importacion-nav-data', [
    'routePrefix' => $routePrefix,
    'activeTab' => $activeTab ?? 'periodo',
    'includeNominasTab' => !empty($includeNominasTab),
])
@php $navigationTabs = $importacionNavigationTabs; @endphp
<div class="content">
    <div class="container-fluid mt-4">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4">
            <div class="mb-4">
                <h4 class="text-xl font-semibold text-slate-900 mb-1">{{ $moduleTitle }}</h4>
                <p class="text-sm text-slate-500 mb-0">{{ $moduleDescription }}</p>
            </div>

            @include('expediente.partials.importacion-nav', ['navigationTabs' => $navigationTabs])

            <div id="global-alert" class="hidden rounded-lg border px-3 py-2 text-sm mb-4"></div>

            <div class="bg-slate-50 border border-slate-200 rounded-lg p-4 mb-4">
                <div class="grid grid-cols-1 xl:grid-cols-12 gap-3">
                    <div class="xl:col-span-2">
                        <label class="block text-xs font-medium text-slate-700 mb-1" for="id_ejercicio">Ejercicio</label>
                        <select id="id_ejercicio" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"></select>
                    </div>
                    @if (in_array('periodo', (array) $scope))
                    <div class="xl:col-span-2" id="periodo-field-wrap">
                        <label class="block text-xs font-medium text-slate-700 mb-1" for="id_periodo">Periodo</label>
                        <select id="id_periodo" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" disabled></select>
                    </div>
                    @endif
                    <div class="md:col-span-2"  @if (!in_array('categoria', (array) $scope)) style="display: none;" @endif>
                        <label class="block text-xs font-medium text-slate-700 mb-1" for="filter-category">Categoria</label>
                        <select id="filter-category" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"></select>
                    </div>

                    <div class="xl:col-span-6 flex flex-wrap items-end gap-2">
                        <button type="button" data-toggle="modal" data-target="#modal-archivos" class="inline-flex items-center bg-[#0A415F] hover:bg-[#083549] text-white rounded-lg px-3 py-2 text-xs font-medium">Catalogo de documentos</button>
                         @if (in_array('categoria', (array) $scope))
                        <button type="button" data-toggle="modal" data-target="#modal-categorias" class="inline-flex items-center bg-[#0A415F] hover:bg-[#083549] text-white rounded-lg px-3 py-2 text-xs font-medium">Nueva categoria</button>
                        @endif
                        <button type="button" data-toggle="modal" data-target="#modal-ejercicios" class="inline-flex items-center bg-[#0A415F] hover:bg-[#083549] text-white rounded-lg px-3 py-2 text-xs font-medium">Nuevo ejercicio</button>
                    </div>
                </div>
            </div>

            <div class="rounded-lg border border-slate-200 overflow-hidden">
                <div class="px-3 py-2 bg-slate-50 border-b border-slate-200 text-xs text-slate-600 flex flex-wrap gap-4">
                    <span>Total: <strong id="count-total">0</strong></span>
                    <span>Cargados: <strong id="count-loaded">0</strong></span>
                    <span>Sin cargar: <strong id="count-missing">0</strong></span>
                </div>

                <div class="px-3 py-3 border-b border-slate-200 bg-white">
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-3">
                        <div class="md:col-span-5">
                            <label class="block text-xs font-medium text-slate-700 mb-1" for="filter-search">Buscar</label>
                            <input id="filter-search" type="text" class="w-full rounded-lg border border-slate-300 px-2 py-1.5 text-sm" placeholder="Titulo, descripcion o nombre de archivo">
                        </div>
                        <div class="md:col-span-3">
                            <label class="block text-xs font-medium text-slate-700 mb-1" for="filter-status">Estado de carga</label>
                            <select id="filter-status" class="w-full rounded-lg border border-slate-300 px-2 py-1.5 text-sm">
                                <option value="all">Todos</option>
                                <option value="loaded">Con archivo</option>
                                <option value="missing">Sin archivo</option>
                            </select>
                        </div>
                        <div class="md:col-span-1 flex items-end">
                            <button id="btn-clear-filters" type="button" class="w-full rounded-lg border border-slate-300 px-2 py-2 text-xs text-slate-700 hover:bg-slate-50">Limpiar</button>
                        </div>
                    </div>
                </div>

                <div class="max-h-[520px] overflow-y-auto">
                    <table class="min-w-full text-xs text-slate-700">
                        <thead class="bg-slate-50 sticky top-0">
                            <tr>
                                <th class="px-2 py-2">ID</th>
                                <th class="px-2 py-2">Documento</th>
                                @if ($type !== 'declaraciones-anuales')
                                <th class="px-2 py-2">Categoria</th>
                                @endif
                                @if ($type !== 'declaraciones-anuales')
                                <th class="px-2 py-2">Aplica</th>
                                @endif
                                <th class="px-2 py-2">Estado</th>
                                <th class="px-2 py-2">Archivo cargado</th>
                                @if ($type !== 'declaraciones-anuales')
                                <th class="px-2 py-2">Día limite de importación</th>
                                @endif
                                <th class="px-2 py-2">Fecha de importación</th>
                                <th class="px-2 py-2 text-center">Accion</th>
                            </tr>
                        </thead>
                        <tbody id="pendientes-body" class="divide-y divide-slate-100">
                            <tr>
                                <td colspan="{{ $type === 'declaraciones-anuales' ? 6 : 9 }}" class="px-2 py-4 text-center text-slate-500">{{ $scope[0] === 'ejercicio' ? 'Selecciona ejercicio.' : 'Selecciona ejercicio y periodo.' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-categorias" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-md ">
        <div class="modal-content">
         <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h5 class="modal-title text-base text-slate-900 font-semibold">
                    <i class="fas fa-plus-circle mr-2"></i> Nueva categoria
                </h5>
                <button type="button" class="close text-gray-400 hover:text-gray-600" data-dismiss="modal" aria-label="Close">
                    <i class="material-icons">close</i>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-3"><label class="block text-xs font-medium text-slate-700 mb-1" for="cat_nombre">Nombre</label><input id="cat_nombre" class="w-full rounded border px-2 py-1 text-sm" type="text"></div>
                <div class="mb-3"><label class="block text-xs font-medium text-slate-700 mb-1" for="cat_desc">Descripcion</label><textarea id="cat_desc" class="w-full rounded border px-2 py-1 text-sm" rows="2"></textarea></div>
                <div class="mt-3 flex gap-2 justify-end">
                    <button id="btn-save-categoria" type="button" class="bg-[#0A415F]  text-white rounded px-3 py-2 text-xs">Guardar</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-ejercicios" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm ">
        <div class="modal-content">
        <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h5 class="modal-title text-base text-slate-900 font-semibold">
                    <i class="fas fa-plus-circle mr-2"></i> Nuevo ejercicio
                </h5>
                <button type="button" class="close text-gray-400 hover:text-gray-600" data-dismiss="modal" aria-label="Close">
                    <i class="material-icons">close</i>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-3"><label class="block text-xs font-medium text-slate-700 mb-1" for="ej_anio">Año</label><input id="ej_anio" class="w-full rounded border px-2 py-1 text-sm" type="number" min="1900" max="2100" step="1"></div>
                <div class="mt-3 flex gap-2 justify-end">
                    <button id="btn-save-ejercicio" type="button" class="bg-[#0A415F] text-white rounded px-3 py-2 text-xs">Guardar</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-archivos" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg  modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h5 class="modal-title text-base text-slate-900 font-semibold">
                    <i class="fas fa-list-ul mr-2"></i> Catalogo de documentos
                </h5>
                <button type="button" class="close text-gray-400 hover:text-gray-600" data-dismiss="modal" aria-label="Close">
                    <i class="material-icons">close</i>
                </button>
            </div>
            <div class="modal-body">
                <div class="border rounded p-3 mb-3">
                    <input id="ar_id" type="hidden">
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-3">
                        <div class="md:col-span-3"><label class="block text-xs font-medium text-slate-700 mb-1" for="ar_titulo">Titulo</label><input id="ar_titulo" class="w-full rounded border px-2 py-1 text-sm" type="text"></div>
                        <div class="md:col-span-3" @if ($type === 'declaraciones-anuales') style="display: none;" @endif><label class="block text-xs font-medium text-slate-700 mb-1" for="ar_categoria">Categoria</label><select id="ar_categoria" class="w-full rounded border px-2 py-1 text-sm"></select></div>
                        <div class="md:col-span-3" @if ($type === 'declaraciones-anuales') style="display: none;" @endif><label class="block text-xs font-medium text-slate-700 mb-1" for="ar_aplica">Aplica</label><select id="ar_aplica" class="w-full rounded border px-2 py-1 text-sm">
                                <option value="Si">Si</option>
                                <option value="No">No</option>
                            </select></div>
                        <div class="md:col-span-3" @if ($type === 'declaraciones-anuales') style="display: none;" @endif><label class="block text-xs font-medium text-slate-700 mb-1" for="ar_fecha_limite">Fecha limite</label><input id="ar_fecha_limite" class="w-full rounded border px-2 py-1 text-sm" type="date"></div>
                        <div class="md:col-span-9"><label class="block text-xs font-medium text-slate-700 mb-1" for="ar_desc">Descripcion</label><textarea id="ar_desc" class="w-full rounded border px-2 py-1 text-sm" rows="2"></textarea></div>
                    </div>
                    <div class="mt-3 flex gap-2 justify-end">
                        <button id="btn-save-archivo" type="button" class="bg-[#0A415F] text-white rounded px-3 py-2 text-xs">Guardar</button>
                        <button id="btn-cancel-edit-archivo" type="button" class="hidden border border-slate-300 text-slate-700 rounded px-3 py-2 text-xs">Cancelar edicion</button>
                    </div>
                </div>

                <div class="border rounded overflow-hidden">
                    <div class="max-h-72 overflow-y-auto">
                        <table class="min-w-full text-xs text-slate-700">
                            <thead class="bg-slate-50 sticky top-0">
                                <tr>
                                    <th class="px-2 py-2">ID</th>
                                    <th class="px-2 py-2">Titulo</th>
                                    @if ($type !== 'declaraciones-anuales')
                                    <th class="px-2 py-2">Categoria</th>
                                    @endif
                                    @if ($type !== 'declaraciones-anuales')
                                    <th class="px-2 py-2">Aplica</th>
                                    @endif
                                    @if ($type !== 'declaraciones-anuales')
                                    <th class="px-2 py-2">Fecha limite</th>
                                    @endif
                                    <th class="px-2 py-2">Descripcion</th>
                                    <th class="px-2 py-2 text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="catalogo-archivos-body"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script id="importacion-boot-payload" type="application/json">
    {!!json_encode($bootPayload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const payload = JSON.parse(document.getElementById('importacion-boot-payload').textContent || '{}');
        const endpoints = payload.endpoints || {};
        const catalogos = payload.catalogos || {};
        const scopeList = Array.isArray(payload.scope) ? payload.scope : [String(payload.scope || 'periodo')];
        const requiresPeriodo = scopeList.includes('periodo');
        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
        const type = String(payload.type || 'periodico');

        function tableColspan() {
            if (type === 'declaraciones-anuales') {
                return 6;
            }
            if (type === 'periodico') {
                return 9;
            }
            return 8;
        }

        const state = {
            categorias: Array.isArray(catalogos.categorias) ? catalogos.categorias : [],
            archivosCatalogo: Array.isArray(catalogos.archivos) ? catalogos.archivos : [],
            ejercicios: Array.isArray(catalogos.ejercicios) ? catalogos.ejercicios : [],
            periodos: Array.isArray(catalogos.periodos) ? catalogos.periodos : [],
            documentosPeriodo: [],
            selectedEjercicio: '',
            selectedPeriodo: '',
        };

        const ejercicioSelect = document.getElementById('id_ejercicio');
        const periodoSelect = document.getElementById('id_periodo');
        const emptySelectionMessage = requiresPeriodo ? 'Selecciona ejercicio y periodo.' : 'Selecciona ejercicio.';
        const pendientesBody = document.getElementById('pendientes-body');
        const alertBox = document.getElementById('global-alert');
        const filterSearch = document.getElementById('filter-search');
        const filterStatus = document.getElementById('filter-status');
        const filterCategory = document.getElementById('filter-category');

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

        function showAlert(type, text) {
            const map = {
                success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
                error: 'border-red-200 bg-red-50 text-red-700'
            };
            alertBox.className = 'rounded-lg border px-3 py-2 text-sm mb-4 ' + (map[type] || map.success);
            alertBox.textContent = text;
            alertBox.classList.remove('hidden');
        }

        async function request(url, method, body, isFormData) {
            const options = {
                method: method,
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': token
                }
            };
            if (body) {
                if (isFormData) {
                    options.body = body;
                } else {
                    options.headers['Content-Type'] = 'application/json';
                    options.body = JSON.stringify(body);
                }
            }
            const response = await fetch(url, options);
            const data = await response.json().catch(() => ({}));
            if (!response.ok || Number(data.result || 0) !== 1) {
                const firstError = data.errors ? Object.values(data.errors)[0] : null;
                throw new Error((Array.isArray(firstError) && firstError[0]) ? firstError[0] : (data.message || 'No fue posible completar la solicitud.'));
            }
            return data;
        }

        function renderEjercicios() {
            const options = ['<option value="">-Selecciona-</option>'];
            state.ejercicios.sort((a, b) => Number(b.anio) - Number(a.anio)).forEach((item) => {
                options.push('<option value="' + item.id + '">' + item.anio + '</option>');
            });
            ejercicioSelect.innerHTML = options.join('');
        }

        function renderPeriodos() {
            if (!requiresPeriodo || !periodoSelect) {
                return;
            }
            if (!state.selectedEjercicio) {
                periodoSelect.disabled = true;
                periodoSelect.innerHTML = '<option value="">-Selecciona un ejercicio primero-</option>';
                return;
            }
            const options = ['<option value="">-Selecciona-</option>'];
            state.periodos
                .filter((item) => Number(item.id_ejercicio) === Number(state.selectedEjercicio))
                .forEach((item) => {
                    options.push('<option value="' + item.id + '">' + item.descripcion + '</option>');
                });
            periodoSelect.disabled = false;
            periodoSelect.innerHTML = options.join('');
        }

        function selectionIsReady() {
            if (!state.selectedEjercicio) {
                return false;
            }
            if (requiresPeriodo && !state.selectedPeriodo) {
                return false;
            }
            return true;
        }

        function renderFilterCategory() {
            const options = ['<option value="">Todas</option>'];
            state.categorias.forEach((item) => {
                options.push('<option value="' + item.id + '">' + escapeHtml(item.nombre) + '</option>');
            });
            filterCategory.innerHTML = options.join('');
        }

        function getFilteredRows() {
            const search = String(filterSearch.value || '').toLowerCase().trim();
            const status = String(filterStatus.value || 'all');
            const categoryId = String(filterCategory.value || '');

            return state.documentosPeriodo.filter((item) => {
                if (status === 'loaded' && !item.tiene_archivo) {
                    return false;
                }
                if (status === 'missing' && item.tiene_archivo) {
                    return false;
                }
                if ((type === 'periodico' || type === 'nominas') && categoryId !== '' && String(item.id_categoria || '') !== categoryId) {
                    return false;
                }

                if (search !== '') {
                    const haystack = [
                        item.titulo,
                        item.descripcion,
                        item.categoria_nombre,
                        item.archivo_nombre,
                    ].join(' ').toLowerCase();
                    if (!haystack.includes(search)) {
                        return false;
                    }
                }

                return true;
            });
        }

        function renderRows() {
            if (!selectionIsReady()) {
                pendientesBody.innerHTML = '<tr><td colspan="' + tableColspan() + '" class="px-2 py-4 text-center text-slate-500">' + emptySelectionMessage + '</td></tr>';
                document.getElementById('count-total').textContent = '0';
                document.getElementById('count-loaded').textContent = '0';
                document.getElementById('count-missing').textContent = '0';
                return;
            }

            const total = state.documentosPeriodo.length;
            const loaded = state.documentosPeriodo.filter((item) => item.tiene_archivo).length;
            const missing = total - loaded;
            document.getElementById('count-total').textContent = String(total);
            document.getElementById('count-loaded').textContent = String(loaded);
            document.getElementById('count-missing').textContent = String(missing);

            const filtered = getFilteredRows();
            if (!filtered.length) {
                pendientesBody.innerHTML = '<tr><td colspan="' + tableColspan() + '" class="px-2 py-4 text-center text-slate-500">No hay documentos para los filtros seleccionados.</td></tr>';
                return;
            }

            pendientesBody.innerHTML = filtered.map((item) => {
                const rowClass = item.tiene_archivo ? 'bg-emerald-50' : 'bg-amber-50';
                const statusBadge = item.tiene_archivo ?
                    '<span class="inline-flex rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-semibold text-emerald-700">Con archivo</span>' :
                    '<span class="inline-flex rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-700">Sin archivo</span>';

                const archivoTexto = item.tiene_archivo ?
                    '<div class="text-[11px] text-slate-700">' + escapeHtml(item.archivo_nombre || 'Archivo cargado') + '</div>' :
                    '<span class="text-[11px] text-slate-500">-</span>';

                const buttonText = item.tiene_archivo ? 'Sustituir archivo' : 'Cargar archivo';

                var htmlTableData = '<td class="px-2 py-2">' + item.id + '</td>'+
                '<td class="px-2 py-2"><div class="font-semibold text-slate-800">' + escapeHtml(item.titulo || '-') + '</div><div class="text-[11px] text-slate-600">' + escapeHtml(item.descripcion || '-') + '</div></td>';

                if (type === 'periodico' || type === 'nominas') {
                    htmlTableData += '<td class="px-2 py-2">' + escapeHtml(item.categoria_nombre || '-') + '</td>'+
                    '<td class="px-2 py-2">' + escapeHtml(item.aplica || '-') + '</td>'+
                    '<td class="px-2 py-2">' + statusBadge + '</td>'+
                    '<td class="px-2 py-2">' + archivoTexto + '</td>'+
                    '<td class="px-2 py-2">' + item.fecha_limite + '</td>'+
                    '<td class="px-2 py-2">' + escapeHtml(item.archivo_fecha || '-') + '</td>'+
                    '<td class="px-2 py-2 text-center">' +
                    '<input type="file" class="hidden pending-file" data-id="' + item.id + '" accept="application/pdf,.pdf,application/vnd.ms-excel,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xlsx">' +
                    '<button type="button" class="btn-upload-pending inline-flex items-center bg-[#0A415F] hover:bg-[#083549] text-white rounded px-2 py-1 text-xs" data-id="' + item.id + '">' + buttonText + '</button>' +
                    '</td>';
                }

                if (type === 'declaraciones-anuales') {
                    htmlTableData += '<td class="px-2 py-2">' + statusBadge + '</td>'+
                    '<td class="px-2 py-2">' + archivoTexto + '</td>'+
                    '<td class="px-2 py-2">' + escapeHtml(item.archivo_fecha || '-') + '</td>'+
                    '<td class="px-2 py-2 text-center">' +
                    '<input type="file" class="hidden pending-file" data-id="' + item.id + '" accept="application/pdf,.pdf,application/vnd.ms-excel,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xlsx">' +
                    '<button type="button" class="btn-upload-pending inline-flex items-center bg-[#0A415F] hover:bg-[#083549] text-white rounded px-2 py-1 text-xs" data-id="' + item.id + '">' + buttonText + '</button>' +
                    '</td>';
                }

                return '<tr class="' + rowClass + '">' + htmlTableData + '</tr>';
            }).join('');
        }

        async function loadPeriodRows() {
            if (!selectionIsReady()) {
                state.documentosPeriodo = [];
                renderRows();
                return;
            }

            try {
                const query = new URLSearchParams({
                    id_ejercicio: state.selectedEjercicio,
                });
                if (requiresPeriodo) {
                    query.append('id_periodo', state.selectedPeriodo);
                }
                const result = await request(endpoints.pendientes + '?' + query.toString(), 'GET');
                state.documentosPeriodo = result.data && Array.isArray(result.data.pendientes) ? result.data.pendientes : [];
                renderRows();
            } catch (error) {
                state.documentosPeriodo = [];
                renderRows();
                showAlert('error', error.message);
            }
        }

        function renderCatalogCategorySelect() {
            const select = document.getElementById('ar_categoria');
            const options = ['<option value="">-Selecciona categoria-</option>'];
            state.categorias.forEach((item) => {
                options.push('<option value="' + item.id + '">' + escapeHtml(item.nombre) + '</option>');
            });
            select.innerHTML = options.join('');
        }


        function renderCatalogRows() {
            const body = document.getElementById('catalogo-archivos-body');
            if (!state.archivosCatalogo.length) {
                const catalogColspan = type === 'declaraciones-anuales' ? 4 : 7;
                body.innerHTML = '<tr><td colspan="' + catalogColspan + '" class="px-2 py-3 text-center text-slate-500">Sin documentos en el catalogo.</td></tr>';
                return;
            }

            body.innerHTML = state.archivosCatalogo.map((item) => {
                if (type === 'declaraciones-anuales') {
                    return '<tr>' +
                        '<td class="px-2 py-2">' + item.id + '</td>' +
                        '<td class="px-2 py-2">' + escapeHtml(item.titulo || '-') + '</td>' +
                        '<td class="px-2 py-2">' + escapeHtml(item.descripcion || '-') + '</td>' +
                        '<td class="px-2 py-2 text-center"><button type="button" class="btn-edit-catalogo border border-slate-300 px-2 py-1 rounded text-[11px]" data-id="' + item.id + '">Editar</button></td>' +
                        '</tr>';
                }

                return '<tr>' +
                    '<td class="px-2 py-2">' + item.id + '</td>' +
                    '<td class="px-2 py-2">' + escapeHtml(item.titulo || '-') + '</td>' +
                    '<td class="px-2 py-2">' + escapeHtml(item.categoria_nombre || '-') + '</td>' +
                    '<td class="px-2 py-2">' + escapeHtml(item.aplica || '-') + '</td>' +
                    '<td class="px-2 py-2">' + escapeHtml(item.fecha_limite || '-') + '</td>' +
                    '<td class="px-2 py-2">' + escapeHtml(item.descripcion || '-') + '</td>' +
                    '<td class="px-2 py-2 text-center"><button type="button" class="btn-edit-catalogo border border-slate-300 px-2 py-1 rounded text-[11px]" data-id="' + item.id + '">Editar</button></td>' +
                    '</tr>';
            }).join('');
        }

        function resetArchivoForm() {
            document.getElementById('ar_id').value = '';
            document.getElementById('ar_titulo').value = '';
            document.getElementById('ar_categoria').value = '';
            document.getElementById('ar_desc').value = '';
            document.getElementById('ar_aplica').value = 'Si';
            document.getElementById('ar_fecha_limite').value = '';
            document.getElementById('btn-cancel-edit-archivo').classList.add('hidden');
        }

        ejercicioSelect.addEventListener('change', function() {
            state.selectedEjercicio = this.value;
            state.selectedPeriodo = '';
            renderPeriodos();
            loadPeriodRows();
        });

        if (periodoSelect) {
            periodoSelect.addEventListener('change', function() {
                state.selectedPeriodo = this.value;
                loadPeriodRows();
            });
        }

        filterSearch.addEventListener('input', renderRows);
        filterStatus.addEventListener('change', renderRows);
        filterCategory.addEventListener('change', renderRows);
        document.getElementById('btn-clear-filters').addEventListener('click', function() {
            filterSearch.value = '';
            filterStatus.value = 'all';
            filterCategory.value = '';
            renderRows();
        });

        pendientesBody.addEventListener('click', function(event) {
            const button = event.target.closest('.btn-upload-pending');
            if (!button) {
                return;
            }
            const id = button.getAttribute('data-id');
            const input = pendientesBody.querySelector('.pending-file[data-id="' + id + '"]');
            if (input) {
                input.click();
            }
        });

        pendientesBody.addEventListener('change', async function(event) {
            const input = event.target.closest('.pending-file');
            if (!input) {
                return;
            }

            const file = input.files && input.files[0] ? input.files[0] : null;
            if (!file || !selectionIsReady()) {
                return;
            }

            const formData = new FormData();
            formData.append('id_archivo', input.getAttribute('data-id'));
            formData.append('id_ejercicio', state.selectedEjercicio);
            if (requiresPeriodo) {
                formData.append('id_periodo', state.selectedPeriodo);
            }
            formData.append('archivo', file);

            try {
                await request(endpoints.cargarDocumento, 'POST', formData, true);
                showAlert('success', 'Archivo cargado/sustituido correctamente.');
                await loadPeriodRows();
            } catch (error) {
                showAlert('error', error.message);
            }

            input.value = '';
        });

        document.getElementById('catalogo-archivos-body').addEventListener('click', function(event) {
            const button = event.target.closest('.btn-edit-catalogo');
            if (!button) {
                return;
            }

            const id = Number(button.getAttribute('data-id'));
            const item = state.archivosCatalogo.find((row) => Number(row.id) === id);
            if (!item) {
                return;
            }

            document.getElementById('ar_id').value = String(item.id);
            document.getElementById('ar_titulo').value = item.titulo || '';
            document.getElementById('ar_categoria').value = item.id_categoria || '';
            document.getElementById('ar_desc').value = item.descripcion || '';
            document.getElementById('ar_aplica').value = item.aplica || 'Si';
            document.getElementById('ar_fecha_limite').value = item.fecha_limite || '';
            document.getElementById('btn-cancel-edit-archivo').classList.remove('hidden');
        });

        document.getElementById('btn-cancel-edit-archivo').addEventListener('click', resetArchivoForm);

        document.getElementById('btn-save-archivo').addEventListener('click', async function() {
            const id = document.getElementById('ar_id').value;
            const payloadArchivo = type === 'declaraciones-anuales' ? {
                titulo: document.getElementById('ar_titulo').value,
                descripcion: document.getElementById('ar_desc').value,
            } : {
                id_categoria: document.getElementById('ar_categoria').value,
                titulo: document.getElementById('ar_titulo').value,
                descripcion: document.getElementById('ar_desc').value,
                aplica: document.getElementById('ar_aplica').value,
                fecha_limite: document.getElementById('ar_fecha_limite').value,
            };

            try {
                const isUpdate = id !== '';
                const url = isUpdate ?
                    endpoints.updateArchivoTemplate.replace('__ID__', String(id)) :
                    endpoints.storeArchivo;

                const result = await request(url, 'POST', payloadArchivo);
                const item = result.data;

                if (isUpdate) {
                    state.archivosCatalogo = state.archivosCatalogo.map((row) => Number(row.id) === Number(item.id) ? item : row);
                } else {
                    state.archivosCatalogo.push(item);
                }

                renderCatalogRows();
                resetArchivoForm();
                showAlert('success', result.message || 'Documento guardado.');
                await loadPeriodRows();
            } catch (error) {
                showAlert('error', error.message);
            }
        });

        document.getElementById('btn-save-categoria').addEventListener('click', async function() {
            try {
                const result = await request(endpoints.storeCategoria, 'POST', {
                    nombre: document.getElementById('cat_nombre').value,
                    descripcion: document.getElementById('cat_desc').value,
                });
                state.categorias.push(result.data);
                renderCatalogCategorySelect();
                renderFilterCategory();
                showAlert('success', result.message || 'Categoria creada.');
                document.getElementById('cat_nombre').value = '';
                document.getElementById('cat_desc').value = '';
            } catch (error) {
                showAlert('error', error.message);
            }
        });

        document.getElementById('btn-save-ejercicio').addEventListener('click', async function() {
            try {
                const result = await request(endpoints.storeEjercicio, 'POST', {
                    anio: document.getElementById('ej_anio').value,
                });
                if (result.data && result.data.ejercicio) {
                    state.ejercicios.push(result.data.ejercicio);
                }
                if (result.data && Array.isArray(result.data.periodos)) {
                    state.periodos = state.periodos.concat(result.data.periodos);
                }
                renderEjercicios();
                renderPeriodos();
                showAlert('success', result.message || 'Ejercicio creado.');
                document.getElementById('ej_anio').value = '';
            } catch (error) {
                showAlert('error', error.message);
            }
        });

        renderEjercicios();
        renderPeriodos();
        renderCatalogCategorySelect();
        renderFilterCategory();
        renderCatalogRows();
        renderRows();
        resetArchivoForm();
    });
</script>