@extends('layouts.app', ['activePage' => 'conciliacion', 'menuParent' => '', 'titlePage' => ''])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-2">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="text-2xl font-bold text-gray-900 mb-1">Conciliación bancaria</h5>
                        <p class="text-sm text-gray-600">Importa tus movimientos bancarios, sube tu archivo de conciliación o consulta conciliaciones pasadas para comparar y analizar tus operaciones.</p>
                    </div>
                    <div>
                        <a href="{{ asset('archivos/estaticos/plantilla_importar_movimientos.xlsx') }}"
                            class="flex items-center rounded-lg px-3 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold shadow transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-400"
                            style="box-shadow: 0 2px 8px rgba(34,197,94,0.18);"
                            download>
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"></path>
                            </svg>
                            <span>Descargar plantilla</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md p-4">
                    <div class="grid grid-cols-12 gap-4 mb-4">
                        <div class="col-span-2" id="tourConciliacionTipoOperacion">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de operación: <span class="text-danger">*</span></label>
                            <select id="tipoOperacion" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" onchange="cambiarTipoOperacion()">
                                <option value="reconsultar" selected>Actualizar movimientos</option>
                                <option value="subir">Subir archivo excel</option>
                                <option value="subir_pdf">Subir archivo pdf</option>
                            </select>
                        </div>
                        <div class="col-span-2 contenedorConciliacion" id="tourConciliacionExistente">
                            <label for="conciliacionId" class="block text-sm font-medium text-gray-700 mb-1">Conciliación existente: <span class="text-danger">*</span></label>
                            <select id="conciliacionId" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">-Selecciona-</option>
                                @if(isset($conciliaciones))
                                @foreach($conciliaciones as $conciliacion)
                                <option value="{{ $conciliacion->id }}">
                                    {{ $conciliacion?->cuenta?->nombre }} | {{ $conciliacion->tipo_cuenta }} ({{ $conciliacion->periodo?->mes }} - {{ $conciliacion->periodo?->anio }})
                                </option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-span-2 contenedorConciliacion" id="contenedorArchivoReconsulta" style="display:none;">
                            <label for="excelConciliacionReconsulta" class="block text-sm font-medium text-gray-700 mb-1">Subir movimientos:</label>
                            <input type="file" id="excelConciliacionReconsulta" name="excelConciliacionReconsulta" accept=".xlsx,.xls,.pdf,application/pdf" class="block w-full text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 py-2 px-3" />
                        </div>
                        <div class="col-span-2 contenedorArchivo contenedorNuevaConciliacion" style="display: none;">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de cuenta: <span class="text-danger">*</span></label>
                            <select id="tipoCuentaFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">-Selecciona-</option>
                                @foreach($optionsTipoCuenta as $tipoCuenta)
                                <option value="{{ $tipoCuenta }}">{{ $tipoCuenta }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-span-2 contenedorArchivo contenedorNuevaConciliacion" style="display: none;">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Cuenta: <span class="text-danger">*</span></label>
                            <select id="cuentaFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" disabled>
                            </select>
                        </div>
                        <div class="col-span-2 contenedorArchivo contenedorNuevaConciliacion" style="display: none;">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Periodo: <span class="text-danger">*</span></label>
                            <select id="periodoFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">-Selecciona-</option>
                                @foreach($optionsPeriodos as $periodo)
                                <option value="{{ $periodo->id }}">{{ $periodo->anio }} - {{ $periodo->mes }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-span-2 contenedorArchivo contenedorArchivoExcel" style="display: none;">
                            <div class="flex items-end">
                                <div class="flex-1">
                                    <label for="excelConciliacion" class="block text-sm font-medium text-gray-700 mb-1">Subir archivo excel: <span class="text-danger">*</span></label>
                                    <input type="file" id="excelConciliacion" name="excelConciliacion" accept=".xlsx,.xls" class="block w-full text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 py-2 px-3" />
                                </div>
                            </div>
                        </div>
                        <div class="col-span-2 contenedorArchivo contenedorArchivoPdf" style="display: none;">
                            <div class="flex items-end">
                                <div class="flex-1">
                                    <label for="pdfConciliacion" class="block text-sm font-medium text-gray-700 mb-1">Subir archivo PDF: <span class="text-danger">*</span></label>
                                    <input type="file" id="pdfConciliacion" name="pdfConciliacion" accept="application/pdf" class="block w-full text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 py-2 px-3" />
                                </div>
                            </div>
                        </div>
                        <div class="col-span-2 flex items-end">
                            <button id="tourConciliacionGenerar" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 mb-1" onclick="ejecutarConciliacionBancaria()">
                                <i class="material-icons align-middle text-sm">search</i> Generar
                            </button>
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-6">
                        <!-- Columna izquierda - Listado de movimientos -->
                        <div class="bg-gray-25 rounded-lg p-4 border border-gray-200 col-span-8" id="tourConciliacionTablaMovimientos">
                            <div class="flex justify-between items-center mb-3" style="border-bottom: 1px solid #e5e7eb !important;">
                                <h6 class="text-sm font-medium text-gray-700">Listado de Movimientos</h6>
                                <div class="flex items-center gap-2">
                                    <button onclick="abrirModalFiltros()" class="px-3 py-1.5 bg-transparent border  hover:text-blue-600 text-xs font-medium rounded-md transition-colors duration-200 flex mb-2 items-center gap-2">
                                        <i class="fas fa-filter"></i> Filtrar
                                    </button>
                                    <button onclick="abrirModalAgregarMovimiento()" class="px-3 py-1.5 bg-transparent border hover:text-green-600 text-xs font-medium rounded-md transition-colors duration-200 flex mb-2 items-center gap-2">
                                        <i class="fas fa-plus"></i> Agregar movimiento
                                    </button>
                                    <button id="btnCerrarConciliacion" onclick="cerrarConciliacion()" class="px-3 py-1.5 bg-transparent border hover:text-orange-600 text-xs font-medium rounded-md transition-colors duration-200 flex mb-2 items-center gap-2">
                                        <i class="fas fa-download"></i> Generar archivos
                                    </button>
                                    <button id="btnEliminarConciliacion" onclick="eliminarConciliacionCompleta()" class="px-3 py-1.5 bg-transparent border hover:text-red-600 text-xs font-medium rounded-md transition-colors duration-200 flex mb-2 items-center gap-2">
                                        <i class="fas fa-trash"></i> Eliminar conciliación
                                    </button>
                                </div>
                            </div>

                            <!-- Sección de totales de movimientos -->
                            <div id="totalesMovimientos" class="mb-2 p-3 bg-white rounded-lg border border-gray-200 shadow-sm" style="display: none;">
                                <div class="grid grid-cols-7 gap-4" style="font-size: .4rem !important;">
                                    <div class="text-center">
                                        <div class="text-[.8rem] font-medium text-gray-500 uppercase tracking-wide mb-1">Movimientos</div>
                                        <div id="totalCantidadMovimientos" class="text-sm font-bold text-gray-800">0</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-[.8rem] font-medium text-gray-500 uppercase tracking-wide mb-1">Pendientes</div>
                                        <div id="totalPendientes" class="text-sm font-bold text-orange-600">0</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-[.8rem] font-medium text-gray-500 uppercase tracking-wide mb-1">Conciliados</div>
                                        <div id="totalConciliados" class="text-sm font-bold text-green-600">0</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-[.8rem] font-medium text-gray-500 uppercase tracking-wide mb-1">Saldo inicial</div>
                                        <div id="saldoInicial" class="text-sm font-bold text-gray-800">$0.00</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-[.8rem] font-medium text-gray-500 uppercase tracking-wide mb-1">Depositos</div>
                                        <div id="totalAbonosMovimientos" class="text-sm font-bold text-green-600">$0.00</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-[.8rem] font-medium text-gray-500 uppercase tracking-wide mb-1">Retiros</div>
                                        <div id="totalCargosMovimientos" class="text-sm  font-bold text-red-600">$0.00</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-[.8rem] font-medium text-gray-500 uppercase tracking-wide mb-1">Saldo final</div>
                                        <div id="saldoFinal" class="text-sm font-bold text-gray-800">$0.00</div>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-2 text-xs text-gray-500" id="leyendaUsoClick" style="display:none;">
                                <i class="fas fa-info-circle mr-1 text-blue-500"></i>
                                Clic: selección única. <strong>Ctrl + clic</strong>: selección múltiple.
                            </div>
                            <div class="table-scroll">
                                <table id="tablaMovimientos" class="w-full text-sm table-fixed">
                                    <thead class="sticky-top">
                                        <tr class="bg-gradient-to-r from-gray-50 to-gray-100 border-b-2 border-gray-200">
                                            <th class="px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px] w-24">Fecha</th>
                                            <th class="px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px] w-36">Descripción</th>
                                            <th class="px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px] w-24">Referencia</th>
                                            <th class="px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px] w-24">Movimiento</th>
                                            <th class="px-4 py-3 text-right font-semibold text-gray-700 uppercase tracking-wide text-[11px] w-24">Monto</th>
                                            <th class="px-4 py-3 text-right font-semibold text-gray-700 uppercase tracking-wide text-[11px] w-24">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tablaMovimientosBody" class="bg-white">
                                        <!-- Se llenará dinámicamente -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Columna derecha - Formulario del movimiento seleccionado -->
                        <div class="bg-gray-25 rounded-lg p-4 border border-gray-200 col-span-4" style="position:relative;" id="tourConciliacionFormularioMovimiento">
                            <h6 class="text-sm font-medium text-gray-700 mb-3" style="border-bottom: 1px solid #e5e7eb !important;">Formulario de movimiento</h6>
                            <div id="resumenSeleccionMovimientos" class="hidden mb-3 p-2 rounded-md border border-blue-200 bg-blue-50 flex items-center justify-between">
                                <div class="text-xs text-blue-800 font-semibold">
                                    <i class="fas fa-layer-group mr-1"></i>
                                    <span id="cantidadSeleccionMovimientos">0</span> movimiento(s) seleccionado(s)
                                </div>
                                <button type="button" onclick="limpiarSeleccionMovimientos()" class="text-xs text-blue-700 hover:text-blue-900 underline">Limpiar selección</button>
                            </div>

                            <!-- Loader overlay para sensación visual al cambiar de registro -->
                            <div id="formularioLoader" class="hidden" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:40;background:rgba(255,255,255,0.85);">
                                <div style="text-align:center;padding:18px;">
                                    <i class="fas fa-spinner fa-spin text-gray-600 text-3xl mb-3" style="display:block;margin:0 auto 8px auto;"></i>
                                    <p class="text-gray-600" style="margin:0;font-weight:600;">Cargando...</p>
                                </div>
                            </div>

                            <!-- Contenido inicial -->
                            <div id="formularioInicial" class="text-center py-8">
                                <i class="fas fa-hand-pointer text-gray-400 text-4xl mb-3"></i>
                                <p class="text-gray-500">Selecciona el movimiento a conciliar</p>
                            </div>

                            <!-- Formulario -->
                            <!-- Formulario -->
                            <div id="formularioMovimiento" class="hidden">
                                <form id="formMovimientoEdit">
                                    <input type="hidden" id="movimientoBancarioId" name="movimiento_bancario_id">
                                    <input type="hidden" id="movimientoConciliadoOriginal" name="movimiento_conciliado_original" value="0">
                                    <input type="hidden" id="tipoMovimiento" name="tipo_movimiento" value="egreso">
                                    <input type="hidden" id="monto" name="monto" value="0">
                                    <input type="hidden" id="fecha" name="fecha" value="">
                                    <input type="hidden" id="folio" name="folio" value="">

                                    <div class="grid grid-cols-2 gap-x-4 gap-y-1 mb-1">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Forma de pago: <span class="text-red-500">*</span></label>
                                            <select id="forma_pago" name="forma_pago" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                                                <option value="">-Selecciona-</option>
                                                @foreach($formasPago ?? [] as $formaPago)
                                                <option value="{{ $formaPago->id }}" @if($formaPago->claveSat === '03') selected @endif>{{ $formaPago->nombre }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div id="campoBeneficiario" class="hidden">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Cliente/Ordenante: <span class="text-red-500">*</span></label>
                                            <select id="beneficiario" name="beneficiario" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                <option value="">-Selecciona-</option>
                                                @foreach($beneficiarios ?? [] as $beneficiario)
                                                <option value="{{ $beneficiario->id }}">{{ $beneficiario->nombre }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div id="campoProveedor">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Proveedor: <span class="text-red-500">*</span></label>
                                            <select id="proveedor" name="proveedor" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                <option value="">-Selecciona-</option>
                                                @foreach($proveedores ?? [] as $proveedor)
                                                <option value="{{ $proveedor->id }}">{{ $proveedor->nombre }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div id="campoCategoria">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Categoría: <span class="text-red-500">*</span></label>
                                            <select id="categoria" name="categoria" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                <option value="">-Selecciona-</option>
                                                @foreach($categorias ?? [] as $categoria)
                                                <option value="{{ $categoria->id }}">{{ $categoria->nombre }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Comprobante (PDF):</label>
                                            <input type="file" id="comprobantePDF" name="comprobante_pdf" accept=".pdf" class="block w-full text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 py-2 px-3" />
                                            <small class="text-gray-500 mt-1 block">Máximo 5 MB</small>
                                        </div>
                                    </div>

                                    <div class="grid gap-x-4 gap-y-1 mb-1">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Descripción estado de cuenta:</label>
                                            <textarea id="notas" name="notas" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                                        </div>
                                    </div>

                                    {{-- Campos dinámicos --}}
                                    @include('bancos.includes.inputsCamposExcelComponent', ['campos' => $camposExcel, 'isConciliacion' => true])

                                    {{-- BOTONES DENTRO DEL FORM --}}
                                    <div class="flex gap-2 mt-4">
                                        <button type="button" onclick="guardarMovimiento()" id="btnGuardarMovimiento"
                                            class="flex-1 flex items-center justify-center gap-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 shadow-sm transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-200"
                                            title="Guardar movimiento" aria-label="Guardar movimiento">
                                            <i class="fas fa-save text-sm"></i>
                                            <span>Conciliar movimiento</span>
                                        </button>

                                        <button type="button" id="btnEditarMovimiento" onclick="habilitarEdicionMovimiento()" style="display:none;"
                                            class="flex-1 flex items-center justify-center gap-2 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 shadow-sm transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-yellow-200"
                                            title="Editar movimiento" aria-label="Editar movimiento">
                                            <i class="fas fa-edit text-sm"></i>
                                            <span>Editar</span>
                                        </button>

                                        <button type="button" id="btnCancelarMovimiento" onclick="cancelarEdicion()"
                                            class="flex-1 flex items-center justify-center gap-2 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
                                            title="Cancelar edición" aria-label="Cancelar edición">
                                            <i class="fas fa-times-circle text-sm text-red-500"></i>
                                            <span>Cancelar</span>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('bancos.includes.periodoStoreComponent')
@include('bancos.includes.formaPagoStoreComponent')
@include('bancos.includes.beneficiariosStoreComponent')
@include('bancos.includes.proveedorStoreComponent')
@include('bancos.includes.categoriasStoreComponent')

<!-- Modal Agregar Movimiento -->
<div class="modal fade draggable" id="modalAgregarMovimiento" tabindex="-1" role="dialog" aria-labelledby="modalAgregarMovimientoLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form id="formAgregarMovimiento" onsubmit="guardarNuevoMovimiento(event)">
            <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-lg font-semibold text-gray-900" id="modalAgregarMovimientoLabel">
                        <i class="fas fa-plus-circle mr-2"></i> Agregar movimiento bancario
                    </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 p-6">
                    <input type="hidden" id="modalConciliacionId" name="conciliacion_bancaria_id">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Fecha operación:<span class="text-red-500">*</span></label>
                            <input type="date" id="input_fecha_operacion" name="fecha_operacion" class="w-full px-3 py-2 border border-gray-300 rounded-md" required>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Referencia:</label>
                            <input type="text" id="input_referencia" name="referencia" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Deposito:<span class="text-red-500">*</span></label>
                            <input type="number" step="0.01" id="input_abonos" name="abonos" class="w-full px-3 py-2 border border-gray-300 rounded-md" min="0" value="0">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Retiro:<span class="text-red-500">*</span></label>
                            <input type="number" step="0.01" id="input_cargos" name="cargos" class="w-full px-3 py-2 border border-gray-300 rounded-md" min="0" value="0">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Descripción:<span class="text-red-500">*</span></label>
                            <textarea id="input_descripcion" name="descripcion" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md resize-vertical" required></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-white border-t border-blue-200 px-6 py-4 flex justify-end gap-2">
                    <button type="button"
                        class="flex items-center gap-2 bg-gray-500 hover:bg-gray-600 text-white border border-gray-500 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm"
                        data-dismiss="modal">
                        <i class="fas fa-times text-base"></i>
                        Cancelar
                    </button>
                    <button type="button"
                        class="flex items-center gap-2 bg-transparent text-gray-600 hover:text-blue-600 border border-gray-300 hover:border-blue-500 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm"
                        onclick="$('#formAgregarMovimiento')[0].reset()">
                        <i class="fas fa-eraser text-base"></i>
                        Limpiar
                    </button>
                    <button type="submit"
                        class="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white border border-green-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm">
                        <i class="fas fa-save text-base"></i>
                        Guardar
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Modal de Filtros -->
<div class="modal fade draggable" id="modalFiltros" tabindex="-1" role="dialog" aria-labelledby="modalFiltrosLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <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-lg font-semibold text-gray-900" id="modalFiltrosLabel">
                    <i class="fas fa-filter mr-2"></i>Filtrar movimientos
                </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 px-4 py-2">
                <form id="formFiltros" onsubmit="aplicarFiltros(event)">
                    <div class="mb-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Tipo:</label>
                        <select id="filtroTipo" name="tipo" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Todos</option>
                            <option value="abono">Solo depositos</option>
                            <option value="cargo">Solo retiros</option>
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Estado:</label>
                        <select id="filtroEstado" name="estado" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Todos</option>
                            <option value="false">Pendientes</option>
                            <option value="true">Conciliados</option>
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Fecha desde:</label>
                        <input type="date" id="filtroFechaDesde" name="fecha_desde" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <div class="mb-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Fecha hasta:</label>
                        <input type="date" id="filtroFechaHasta" name="fecha_hasta" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="mb-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Descripción:</label>
                        <input type="text" id="filtroDescripcion" name="descripcion" placeholder="Buscar en descripción..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Referencia:</label>
                        <input type="text" id="filtroReferencia" name="referencia" placeholder="Buscar en referencia..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Monto:</label>
                        <input type="text" id="filtroMonto" name="monto" placeholder="Buscar en monto..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </form>
            </div>
            <div class="modal-footer bg-white border-t border-blue-200 px-6 pt-2 pb-4 flex justify-end gap-2">
                <button type="button"
                    class="flex items-center gap-2 bg-transparent text-gray-600 hover:text-blue-600 border border-gray-300 hover:border-blue-500 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm"
                    onclick="limpiarFiltros()">
                    <i class="fas fa-eraser text-base"></i>
                    Limpiar
                </button>
                <button type="button"
                    class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white border border-blue-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm"
                    onclick="$('#formFiltros').submit()">
                    <i class="fas fa-filter text-base"></i>
                    Aplicar
                </button>

            </div>
        </div>
    </div>
</div>

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

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

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

    /* Estilos para la tabla de movimientos con Tailwind */
    #tablaMovimientos {
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Mejoras en el contenedor de la tabla */
    .bg-gray-25.rounded-lg.p-4 {
        padding: 1rem !important;
    }

    .bg-gray-25.rounded-lg.p-4 h6 {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
    }

    .table-scroll {
        max-height: 500px;
        overflow-y: auto;
    }

    .bg-gray-25 {
        background-color: #fafafa;
    }

    /* Estilos para la nueva funcionalidad */
    .table-primary {
        background-color: #e3f2fd !important;
        border-color: #2196f3 !important;
    }

    .table-primary:hover {
        background-color: #bbdefb !important;
    }

    .hidden {
        display: none !important;
    }

    /* Estilos para los contenedores de opciones */
    .opciones-container {
        min-height: 400px;
    }

    /* Estilos para los botones de acción */
    .btn-relacionar {
        transition: all 0.3s ease;
    }

    .btn-relacionar:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }


    /* Estilos para el header compacto */
    .bg-gray-50 {
        background-color: #f9fafb;
    }

    /* Mejoras para el diseño compacto */
    .space-y-1>*+* {
        margin-top: 0.25rem;
    }

    .space-y-2>*+* {
        margin-top: 0.5rem;
    }

    /* Estilos para texto truncado */
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Colores para los montos financieros */
    .text-green-600 {
        color: #059669;
    }

    .text-red-600 {
        color: #dc2626;
    }

    .text-orange-600 {
        color: #ea580c;
    }

    /* Estilos para movimientos conciliados */
    .bg-green-50 {
        background-color: #f0fdf4;
    }

    .hover\:bg-green-100:hover {
        background-color: #dcfce7;
    }

    .movimiento-seleccionado {
        background: linear-gradient(to right, #dbeafe, #e0e7ff) !important;
        border-left: 4px solid #3b82f6 !important;
    }

    #tablaMovimientos th,
    #tablaMovimientos td {
        white-space: normal !important;
        /* Permite el wrap */
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100%;
    }

    /* Header sticky siempre visible por encima del separador de grupos */
    #tablaMovimientos thead th {
        position: sticky;
        top: 0;
        z-index: 40;
        background: #f9fafb;
    }

    /* Separador sticky por debajo del header */
    #tablaMovimientosBody tr.grupo-separador td {
        position: sticky;
        top: 50px;
        z-index: 30;
        background: #f3f4f6;
    }

    #tablaMovimientosBody tr.grupo-separador {
        pointer-events: none;
    }

    /* Estilos para la sección de totales de movimientos */
    #totalesMovimientos {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    #totalesMovimientos .text-lg {
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.2;
    }

    #totalesMovimientos .text-xs {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.05em;
    }

    /* Animación suave para la aparición de totales */
    #totalesMovimientos {
        transition: all 0.3s ease-in-out;
    }
