@extends('../padre.padre')

@section('contenido')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
    .ct-wrapper {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        color: #1e293b;
    }
    .ct-hero {
        background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
        border-radius: 14px;
        padding: 16px 22px;
        color: #ffffff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
    }
    .ct-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    }
    .ct-kpi {
        border-radius: 12px;
        padding: 14px 16px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        transition: transform 0.15s ease;
    }
    .ct-kpi:hover {
        transform: translateY(-2px);
    }
    .ct-kpi .kpi-label {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 700;
        color: #64748b;
    }
    .ct-kpi .kpi-val {
        font-size: 1.45rem;
        font-weight: 800;
        line-height: 1.2;
    }
    .ct-table {
        width: 100%;
        font-size: 0.82rem;
        margin-bottom: 0;
    }
    .ct-table thead th {
        background: #f8fafc;
        color: #475569;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        padding: 10px 12px;
        border-bottom: 2px solid #e2e8f0;
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 4;
    }
    .ct-table tbody td {
        padding: 8px 12px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
    }
    .ct-table tbody tr:hover {
        background-color: #f8fafc;
    }
    .badge-tipo {
        font-size: 0.72rem;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 6px;
        display: inline-block;
    }
    .pill-kardex {
        display: inline-block;
        background-color: #eff6ff !important;
        color: #1d4ed8 !important;
        border: 1px solid #93c5fd !important;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 6px;
        white-space: nowrap;
    }
    .pill-contab {
        display: inline-block;
        background-color: #ecfdf5 !important;
        color: #047857 !important;
        border: 1px solid #6ee7b7 !important;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 6px;
        white-space: nowrap;
    }
    .assign-bar {
        background: linear-gradient(90deg, #eff6ff 0%, #f8fafc 100%);
        border: 1px solid #bfdbfe;
        border-radius: 12px;
        padding: 12px 16px;
    }
    .tercero-preview-box {
        background: #ffffff;
        border: 1px dashed #cbd5e1;
        border-radius: 8px;
        padding: 6px 12px;
        min-height: 33px;
        display: flex;
        align-items: center;
        font-size: 0.82rem;
    }
</style>

<div class="container-fluid py-3 px-md-4 ct-wrapper">
    <!-- ENCABEZADO -->
    <div class="ct-hero mb-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
        <div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <i class="fa-solid fa-user-gear fs-4 text-info"></i>
                <h4 class="m-0 fw-bold">Reasignación Unificada de Tercero / Vinculado</h4>
                <span class="badge bg-warning text-dark fw-bold" style="font-size: 0.73rem;">
                    <i class="fa-solid fa-shield-halved me-1"></i>Excluye Facturas y Abonos
                </span>
            </div>
            <p class="m-0 mt-1 text-light opacity-75 small">
                Cambia el proveedor o tercero vinculado en <strong>Compras, Gastos, Devoluciones, Entradas, Salidas, Pagos y Notas Contables</strong> actualizando simultáneamente <strong>Documento + Kardex + Contabilidad + Lotes + Caja Mayor</strong>.
            </p>
        </div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ url('/terceros-contables') }}" class="btn btn-sm btn-outline-light">
                <i class="fa-solid fa-users me-1"></i> Catálogo de Terceros
            </a>
            <a href="{{ url('/sincronizador-contable') }}" class="btn btn-sm btn-outline-info text-white border-info">
                <i class="fa-solid fa-rotate me-1"></i> Sincronizador Contable
            </a>
            <a href="{{ url('/contabilidad') }}" class="btn btn-sm btn-light fw-bold">
                <i class="fa-solid fa-arrow-left me-1"></i> Volver a Contabilidad
            </a>
        </div>
    </div>

    <!-- FILTROS DE BÚSQUEDA -->
    <div class="ct-card p-3 mb-3">
        <div class="row g-2 align-items-end">
            <div class="col-6 col-md-2">
                <label class="form-label small fw-bold text-secondary mb-1">Fecha Inicial</label>
                <input type="date" id="ct_fi" class="form-control form-control-sm" value="{{ date('Y-m-01') }}">
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label small fw-bold text-secondary mb-1">Fecha Final</label>
                <input type="date" id="ct_ff" class="form-control form-control-sm" value="{{ date('Y-m-d') }}">
            </div>
            <div class="col-12 col-md-2">
                <label class="form-label small fw-bold text-secondary mb-1">Bodega / Sede</label>
                <select id="ct_bodega" class="form-select form-select-sm">
                    <option value="0">TODAS LAS BODEGAS</option>
                    @foreach($bodegas as $b)
                        <option value="{{ $b->id }}">{{ $b->nombreBodega }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 col-md-2">
                <label class="form-label small fw-bold text-secondary mb-1">Tipo Documento</label>
                <select id="ct_tipo" class="form-select form-select-sm fw-semibold">
                    <option value="TODOS">TODOS (Sin Facturas ni Abonos)</option>
                    @foreach($tiposPermitidos as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-1">
                <label class="form-label small fw-bold text-secondary mb-1"># Documento</label>
                <input type="text" id="ct_numero" class="form-control form-control-sm font-monospace" placeholder="Ej: 500">
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label small fw-bold text-secondary mb-1">Tercero Actual (NIT)</label>
                <div class="input-group input-group-sm">
                    <input type="text" id="ct_nit_actual" class="form-control form-control-sm font-monospace" placeholder="Ej: 1 o NIT...">
                    <button class="btn btn-outline-secondary" type="button" title="Filtrar NIT 1 (Genérico)" onclick="document.getElementById('ct_nit_actual').value='1'; consultarDocumentos();">
                        NIT 1
                    </button>
                </div>
            </div>
            <div class="col-12 col-md-1 d-grid">
                <button type="button" class="btn btn-primary btn-sm fw-bold" onclick="consultarDocumentos()">
                    <i class="fa-solid fa-magnifying-glass me-1"></i> Buscar
                </button>
            </div>
        </div>
    </div>

    <!-- TARJETAS KPI -->
    <div class="row g-2 mb-3">
        <div class="col-6 col-md-3">
            <div class="ct-kpi">
                <div class="kpi-label">Documentos Listados</div>
                <div class="kpi-val text-dark" id="kpi_total">0</div>
                <div class="small text-muted">Compras, Gastos, Devoluciones, Inv., Notas</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="ct-kpi" style="border-left: 4px solid #f59e0b;">
                <div class="kpi-label">Con Tercero Genérico (1 / 222222222222)</div>
                <div class="kpi-val text-warning" id="kpi_generico">0</div>
                <div class="small text-muted">Candidatos frecuentes a corregir</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="ct-kpi" style="border-left: 4px solid #0284c7;">
                <div class="kpi-label">Afectan Kardex / Inventario</div>
                <div class="kpi-val text-info" id="kpi_kardex">0</div>
                <div class="small text-muted">Se actualizará también <code>kardex.cliente</code></div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="ct-kpi" style="border-left: 4px solid #dc2626;">
                <div class="kpi-label">Tercero Desincronizado</div>
                <div class="kpi-val text-danger" id="kpi_desinc">0</div>
                <div class="small text-muted">Diferente NIT entre Doc, Kardex o Contabilidad</div>
            </div>
        </div>
    </div>

    <!-- BARRA DE ASIGNACIÓN DE NUEVO TERCERO / VINCULADO -->
    <div class="assign-bar mb-3">
        <div class="row g-2 align-items-end">
            <div class="col-12 col-md-4">
                <label class="form-label small fw-bold text-primary mb-1">
                    <i class="fa-solid fa-user-check me-1"></i>1. Nuevo Tercero / Proveedor (Debe existir en el sistema)
                </label>
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-white"><i class="fa-solid fa-id-card text-primary"></i></span>
                    <input type="text" id="nuevo_nit_input" list="datalist_terceros" class="form-control font-monospace fw-bold" placeholder="Escriba NIT, Cédula o Nombre existente..." oninput="onInputNuevoTercero(this.value)">
                </div>
                <datalist id="datalist_terceros"></datalist>
            </div>

            <div class="col-12 col-md-4">
                <label class="form-label small fw-bold text-secondary mb-1">
                    2. Verificación del Tercero en Catálogo
                </label>
                <div id="nuevo_tercero_info" class="tercero-preview-box text-muted">
                    <span><i class="fa-solid fa-magnifying-glass me-1"></i>Seleccione un NIT/Cédula registrado para validar</span>
                </div>
            </div>

            <div class="col-12 col-md-4 d-flex align-items-end justify-content-md-end gap-2 flex-wrap mt-2 mt-md-0">
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="seleccionarGenericos()" title="Selecciona todos los documentos con NIT 1 / 222222222222 o desincronizados">
                    <i class="fa-solid fa-check-double me-1"></i> Marcar Genéricos (NIT 1)
                </button>
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="seleccionarTodosFiltrados()" title="Selecciona todos los documentos filtrados en todas las páginas">
                    <i class="fa-solid fa-list-check me-1"></i> Sel. Todos Filtrados
                </button>
                <button type="button" class="btn btn-sm btn-success fw-bold px-3" onclick="aplicarCambioMasivo()">
                    <i class="fa-solid fa-bolt me-1"></i> Aplicar a Seleccionados (<span id="count_seleccionados">0</span>)
                </button>
            </div>
        </div>
    </div>

    <!-- TABLA DE DOCUMENTOS -->
    <div class="ct-card overflow-hidden">
        <div class="p-2 px-3 border-bottom bg-light d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div class="fw-bold small text-secondary">
                <i class="fa-solid fa-list-check me-1"></i>Listado de Documentos Operativos y Contables (Excluye Facturas de Venta y Abonos)
            </div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <div class="d-flex align-items-center gap-1">
                    <label class="small text-muted mb-0">Mostrar:</label>
                    <select id="selectPageSize" class="form-select form-select-sm" style="width: 82px;" onchange="cambiarPageSize()">
                        <option value="25">25</option>
                        <option value="50" selected>50</option>
                        <option value="100">100</option>
                        <option value="250">250</option>
                        <option value="500">500</option>
                    </select>
                </div>
                <input type="text" id="filtro_rapido_tabla" class="form-control form-control-sm" style="width: 240px;" placeholder="Filtrar en resultados..." oninput="filtrarTablaLocal()">
            </div>
        </div>

        <div class="table-responsive" style="max-height: 540px; overflow-y: auto;">
            <table class="table ct-table">
                <thead>
                    <tr>
                        <th style="width: 36px; text-align: center;">
                            <input type="checkbox" id="chk_all" class="form-check-input" title="Seleccionar página actual" onchange="toggleSelectAll(this.checked)">
                        </th>
                        <th>Tipo</th>
                        <th># Documento</th>
                        <th>Bodega</th>
                        <th>Fecha</th>
                        <th style="text-align: right;">Valor</th>
                        <th>Tercero Actual (Documento)</th>
                        <th>En Kardex</th>
                        <th>En Contabilidad</th>
                        <th>Detalle / Referencia</th>
                        <th style="text-align: center;">Acciones</th>
                    </tr>
                </thead>
                <tbody id="tbody_documentos">
                    <tr>
                        <td colspan="11" class="text-center py-4 text-muted">
                            <i class="fa-solid fa-spinner fa-spin me-1"></i> Cargando documentos...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- PIE DE PAGINACIÓN -->
        <div class="p-2 px-3 border-top bg-light d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div class="small text-secondary fw-semibold" id="infoPagDocumentos">
                Mostrando 0 a 0 de 0 documentos
            </div>
            <nav aria-label="Paginación de documentos">
                <ul class="pagination pagination-sm m-0" id="paginacionDocumentos"></ul>
            </nav>
        </div>
    </div>
</div>

<!-- MODAL DE DETALLE E IMPACTO EN TABLAS -->
<div class="modal fade" id="modalImpactoTercero" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white py-2">
                <h6 class="modal-title fw-bold" id="modalImpactoTitulo">
                    <i class="fa-solid fa-sitemap text-info me-1"></i> Trazabilidad del Documento en Base de Datos
                </h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="modalImpactoBody">
                <!-- Dinámico -->
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script>
    const CSRF_TOKEN = '{{ csrf_token() }}';
    let documentosCache = [];
    let seleccionadosSet = new Set();
    let catalogoTercerosMap = {};
    let debounceTimer = null;
    let paginaActual = 1;
    let pageSize = 50;

    document.addEventListener('DOMContentLoaded', () => {
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('fi')) document.getElementById('ct_fi').value = urlParams.get('fi');
        if (urlParams.get('ff')) document.getElementById('ct_ff').value = urlParams.get('ff');
        if (urlParams.get('bodega')) document.getElementById('ct_bodega').value = urlParams.get('bodega');
        if (urlParams.get('tipo')) document.getElementById('ct_tipo').value = urlParams.get('tipo');
        if (urlParams.get('numero')) document.getElementById('ct_numero').value = urlParams.get('numero');
        if (urlParams.get('nit_actual')) document.getElementById('ct_nit_actual').value = urlParams.get('nit_actual');

        cargarSugerenciasTerceros('');
        consultarDocumentos();
    });

    function cargarSugerenciasTerceros(termino, callback) {
        fetch(`{{ route('cambio-tercero.buscar-terceros') }}?q=${encodeURIComponent(termino)}`)
            .then(r => r.json())
            .then(res => {
                if (!res.ok) return;
                const dl = document.getElementById('datalist_terceros');
                dl.innerHTML = '';
                res.terceros.forEach(t => {
                    catalogoTercerosMap[t.nit] = t;
                    const opt = document.createElement('option');
                    opt.value = t.nit;
                    opt.textContent = `${t.nombre} (${t.nit})`;
                    dl.appendChild(opt);
                });
                actualizarEtiquetaNuevoTercero();
                if (typeof callback === 'function') callback(res.terceros);
            })
            .catch(() => {});
    }

    function onInputNuevoTercero(val) {
        val = val.trim();
        actualizarEtiquetaNuevoTercero();
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            cargarSugerenciasTerceros(val);
        }, 220);
    }

    function actualizarEtiquetaNuevoTercero() {
        const val = document.getElementById('nuevo_nit_input').value.trim();
        const infoEl = document.getElementById('nuevo_tercero_info');
        if (!val) {
            infoEl.className = 'tercero-preview-box text-muted';
            infoEl.innerHTML = `<span><i class="fa-solid fa-magnifying-glass me-1"></i>Seleccione un NIT/Cédula registrado para validar</span>`;
            return;
        }
        if (catalogoTercerosMap[val]) {
            infoEl.className = 'tercero-preview-box text-success fw-bold';
            infoEl.style.borderColor = '#6ee7b7';
            infoEl.style.backgroundColor = '#ecfdf5';
            infoEl.innerHTML = `<span><i class="fa-solid fa-circle-check me-1"></i>Existe: <strong>${escapeHtml(catalogoTercerosMap[val].nombre)}</strong> (${escapeHtml(val)})</span>`;
        } else {
            infoEl.className = 'tercero-preview-box text-danger fw-semibold';
            infoEl.style.borderColor = '#fca5a5';
            infoEl.style.backgroundColor = '#fef2f2';
            infoEl.innerHTML = `<span><i class="fa-solid fa-triangle-exclamation me-1"></i>No existe en Clientes/Terceros. Debe estar creado previamente.</span>`;
        }
    }

    function consultarDocumentos() {
        const fi = document.getElementById('ct_fi').value;
        const ff = document.getElementById('ct_ff').value;
        const bodega = document.getElementById('ct_bodega').value;
        const tipo = document.getElementById('ct_tipo').value;
        const numero = document.getElementById('ct_numero').value.trim();
        const nitActual = document.getElementById('ct_nit_actual').value.trim();

        const tbody = document.getElementById('tbody_documentos');
        tbody.innerHTML = `<tr><td colspan="11" class="text-center py-4 text-muted"><i class="fa-solid fa-spinner fa-spin me-2"></i>Consultando documentos, Kardex y Contabilidad...</td></tr>`;

        const params = new URLSearchParams({ fi, ff, bodega, tipo, numero, nit_actual: nitActual });

        fetch(`{{ route('cambio-tercero.consultar') }}?${params.toString()}`)
            .then(r => r.json())
            .then(res => {
                if (!res.ok) {
                    Swal.fire('Atención', res.message || 'Error al consultar', 'warning');
                    return;
                }
                documentosCache = res.data.documentos || [];
                seleccionadosSet.clear();
                paginaActual = 1;
                document.getElementById('chk_all').checked = false;
                actualizarContadorSeleccionados();

                const rsm = res.data.resumen || {};
                document.getElementById('kpi_total').textContent = rsm.total_documentos ?? 0;
                document.getElementById('kpi_generico').textContent = rsm.con_tercero_generico ?? 0;
                document.getElementById('kpi_kardex').textContent = rsm.con_kardex ?? 0;
                document.getElementById('kpi_desinc').textContent = rsm.desincronizados ?? 0;

                renderTablaDocumentos();
            })
            .catch(err => {
                tbody.innerHTML = `<tr><td colspan="11" class="text-center py-4 text-danger">Error de red al consultar documentos.</td></tr>`;
            });
    }

    function badgePorTipo(tipo) {
        const colores = {
            'Compra': 'bg-primary text-white',
            'Gasto': 'bg-warning text-dark',
            'Devolucion': 'bg-danger text-white',
            'Entrada': 'bg-info text-dark',
            'Salida': 'bg-secondary text-white',
            'Pagos': 'bg-dark text-white',
            'NotaC': 'bg-light text-dark border'
        };
        return `<span class="badge-tipo ${colores[tipo] || 'bg-secondary text-white'}">${escapeHtml(tipo)}</span>`;
    }

    function obtenerDocumentosFiltrados() {
        const filtro = (document.getElementById('filtro_rapido_tabla').value || '').toLowerCase().trim();
        return documentosCache.filter(d => {
            if (!filtro) return true;
            const texto = `${d.tipo} ${d.tipo_label} ${d.numero} ${d.nit_actual} ${d.nombre_actual} ${d.observacion} ${d.nombre_bodega}`.toLowerCase();
            return texto.includes(filtro);
        });
    }

    function cambiarPageSize() {
        pageSize = parseInt(document.getElementById('selectPageSize').value, 10) || 50;
        paginaActual = 1;
        renderTablaDocumentos();
    }

    function irAPagina(pag) {
        paginaActual = pag;
        renderTablaDocumentos();
    }

    function renderPaginacionControles(totalItems, totalPaginas) {
        const infoEl = document.getElementById('infoPagDocumentos');
        const ulEl = document.getElementById('paginacionDocumentos');

        if (totalItems === 0) {
            infoEl.textContent = 'Mostrando 0 a 0 de 0 documentos';
            ulEl.innerHTML = '';
            return;
        }

        const inicio = (paginaActual - 1) * pageSize + 1;
        const fin = Math.min(paginaActual * pageSize, totalItems);
        infoEl.textContent = `Mostrando ${inicio} a ${fin} de ${totalItems} documentos (${seleccionadosSet.size} seleccionados)`;

        let html = '';
        const prevDisabled = paginaActual <= 1 ? 'disabled' : '';
        html += `<li class="page-item ${prevDisabled}"><button class="page-link" type="button" onclick="irAPagina(1)" title="Primera página">&laquo;</button></li>`;
        html += `<li class="page-item ${prevDisabled}"><button class="page-link" type="button" onclick="irAPagina(${paginaActual - 1})" title="Anterior">&lsaquo;</button></li>`;

        const maxBotones = 5;
        let startPage = Math.max(1, paginaActual - Math.floor(maxBotones / 2));
        let endPage = Math.min(totalPaginas, startPage + maxBotones - 1);
        if (endPage - startPage + 1 < maxBotones) {
            startPage = Math.max(1, endPage - maxBotones + 1);
        }

        for (let p = startPage; p <= endPage; p++) {
            const active = p === paginaActual ? 'active' : '';
            html += `<li class="page-item ${active}"><button class="page-link" type="button" onclick="irAPagina(${p})">${p}</button></li>`;
        }

        const nextDisabled = paginaActual >= totalPaginas ? 'disabled' : '';
        html += `<li class="page-item ${nextDisabled}"><button class="page-link" type="button" onclick="irAPagina(${paginaActual + 1})" title="Siguiente">&rsaquo;</button></li>`;
        html += `<li class="page-item ${nextDisabled}"><button class="page-link" type="button" onclick="irAPagina(${totalPaginas})" title="Última página">&raquo;</button></li>`;

        ulEl.innerHTML = html;
    }

    function renderTablaDocumentos() {
        const tbody = document.getElementById('tbody_documentos');
        const filtrados = obtenerDocumentosFiltrados();

        const totalItems = filtrados.length;
        const totalPaginas = Math.max(1, Math.ceil(totalItems / pageSize));
        if (paginaActual > totalPaginas) paginaActual = totalPaginas;
        if (paginaActual < 1) paginaActual = 1;

        renderPaginacionControles(totalItems, totalPaginas);

        if (totalItems === 0) {
            document.getElementById('chk_all').checked = false;
            tbody.innerHTML = `<tr><td colspan="11" class="text-center py-4 text-muted">No se encontraron documentos con los filtros actuales.</td></tr>`;
            return;
        }

        const sliceInicio = (paginaActual - 1) * pageSize;
        const paginaItems = filtrados.slice(sliceInicio, sliceInicio + pageSize);

        // Verificar si todos los de la página actual están seleccionados
        const todosEnPaginaSeleccionados = paginaItems.length > 0 && paginaItems.every(d => seleccionadosSet.has(d.uid));
        document.getElementById('chk_all').checked = todosEnPaginaSeleccionados;

        tbody.innerHTML = paginaItems.map(d => {
            const checked = seleccionadosSet.has(d.uid) ? 'checked' : '';
            const badgeGenerico = d.es_generico
                ? `<span class="badge bg-warning text-dark ms-1" title="Tercero Genérico">Genérico</span>`
                : '';
            const badgeDesinc = !d.sincronizado
                ? `<span class="badge bg-danger ms-1" title="El NIT difiere entre Documento, Kardex o Contabilidad">Desincronizado</span>`
                : '';

            const kardexHtml = d.filas_kardex > 0
                ? `<span class="pill-kardex font-monospace"><i class="fa-solid fa-boxes-stacked me-1"></i>${escapeHtml(d.nit_kardex || '—')} (${d.filas_kardex} ítems)</span>`
                : `<span class="text-muted small">No aplica</span>`;

            const contabHtml = d.filas_contab > 0
                ? `<span class="pill-contab font-monospace"><i class="fa-solid fa-book me-1"></i>${escapeHtml(d.nit_contab || '—')} (${d.filas_contab} asientos)</span>`
                : `<span class="text-muted small">Sin asientos</span>`;

            return `
                <tr>
                    <td style="text-align: center;">
                        <input type="checkbox" class="form-check-input chk-doc" data-uid="${escapeHtml(d.uid)}" ${checked} onchange="toggleSelectRow('${escapeJs(d.uid)}', this.checked)">
                    </td>
                    <td>
                        ${badgePorTipo(d.tipo)}
                        <div class="small text-muted" style="font-size: 0.7rem;">${escapeHtml(d.subtipo)}</div>
                    </td>
                    <td class="font-monospace fw-bold">${escapeHtml(d.numero)}</td>
                    <td><span class="badge bg-light text-dark border">${escapeHtml(d.nombre_bodega)}</span></td>
                    <td class="font-monospace small">${escapeHtml(d.fecha)}</td>
                    <td class="text-end font-monospace fw-bold">$${Number(d.valor || 0).toLocaleString('es-CO', {minimumFractionDigits: 2})}</td>
                    <td>
                        <div class="font-monospace fw-bold text-dark">
                            ${escapeHtml(d.nit_actual || '—')}
                            ${badgeGenerico}
                            ${badgeDesinc}
                        </div>
                        <div class="small text-muted text-truncate" style="max-width: 220px;" title="${escapeHtml(d.nombre_actual)}">
                            ${escapeHtml(d.nombre_actual)}
                        </div>
                    </td>
                    <td>${kardexHtml}</td>
                    <td>${contabHtml}</td>
                    <td>
                        <span class="small text-secondary text-truncate d-inline-block" style="max-width: 200px;" title="${escapeHtml(d.observacion)}">
                            ${escapeHtml(d.observacion || '—')}
                        </span>
                    </td>
                    <td style="text-align: center; white-space: nowrap;">
                        <button type="button" class="btn btn-sm btn-outline-info py-0 px-2 me-1" title="Ver impacto en Kardex, Contabilidad y Tablas" onclick="verDetalleImpacto('${escapeJs(d.uid)}')">
                            <i class="fa-solid fa-eye"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-primary py-0 px-2" title="Cambiar tercero a este documento" onclick="cambiarTerceroIndividual('${escapeJs(d.uid)}')">
                            <i class="fa-solid fa-user-pen me-1"></i> Cambiar
                        </button>
                    </td>
                </tr>
            `;
        }).join('');
    }

    function filtrarTablaLocal() {
        paginaActual = 1;
        renderTablaDocumentos();
    }

    function toggleSelectRow(uid, checked) {
        if (checked) {
            seleccionadosSet.add(uid);
        } else {
            seleccionadosSet.delete(uid);
        }
        actualizarContadorSeleccionados();
        const filtrados = obtenerDocumentosFiltrados();
        renderPaginacionControles(filtrados.length, Math.max(1, Math.ceil(filtrados.length / pageSize)));
    }

    function toggleSelectAll(checked) {
        const checkboxes = document.querySelectorAll('.chk-doc');
        checkboxes.forEach(cb => {
            cb.checked = checked;
            const uid = cb.getAttribute('data-uid');
            if (checked) seleccionadosSet.add(uid);
            else seleccionadosSet.delete(uid);
        });
        actualizarContadorSeleccionados();
        const filtrados = obtenerDocumentosFiltrados();
        renderPaginacionControles(filtrados.length, Math.max(1, Math.ceil(filtrados.length / pageSize)));
    }

    function seleccionarTodosFiltrados() {
        const filtrados = obtenerDocumentosFiltrados();
        filtrados.forEach(d => seleccionadosSet.add(d.uid));
        renderTablaDocumentos();
        actualizarContadorSeleccionados();
    }

    function seleccionarGenericos() {
        seleccionadosSet.clear();
        documentosCache.forEach(d => {
            if (d.es_generico || !d.sincronizado) {
                seleccionadosSet.add(d.uid);
            }
        });
        renderTablaDocumentos();
        actualizarContadorSeleccionados();
    }

    function actualizarContadorSeleccionados() {
        document.getElementById('count_seleccionados').textContent = seleccionadosSet.size;
    }

    function verDetalleImpacto(uid) {
        const doc = documentosCache.find(d => d.uid === uid);
        if (!doc) return;

        const params = new URLSearchParams({
            tipo: doc.tipo,
            numero: doc.numero,
            bodega: doc.bodega,
            subtipo: doc.subtipo
        });

        fetch(`{{ route('cambio-tercero.detalle') }}?${params.toString()}`)
            .then(r => r.json())
            .then(res => {
                if (!res.ok) {
                    Swal.fire('Error', res.message || 'No se pudo cargar el detalle', 'error');
                    return;
                }
                const det = res.detalle;
                document.getElementById('modalImpactoTitulo').innerHTML =
                    `<i class="fa-solid fa-sitemap text-info me-1"></i> Impacto de Actualización: ${escapeHtml(doc.tipo_label)} #${escapeHtml(doc.numero)} (${escapeHtml(doc.nombre_bodega)})`;

                const tablasRows = (det.tablas || []).map(t => `
                    <tr>
                        <td class="fw-semibold">${escapeHtml(t.tabla)}</td>
                        <td class="font-monospace text-primary">${escapeHtml(t.columna)}</td>
                        <td class="text-center"><span class="badge bg-secondary">${t.registros}</span></td>
                        <td class="font-monospace fw-bold">${escapeHtml(String(t.nit_actual))}</td>
                    </tr>
                `).join('');

                const kardexRows = (det.kardex || []).map(k => `
                    <tr>
                        <td class="font-monospace">#${k.id}</td>
                        <td><span class="badge bg-info text-dark">${escapeHtml(k.tipo)}</span></td>
                        <td class="font-monospace">${escapeHtml(k.producto)}</td>
                        <td class="text-center">${escapeHtml(String(k.caja))} / ${escapeHtml(String(k.frcc))}</td>
                        <td class="font-monospace fw-bold">${escapeHtml(String(k.cliente))}</td>
                        <td class="small">${escapeHtml(String(k.fecha || '').substring(0, 10))}</td>
                    </tr>
                `).join('');

                const contabRows = (det.contabilidad || []).map(c => `
                    <tr>
                        <td class="font-monospace">#${c.id}</td>
                        <td class="font-monospace fw-bold">${escapeHtml(c.cuentaNum)} — ${escapeHtml(c.NombreCuenta || '')}</td>
                        <td class="font-monospace fw-bold">${escapeHtml(String(c.nit))}</td>
                        <td class="text-end text-success font-monospace">$${Number(c.egreso || 0).toLocaleString('es-CO')}</td>
                        <td class="text-end text-primary font-monospace">$${Number(c.ingreso || 0).toLocaleString('es-CO')}</td>
                    </tr>
                `).join('');

                document.getElementById('modalImpactoBody').innerHTML = `
                    <div class="mb-3">
                        <h6 class="fw-bold small text-uppercase text-secondary mb-2">1. Tablas que se actualizarán simultáneamente</h6>
                        <table class="table table-sm table-bordered mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Tabla en Base de Datos</th>
                                    <th>Campo Tercero</th>
                                    <th class="text-center">Filas Afectadas</th>
                                    <th>NIT Actual</th>
                                </tr>
                            </thead>
                            <tbody>${tablasRows}</tbody>
                        </table>
                    </div>
                    ${kardexRows ? `
                    <div class="mb-3">
                        <h6 class="fw-bold small text-uppercase text-secondary mb-2">2. Registros en Kardex (<code>kardex.cliente</code>)</h6>
                        <div class="table-responsive" style="max-height: 180px;">
                            <table class="table table-sm table-striped mb-0">
                                <thead>
                                    <tr><th>ID</th><th>Tipo</th><th>Producto</th><th class="text-center">Caja/Fracc</th><th>Tercero Actual</th><th>Fecha</th></tr>
                                </thead>
                                <tbody>${kardexRows}</tbody>
                            </table>
                        </div>
                    </div>` : ''}
                    ${contabRows ? `
                    <div>
                        <h6 class="fw-bold small text-uppercase text-secondary mb-2">3. Asientos en Contabilidad (<code>contabilidad.nit</code>)</h6>
                        <div class="table-responsive" style="max-height: 180px;">
                            <table class="table table-sm table-striped mb-0">
                                <thead>
                                    <tr><th>ID</th><th>Cuenta PUC</th><th>NIT Actual</th><th class="text-end">Débito</th><th class="text-end">Crédito</th></tr>
                                </thead>
                                <tbody>${contabRows}</tbody>
                            </table>
                        </div>
                    </div>` : ''}
                `;

                const modal = new bootstrap.Modal(document.getElementById('modalImpactoTercero'));
                modal.show();
            });
    }

    function cambiarTerceroIndividual(uid) {
        const doc = documentosCache.find(d => d.uid === uid);
        if (!doc) return;

        let nitBarra = document.getElementById('nuevo_nit_input').value.trim();

        Swal.fire({
            title: `Cambiar Tercero — ${doc.tipo} #${doc.numero}`,
            html: `
                <div class="text-start small mb-2">
                    <div><strong>Documento:</strong> ${escapeHtml(doc.tipo_label)} #${escapeHtml(doc.numero)} (${escapeHtml(doc.nombre_bodega)})</div>
                    <div><strong>Tercero Actual:</strong> <span class="font-monospace">${escapeHtml(doc.nit_actual)}</span> — ${escapeHtml(doc.nombre_actual)}</div>
                    <div><strong>Impacto:</strong> Documento Principal + Kardex (${doc.filas_kardex} filas) + Contabilidad (${doc.filas_contab} asientos)</div>
                </div>
                <div class="text-start mt-3">
                    <label class="form-label small fw-bold">Nuevo NIT / Cédula del Tercero (Debe existir en el sistema):</label>
                    <input type="text" id="swal_nuevo_nit" list="datalist_terceros" class="form-control form-control-sm font-monospace fw-bold" value="${escapeHtml(nitBarra)}" placeholder="Ingrese NIT o Cédula existente..." oninput="onInputNuevoTercero(this.value)">
                    <div class="form-text small text-muted mt-1">
                        El tercero debe estar previamente creado en el catálogo de Clientes / Terceros.
                    </div>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Actualizar en Todo el Sistema',
            cancelButtonText: 'Cancelar',
            confirmButtonColor: '#2563eb',
            preConfirm: () => {
                const nNit = document.getElementById('swal_nuevo_nit').value.trim();
                if (!nNit) {
                    Swal.showValidationMessage('Debe ingresar el NIT o Cédula del nuevo tercero.');
                    return false;
                }
                return { nuevo_nit: nNit };
            }
        }).then(result => {
            if (!result.isConfirmed) return;

            fetch(`{{ route('cambio-tercero.actualizar') }}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': CSRF_TOKEN
                },
                body: JSON.stringify({
                    tipo: doc.tipo,
                    numero: doc.numero,
                    bodega: doc.bodega,
                    subtipo: doc.subtipo,
                    nuevo_nit: result.value.nuevo_nit
                })
            })
            .then(r => r.json())
            .then(res => {
                if (!res.ok) {
                    Swal.fire('No se pudo actualizar', res.message || 'Error al actualizar tercero', 'error');
                    return;
                }
                const af = res.resultado.afectados || {};
                const resumenTablas = Object.entries(af)
                    .map(([tabla, cant]) => `<li><code>${tabla}</code>: <strong>${cant}</strong> reg.</li>`)
                    .join('');

                Swal.fire({
                    icon: 'success',
                    title: '¡Tercero Actualizado en Todo el Sistema!',
                    html: `
                        <div class="small text-start">
                            <p class="mb-2">Nuevo vinculado: <strong>${escapeHtml(res.resultado.nuevo_nit)} — ${escapeHtml(res.resultado.nuevo_nombre)}</strong></p>
                            <ul class="mb-0">${resumenTablas}</ul>
                        </div>
                    `
                });
                consultarDocumentos();
            });
        });
    }

    function aplicarCambioMasivo() {
        if (seleccionadosSet.size === 0) {
            Swal.fire('Sin selección', 'Seleccione al menos un documento en la tabla.', 'warning');
            return;
        }

        const nuevoNit = document.getElementById('nuevo_nit_input').value.trim();

        if (!nuevoNit) {
            Swal.fire('Falta el Nuevo Tercero', 'Escriba o seleccione el NIT / Cédula del nuevo tercero en la barra superior (Paso 1).', 'warning');
            document.getElementById('nuevo_nit_input').focus();
            return;
        }

        const docsSeleccionados = documentosCache.filter(d => seleccionadosSet.has(d.uid));
        const nombreDest = catalogoTercerosMap[nuevoNit] ? catalogoTercerosMap[nuevoNit].nombre : 'Verificar en catálogo';

        Swal.fire({
            icon: 'question',
            title: `¿Actualizar ${docsSeleccionados.length} documento(s)?`,
            html: `
                <div class="small text-start">
                    <p>Se asignará el tercero <strong>${escapeHtml(nuevoNit)} (${escapeHtml(nombreDest)})</strong> a <strong>${docsSeleccionados.length}</strong> documento(s) seleccionados.</p>
                    <p class="mb-0 text-muted">Se actualizarán automáticamente las tablas principales, detalle de compras, lotes/vencimientos, <strong>Kardex</strong>, <strong>Contabilidad</strong> y Caja Mayor.</p>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Sí, actualizar en lote',
            cancelButtonText: 'Cancelar',
            confirmButtonColor: '#16a34a'
        }).then(result => {
            if (!result.isConfirmed) return;

            fetch(`{{ route('cambio-tercero.actualizar-lote') }}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': CSRF_TOKEN
                },
                body: JSON.stringify({
                    nuevo_nit: nuevoNit,
                    documentos: docsSeleccionados.map(d => ({
                        tipo: d.tipo,
                        numero: d.numero,
                        bodega: d.bodega,
                        subtipo: d.subtipo
                    }))
                })
            })
            .then(r => r.json())
            .then(res => {
                if (!res.ok) {
                    Swal.fire('Error', res.message || 'No se pudo procesar el lote', 'error');
                    return;
                }
                let msgExtra = '';
                if (res.errores && res.errores.length > 0) {
                    msgExtra = `<div class="mt-2 text-danger small">${res.errores.map(escapeHtml).join('<br>')}</div>`;
                }
                Swal.fire({
                    icon: res.procesados > 0 ? 'success' : 'warning',
                    title: 'Proceso Masivo Finalizado',
                    html: `Se actualizaron <strong>${res.procesados}</strong> documento(s) en todas las tablas y Kardex.${msgExtra}`
                });
                consultarDocumentos();
            });
        });
    }

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

    function escapeJs(str) {
        return String(str ?? '').replace(/\\/g, '\\\\').replace(/'/g, "\\'");
    }
</script>
@endsection