</style>
@endsection

@push('js')

<script>
    // Variables globales
    var arrayCuentasBancos = JSON.parse('{!! json_encode($cuentas) !!}');

    $(document).ready(function() {
        // Iniciar tour si no se ha completado
        if (window.TourManager) {
            window.TourManager.start('conciliacionBancaria');
        }

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

        $('#tipoOperacion').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        $('#conciliacionId').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        $('#tipoCuentaFilter').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        $('#cuentaFilter').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        $('#periodoFilter').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });


        // Establecer fecha actual en el campo de fecha saldo inicial
        $('#fecha_saldo_inicial').val(new Date().toISOString().split('T')[0]);


        $('#tipoCuentaFilter').change(function() {
            var tipoCuenta = $(this).val();

            var cuentasBanco = arrayCuentasBancos.filter(function(cuenta) {
                return cuenta.tipo_cuenta == tipoCuenta;
            });

            $('#cuentaFilter').empty();
            $('#cuentaFilter').append('<option value="">-Selecciona-</option>');

            cuentasBanco.forEach(function(cuenta) {
                $('#cuentaFilter').append(
                    $('<option>', {
                        value: cuenta.id,
                        text: cuenta.nombre
                    })
                );
            });

            $('#cuentaFilter').prop('disabled', false);

            $('#cuentaFilter').trigger('change');

        })

        // Listeners para evitar que cargos y abonos existan simultáneamente
        $('#input_cargos').on('input', function() {
            let val = parseFloat($(this).val()) || 0;
            if (val > 0) {
                $('#input_abonos').val(0).prop('disabled', true);
            } else {
                $('#input_abonos').prop('disabled', false);
            }
        });

        $('#input_abonos').on('input', function() {
            let val = parseFloat($(this).val()) || 0;
            if (val > 0) {
                $('#input_cargos').val(0).prop('disabled', true);
            } else {
                $('#input_cargos').prop('disabled', false);
            }
        });

        // Mostrar input de archivo cuando se selecciona una conciliación en modo reconsultar
        $('#conciliacionId').on('change', function() {
            var val = $(this).val();
            if (val && $('#tipoOperacion').val() === 'reconsultar') {
                $('#contenedorArchivoReconsulta').show();
            } else {
                $('#contenedorArchivoReconsulta').hide();
                // limpiar input
                $('#excelConciliacionReconsulta').val('');
            }
        });

        // Guardar HTML/clase/onclick original del botón cancelar para poder restaurarlo si se modifica en modo edición
        if ($('#btnCancelarMovimiento').length) {
            window.btnCancelarOriginalHtml = $('#btnCancelarMovimiento').html();
            window.btnCancelarOriginalClass = $('#btnCancelarMovimiento').attr('class');
            window.btnCancelarOriginalOnclick = $('#btnCancelarMovimiento').attr('onclick');
        }

        cambiarTipoOperacion();
    });

    function cambiarTipoOperacion() {
        var tipoOperacion = $('#tipoOperacion').val();
        $('.contenedorNuevaConciliacion').hide();
        $('.contenedorArchivoExcel').hide();
        $('.contenedorArchivoPdf').hide();
        $('.contenedorConciliacion').hide();

        if (tipoOperacion === 'subir') {
            $('.contenedorNuevaConciliacion').show();
            $('.contenedorArchivoExcel').show();
        } else if (tipoOperacion === 'subir_pdf') {
            $('.contenedorNuevaConciliacion').show();
            $('.contenedorArchivoPdf').show();
        } else if (tipoOperacion === 'reconsultar') {
            $('.contenedorConciliacion').show();
            // disparar cambio para mostrar el input de archivo si ya hay conciliación seleccionada
            $('#conciliacionId').trigger('change');
        } else {
            // asegurar que el input de reconsulta esté oculto al cambiar a otra opción
            $('#contenedorArchivoReconsulta').hide();
            $('#excelConciliacionReconsulta').val('');
        }
    }

    function construirTextoConciliacion(conciliacion) {
        if (!conciliacion || !conciliacion.id) {
            return '';
        }

        var cuenta = conciliacion.cuenta_nombre || 'Sin cuenta';
        var tipoCuenta = conciliacion.tipo_cuenta || 'Sin tipo';
        var mes = conciliacion.periodo_mes || 'Sin mes';
        var anio = conciliacion.periodo_anio || 'Sin año';

        return `${cuenta} | ${tipoCuenta} (${mes} - ${anio})`;
    }

    function setConciliacionActiva(conciliacionId, conciliacion) {
        if (!conciliacionId) {
            return;
        }

        var idValue = String(conciliacionId);
        var texto = construirTextoConciliacion(conciliacion);
        var $select = $('#conciliacionId');
        var $option = $select.find(`option[value="${idValue}"]`);

        if ($option.length === 0) {
            $select.append(new Option(texto || `Conciliación #${idValue}`, idValue, false, false));
        } else if (texto) {
            $option.text(texto);
        }

        $('#tipoOperacion').val('reconsultar').trigger('change');
        cambiarTipoOperacion();

        $select.val(idValue).trigger('change');
    }

    function syncConciliacionCreadaDesdeRespuesta(response) {
        if (!response || !response.success) {
            return;
        }

        var conciliacionId = response.conciliacion_id || (response.conciliacion && response.conciliacion.id);
        if (!conciliacionId) {
            return;
        }

        if (response.set_default_tipo_operacion) {
            setConciliacionActiva(conciliacionId, response.conciliacion || null);
        }
    }

    // Flag global para forzar la siguiente subida cuando el servidor indique que ya existe una conciliación
    window.forceUploadNext = window.forceUploadNext || false;

    // Variable global para controlar el intervalo de progreso
    let progressInterval = null;
    let currentProgress = 0;

    function ejecutarConciliacionBancaria(silent = false) {
        var tipoOperacion = $('#tipoOperacion').val();
        var periodo = $('#periodoFilter').val();

        if (!tipoOperacion) {
            var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                </div>
                <div style="flex:1;">
                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Tipo de operación requerido</p>
                    <p style="font-size:14px;color:#6b7280;margin:0;">Por favor, selecciona el tipo de operación.</p>
                </div>
            </div>`;
            Swal.fire({
                html: warningHtml,
                showConfirmButton: false,
                showCancelButton: false,
                allowOutsideClick: true,
                allowEscapeKey: true
            });
            return;
        }

        var tipoCuenta = $('#tipoCuentaFilter').val();
        var cuenta = $('#cuentaFilter').val();

        if ((tipoOperacion == 'subir' || tipoOperacion == 'subir_pdf') && (!tipoCuenta || !cuenta || !periodo)) {
            var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                </div>
                <div style="flex:1;">
                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Campos requeridos</p>
                    <p style="font-size:14px;color:#6b7280;margin:0;">Por favor, completa todos los campos requeridos.</p>
                </div>
            </div>`;
            Swal.fire({
                html: warningHtml,
                showConfirmButton: false,
                showCancelButton: false,
                allowOutsideClick: true,
                allowEscapeKey: true
            });
            return;
        }

        var formData = new FormData();
        formData.append('tipo_operacion', tipoOperacion);
        formData.append('tipo_cuenta', tipoCuenta);
        formData.append('cuenta', cuenta);
        formData.append('periodo', periodo);

        // Si el usuario aceptó forzar la subida previamente, anexar flag
        if (window.forceUploadNext) {
            formData.append('force_upload', '1');
            // resetear
            window.forceUploadNext = false;
        }

        var fileSize = 0; // Tamaño del archivo en bytes
        var fileType = ''; // Tipo de archivo (excel o pdf)
        var archivoReconsulta = null; // Archivo adjunto al actualizar movimientos

        // Agregar archivo si es subir
        if (tipoOperacion === 'subir') {
            var file = $('#excelConciliacion')[0].files[0];
            if (!file) {
                var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                    <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                    </div>
                    <div style="flex:1;">
                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Archivo EXCEL requerido</p>
                        <p style="font-size:14px;color:#6b7280;margin:0;">Por favor, selecciona un archivo EXCEL para continuar.</p>
                    </div>
                </div>`;
                Swal.fire({
                    html: warningHtml,
                    showConfirmButton: false,
                    showCancelButton: false,
                    allowOutsideClick: true,
                    allowEscapeKey: true
                });
                return;
            }
            formData.append('excelConciliacion', file);
            fileSize = file.size; // Obtener tamaño del archivo
            fileType = 'excel';
        }

        if (tipoOperacion === 'subir_pdf') {
            var pdfInput = $('#pdfConciliacion')[0];
            var pdfFile = pdfInput ? pdfInput.files[0] : null;
            if (!pdfFile) {
                var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                    <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                    </div>
                    <div style="flex:1;">
                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Archivo PDF requerido</p>
                        <p style="font-size:14px;color:#6b7280;margin:0;">Por favor, selecciona un archivo PDF para continuar.</p>
                    </div>
                </div>`;
                Swal.fire({
                    html: warningHtml,
                    showConfirmButton: false,
                    showCancelButton: false,
                    allowOutsideClick: true,
                    allowEscapeKey: true
                });
                return;
            }
            formData.append('pdfConciliacion', pdfFile);
            fileSize = pdfFile.size; // Obtener tamaño del archivo
            fileType = 'pdf';
        }

        // Agregar ID de conciliación si es reconsultar
        if (tipoOperacion === 'reconsultar') {
            var conciliacionId = $('#conciliacionId').val();
            if (!conciliacionId) {
                var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                    <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                    </div>
                    <div style="flex:1;">
                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Conciliación requerida</p>
                        <p style="font-size:14px;color:#6b7280;margin:0;">Por favor, selecciona una conciliación existente.</p>
                    </div>
                </div>`;
                Swal.fire({
                    html: warningHtml,
                    showConfirmButton: false,
                    showCancelButton: false,
                    allowOutsideClick: true,
                    allowEscapeKey: true
                });
                return;
            }
            formData.append('conciliacion_id', conciliacionId);
            // Si el usuario adjuntó un archivo para la conciliación consultada, anexarlo
            var inputReconsulta = $('#excelConciliacionReconsulta')[0];
            archivoReconsulta = inputReconsulta ? inputReconsulta.files[0] : null;
            if (archivoReconsulta) {
                var extension = (archivoReconsulta.name.split('.').pop() || '').toLowerCase();
                if (extension === 'pdf') {
                    formData.append('pdfConciliacion', archivoReconsulta);
                    fileType = 'pdf';
                } else if (['xlsx', 'xls'].indexOf(extension) !== -1) {
                    formData.append('excelConciliacion', archivoReconsulta);
                    fileType = 'excel';
                } else {
                    var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                        <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                        </div>
                        <div style="flex:1;">
                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Formato no soportado</p>
                            <p style="font-size:14px;color:#6b7280;margin:0;">Solo se permiten archivos Excel (.xlsx, .xls) o PDF.</p>
                        </div>
                    </div>`;
                    Swal.fire({
                        html: warningHtml,
                        showConfirmButton: false,
                        showCancelButton: false,
                        allowOutsideClick: true,
                        allowEscapeKey: true
                    });
                    return;
                }
                fileSize = archivoReconsulta.size; // Obtener tamaño del archivo
            }
        }

        // Determinar si se debe mostrar barra de progreso (solo para subida de archivos)
        var mostrarBarraProgreso = (tipoOperacion === 'subir' || tipoOperacion === 'subir_pdf' || (tipoOperacion === 'reconsultar' && archivoReconsulta));

        $.ajax({
            url: '{{ route("bancos-conciliacion.ejecutar") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                if (!silent) {
                    if (mostrarBarraProgreso) {
                        // Resetear el progreso
                        currentProgress = 0;
                        const fileLabel = fileType === 'pdf' ? 'PDF' : 'Excel';
                        const fileBadgeText = fileType === 'pdf' ? 'PDF' : 'XLS';
                        const readableSize = fileSize ? (fileSize >= 1024 * 1024 ? `${(fileSize / (1024 * 1024)).toFixed(2)} MB` : `${(fileSize / 1024).toFixed(1)} KB`) : '';
                        const metaInfoHtml = fileSize ? `<p style="margin:10px 0 0;font-size:12px;color:#0ea5e9;font-weight:600;">${fileLabel} · ${readableSize}</p>` : '';

                        Swal.fire({
                            html: `
                                    <div style="display:flex;align-items:flex-start;gap:18px;">
                                        <div style="position:relative;">
                                            <div style="width:64px;height:64px;border-radius:22px;background:linear-gradient(135deg,#1d4ed8,#2563eb);display:flex;align-items:center;justify-content:center;">
                                                <svg viewBox="0 0 50 50" style="width:32px;height:32px;">
                                                    <circle cx="25" cy="25" r="20" stroke="rgba(255,255,255,0.35)" stroke-width="5" fill="none"></circle>
                                                    <circle cx="25" cy="25" r="20" stroke="#ffffff" stroke-width="5" stroke-linecap="round" fill="none" stroke-dasharray="90 150" stroke-dashoffset="0">
                                                        <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="2s" repeatCount="indefinite" />
                                                    </circle>
                                                </svg>
                                            </div>
                                            <div style="position:absolute;bottom:-6px;right:-6px;background:#0ea5e9;border-radius:999px;padding:4px 10px;font-size:10px;font-weight:700;color:#ffffff;letter-spacing:0.08em;text-transform:uppercase;">
                                                ${fileBadgeText}
                                            </div>
                                        </div>
                                        <div style="flex:1;">
                                            <p style="margin:0;font-size:18px;color:#0f172a;font-weight:600;">Cargando tus movimientos bancarios</p>
                                            <p style="margin:6px 0 0;font-size:14px;color:#475569;">Procesando tu archivo. Por favor espera mientras se leen tus movimientos bancarios.</p>
                                            ${metaInfoHtml}
                                        </div>
                                    </div>
                                    <div style="margin-top:26px;">
                                        <div style="width:100%;height:12px;background:#e2e8f0;border-radius:999px;overflow:hidden;">
                                            <div id="progressBar" style="width:0%;height:12px;background:linear-gradient(90deg,#2563eb,#0ea5e9);transition:width 0.6s ease;border-radius:999px;"></div>
                                        </div>
                                        <div style="display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:#475569;font-weight:600;">
                                            <span id="progressText">0%</span>
                                            <span id="progressTime">Preparando subida...</span>
                                        </div>
                                    </div>
                        `,
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false,
                        });

                        // Iniciar el progreso automático con el tamaño y tipo del archivo
                        startProgressBar(fileSize, fileType);
                    } else {
                        // Modal simple sin barra de progreso para consultas
                        Swal.fire({
                            html: `
                                    <div style="display:flex;align-items:flex-start;gap:18px;">
                                        <div style="width:64px;height:64px;border-radius:22px;background:linear-gradient(135deg,#1d4ed8,#2563eb);display:flex;align-items:center;justify-content:center;">
                                            <svg viewBox="0 0 50 50" style="width:32px;height:32px;">
                                                <circle cx="25" cy="25" r="20" stroke="rgba(255,255,255,0.35)" stroke-width="5" fill="none"></circle>
                                                <circle cx="25" cy="25" r="20" stroke="#ffffff" stroke-width="5" stroke-linecap="round" fill="none" stroke-dasharray="90 150" stroke-dashoffset="0">
                                                    <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="2s" repeatCount="indefinite" />
                                                </circle>
                                            </svg>
                                        </div>
                                        <div style="flex:1;">
                                            <p style="margin:0;font-size:18px;color:#0f172a;font-weight:600;">Consultando conciliación bancaria</p>
                                            <p style="margin:6px 0 0;font-size:14px;color:#475569;">Estamos recuperando la conciliación seleccionada y preparando la información para mostrarla.</p>
                                            <p style="margin:10px 0 0;font-size:12px;color:#0ea5e9;font-weight:600;">Este proceso suele tardar menos de un minuto.</p>
                                        </div>
                                        
                                </div>
                            `,
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false,
                        });
                    }
                }
            },
            success: function(response) {

            $('#excelConciliacionReconsulta').val(''); // Limpiar el input de archivo de reconsulta después de la operación
            $('#excelConciliacion').val(''); // Limpiar el input de archivo de nueva subida después de la operación
            $('#pdfConciliacion').val(''); // Limpiar el input de archivo PDF después de la operación
            setTimeout(() => {
                    if (mostrarBarraProgreso) {
                        // Detener el intervalo de progreso
                        stopProgressBar();

                        // Completar al 100%
                        if (!silent) {
                            updateProgress(100);

                            // Esperar un momento para mostrar el 100% antes de cerrar
                            setTimeout(() => {
                                Swal.close();
                                if (response.success && response.data) {
                                    syncConciliacionCreadaDesdeRespuesta(response);
                                    pintarInformacionConciliacion(response.data);
                                }
                            }, 500);
                        } else {
                            if (response.success && response.data) {
                                syncConciliacionCreadaDesdeRespuesta(response);
                                pintarInformacionConciliacion(response.data);
                            }
                        }
                    } else {
                        // Para consultas, cerrar inmediatamente
                        Swal.close();
                        if (response.success && response.data) {
                            syncConciliacionCreadaDesdeRespuesta(response);
                            pintarInformacionConciliacion(response.data);
                        }
                    }
                }, 2000);
            },
            error: function(xhr) {
                // Detener el intervalo de progreso en caso de error
                if (mostrarBarraProgreso) {
                    stopProgressBar();
                }

                if (silent) {
                    // si es silent, no mostrar alertas; log para depuración
                    console.error('Error al ejecutar conciliación (silent):', xhr);
                    return;
                }

                // Cerrar el modal de progreso antes de mostrar el error
                Swal.close();

                // Caso: existe una conciliación previa -> permitir al usuario forzar la subida
                if ((xhr.status === 409 || (xhr.responseJSON && xhr.responseJSON.exists)) && xhr.responseJSON && xhr.responseJSON.message) {
                    // Construir HTML enriquecido con información de la conciliación existente
                    var existingId = xhr.responseJSON.existing_conciliacion_id || xhr.responseJSON.existingConciliacionId || null;
                    var createdAt = xhr.responseJSON.existing_conciliacion_created_at || xhr.responseJSON.existing_conciliacion_created_at || null;
                    var createdByName = xhr.responseJSON.existing_conciliacion_created_by_name || xhr.responseJSON.existing_conciliacion_created_by_name || null;
                    var movCount = xhr.responseJSON.existing_conciliacion_movimientos_count || xhr.responseJSON.existing_conciliacion_movimientos_count || null;

                    var infoHtml = `<p>${xhr.responseJSON.message || 'Ya existe una conciliación para esta cuenta en este periodo.'}</p>`;
                    infoHtml += '<div style="text-align:left;margin-top:8px;font-size:13px;">';
                    if (existingId) infoHtml += `<div><strong>ID conciliación:</strong> ${existingId}</div>`;
                    if (createdAt) infoHtml += `<div><strong>Creada:</strong> ${createdAt}</div>`;
                    if (createdByName) infoHtml += `<div><strong>Usuario:</strong> ${createdByName}</div>`;
                    if (movCount !== null) infoHtml += `<div><strong># Movimientos:</strong> ${movCount}</div>`;
                    infoHtml += '</div>';

                    var alertHtml = `
                            <div style="display:flex;gap:16px;align-items:flex-start;">
                                <div style="width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#f97316,#ea580c);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;">!
                                </div>
                                <div style="flex:1;">
                                    <p style="margin:0;font-size:18px;color:#0f172a;font-weight:600;">Ya existe una conciliación para este periodo</p>
                                    <p style="margin:6px 0 0;font-size:13px;color:#475569;">Revisa la información detectada o fuerza la subida si deseas generar otra conciliación.</p>
                                    <div style="margin-top:12px;padding:12px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;">
                                        ${infoHtml}
                                    </div>
                                    <div style="display:flex;gap:12px;margin-top:18px;">
                                        <button id="btnCancelarConciliacionExistente" style="flex:1;border:1px solid #cbd5f5;background:#fff;color:#1e40af;font-weight:600;border-radius:12px;padding:10px 14px;font-size:13px;">Cancelar</button>
                                        <button id="btnForzarConciliacionExistente" style="flex:1;border:none;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:600;border-radius:12px;padding:10px 14px;font-size:13px;">Subir de todos modos</button>
                                    </div>
                            </div>
                        </div>`;

                    Swal.fire({
                        html: alertHtml,
                        showConfirmButton: false,
                        showCancelButton: false,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            const cancelarBtn = document.getElementById('btnCancelarConciliacionExistente');
                            const forzarBtn = document.getElementById('btnForzarConciliacionExistente');
                            if (cancelarBtn) {
                                cancelarBtn.addEventListener('click', () => Swal.close());
                            }
                            if (forzarBtn) {
                                forzarBtn.addEventListener('click', () => {
                                    Swal.close();
                                    // Marcar para forzar la próxima subida y reintentar
                                    window.forceUploadNext = true;
                                    ejecutarConciliacionBancaria();
                                });
                            }
                        }
                    });
                    return;
                }

                let mensaje = xhr.responseJSON.message || 'Ocurrió un error de validación.';

                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.success === false) {
                    let errores = xhr.responseJSON.errors;
                    let listaErrores = '';
                    for (let campo in errores) {
                        if (errores.hasOwnProperty(campo)) {
                            errores[campo].forEach(function(error) {
                                listaErrores += `<li>${error}</li>`;
                            });
                        }
                    }
                    const warningHtml = `
                            <div style="display:flex;gap:16px;align-items:flex-start;">
                                <div style="width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#f97316,#ea580c);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;">!
                                </div>
                                <div style="flex:1;">
                                    <p style="margin:0;font-size:18px;color:#0f172a;font-weight:600;">Faltan datos requeridos</p>
                                    <p style="margin:4px 0 12px;font-size:13px;color:#475569;">${mensaje}</p>
                                    <ul style="margin:0;padding-left:20px;font-size:13px;color:#0f172a;list-style:disc;">
                                        ${listaErrores}
                                    </ul>
                                    <div style="text-align:right;margin-top:18px;">
                                        <button id="btnWarningAceptar" style="border:none;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:600;border-radius:12px;padding:10px 24px;font-size:13px;">Aceptar</button>
                                    </div>
                            </div>
                        </div>`;
                    Swal.fire({
                        html: warningHtml,
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            const btnAceptar = document.getElementById('btnWarningAceptar');
                            if (btnAceptar) {
                                btnAceptar.addEventListener('click', () => Swal.close());
                            }
                        }
                    });
                } else {
                    const errorHtml = `
                            <div style="display:flex;gap:16px;align-items:flex-start;">
                                <div style="width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#ef4444,#dc2626);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;">×
                                </div>
                                <div style="flex:1;">
                                    <p style="margin:0;font-size:18px;color:#0f172a;font-weight:600;">No pudimos completar la acción</p>
                                    <p style="margin:6px 0 12px;font-size:13px;color:#475569;">${mensaje}</p>
                                    <div style="text-align:right;">
                                        <button id="btnErrorAceptar" style="border:none;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:600;border-radius:12px;padding:10px 24px;font-size:13px;">Aceptar</button>
                                    </div>
                            </div>
                        </div>`;
                    Swal.fire({
                        html: errorHtml,
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            const btnAceptar = document.getElementById('btnErrorAceptar');
                            if (btnAceptar) {
                                btnAceptar.addEventListener('click', () => Swal.close());
                            }
                        }
                    });
                }
            }
        });
    }

    // Función para calcular el intervalo de tiempo basado en el tamaño y tipo de archivo
    function calcularIntervaloProgreso(fileSizeBytes, fileType) {
        // Convertir bytes a KB
        const fileSizeKB = fileSizeBytes / 1024;

        let tiempoTotal; // Tiempo total estimado en segundos

        if (fileType === 'excel') {
            // Archivos Excel (normalmente < 20 KB, muy ligeros)
            if (fileSizeKB < 10) {
                tiempoTotal = 20; // 20 segundos para archivos muy pequeños
            } else if (fileSizeKB < 30) {
                tiempoTotal = 30; // 30 segundos para archivos pequeños
            } else if (fileSizeKB < 50) {
                tiempoTotal = 40; // 40 segundos para archivos medianos
            } else {
                tiempoTotal = 50; // 50 segundos para archivos grandes (raramente)
            }
        } else if (fileType === 'pdf') {
            // Archivos PDF (desde 400 KB en adelante, más pesados)
            if (fileSizeKB < 300) {
                tiempoTotal = 120; // 120 segundos para PDFs pequeños (< 300 KB)
            } else if (fileSizeKB < 450) {
                tiempoTotal = 120; // 120 segundos para PDFs ligeros (300-450 KB)
            } else if (fileSizeKB < 600) {
                tiempoTotal = 240; // 75 segundos para PDFs normales (450-600 KB)
            } else if (fileSizeKB < 1024) {
                tiempoTotal = 240; // 90 segundos para PDFs medianos (600 KB - 1 MB)
            } else if (fileSizeKB < 2048) {
                tiempoTotal = 240; // 120 segundos para PDFs grandes (1-2 MB)
            } else if (fileSizeKB < 5120) {
                tiempoTotal = 240; // 150 segundos para PDFs muy grandes (2-5 MB)
            } else {
                tiempoTotal = 240; // 180 segundos para PDFs enormes (> 5 MB)
            }
        } else {
            // Valor por defecto si no se especifica el tipo
            tiempoTotal = 60;
        }

        const numPasos = 30;
        const intervalo = (tiempoTotal * 1000) / numPasos; // Convertir a milisegundos

        return intervalo;
    }

    // Función para iniciar la barra de progreso
    function startProgressBar(fileSizeBytes, fileType) {
        currentProgress = 0;
        updateProgress(0);

        // Calcular el intervalo basado en el tamaño y tipo del archivo
        const intervalo = calcularIntervaloProgreso(fileSizeBytes, fileType);

        // Mostrar información de debug (opcional, puedes comentar estas líneas en producción)
        const fileSizeKB = (fileSizeBytes / 1024).toFixed(2);
        console.log(`Tipo de archivo: ${fileType.toUpperCase()}`);
        console.log(`Tamaño del archivo: ${fileSizeKB} KB`);
        console.log(`Intervalo de progreso: ${intervalo} ms`);
        console.log(`Tiempo estimado total: ${(intervalo * 30 / 1000).toFixed(1)} minutos`);

        $('#progressTime').text(`Tiempo de carga estimado: ${((intervalo * 30 / 1000) / 60).toFixed(1)} minutos`);
        // Incrementar 5% en cada intervalo calculado
        progressInterval = setInterval(() => {
            if (currentProgress < 90) {
                currentProgress += 3;
                updateProgress(currentProgress);
            } else {
                // Detener cuando llegue a 90%
                clearInterval(progressInterval);
            }
        }, intervalo);
    }

    // Función para detener la barra de progreso
    function stopProgressBar() {
        if (progressInterval) {
            clearInterval(progressInterval);
            progressInterval = null;
        }
    }

    // Función para actualizar visualmente la barra de progreso
    function updateProgress(percent) {
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');

        if (progressBar && progressText) {
            progressBar.style.width = percent + '%';
            progressText.textContent = percent + '%';
        }
    }

    function pintarInformacionConciliacion(data) {
        movimientosOriginales = []; // Resetear para nueva conciliación
        cancelarEdicion(); // Limpiar formulario y mostrar inicial
        pintarTotalesMovimientos(data.totalesMovimientos, data.movimientos);
        pintarLeyendaUsoClick('show');
        pintarTablaMovimientos(data.movimientos);
    }

    function pintarLeyendaUsoClick(accion) {
        if (accion === 'show') {
            $('#leyendaUsoClick').show();
            return
        }
        $('#leyendaUsoClick').hide();
    }

    // Función para calcular los totales desde el arreglo de movimientos
    function calcularTotalesDesdeMovimientos(movimientos) {
        let cargos_importe = 0;
        let abonos_importe = 0;

        if (Array.isArray(movimientos)) {
            movimientos.forEach(function(mov) {
                cargos_importe += parseFloat(mov.cargos) || 0;
                abonos_importe += parseFloat(mov.abonos) || 0;
            });
        }

        // Calcular saldo final (saldo inicial + abonos - cargos)
        const saldoInicial = parseFloat($('#saldoInicial').text().replace('$', '').replace(/,/g, '')) || 0;
        const saldoFinal = saldoInicial + abonos_importe - cargos_importe;

        return {
            cargos_importe: cargos_importe,
            abonos_importe: abonos_importe,
            saldo_inicial: saldoInicial,
            saldo_final: saldoFinal
        };
    }

    function pintarTotalesMovimientos(totales, movimientos) {
        if (Array.isArray(movimientos) && movimientos.length > 0) {
            $('#totalesMovimientos').show();

            const totalMovimientos = movimientos.length;
            const totalConciliados = movimientos.filter(function(mov) {
                return mov.conciliado === true || mov.conciliado === 1;
            }).length;
            const totalPendientes = totalMovimientos - totalConciliados;

            $('#totalCantidadMovimientos').text(totalMovimientos);
            $('#totalPendientes').text(totalPendientes);
            $('#totalConciliados').text(totalConciliados);
            $('#totalCargosMovimientos').text('$' + totales.cargos_importe.toLocaleString('es-MX', {
                minimumFractionDigits: 2
            }));
            $('#totalAbonosMovimientos').text('$' + totales.abonos_importe.toLocaleString('es-MX', {
                minimumFractionDigits: 2
            }));
            $('#saldoFinal').text('$' + totales.saldo_final.toLocaleString('es-MX', {
                minimumFractionDigits: 2
            }));
            $('#saldoInicial').text('$' + totales.saldo_inicial.toLocaleString('es-MX', {
                minimumFractionDigits: 2
            }));
        }
    }

    // Variable global para almacenar los movimientos
    var idMovimientoBancario = '';
    var referenciaMovimientoBancario = '';
    var fechaMovimientoBancario = '';
    var tipoComprobante = '';
    let movimientosGlobales = [];
    let movimientosOriginales = []; // Movimientos sin filtrar
    let movimientoSeleccionado = null;
    let movimientosSeleccionados = [];

    function obtenerMovimientoPorId(movimientoId) {
        return movimientosGlobales.find(function(mov) {
            return parseInt(mov.id) === parseInt(movimientoId);
        }) || null;
    }

    function getTipoMovimientoDesdeFila(movimientoId) {
        const mov = obtenerMovimientoPorId(movimientoId);
        if (!mov) return null;
        return (parseFloat(mov.abonos) || 0) > 0 ? 'ingreso' : 'egreso';
    }

    function getEstadoConciliadoDesdeFila(movimientoId) {
        const mov = obtenerMovimientoPorId(movimientoId);
        if (!mov) return null;
        return mov.conciliado === true || mov.conciliado === 1;
    }

    function updateResumenSeleccion() {
        const totalSeleccionados = movimientosSeleccionados.length;
        $('#cantidadSeleccionMovimientos').text(totalSeleccionados);

        if (totalSeleccionados > 0) {
            $('#resumenSeleccionMovimientos').removeClass('hidden');
        } else {
            $('#resumenSeleccionMovimientos').addClass('hidden');
        }

        let textoBoton = 'Conciliar movimiento';
        if (totalSeleccionados > 0) {
            const primerEstadoConciliado = getEstadoConciliadoDesdeFila(movimientosSeleccionados[0]);
            if (primerEstadoConciliado) {
                textoBoton = totalSeleccionados > 1 ? `Actualizar ${totalSeleccionados} movimientos` : 'Actualizar movimiento';
            } else {
                textoBoton = totalSeleccionados > 1 ? `Conciliar ${totalSeleccionados} movimientos` : 'Conciliar movimiento';
            }
        }
        $('#btnGuardarMovimiento span').text(textoBoton);

        $('#tablaMovimientosBody tr').each(function() {
            const movimientoId = $(this).data('id');
            $(this).removeClass('movimiento-seleccionado');

            if (movimientosSeleccionados.includes(parseInt(movimientoId))) {
                $(this).addClass('movimiento-seleccionado');
            }
        });
    }

    function limpiarSeleccionMovimientos() {
        movimientosSeleccionados = [];
        updateResumenSeleccion();
        mostrarFormularioInicial();
    }

    function mostrarFormularioInicial() {
        $('#formularioLoader').addClass('hidden');
        $('#formularioMovimiento').addClass('hidden');
        $('#formularioInicial').removeClass('hidden');
        $('#movimientoBancarioId').val('');
        $('#movimientoConciliadoOriginal').val('0');
    }

    function seleccionarSoloMovimiento(movimientoId) {
        movimientoId = parseInt(movimientoId);
        movimientosSeleccionados = [movimientoId];
        updateResumenSeleccion();
        return true;
    }

    function toggleSeleccionMovimientoCtrl(movimientoId) {
        movimientoId = parseInt(movimientoId);
        const index = movimientosSeleccionados.indexOf(movimientoId);

        if (index !== -1) {
            movimientosSeleccionados.splice(index, 1);
            updateResumenSeleccion();
            return false;
        }

        if (movimientosSeleccionados.length > 0) {
            const primerEstadoConciliado = getEstadoConciliadoDesdeFila(movimientosSeleccionados[0]);
            const nuevoEstadoConciliado = getEstadoConciliadoDesdeFila(movimientoId);

            if (primerEstadoConciliado !== null && nuevoEstadoConciliado !== null && primerEstadoConciliado !== nuevoEstadoConciliado) {
                var warningEstadoHtml = `<div style="display:flex;gap:16px;text-align:left;">
                    <div style="width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#fed7aa,#fecaca);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(249,115,22,0.15);">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                    </div>
                    <div style="flex:1;">
                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 8px 0;">⚠️ Estado incompatible</p>
                        <p style="font-size:14px;color:#6b7280;margin:0 0 12px 0;">No puedes mezclar movimientos conciliados y pendientes en una misma edición/conciliación múltiple.</p>
                    </div>
                </div>`;
                Swal.fire({
                    html: warningEstadoHtml,
                    showConfirmButton: false,
                    allowOutsideClick: true,
                    allowEscapeKey: true,
                    didOpen: () => {
                        setTimeout(() => Swal.close(), 3000);
                    }
                });
                return false;
            }

            const primerTipo = getTipoMovimientoDesdeFila(movimientosSeleccionados[0]);
            const nuevoTipo = getTipoMovimientoDesdeFila(movimientoId);
            if (primerTipo && nuevoTipo && primerTipo !== nuevoTipo) {
                var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                    <div style="width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#fed7aa,#fecaca);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(249,115,22,0.15);">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                    </div>
                    <div style="flex:1;">
                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 8px 0;">⚠️ Tipos de movimientos incompatibles</p>
                        <p style="font-size:14px;color:#6b7280;margin:0 0 12px 0;">Para edición/conciliación múltiple, todos los movimientos deben ser del mismo tipo.</p>
                        <div style="padding:10px;background:#fef3c7;border-left:3px solid #f97316;border-radius:6px;margin:0;">
                            <p style="font-size:13px;color:#92400e;margin:0;font-weight:500;">💡 Consejo: Selecciona solo depósitos o solo retiros, no ambos.</p>
                        </div>
                    </div>
                </div>`;
                Swal.fire({
                    html: warningHtml,
                    showConfirmButton: false,
                    allowOutsideClick: true,
                    allowEscapeKey: true,
                    didOpen: () => {
                        setTimeout(() => Swal.close(), 4000);
                    }
                });
                return false;
            }
        }

        movimientosSeleccionados.push(movimientoId);
        updateResumenSeleccion();
        return true;
    }

    function pintarTablaMovimientos(movimientos, actualizarOriginales = true) {
        // Guardar movimientos globalmente
        movimientosGlobales = movimientos;
        // Solo actualizar originales si se solicita explícitamente (al cargar nueva conciliación)
        if (actualizarOriginales) {
            movimientosOriginales = JSON.parse(JSON.stringify(movimientos)); // Copia profunda para mantener originales
        }

        let tbody = $('#tablaMovimientosBody');
        tbody.empty();

        // Mapear primero por fecha de updated_at (sin hora) para evitar grupos repetidos
        const normalizarFechaGrupo = function(valorFecha) {
            if (!valorFecha) return null;
            const texto = String(valorFecha).trim();
            if (!texto) return null;
            if (texto.includes('T')) return texto.split('T')[0];
            if (texto.includes(' ')) return texto.split(' ')[0];
            return texto.substring(0, 10);
        };

        const formatearFechaGrupo = function(fechaGrupo) {
            if (!fechaGrupo) return 'Sin fecha';
            const partes = fechaGrupo.split('-');
            if (partes.length === 3) {
                const anio = parseInt(partes[0], 10);
                const mes = parseInt(partes[1], 10) - 1;
                const dia = parseInt(partes[2], 10);
                const fecha = new Date(anio, mes, dia);
                if (!isNaN(fecha.getTime())) {
                    return fecha.toLocaleDateString('es-MX', {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric'
                    });
                }
            }
            return fechaGrupo;
        };

        const gruposPorFecha = new Map();
        movimientos.forEach(function(movimiento, indexOriginal) {
            const fechaGrupo = normalizarFechaGrupo(movimiento.updated_at || movimiento.updated_date || null);
            if (!gruposPorFecha.has(fechaGrupo)) {
                gruposPorFecha.set(fechaGrupo, {
                    fecha: fechaGrupo,
                    primerIndice: indexOriginal,
                    movimientos: []
                });
            }
            gruposPorFecha.get(fechaGrupo).movimientos.push(movimiento);
        });

        const gruposOrdenados = Array.from(gruposPorFecha.values()).sort(function(a, b) {
            return a.primerIndice - b.primerIndice;
        });

        let indiceRender = 0;
        gruposOrdenados.forEach(function(grupo) {
            const separadorRow = `
                <tr class="grupo-separador bg-gray-100 border-t-2 border-gray-300 h-8 select-none" >
                    <td colspan="6" class="px-4 py-2 text-xs font-bold text-gray-700">
                        <i class="fas fa-layer-group mr-2 text-gray-500"></i>Movimientos cargados el: ${formatearFechaGrupo(grupo.fecha)}
                    </td>
                </tr>
            `;
            tbody.append(separadorRow);

            grupo.movimientos.forEach(function(movimiento) {
                // Determinar clases CSS según el estado de conciliación
                let rowClasses = "border-b border-gray-100 transition-all duration-200 ";
                let cursorClass = "cursor-pointer";
                const isSeleccionado = movimientosSeleccionados.includes(parseInt(movimiento.id));

                if (movimiento.conciliado) {
                    rowClasses += " bg-green-50 movimiento-conciliado";
                    rowClasses += " hover:bg-green-100";
                    if (isSeleccionado) {
                        rowClasses += " movimiento-seleccionado";
                    }
                } else {
                    rowClasses += " hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 hover:shadow-sm bg-white";
                    if (isSeleccionado) {
                        rowClasses += " movimiento-seleccionado";
                    }
                }

                let accionBtn = movimiento.conciliado ?
                    '<i class="fas fa-check text-green-600 text-lg mr-2" title="Conciliado"></i>' :
                    `<div class="flex justify-end gap-2">
                        <button onclick="marcarComoConciliado(${movimiento.id})" class="btn-marcar px-2.5 py-1 border border-blue-500 bg-white text-blue-600 hover:bg-blue-50 hover:border-blue-600 text-xs rounded flex items-center gap-1 justify-center transition-colors duration-200" title="Marcar registro como conciliado">
                            <i class="fas fa-check-circle text-blue-600 text-[13px]"></i>
                        </button>
                        <button onclick="eliminarMovimiento(${movimiento.id})" class="btn-eliminar px-2.5 py-1 border border-red-500 bg-white text-red-600 hover:bg-red-50 hover:border-red-600 text-xs rounded flex items-center gap-1 justify-center transition-colors duration-200" title="Eliminar registro">
                            <i class="fas fa-trash-alt text-red-600 text-[13px]"></i>
                        </button>
                    </div>`;

                let monto = movimiento.abonos > 0 ? movimiento.abonos : movimiento.cargos;
                let tipoMovimiento = movimiento.abonos > 0 ? 'Depósito' : 'Retiro';
                let colorMonto = movimiento.abonos > 0 ? 'text-green-600' : 'text-red-600';

                let row = `
                    <tr data-index="${indiceRender}" data-id="${movimiento.id}" data-referencia="${movimiento.referencia}" data-fecha="${movimiento.fecha_movimiento}" data-tipo-comprobante="${movimiento.tipoComprobante}" data-conciliado="${movimiento.conciliado}" class="${rowClasses} ${cursorClass}" style="cursor: pointer;">
                        <td class="px-4 py-3 text-[11px] text-gray-900">${movimiento.fecha_operacion || '-'}</td>
                        <td class="px-4 py-3 text-[11px] text-gray-900" title="${movimiento.descripcion}">${(() => { let d = movimiento.descripcion || '-'; return (d && d.length > 35) ? d.substring(0, 35) + '...' : d; })()}</td>
                        <td class="px-4 py-3 text-[11px] text-gray-900">${movimiento.referencia || '-'}</td>
                        <td class="px-4 py-3 text-[11px] font-medium"><span class="inline-block px-2 py-1 rounded-full text-xs font-semibold ${movimiento.abonos > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">${tipoMovimiento}</span></td>
                        <td class="px-4 py-3 text-right text-[11px] font-medium ${colorMonto}">${monto ? '$' + parseFloat(monto).toLocaleString('es-MX', {minimumFractionDigits: 2}) : '-'}</td>
                        <td class="px-4 py-3 text-right text-[11px] font-medium">${accionBtn}</td>
                    </tr>
                `;
                tbody.append(row);
                indiceRender++;
            });
        });

        $('#tablaMovimientosBody').off('click', 'tr').on('click', 'tr', function(e) {
            if ($(this).hasClass('grupo-separador')) {
                return;
            }

            if ($(e.target).closest('.btn-marcar').length > 0 || $(e.target).closest('.btn-eliminar').length > 0) {
                return;
            }

            const movimientoId = parseInt($(this).data('id'));
            if (!Number.isInteger(movimientoId) || movimientoId <= 0) {
                return;
            }
            const conciliado = $(this).data('conciliado');
            const isCtrlClick = e.ctrlKey === true || e.metaKey === true;

            if (!isCtrlClick) {
                seleccionarSoloMovimiento(movimientoId);
                seleccionarMovimiento(movimientoId);
                return;
            }

            const quedoSeleccionado = toggleSeleccionMovimientoCtrl(movimientoId);

            if (!quedoSeleccionado) {
                if (movimientosSeleccionados.length === 0) {
                    mostrarFormularioInicial();
                    return;
                }

                const movimientoRespaldoId = movimientosSeleccionados[movimientosSeleccionados.length - 1];
                seleccionarMovimiento(movimientoRespaldoId);
                return;
            }

            seleccionarMovimiento(movimientoId);
        });

        // Limpiar seleccionados que ya no estén visibles en la tabla actual
        const idsVisibles = movimientos.map(function(m) {
            return parseInt(m.id);
        });
        movimientosSeleccionados = movimientosSeleccionados.filter(function(id) {
            return idsVisibles.includes(parseInt(id));
        });
        updateResumenSeleccion();
    }

    function seleccionarMovimiento(movimientoId) {
        // Mostrar loader y forzar una espera mínima de 2s para sensación de cambio
        $('#formularioInicial').addClass('hidden');
        $('#formularioMovimiento').addClass('hidden');
        $('#formularioLoader').removeClass('hidden');
        const loaderStart = Date.now();

        // Obtener datos del movimiento
        $.ajax({
            url: '{{ route("bancos-conciliacion.obtenerMovimiento") }}',
            type: 'GET',
            data: {
                movimiento_id: movimientoId
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                const elapsed = Date.now() - loaderStart;
                const wait = Math.max(0, 1000 - elapsed);
                setTimeout(function() {
                    $('#formularioLoader').addClass('hidden');
                    if (response.success && response.data) {
                        llenarFormulario(response.data);
                    } else {
                        // Si no vino data, mostrar el estado inicial
                        $('#formularioInicial').removeClass('hidden');
                    }
                }, wait);
            },
            error: function(xhr) {
                const elapsed = Date.now() - loaderStart;
                const wait = Math.max(0, 1000 - elapsed);
                setTimeout(function() {
                    $('#formularioLoader').addClass('hidden');
                    var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                        <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
                        </div>
                        <div style="flex:1;">
                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                            <p style="font-size:14px;color:#6b7280;margin:0;">Error al obtener los datos del movimiento.</p>
                        </div>
                    </div>`;
                    Swal.fire({
                        html: errorHtml,
                        showConfirmButton: false,
                        showCancelButton: false,
                        allowOutsideClick: true,
                        allowEscapeKey: true,
                        timer: 3000
                    });
                    $('#formularioInicial').removeClass('hidden');
                }, wait);
            }
        });
    }

    function llenarFormulario(movimiento) {
        $('#movimientoBancarioId').val(movimiento.id);
        $('#movimientoConciliadoOriginal').val(movimiento.conciliado ? '1' : '0');
        $('#fecha').val(movimiento.fecha_operacion || movimiento.fecha);
        $('#folio').val(movimiento.referencia || '');
        $('#notas').val(movimiento.descripcion || '');

        if (movimiento.cuenta_id) {
            $('#cuenta').val(movimiento.cuenta_id);
        } else if (movimiento.cuenta) {
            $('#cuenta').val(movimiento.cuenta);
        }

        let tipoMov = movimiento.abonos > 0 ? 'ingreso' : 'egreso';
        $('#tipoMovimiento').val(tipoMov);
        if ($('#tipoMovimientoSelect').length) {
            $('#tipoMovimientoSelect').val(tipoMov).trigger('change');
        }

        // Calcular monto
        let monto = movimiento.abonos > 0 ? movimiento.abonos : movimiento.cargos;
        $('#monto').val(monto || 0);

        toggleCamposTipoMovimiento(tipoMov);
        limpiarCamposDinamicos();
        llenarCamposTipoMovimiento(tipoMov, movimiento);
        if (typeof showCamposPorTipo === 'function') {
            showCamposPorTipo(tipoMov);
        }

        // Mostrar formulario
        $('#formularioInicial').addClass('hidden');
        $('#formularioMovimiento').removeClass('hidden');
        if (movimiento.conciliado) {
            setFormReadOnly(true);
            $('#btnEditarMovimiento').show();
            $('#btnGuardarMovimiento').hide();
        } else {
            setFormReadOnly(false);
            $('#btnEditarMovimiento').hide();
            $('#btnGuardarMovimiento').show();
        }


    }

    function toggleCamposTipoMovimiento(tipoMov) {
        if (tipoMov === 'ingreso') {
            $('#campoBeneficiario').removeClass('hidden');
            $('#campoProveedor').addClass('hidden');
            $('#campoCategoria').removeClass('hidden');
            $('#beneficiario').prop('required', true);
            $('#proveedor').prop('required', false);
            $('#categoria').prop('required', true);
        } else {
            $('#campoBeneficiario').addClass('hidden');
            $('#campoProveedor').removeClass('hidden');
            $('#campoCategoria').removeClass('hidden');
            $('#beneficiario').prop('required', false);
            $('#proveedor').prop('required', true);
            $('#categoria').prop('required', true);
        }
    }

    function llenarCamposTipoMovimiento(tipoMov, movimiento) {
        $('#forma_pago').val(movimiento.formaPago || '').trigger('change');
        $('#categoria').val(movimiento.categoria || '').trigger('change');
        if (tipoMov === 'ingreso') {
            $('#beneficiario').val(movimiento.beneficiario || '').trigger('change');
        } else {
            $('#proveedor').val(movimiento.proveedor || '').trigger('change');
        }

        llenarCamposDinamicosMovimiento(movimiento.camposExcelValores || []);

        // Cargar referencia del PDF si existe
        if (movimiento.comprobantePdf) {
            // Mostrar indicador de que existe archivo
            const pdfUrl = '{{ asset("") }}' + movimiento.comprobantePdf;

            // Mostrar el nombre del archivo existente
            $('#comprobantePDFExistente').remove(); // Limpiar si existe
            const existingFileHtml = `
                <div id="comprobantePDFExistente" class="mt-2 p-2 bg-green-50 border border-green-200 rounded">
                    <small class="text-green-700">
                        <i class="fas fa-check-circle text-green-600 mr-1"></i>
                       <a href="${pdfUrl}" target="_blank" class="text-green-600 hover:text-green-800 font-semibold underline">Ver comprobante</a>
                    </small>
                </div>
            `;
            $('#comprobantePDF').after(existingFileHtml);
        } else {
            $('#comprobantePDFExistente').remove();
        }
    }

    // Limpia los valores de los campos dinámicos antes de pintar un nuevo movimiento
    function limpiarCamposDinamicos() {
        $('.campo-excel-dinamico').each(function() {
            const $campo = $(this);
            if ($campo.attr('type') === 'number') {
                $campo.val('');
                return;
            }
            if ($campo.attr('type') === 'date') {
                $campo.val('');
                return;
            }
            $campo.val('');
        });
    }

    function llenarCamposDinamicosMovimiento(camposExcel) {
        camposExcel.forEach(function(campo) {
            const campoId = campo.id_campo || campo.campo_id;
            const valorCampo = campo.valor;

            let $input = $(`[data-campo-id="${campoId}"]`);
            if ($input.length) {
                $input.val(valorCampo);
            }
        });
    }

    // Mostrar u ocultar campos dinámicos según el tipo de movimiento (ingreso/egreso)
    function showCamposPorTipo(tipoMov) {
        // Cada wrapper de campo tiene attribute data-tipo-movimiento ('' => aplica para ambos)
        $('.campos-adicionales-section [data-tipo-movimiento]').each(function() {
            const tipo = $(this).data('tipo-movimiento') || '';
            if (!tipo || tipo === '' || tipo === null) {
                // Campo válido para ambos; mostrar
                $(this).show();
            } else if (tipo === tipoMov) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }

    if ($('#tipoMovimientoSelect').length) {
        $('#tipoMovimientoSelect').on('change', function() {
            toggleCamposTipoMovimiento($(this).val());
            $('#tipoMovimiento').val($(this).val());
        });
    }

    function guardarMovimiento() {
        const wasConciliado = $('#movimientoConciliadoOriginal').val() === '1';
        const idsSeleccionados = movimientosSeleccionados.map(function(id) {
            return parseInt(id);
        });

        if (idsSeleccionados.length === 0 && !$('#movimientoBancarioId').val()) {
            var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                </div>
                <div style="flex:1;">
                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Sin selección</p>
                    <p style="font-size:14px;color:#6b7280;margin:0;">Selecciona al menos un movimiento pendiente para conciliar.</p>
                </div>
            </div>`;
            Swal.fire({
                html: warningHtml,
                showConfirmButton: false,
                allowOutsideClick: true,
                allowEscapeKey: true,
                didOpen: () => {
                    setTimeout(() => Swal.close(), 3000);
                }
            });
            return;
        }

        const movimientoIdsParaGuardar = ((idsSeleccionados.length > 0) ? idsSeleccionados : [parseInt($('#movimientoBancarioId').val())])
            .filter(function(id) {
                return Number.isInteger(id) && id > 0;
            });

        if (movimientoIdsParaGuardar.length === 0) {
            return;
        }

        // Validar que el PDF esté seleccionado
        const pdfFile = $('#comprobantePDF')[0]?.files[0];
        if (pdfFile) {
            //     Swal.fire({
            //         icon: 'warning',
            //         title: 'Comprobante requerido',
            //         text: 'Por favor selecciona un archivo PDF como comprobante.'
            //     });
            //     return;

            // Validar tamaño máximo (5 MB)
            const maxSize = 5 * 1024 * 1024; // 5 MB en bytes
            if (pdfFile.size > maxSize) {
                var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                    <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                    </div>
                    <div style="flex:1;">
                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Archivo muy grande</p>
                        <p style="font-size:14px;color:#6b7280;margin:0;">El archivo PDF no debe superar los 5 MB.</p>
                    </div>
                </div>`;
                Swal.fire({
                    html: warningHtml,
                    showConfirmButton: false,
                    allowOutsideClick: true,
                    allowEscapeKey: true,
                    didOpen: () => {
                        setTimeout(() => Swal.close(), 3000);
                    }
                });
                return;
            }
        }

        // Usar FormData para enviar archivo
        const formData = new FormData();
        formData.append('movimiento_bancario_id', movimientoIdsParaGuardar[0] || '');
        formData.append('movimiento_bancario_ids', JSON.stringify(movimientoIdsParaGuardar));
        formData.append('tipo_movimiento', $('#tipoMovimiento').val());
        formData.append('monto', $('#monto').val());
        formData.append('forma_pago', $('#forma_pago').val());
        formData.append('fecha', $('#fecha').val());
        formData.append('folio', $('#folio').val());
        formData.append('notas', $('#notas').val());
        formData.append('categoria', $('#categoria').val());
        formData.append('comprobante_pdf', pdfFile);

        if (formData.get('tipo_movimiento') === 'ingreso') {
            formData.append('beneficiario', $('#beneficiario').val());
        } else {
            formData.append('proveedor', $('#proveedor').val());
        }

        // Recolectar campos dinámicos (campos_excel)
        const camposDinamicos = [];
        $('.campo-excel-dinamico').each(function() {
            const $campo = $(this);
            const campoId = $campo.data('campo-id');
            const nombreCampo = $campo.attr('name');
            let valor = '';

            if ($campo.attr('type') === 'checkbox') {
                valor = $campo.is(':checked') ? 1 : 0;
            } else if ($campo.attr('type') === 'radio') {
                const seleccionado = $(`input[name="${nombreCampo}"]:checked`);
                valor = seleccionado.length ? seleccionado.val() : '';
            } else if ($campo.attr('type') === 'color') {
                const textoColor = $(`#${$campo.attr('id')}_text`).val();
                valor = textoColor ? textoColor : $campo.val();
            } else {
                valor = $campo.val();
            }

            camposDinamicos.push({
                campo_id: campoId,
                nombre: nombreCampo,
                valor: valor
            });
        });

        formData.append('campos_excel', JSON.stringify(camposDinamicos));

        // Definir URL según operación
        const url = wasConciliado ? '{{ route("bancos-conciliacion.actualizarConciliacionMovimiento") }}' : '{{ route("bancos-conciliacion.guardarMovimiento") }}';
        const titulo = wasConciliado ? 'Actualizando...' : 'Conciliando...';
        const texto = wasConciliado ?
            (movimientoIdsParaGuardar.length > 1 ? 'Por favor espera mientras se actualizan los movimientos seleccionados.' : 'Por favor espera mientras se actualiza el movimiento.') :
            (movimientoIdsParaGuardar.length > 1 ? 'Por favor espera mientras se guardan los movimientos seleccionados.' : 'Por favor espera mientras se guarda la información del movimiento.');

        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                var processingHtml = `<div style="display:flex;gap:16px;text-align:left;align-items:center;">
                    <div style="width:54px;height:54px;border-radius:50%;background:#dbeafe;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <svg width="28" height="28" viewBox="0 0 50 50" style="animation:spin 2s linear infinite;"><circle cx="25" cy="25" r="20" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="90 150"></circle></svg>
                        </div>
                    <div style="flex:1;">
                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">${titulo}</p>
                        <p style="font-size:14px;color:#6b7280;margin:0;">${texto}</p>
                    </div>
                </div>`;
                Swal.fire({
                    html: processingHtml,
                    showConfirmButton: false,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        // Añadir animación de spinner
                        const svg = Swal.getHtmlContainer().querySelector('svg');
                        if (svg) {
                            svg.style.animation = 'spin 2s linear infinite';
                            const style = document.createElement('style');
                            style.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
                            document.head.appendChild(style);
                        }
                    }
                });
            },
            success: function(response) {

                setTimeout(() => {
                    Swal.close();

                    if (!response.success) {
                        var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                            <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
                            </div>
                            <div style="flex:1;">
                                <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                                <p style="font-size:14px;color:#6b7280;margin:0;">${response.message || 'Ocurrió un error.'}</p>
                            </div>
                        </div>`;
                        Swal.fire({
                            html: errorHtml,
                            showConfirmButton: false,
                            allowOutsideClick: true,
                            allowEscapeKey: true,
                            didOpen: () => {
                                setTimeout(() => Swal.close(), 3000);
                            }
                        });
                        return;
                    }

                    // Si el servidor devuelve el movimiento actualizado, usarlo; si no, construir mínima info
                    const movimientoResp = response.data || {};
                    const movimientoId = formData.get('movimiento_bancario_id');
                    const movimientoIdsRespuesta = (response.movimiento_ids || movimientoResp.movimiento_ids || movimientoIdsParaGuardar || []).map(function(id) {
                        return parseInt(id);
                    });
                    const movimientoObjetivoId = wasConciliado ?
                        parseInt(movimientoIdsRespuesta[movimientoIdsRespuesta.length - 1] || response.id || movimientoId) :
                        parseInt(movimientoIdsRespuesta[movimientoIdsRespuesta.length - 1] || movimientoId);

                    if (wasConciliado) {
                        // Actualización: reemplazar/merge en arrays con la info devuelta (si existe)
                        if (Object.keys(movimientoResp).length) {
                            const indexGlobal = movimientosGlobales.findIndex(m => m.id == movimientoResp.id);
                            const indexOriginal = movimientosOriginales.findIndex(m => m.id == movimientoResp.id);

                            if (indexGlobal !== -1) {
                                movimientosGlobales[indexGlobal] = Object.assign({}, movimientosGlobales[indexGlobal], movimientoResp);
                            }
                            if (indexOriginal !== -1) {
                                movimientosOriginales[indexOriginal] = Object.assign({}, movimientosOriginales[indexOriginal], movimientoResp);
                            }
                        }

                        movimientosSeleccionados = Number.isInteger(movimientoObjetivoId) && movimientoObjetivoId > 0 ? [movimientoObjetivoId] : [];
                        updateResumenSeleccion();


                    } else {
                        // Guardado en lote: marcar movimientos como conciliados en arrays (si existen)
                        movimientoIdsRespuesta.forEach(function(idMov) {
                            const indexGlobal = movimientosGlobales.findIndex(m => m.id == idMov);
                            const indexOriginal = movimientosOriginales.findIndex(m => m.id == idMov);

                            if (indexGlobal !== -1) movimientosGlobales[indexGlobal].conciliado = true;
                            if (indexOriginal !== -1) movimientosOriginales[indexOriginal].conciliado = true;
                        });

                        movimientosSeleccionados = Number.isInteger(movimientoObjetivoId) && movimientoObjetivoId > 0 ? [movimientoObjetivoId] : [];
                        updateResumenSeleccion();

                    }

                    // Volver a pintar y limpiar formulario
                    pintarTablaMovimientos(movimientosGlobales, false);

                    // Calcular y actualizar los totales
                    const totalesActualizados = calcularTotalesDesdeMovimientos(movimientosGlobales);
                    pintarTotalesMovimientos(totalesActualizados, movimientosGlobales);

                    var successHtml = `<div style="display:flex;gap:16px;text-align:left;">
                        <div style="width:54px;height:54px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                        </div>
                        <div style="flex:1;">
                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">${wasConciliado ? 'Movimiento actualizado' : (movimientoIdsRespuesta.length > 1 ? 'Movimientos guardados' : 'Movimiento guardado')}</p>
                            <p style="font-size:14px;color:#6b7280;margin:0;">${wasConciliado ? 'El movimiento se ha actualizado correctamente.' : (movimientoIdsRespuesta.length > 1 ? 'Los movimientos seleccionados se guardaron correctamente.' : 'El movimiento se ha guardado correctamente.')}</p>
                        </div>
                    </div>`;

                    Swal.fire({
                        html: successHtml,
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        didOpen: () => {
                            setTimeout(() => {
                                Swal.close();
                                if (Number.isInteger(movimientoObjetivoId) && movimientoObjetivoId > 0) {
                                    seleccionarMovimiento(movimientoObjetivoId);
                                }
                            }, 2000);
                        }
                    });
                }, 1000);

                //cancelarEdicion();
            },
            error: function(xhr) {
                Swal.close();
                let mensaje = wasConciliado ? 'Error al actualizar el movimiento.' : 'Error al guardar el movimiento.';
                let detalles = '';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    mensaje = xhr.responseJSON.message;
                    detalles = xhr.responseJSON.errors ? JSON.stringify(xhr.responseJSON.errors) : '';
                }
                var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                    <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
                    </div>
                    <div style="flex:1;">
                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">${mensaje}</p>
                        ${detalles ? `<p style="font-size:14px;color:#6b7280;margin:0;">${detalles}</p>` : '<p style="font-size:14px;color:#6b7280;margin:0;">Por favor intenta de nuevo o contacta al administrador.</p>'}
                    </div>
                </div>`;
                Swal.fire({
                    html: errorHtml,
                    showConfirmButton: false,
                    allowOutsideClick: true,
                    allowEscapeKey: true,
                    didOpen: () => {
                        setTimeout(() => Swal.close(), 4000);
                    }
                });
            }
        });
    }

    function setFormReadOnly(readOnly) {
        // Ocultar/mostrar y habilitar/deshabilitar campos dentro del formulario
        // No tocar campos ocultos como movimientoBancarioId, tipoMovimiento, monto, fecha, folio
        $('#formMovimientoEdit').find('select, input, textarea').each(function() {
            const id = $(this).attr('id');
            if (id === 'movimientoBancarioId' || id === 'tipoMovimiento' || id === 'monto' || id === 'fecha' || id === 'folio' || id === 'excelConciliacionReconsulta') return;
            if ($(this).attr('type') === 'hidden') return;
            if (readOnly) {
                $(this).prop('disabled', true);
                // para textarea usar readonly además de disabled para mantener estilo
                if ($(this).is('textarea')) $(this).prop('readonly', true);
            } else {
                $(this).prop('disabled', false);
                if ($(this).is('textarea')) $(this).prop('readonly', false);
            }
        });

        // Campos dinamicos (si existen)
        $('.campo-excel-dinamico').each(function() {
            if (readOnly) $(this).prop('disabled', true);
            else $(this).prop('disabled', false);
        });
    }

    function habilitarEdicionMovimiento() {
        // Habilitar edición de formulario y mostrar botón Guardar
        setFormReadOnly(false);
        $('#btnEditarMovimiento').hide();
        $('#btnGuardarMovimiento').show();

        if (movimientosSeleccionados.length > 1) {
            return;
        }

        // Si el movimiento venía conciliado, transformar el botón "Cancelar" en una acción de "Desconciliar"
        try {
            if ($('#movimientoConciliadoOriginal').val() === '1') {
                const $btn = $('#btnCancelarMovimiento');
                if ($btn.length) {
                    // remover onclick inline para prevenir doble ejecución
                    $btn.removeAttr('onclick');
                    // cambiar contenido y estilo para indicar acción destructiva
                    $btn.html('<i class="fas fa-unlink text-sm text-red-500"></i><span>Desconciliar</span>');
                    $btn.attr('class', 'flex-1 flex items-center justify-center gap-2 bg-white border border-red-300 hover:bg-red-50 text-red-700 px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-red-200');
                    $btn.off('click').on('click', function() {
                        desconciliarMovimiento();
                    });
                }
            }
        } catch (e) {
            console.error('Error al configurar botón desconciliar:', e);
        }
    }

    function cancelarEdicion() {
        $('#formularioMovimiento').addClass('hidden');
        $('#formularioInicial').removeClass('hidden');
        $('#formMovimientoEdit')[0].reset();
        limpiarSeleccionMovimientos();

        // Restaurar el botón cancelar a su estado original si fue modificado
        try {
            const $btn = $('#btnCancelarMovimiento');
            if ($btn.length && window.btnCancelarOriginalHtml) {
                $btn.html(window.btnCancelarOriginalHtml);
                if (window.btnCancelarOriginalClass) $btn.attr('class', window.btnCancelarOriginalClass);
                if (window.btnCancelarOriginalOnclick) $btn.attr('onclick', window.btnCancelarOriginalOnclick);
                $btn.off('click');
            }
        } catch (e) {
            console.error('Error al restaurar botón cancelar:', e);
        }

        updateResumenSeleccion();
    }

    // Funciones para el modal de filtros
    function abrirModalAgregarMovimiento() {
        // Obtener el ID de la conciliación actual
        let conciliacionId = $('#conciliacionId').val();
        if (!conciliacionId) {
            var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                </div>
                <div style="flex:1;">
                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Conciliación requerida</p>
                    <p style="font-size:14px;color:#6b7280;margin:0;">Selecciona una conciliación antes de agregar movimientos.</p>
                </div>
            </div>`;
            Swal.fire({
                html: warningHtml,
                showConfirmButton: false,
                showCancelButton: false,
                allowOutsideClick: true,
                allowEscapeKey: true
            });
            return;
        }
        $('#modalConciliacionId').val(conciliacionId);
        $('#formAgregarMovimiento')[0].reset();
        $('#modalAgregarMovimiento').modal('show');
    }

    function guardarNuevoMovimiento(event) {
        event.preventDefault();
        // Enviar solo los campos requeridos: fecha_operacion, descripcion, referencia, cargos, abonos
        let cargosVal = parseFloat($('#input_cargos').val()) || 0;
        let abonosVal = parseFloat($('#input_abonos').val()) || 0;

        // Validación cliente: no permitir ambos > 0 y al menos uno debe ser > 0
        if (cargosVal > 0 && abonosVal > 0) {
            var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                </div>
                <div style="flex:1;">
                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Valores inválidos</p>
                    <p style="font-size:14px;color:#6b7280;margin:0;">No puede haber cargos y abonos simultáneamente. Indica solo uno.</p>
                </div>
            </div>`;
            Swal.fire({
                html: warningHtml,
                showConfirmButton: false,
                showCancelButton: false,
                allowOutsideClick: true,
                allowEscapeKey: true
            });
            return;
        }

        if (cargosVal <= 0 && abonosVal <= 0) {
            var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                </div>
                <div style="flex:1;">
                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Valores requeridos</p>
                    <p style="font-size:14px;color:#6b7280;margin:0;">Debes indicar un cargo o un abono mayor a 0.</p>
                </div>
            </div>`;
            Swal.fire({
                html: warningHtml,
                showConfirmButton: false,
                showCancelButton: false,
                allowOutsideClick: true,
                allowEscapeKey: true
            });
            return;
        }

        let data = {
            conciliacion_bancaria_id: $('#modalConciliacionId').val(),
            fecha_operacion: $('#input_fecha_operacion').val(),
            descripcion: $('#input_descripcion').val(),
            referencia: $('#input_referencia').val(),
            cargos: cargosVal,
            abonos: abonosVal
        };

        $.ajax({
            url: '{{ route("bancos-conciliacion.agregarMovimientoManual") }}',
            type: 'POST',
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                var processingHtml = `<div style="display:flex;gap:16px;text-align:left;">
                    <div style="width:54px;height:54px;border-radius:50%;background:#dbeafe;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <svg width="28" height="28" viewBox="0 0 50 50" style="animation:spin 2s linear infinite;"><circle cx="25" cy="25" r="20" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="90 150"></circle></svg>
                    </div>
                    <div style="flex:1;">
                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Guardando...</p>
                        <p style="font-size:14px;color:#6b7280;margin:0;">Por favor espera mientras se guarda la información del movimiento.</p>
                    </div>
                </div>
                <style>@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style>`;
                Swal.fire({
                    html: processingHtml,
                    showConfirmButton: false,
                    allowOutsideClick: false,
                    allowEscapeKey: false
                });
            },
            success: function(response) {
                setTimeout(() => {
                    Swal.close();
                    if (response.success) {
                        $('#modalAgregarMovimiento').modal('hide');
                        var successHtml = `<div style="display:flex;gap:16px;text-align:left;">
                            <div style="width:54px;height:54px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            </div>
                            <div style="flex:1;">
                                <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Movimiento agregado</p>
                                <p style="font-size:14px;color:#6b7280;margin:0;">${response.message || 'El movimiento se agregó correctamente.'}</p>
                            </div>
                        </div>`;
                        Swal.fire({
                            html: successHtml,
                            showConfirmButton: false,
                            timer: 2000,
                            allowOutsideClick: false,
                            allowEscapeKey: false
                        });
                        // Reconsultar conciliación para mostrar el nuevo registro (silencioso: sin alertas)
                        $('#tipoOperacion').val('reconsultar').trigger('change');
                        $('#conciliacionId').val($('#modalConciliacionId').val()).trigger('change');
                        ejecutarConciliacionBancaria(true);
                    } else {
                        var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                            <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                            </div>
                            <div style="flex:1;">
                                <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                                <p style="font-size:14px;color:#6b7280;margin:0;">${response.message || 'No se pudo agregar el movimiento.'}</p>
                            </div>
                        </div>`;
                        Swal.fire({
                            html: errorHtml,
                            showConfirmButton: false,
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            didOpen: () => {
                                setTimeout(() => Swal.close(), 3000);
                            }
                        });
                    }
                }, 1000);
            },
            error: function(xhr) {
                setTimeout(() => {
                    Swal.close();
                    let mensaje = 'Error al guardar el movimiento.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        mensaje = xhr.responseJSON.message;
                    }
                    var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                        <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                        </div>
                        <div style="flex:1;">
                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                            <p style="font-size:14px;color:#6b7280;margin:0;">${mensaje}</p>
                        </div>
                    </div>`;
                    Swal.fire({
                        html: errorHtml,
                        showConfirmButton: false,
                        allowOutsideClick: true,
                        allowEscapeKey: true,
                        didOpen: () => {
                            setTimeout(() => Swal.close(), 3000);
                        }
                    });
                }, 1000);
            }
        });
    }

    function abrirModalFiltros() {
        $('#modalFiltros').modal('show');
    }

    function aplicarFiltros(event) {
        event.preventDefault();

        const filtros = {
            estado: $('#filtroEstado').val(),
            fecha_desde: $('#filtroFechaDesde').val(),
            fecha_hasta: $('#filtroFechaHasta').val(),
            descripcion: $('#filtroDescripcion').val().toLowerCase(),
            referencia: $('#filtroReferencia').val().toLowerCase(),
            monto: $('#filtroMonto').val(),
            tipo: $('#filtroTipo').val()
        };

        let movimientosFiltrados = movimientosOriginales.filter(function(mov) {
            // Filtro por estado
            if (filtros.estado) {
                const esConciliado = mov.conciliado;
                if (filtros.estado === 'true' && !esConciliado) return false;
                if (filtros.estado === 'false' && esConciliado) return false;
            }

            // Filtro por fecha
            if (filtros.fecha_desde) {
                const fechaMov = mov.fecha_movimiento || mov.fecha_operacion?.split('/').reverse().join('-');
                if (fechaMov < filtros.fecha_desde) return false;
            }
            if (filtros.fecha_hasta) {
                const fechaMov = mov.fecha_movimiento || mov.fecha_operacion?.split('/').reverse().join('-');
                if (fechaMov > filtros.fecha_hasta) return false;
            }

            // Filtro por descripción
            if (filtros.descripcion && mov.descripcion) {
                if (!mov.descripcion.toLowerCase().includes(filtros.descripcion)) return false;
            }

            // Filtro por referencia
            if (filtros.referencia && mov.referencia) {
                if (!mov.referencia.toLowerCase().includes(filtros.referencia)) return false;
            }

            // Filtro por tipo (cargo/abono)
            if (filtros.tipo === 'cargo' && (!mov.cargos || mov.cargos == 0)) return false;
            if (filtros.tipo === 'abono' && (!mov.abonos || mov.abonos == 0)) return false;

            // Filtro por monto
            if (filtros.monto) {
                const montoNum = parseFloat(filtros.monto);
                const movMonto = parseFloat(mov.cargos || mov.abonos || 0);
                if (isNaN(montoNum) || isNaN(movMonto) || montoNum !== movMonto) return false;
            }

            return true;
        });

        // Actualizar tabla con movimientos filtrados
        movimientosGlobales = movimientosFiltrados;
        pintarTablaMovimientos(movimientosFiltrados, false);

        // Calcular y actualizar los totales
        const totalesActualizados = calcularTotalesDesdeMovimientos(movimientosFiltrados);
        pintarTotalesMovimientos(totalesActualizados, movimientosFiltrados);

        $('#modalFiltros').modal('hide');
    }

    function limpiarFiltros() {
        $('#formFiltros')[0].reset();

        // Mostrar todos los movimientos originales
        movimientosGlobales = JSON.parse(JSON.stringify(movimientosOriginales));
        pintarTablaMovimientos(movimientosGlobales);

        // Calcular y actualizar los totales
        const totalesActualizados = calcularTotalesDesdeMovimientos(movimientosGlobales);
        pintarTotalesMovimientos(totalesActualizados, movimientosGlobales);
    }

    function marcarComoConciliado(movimientoId) {
        var confirmHtml = `<div style="display:flex;gap:16px;text-align:left;">
            <div style="width:54px;height:54px;border-radius:50%;background:#dbeafe;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
            </div>
            <div style="flex:1;">
                <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">¿Confirmar conciliación?</p>
                <p style="font-size:14px;color:#6b7280;margin:0 0 18px 0;">¿Deseas marcar este movimiento como conciliado?</p>
                <div style="display:flex;gap:12px;">
                    <button id="btnCancelarMarcar" style="flex:1;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;background:white;color:#6b7280;font-weight:600;cursor:pointer;font-size:13px;transition:all 0.2s;" onmouseover="this.style.borderColor='#9ca3af';this.style.color='#374151'" onmouseout="this.style.borderColor='#d1d5db';this.style.color='#6b7280'">Cancelar</button>
                    <button id="btnConfirmarMarcar" style="flex:1;padding:10px 14px;border:none;border-radius:8px;background:#2563eb;color:white;font-weight:700;cursor:pointer;font-size:13px;transition:all 0.2s;" onmouseover="this.style.background='#1d4ed8';this.style.transform='translateY(-2px)'" onmouseout="this.style.background='#2563eb';this.style.transform='translateY(0)'">Marcar conciliado</button>
                </div>
            </div>
        </div>`;
        Swal.fire({
            html: confirmHtml,
            showConfirmButton: false,
            showCancelButton: false,
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                document.getElementById('btnCancelarMarcar').addEventListener('click', () => Swal.close());
                document.getElementById('btnConfirmarMarcar').addEventListener('click', () => {
                    Swal.close();
                    $.ajax({
                        url: '{{ route("bancos-conciliacion.marcarComoConciliado") }}',
                        type: 'POST',
                        data: {
                            movimiento_id: movimientoId,
                            conciliado: true
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            setTimeout(() => {
                                if (response.success) {
                                    var successHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                        <div style="width:54px;height:54px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                        </div>
                                        <div style="flex:1;">
                                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Movimiento conciliado</p>
                                            <p style="font-size:14px;color:#6b7280;margin:0;">El movimiento ha sido marcado como conciliado exitosamente.</p>
                                        </div>
                                    </div>`;
                                    Swal.fire({
                                        html: successHtml,
                                        showConfirmButton: false,
                                        timer: 2000,
                                        allowOutsideClick: false,
                                        allowEscapeKey: false
                                    });

                                    // Actualizar en arrays globales
                                    const indexGlobal = movimientosGlobales.findIndex(m => m.id == movimientoId);
                                    const indexOriginal = movimientosOriginales.findIndex(m => m.id == movimientoId);

                                    if (indexGlobal !== -1) {
                                        movimientosGlobales[indexGlobal].conciliado = true;
                                    }
                                    if (indexOriginal !== -1) {
                                        movimientosOriginales[indexOriginal].conciliado = true;
                                    }

                                    // Volver a pintar la tabla y totales (sin actualizar originales para mantener el estado)
                                    pintarTablaMovimientos(movimientosGlobales, false);

                                    // Calcular y actualizar los totales
                                    const totalesActualizados = calcularTotalesDesdeMovimientos(movimientosGlobales);
                                    pintarTotalesMovimientos(totalesActualizados, movimientosGlobales);
                                }
                            }, 1000);
                        },
                        error: function(xhr) {
                            setTimeout(() => {
                                var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                    <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                    </div>
                                    <div style="flex:1;">
                                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error al actualizar</p>
                                        <p style="font-size:14px;color:#6b7280;margin:0;">${xhr.responseJSON?.message || 'Error al actualizar el movimiento.'}</p>
                                    </div>
                                </div>`;
                                Swal.fire({
                                    html: errorHtml,
                                    showConfirmButton: false,
                                    allowOutsideClick: false,
                                    allowEscapeKey: false,
                                    didOpen: () => {
                                        setTimeout(() => Swal.close(), 3000);
                                    }
                                });
                            }, 1000);
                        }
                    });
                });
            }
        });
    }

    // Desconciliar un movimiento (solo desde modo edición de movimientos conciliados)
    function desconciliarMovimiento(movimientoId) {
        // Si no se pasó id, tomar del formulario
        movimientoId = movimientoId || $('#movimientoBancarioId').val();
        if (!movimientoId) {
            var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:28px;font-weight:700;color:#f97316;">!</div>
                <div style="flex:1;">
                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Sin movimiento</p>
                    <p style="font-size:14px;color:#6b7280;margin:0;">No se encontró el movimiento a desconciliar.</p>
                </div>
            </div>`;
            Swal.fire({
                html: warningHtml,
                showConfirmButton: false,
                allowOutsideClick: true,
                allowEscapeKey: true,
                didOpen: () => {
                    setTimeout(() => Swal.close(), 2500);
                }
            });
            return;
        }

        var confirmHtml = `<div style="display:flex;gap:16px;text-align:left;">
            <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><path d="M9 10h6M9 14h6" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round"/></svg>
            </div>
            <div style="flex:1;">
                <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">¿Desconciliar movimiento?</p>
                <p style="font-size:14px;color:#6b7280;margin:0 0 18px 0;">Esto marcará el movimiento como no conciliado. ¿Deseas continuar?</p>
                <div style="display:flex;gap:12px;">
                    <button id="btnCancelarDesconciliar" style="flex:1;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;background:white;color:#6b7280;font-weight:600;cursor:pointer;font-size:13px;transition:all 0.2s;" onmouseover="this.style.borderColor='#9ca3af';this.style.color='#374151'" onmouseout="this.style.borderColor='#d1d5db';this.style.color='#6b7280'">Cancelar</button>
                    <button id="btnConfirmarDesconciliar" style="flex:1;padding:10px 14px;border:none;border-radius:8px;background:#ef4444;color:white;font-weight:700;cursor:pointer;font-size:13px;transition:all 0.2s;" onmouseover="this.style.background='#dc2626';this.style.transform='translateY(-2px)'" onmouseout="this.style.background='#ef4444';this.style.transform='translateY(0)'">Desconciliar</button>
                </div>
            </div>
        </div>`;

        Swal.fire({
            html: confirmHtml,
            showConfirmButton: false,
            showCancelButton: false,
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                document.getElementById('btnCancelarDesconciliar').addEventListener('click', () => Swal.close());
                document.getElementById('btnConfirmarDesconciliar').addEventListener('click', () => {
                    Swal.close();
                    var processingHtml = `<div style="display:flex;gap:16px;text-align:left;">
                        <div style="width:54px;height:54px;border-radius:50%;background:#dbeafe;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <svg width="28" height="28" viewBox="0 0 50 50" style="animation:spin 2s linear infinite;"><circle cx="25" cy="25" r="20" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="90 150"></circle></svg>
                        </div>
                        <div style="flex:1;">
                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Procesando...</p>
                            <p style="font-size:14px;color:#6b7280;margin:0;">Por favor espera mientras se desconcilia el movimiento.</p>
                        </div>
                    </div>
                    <style>@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style>`;
                    Swal.fire({
                        html: processingHtml,
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    });
                    $.ajax({
                        url: '{{ route("bancos-conciliacion.marcarComoConciliado") }}',
                        type: 'POST',
                        data: {
                            movimiento_id: movimientoId,
                            conciliado: false
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            setTimeout(() => {
                                Swal.close();
                                if (response && response.success) {
                                    var successHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                        <div style="width:54px;height:54px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                        </div>
                                        <div style="flex:1;">
                                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Movimiento desconciliado</p>
                                            <p style="font-size:14px;color:#6b7280;margin:0;">${response.message || 'El movimiento se ha marcado como no conciliado.'}</p>
                                        </div>
                                    </div>`;
                                    Swal.fire({
                                        html: successHtml,
                                        showConfirmButton: false,
                                        timer: 1700,
                                        allowOutsideClick: false,
                                        allowEscapeKey: false
                                    });

                                    // Actualizar arrays locales
                                    const idxG = movimientosGlobales.findIndex(m => m.id == movimientoId);
                                    const idxO = movimientosOriginales.findIndex(m => m.id == movimientoId);
                                    if (idxG !== -1) movimientosGlobales[idxG].conciliado = false;
                                    if (idxO !== -1) movimientosOriginales[idxO].conciliado = false;

                                    // Repintar tabla y totales
                                    pintarTablaMovimientos(movimientosGlobales, false);

                                    // Calcular y actualizar los totales
                                    const totalesActualizados = calcularTotalesDesdeMovimientos(movimientosGlobales);
                                    pintarTotalesMovimientos(totalesActualizados, movimientosGlobales);

                                    // Cerrar formulario / restaurar estado
                                    cancelarEdicion();
                                } else {
                                    var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                        <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                        </div>
                                        <div style="flex:1;">
                                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                                            <p style="font-size:14px;color:#6b7280;margin:0;">${response?.message || 'No se pudo desconciliar el movimiento.'}</p>
                                        </div>
                                    </div>`;
                                    Swal.fire({
                                        html: errorHtml,
                                        showConfirmButton: false,
                                        allowOutsideClick: false,
                                        allowEscapeKey: false,
                                        didOpen: () => {
                                            setTimeout(() => Swal.close(), 3000);
                                        }
                                    });
                                }
                            }, 1000);
                        },
                        error: function(xhr) {
                            setTimeout(() => {
                                Swal.close();
                                var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                    <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                    </div>
                                    <div style="flex:1;">
                                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                                        <p style="font-size:14px;color:#6b7280;margin:0;">${xhr.responseJSON?.message || 'Error al desconciliar el movimiento.'}</p>
                                    </div>
                                </div>`;
                                Swal.fire({
                                    html: errorHtml,
                                    showConfirmButton: false,
                                    allowOutsideClick: false,
                                    allowEscapeKey: false,
                                    didOpen: () => {
                                        setTimeout(() => Swal.close(), 3000);
                                    }
                                });
                            }, 1000);
                        }
                    });
                });
            }
        });
    }

    function eliminarMovimiento(movimientoId) {
        var confirmHtml = `<div style="display:flex;gap:16px;text-align:left;">
            <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
            </div>
            <div style="flex:1;">
                <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">¿Eliminar registro?</p>
                <p style="font-size:14px;color:#6b7280;margin:0 0 18px 0;">Esta acción eliminará el registro. ¿Deseas continuar?</p>
                <div style="display:flex;gap:12px;">
                    <button id="btnCancelarEliminar" style="flex:1;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;background:white;color:#6b7280;font-weight:600;cursor:pointer;font-size:13px;transition:all 0.2s;" onmouseover="this.style.borderColor='#9ca3af';this.style.color='#374151'" onmouseout="this.style.borderColor='#d1d5db';this.style.color='#6b7280'">Cancelar</button>
                    <button id="btnConfirmarEliminar" style="flex:1;padding:10px 14px;border:none;border-radius:8px;background:#ef4444;color:white;font-weight:700;cursor:pointer;font-size:13px;transition:all 0.2s;" onmouseover="this.style.background='#dc2626';this.style.transform='translateY(-2px)'" onmouseout="this.style.background='#ef4444';this.style.transform='translateY(0)'">Sí, eliminar</button>
                </div>
            </div>
        </div>`;

        Swal.fire({
            html: confirmHtml,
            showConfirmButton: false,
            showCancelButton: false,
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                document.getElementById('btnCancelarEliminar').addEventListener('click', () => Swal.close());
                document.getElementById('btnConfirmarEliminar').addEventListener('click', () => {
                    Swal.close();
                    var processingHtml = `<div style="display:flex;gap:16px;text-align:left;">
                        <div style="width:54px;height:54px;border-radius:50%;background:#dbeafe;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <svg width="28" height="28" viewBox="0 0 50 50" style="animation:spin 2s linear infinite;"><circle cx="25" cy="25" r="20" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="90 150"></circle></svg>
                        </div>
                        <div style="flex:1;">
                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Eliminando...</p>
                            <p style="font-size:14px;color:#6b7280;margin:0;">Por favor espera mientras se elimina el registro.</p>
                        </div>
                    </div>
                    <style>@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style>`;
                    Swal.fire({
                        html: processingHtml,
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    });
                    $.ajax({
                        url: '{{ route("bancos-conciliacion.eliminarMovimiento") }}',
                        type: 'POST',
                        data: {
                            movimiento_id: movimientoId
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            setTimeout(() => {
                                Swal.close();
                                if (response.success) {
                                    var successHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                        <div style="width:54px;height:54px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                        </div>
                                        <div style="flex:1;">
                                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Registro eliminado</p>
                                            <p style="font-size:14px;color:#6b7280;margin:0;">${response.message || 'El movimiento fue eliminado exitosamente.'}</p>
                                        </div>
                                    </div>`;
                                    Swal.fire({
                                        html: successHtml,
                                        showConfirmButton: false,
                                        timer: 1800,
                                        allowOutsideClick: false,
                                        allowEscapeKey: false
                                    });

                                    // Remover el movimiento de los arrays y repintar tabla y totales
                                    movimientosGlobales = movimientosGlobales.filter(m => m.id != movimientoId);
                                    movimientosOriginales = movimientosOriginales.filter(m => m.id != movimientoId);
                                    pintarTablaMovimientos(movimientosGlobales, false);

                                    // Calcular y actualizar los totales
                                    const totalesActualizados = calcularTotalesDesdeMovimientos(movimientosGlobales);
                                    pintarTotalesMovimientos(totalesActualizados, movimientosGlobales);

                                    // Limpiar selección del movimiento
                                    cancelarEdicion();
                                } else {
                                    var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                        <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                        </div>
                                        <div style="flex:1;">
                                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                                            <p style="font-size:14px;color:#6b7280;margin:0;">${response.message || 'No se pudo eliminar el registro.'}</p>
                                        </div>
                                    </div>`;
                                    Swal.fire({
                                        html: errorHtml,
                                        showConfirmButton: false,
                                        allowOutsideClick: false,
                                        allowEscapeKey: false,
                                        didOpen: () => {
                                            setTimeout(() => Swal.close(), 3000);
                                        }
                                    });
                                }
                            }, 1000);
                        },
                        error: function(xhr) {
                            setTimeout(() => {
                                Swal.close();
                                var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                    <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                    </div>
                                    <div style="flex:1;">
                                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                                        <p style="font-size:14px;color:#6b7280;margin:0;">${xhr.responseJSON?.message || 'Error al eliminar el registro.'}</p>
                                    </div>
                                </div>`;
                                Swal.fire({
                                    html: errorHtml,
                                    showConfirmButton: false,
                                    allowOutsideClick: false,
                                    allowEscapeKey: false,
                                    didOpen: () => {
                                        setTimeout(() => Swal.close(), 3000);
                                    }
                                });
                            }, 1000);
                        }
                    });
                });
            }
        });
    }

    // Función global para iniciar la descarga de cierre de conciliación (con loader y alerts)
    function cerrarConciliacion() {
        const conciliacionId = $('#conciliacionId').val();
        if (!conciliacionId) {
            var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                </div>
                <div style="flex:1;">
                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Selecciona una conciliación</p>
                    <p style="font-size:14px;color:#6b7280;margin:0;">Debes seleccionar una conciliación para continuar.</p>
                </div>
            </div>`;
            Swal.fire({
                html: warningHtml,
                showConfirmButton: false,
                allowOutsideClick: true,
                allowEscapeKey: true,
                didOpen: () => {
                    setTimeout(() => Swal.close(), 3000);
                }
            });
            return;
        }
        var confirmHtml = `<div style="display:flex;gap:16px;text-align:left;">
            <div style="width:54px;height:54px;border-radius:50%;background:#dbeafe;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path></svg>
            </div>
            <div style="flex:1;">
                <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Generar archivo de conciliación</p>
                <p style="font-size:14px;color:#6b7280;margin:0 0 14px 0;">Selecciona el tipo de archivo a descargar:</p>
                <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:16px;">
                    <label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
                        <input type="radio" name="formatoCierreModal" value="excel" checked style="cursor:pointer;">
                        <span style="font-size:14px;color:#1f2937;">Excel (.xls) - Ideal para análisis y filtros</span>
                    </label>
                    <label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
                        <input type="radio" name="formatoCierreModal" value="pdf" style="cursor:pointer;">
                        <span style="font-size:14px;color:#1f2937;">PDF (.pdf) - Perfecto para compartir o imprimir</span>
                    </label>
                </div>
                <div style="display:flex;gap:12px;">
                    <button id="btnCancelarCierre" style="flex:1;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;background:white;color:#6b7280;font-weight:600;cursor:pointer;font-size:13px;" onmouseover="this.style.borderColor='#9ca3af';this.style.color='#374151'" onmouseout="this.style.borderColor='#d1d5db';this.style.color='#6b7280'">Cancelar</button>
                    <button id="btnConfirmarCierre" style="flex:1;padding:10px 14px;border:none;border-radius:8px;background:#2563eb;color:white;font-weight:700;cursor:pointer;font-size:13px;" onmouseover="this.style.background='#1d4ed8';this.style.transform='translateY(-2px)'" onmouseout="this.style.background='#2563eb';this.style.transform='translateY(0)'">Generar</button>
                </div>
            </div>
        </div>`;

        Swal.fire({
            html: confirmHtml,
            showConfirmButton: false,
            showCancelButton: false,
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                document.getElementById('btnCancelarCierre').addEventListener('click', () => Swal.close());
                document.getElementById('btnConfirmarCierre').addEventListener('click', () => {
                    const formatoSeleccionado = document.querySelector('input[name="formatoCierreModal"]:checked');
                    if (!formatoSeleccionado) {
                        Swal.showValidationMessage('Selecciona un formato para continuar.');
                        return;
                    }
                    const resultado = {
                        isConfirmed: true,
                        value: formatoSeleccionado.value
                    };
                    handleCierreConfirmation(resultado);
                });
            }
        });
    }

    function handleCierreConfirmation(result) {
        if (!result.isConfirmed) return;

        const conciliacionId = $('#conciliacionId').val();
        const formato = result.value || 'excel';
        const descripcionFormato = formato === 'pdf' ? 'PDF' : 'Excel';

        var processingHtml = `<div style="display:flex;gap:16px;text-align:left;align-items:center;">
                <div style="width:54px;height:54px;border-radius:50%;background:#dbeafe;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path></svg>
                </div>
                <div style="flex:1;">
                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Generando archivo...</p>
                    <p style="font-size:14px;color:#6b7280;margin:0;">Creando tu archivo ${descripcionFormato}. Por favor espera.</p>
                </div>
            </div>`;
        Swal.fire({
            html: processingHtml,
            showConfirmButton: false,
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                const svg = Swal.getHtmlContainer().querySelector('svg');
                if (svg) {
                    svg.style.animation = 'spin 2s linear infinite';
                    const style = document.createElement('style');
                    style.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
                    document.head.appendChild(style);
                }
            }
        });

        $.ajax({
            url: '{{ route("bancos-conciliacion.cerrarConciliacion") }}',
            type: 'POST',
            dataType: 'json',
            data: {
                conciliacion_id: conciliacionId,
                formato: formato
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                setTimeout(() => {
                    Swal.close();
                    try {
                        if (response && response.success) {
                            if (response.file) {
                                let link = document.createElement('a');
                                link.href = response.file.url;
                                link.download = response.file.filename;
                                document.body.appendChild(link);
                                link.click();
                                document.body.removeChild(link);

                                var successHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                        <div style="width:54px;height:54px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                        </div>
                                        <div style="flex:1;">
                                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Archivo generado</p>
                                            <p style="font-size:14px;color:#6b7280;margin:0;">El archivo ${descripcionFormato} se generó correctamente. La descarga debe iniciar automáticamente.</p>
                                        </div>
                                    </div>`;
                                Swal.fire({
                                    html: successHtml,
                                    showConfirmButton: false,
                                    allowOutsideClick: false,
                                    didOpen: () => {
                                        setTimeout(() => Swal.close(), 2000);
                                    }
                                });
                            } else {
                                var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                        <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
                                        </div>
                                        <div style="flex:1;">
                                            <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                                            <p style="font-size:14px;color:#6b7280;margin:0;">No se recibió el archivo generado. Intenta nuevamente.</p>
                                        </div>
                                    </div>`;
                                Swal.fire({
                                    html: errorHtml,
                                    showConfirmButton: false,
                                    allowOutsideClick: false,
                                    didOpen: () => {
                                        setTimeout(() => Swal.close(), 3000);
                                    }
                                });
                            }
                        } else {
                            var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                    <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
                                    </div>
                                    <div style="flex:1;">
                                        <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                                        <p style="font-size:14px;color:#6b7280;margin:0;">${response?.message || 'Ocurrió un error al generar el archivo.'}</p>
                                    </div>
                                </div>`;
                            Swal.fire({
                                html: errorHtml,
                                showConfirmButton: false,
                                allowOutsideClick: false,
                                didOpen: () => {
                                    setTimeout(() => Swal.close(), 3000);
                                }
                            });
                        }
                    } catch (err) {
                        console.error(err);
                        Swal.close();
                        var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
                                </div>
                                <div style="flex:1;">
                                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error en descarga</p>
                                    <p style="font-size:14px;color:#6b7280;margin:0;">No se pudo iniciar la descarga del archivo.</p>
                                </div>
                            </div>`;
                        Swal.fire({
                            html: errorHtml,
                            showConfirmButton: false,
                            allowOutsideClick: false,
                            didOpen: () => {
                                setTimeout(() => Swal.close(), 3000);
                            }
                        });
                    }
                }, 1000);
            },
            error: function(xhr) {
                setTimeout(() => {
                    Swal.close();
                    var mensaje = 'Ocurrió un error al generar el archivo.';
                    if (xhr.responseJSON && xhr.responseJSON.message) mensaje = xhr.responseJSON.message;
                    var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                            <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
                            </div>
                            <div style="flex:1;">
                                <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                                <p style="font-size:14px;color:#6b7280;margin:0;">${mensaje}</p>
                            </div>
                        </div>`;
                    Swal.fire({
                        html: errorHtml,
                        showConfirmButton: false,
                        allowOutsideClick: true,
                        allowEscapeKey: true,
                        didOpen: () => {
                            setTimeout(() => Swal.close(), 3000);
                        }
                    });
                }, 1000);
            }
        });
    }

    function eliminarConciliacionCompleta() {
        const conciliacionId = $('#conciliacionId').val();
        if (!conciliacionId) {
            var warningHtml = `<div style="display:flex;gap:16px;text-align:left;">
                <div style="width:54px;height:54px;border-radius:50%;background:#fed7aa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                </div>
                <div style="flex:1;">
                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Selecciona una conciliación</p>
                    <p style="font-size:14px;color:#6b7280;margin:0;">Debes seleccionar una conciliación para continuar.</p>
                </div>
            </div>`;
            Swal.fire({
                html: warningHtml,
                showConfirmButton: false,
                allowOutsideClick: true,
                allowEscapeKey: true,
                didOpen: () => {
                    setTimeout(() => Swal.close(), 3000);
                }
            });
            return;
        }

        // Confirmación antes de proceder (más firme ya que elimina todo)
        var confirmHtml = `<div style="display:flex;gap:16px;text-align:left;">
            <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
            </div>
            <div style="flex:1;">
                <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">¿Eliminar conciliación?</p>
                <p style="font-size:14px;color:#6b7280;margin:0 0 6px 0;">Se eliminará la conciliación y todos sus movimientos.</p>
                <p style="font-size:13px;color:#ef4444;font-weight:600;margin:0 0 16px 0;">⚠️ Esta acción no se puede deshacer.</p>
                <div style="display:flex;gap:12px;">
                    <button id="btnCancelarEliminar2" style="flex:1;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;background:white;color:#6b7280;font-weight:600;cursor:pointer;font-size:13px;" onmouseover="this.style.borderColor='#9ca3af';this.style.color='#374151'" onmouseout="this.style.borderColor='#d1d5db';this.style.color='#6b7280'">Cancelar</button>
                    <button id="btnConfirmarEliminar2" style="flex:1;padding:10px 14px;border:none;border-radius:8px;background:#ef4444;color:white;font-weight:700;cursor:pointer;font-size:13px;" onmouseover="this.style.background='#dc2626';this.style.transform='translateY(-2px)'" onmouseout="this.style.background='#ef4444';this.style.transform='translateY(0)'">Sí, eliminar</button>
                </div>
            </div>
        </div>`;
        Swal.fire({
            html: confirmHtml,
            showConfirmButton: false,
            showCancelButton: false,
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                document.getElementById('btnCancelarEliminar2').addEventListener('click', () => Swal.close());
                document.getElementById('btnConfirmarEliminar2').addEventListener('click', () => {
                    const resultado = {
                        isConfirmed: true
                    };
                    handleEliminarConfirmation(resultado);
                });
            }
        });
    }

    function handleEliminarConfirmation(result) {
        if (!result.isConfirmed) return;

        const conciliacionId = $('#conciliacionId').val();

        // Mostrar loader mientras se elimina
        var processingHtml = `<div style="display:flex;gap:16px;text-align:left;align-items:center;">
                <div style="width:54px;height:54px;border-radius:50%;background:#dbeafe;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path></svg>
                </div>
                <div style="flex:1;">
                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Eliminando conciliación...</p>
                    <p style="font-size:14px;color:#6b7280;margin:0;">Por favor espera mientras se elimina la conciliación.</p>
                </div>
            </div>`;
        Swal.fire({
            html: processingHtml,
            showConfirmButton: false,
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                const svg = Swal.getHtmlContainer().querySelector('svg');
                if (svg) {
                    svg.style.animation = 'spin 2s linear infinite';
                    const style = document.createElement('style');
                    style.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
                    document.head.appendChild(style);
                }
            }
        });

        // Enviar petición AJAX
        $.ajax({
            url: '{{ route("bancos-conciliacion.eliminarConciliacion") }}',
            type: 'POST',
            dataType: 'json',
            data: {
                conciliacion_id: conciliacionId
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                setTimeout(() => {
                    Swal.close();
                    if (response && response.success) {
                        var successHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                <div style="width:54px;height:54px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                </div>
                                <div style="flex:1;">
                                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Conciliación eliminada</p>
                                    <p style="font-size:14px;color:#6b7280;margin:0;">${response.message || 'La conciliación se eliminó correctamente.'}</p>
                                </div>
                            </div>`;
                        Swal.fire({
                            html: successHtml,
                            showConfirmButton: false,
                            allowOutsideClick: false,
                            didOpen: () => {
                                setTimeout(() => {
                                    Swal.close();
                                    location.reload();
                                }, 2000);
                            }
                        });
                    } else {
                        var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                                <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
                                </div>
                                <div style="flex:1;">
                                    <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                                    <p style="font-size:14px;color:#6b7280;margin:0;">${response?.message || 'Ocurrió un error al eliminar la conciliación.'}</p>
                                </div>
                            </div>`;
                        Swal.fire({
                            html: errorHtml,
                            showConfirmButton: false,
                            allowOutsideClick: false,
                            didOpen: () => {
                                setTimeout(() => Swal.close(), 3000);
                            }
                        });
                    }
                }, 1000);
            },
            error: function(xhr) {
                setTimeout(() => {
                    Swal.close();
                    var mensaje = 'Ocurrió un error al eliminar la conciliación.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        mensaje = xhr.responseJSON.message;
                    }
                    var errorHtml = `<div style="display:flex;gap:16px;text-align:left;">
                            <div style="width:54px;height:54px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
                            </div>
                            <div style="flex:1;">
                                <p style="font-size:18px;font-weight:700;color:#1f2937;margin:0 0 6px 0;">Error</p>
                                <p style="font-size:14px;color:#6b7280;margin:0;">${mensaje}</p>
                            </div>
                        </div>`;
                    Swal.fire({
                        html: errorHtml,
                        showConfirmButton: false,
                        allowOutsideClick: true,
                        allowEscapeKey: true,
                        didOpen: () => {
                            setTimeout(() => Swal.close(), 3000);
                        }
                    });
                }, 1000);
            }
        });
    }
</script>
@endpush