@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" 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-blue-500 hover:bg-blue-600 text-white 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-green-600 hover:bg-green-700 text-white 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-red-600 hover:bg-red-700 text-white text-xs font-medium rounded-md transition-colors duration-200 flex mb-2 items-center gap-2">
                                        <i class="fas fa-download"></i> Cerrar conciliación
                                    </button>
                                    <button id="btnEliminarConciliacion" onclick="eliminarConciliacionCompleta()" class="px-3 py-1.5 bg-red-800 hover:bg-red-900 text-white 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-4 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-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Movimientos</div>
                                        <div id="totalCantidadMovimientos" class="text-base font-bold text-gray-800">0</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Pendientes</div>
                                        <div id="totalPendientes" class="text-base font-bold text-orange-600">0</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Conciliados</div>
                                        <div id="totalConciliados" class="text-base font-bold text-green-600">0</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Saldo inicial</div>
                                        <div id="saldoInicial" class="text-base font-bold text-gray-800">$0.00</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Depositos</div>
                                        <div id="totalAbonosMovimientos" class="text-base font-bold text-green-600">$0.00</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Retiros</div>
                                        <div id="totalCargosMovimientos" class="text-base  font-bold text-red-600">$0.00</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Saldo final</div>
                                        <div id="saldoFinal" class="text-base font-bold text-gray-800">$0.00</div>
                                    </div>
                                </div>
                            </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>

                            <!-- 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->claveSat}}) {{ $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', ['data' => $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>Guardar 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="cargo">Solo retiros</option>
                            <option value="abono">Solo depositos</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>
                </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;
    }

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

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

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

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

        if (!tipoOperacion) {
            Swal.fire({
                icon: 'warning',
                title: 'Tipo de operación requerido',
                text: 'Por favor, selecciona el tipo de operación.'
            });
            return;
        }



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

        if ((tipoOperacion == 'subir' || tipoOperacion == 'subir_pdf') && (!tipoCuenta || !cuenta || !periodo)) {
            Swal.fire({
                icon: 'warning',
                title: 'Campos requeridos',
                text: 'Por favor, completa todos los campos requeridos.'
            });
            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;
        }

        // Agregar archivo si es subir
        if (tipoOperacion === 'subir') {
            var file = $('#excelConciliacion')[0].files[0];
            if (!file) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Archivo EXCEL requerido',
                    text: 'Por favor, selecciona un archivo EXCEL para continuar.'
                });
                return;
            }
            formData.append('excelConciliacion', file);
        }

        if (tipoOperacion === 'subir_pdf') {
            var pdfInput = $('#pdfConciliacion')[0];
            var pdfFile = pdfInput ? pdfInput.files[0] : null;
            if (!pdfFile) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Archivo PDF requerido',
                    text: 'Por favor, selecciona un archivo PDF para continuar.'
                });
                return;
            }
            formData.append('pdfConciliacion', pdfFile);
        }

        // Agregar ID de conciliación si es reconsultar
        if (tipoOperacion === 'reconsultar') {
            var conciliacionId = $('#conciliacionId').val();
            if (!conciliacionId) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Conciliación requerida',
                    text: 'Por favor, selecciona una conciliación existente.'
                });
                return;
            }
            formData.append('conciliacion_id', conciliacionId);
            // Si el usuario adjuntó un archivo para la conciliación consultada, anexarlo
            var fileRe = $('#excelConciliacionReconsulta')[0] ? $('#excelConciliacionReconsulta')[0].files[0] : null;
            if (fileRe) {
                formData.append('excelConciliacion', fileRe);
            }
        }

        $.ajax({
            url: '{{ route("bancos-conciliacion.ejecutar") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                if (!silent) {
                    Swal.fire({
                        title: 'Procesando...',
                        text: 'Por favor espera mientras se realiza la conciliación bancaria.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                }
            },
            success: function(response) {
                /*if (!silent) {
                    setTimeout(() => {
                        Swal.fire({
                            icon: 'success',
                            title: 'Conciliación exitosa',
                            text: response.message,
                            showConfirmButton: false,
                            timer: 2500
                        });
                    }, 3000);
                }
                    */


                Swal.close();
                if (response.success && response.data) {
                    pintarInformacionConciliacion(response.data);
                }
            },
            error: function(xhr) {
                if (silent) {
                    // si es silent, no mostrar alertas; log para depuración
                    console.error('Error al ejecutar conciliación (silent):', xhr);
                    return;
                }

                // 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>';

                    Swal.fire({
                        icon: 'warning',
                        title: 'Conciliación existente',
                        html: infoHtml,
                        showCancelButton: true,
                        confirmButtonText: 'Subir de todos modos',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // 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>`;
                            });
                        }
                    }
                    Swal.fire({
                        icon: 'warning',
                        title: 'Campos requeridos',
                        html: `<p>${mensaje}</p><ul class="text-left" style="margin:0 0 0 1.5em;padding:0;">${listaErrores}</ul>`,
                        confirmButtonText: 'Aceptar'
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: mensaje,
                        confirmButtonText: 'Aceptar'
                    });
                }
            }
        });
    }

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

    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;

    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();

        movimientos.forEach(function(movimiento, index) {
            // Determinar clases CSS según el estado de conciliación
            let rowClasses = "border-b border-gray-100 transition-all duration-200";
            let hoverClasses = "";
            let cursorClass = "cursor-pointer";

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

            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="${index}" 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);
        });

        $('#tablaMovimientosBody').off('click', 'tr').on('click', 'tr', function(e) {
            if ($(e.target).closest('.btn-marcar').length > 0 || $(e.target).closest('.btn-eliminar').length > 0) {
                return;
            }

            let movimientoId = $(this).data('id');
            let conciliado = $(this).data('conciliado');

            // Si está conciliado, abrir el formulario en modo lectura (mostrar campos) pero permitir editar mediante botón
            if (conciliado) {
                seleccionarMovimiento(movimientoId);
                return;
            }

            seleccionarMovimiento(movimientoId);
        });
    }

    function seleccionarMovimiento(movimientoId) {
        // Remover selección anterior
        $('#tablaMovimientosBody tr').removeClass('bg-gradient-to-r from-blue-100 to-indigo-100 border-l-4 border-blue-500');

        // Seleccionar nueva fila
        $(`#tablaMovimientosBody tr[data-id="${movimientoId}"]`).addClass('bg-gradient-to-r from-blue-100 to-indigo-100 border-l-4 border-blue-500');
        // Mostrar loader y forzar una espera mínima de 1s 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');
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Error al obtener los datos del movimiento.'
                    });
                    $('#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);
        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();
        }
    }

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

        // 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) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Archivo muy grande',
                    text: 'El archivo PDF no debe superar los 5 MB.'
                });
                return;
            }
        }

        // Usar FormData para enviar archivo
        const formData = new FormData();
        formData.append('movimiento_bancario_id', $('#movimientoBancarioId').val());
        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...' : 'Guardando...';
        const texto = wasConciliado ? 'Por favor espera mientras se actualiza el movimiento.' : '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() {
                Swal.fire({
                    title: titulo,
                    text: texto,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
            },
            success: function(response) {

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

                    if (!response.success) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message || 'Ocurrió un error.'
                        });
                        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');

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


                    } else {
                        // Guardado: marcar movimiento como conciliado en arrays (si existe)
                        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 y limpiar formulario
                    pintarTablaMovimientos(movimientosGlobales, false);
                    pintarTotalesMovimientos(movimientosGlobales);
                    seleccionarMovimiento(response.id || movimientoId);
                }, 1000);

                //cancelarEdicion();
            },
            error: function(xhr) {
                Swal.close();
                let mensaje = wasConciliado ? 'Error al actualizar el movimiento.' : 'Error al guardar el movimiento.';
                if (xhr.responseJSON && xhr.responseJSON.message) mensaje = xhr.responseJSON.message;
                Swal.fire({
                    icon: 'error',
                    title: mensaje,
                    text: xhr.responseJSON.errors ? JSON.stringify(xhr.responseJSON.errors) : ''
                });
            }
        });
    }

    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();

        // 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();
        $('#tablaMovimientosBody tr').removeClass('bg-gradient-to-r from-blue-100 to-indigo-100 border-l-4 border-blue-500');

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

    // Funciones para el modal de filtros
    function abrirModalAgregarMovimiento() {
        // Obtener el ID de la conciliación actual
        let conciliacionId = $('#conciliacionId').val();
        if (!conciliacionId) {
            Swal.fire({
                icon: 'warning',
                title: 'Conciliación requerida',
                text: 'Selecciona una conciliación antes de agregar movimientos.'
            });
            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) {
            Swal.fire({
                icon: 'warning',
                title: 'Valores inválidos',
                text: 'No puede haber cargos y abonos simultáneamente. Indica solo uno.'
            });
            return;
        }

        if (cargosVal <= 0 && abonosVal <= 0) {
            Swal.fire({
                icon: 'warning',
                title: 'Valores requeridos',
                text: 'Debes indicar un cargo o un abono mayor a 0.'
            });
            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() {
                Swal.fire({
                    title: 'Guardando...',
                    text: 'Por favor espera mientras se guarda la información del movimiento.',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
            },
            success: function(response) {
                Swal.close();
                if (response.success) {
                    $('#modalAgregarMovimiento').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'Movimiento agregado',
                        text: response.message || 'El movimiento se agregó correctamente.',
                        timer: 2000,
                        showConfirmButton: 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 {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'No se pudo agregar el movimiento.'
                    });
                }
            },
            error: function(xhr) {
                Swal.close();
                let mensaje = 'Error al guardar el movimiento.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    mensaje = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: mensaje
                });
            }
        });
    }

    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(),
            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;

            return true;
        });

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

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

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

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

    function marcarComoConciliado(movimientoId) {
        Swal.fire({
            title: '¿Confirmar conciliación?',
            text: '¿Deseas marcar este movimiento como conciliado?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, marcar como conciliado',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.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) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Movimiento conciliado',
                                text: 'El movimiento ha sido marcado como conciliado exitosamente.',
                                timer: 2000,
                                showConfirmButton: 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);
                            pintarTotalesMovimientos(movimientosGlobales);
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: xhr.responseJSON?.message || 'Error al actualizar el movimiento.'
                        });
                    }
                });
            }
        });
    }

    // 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) {
            Swal.fire({
                icon: 'warning',
                title: 'Sin movimiento',
                text: 'No se encontró el movimiento a desconciliar.'
            });
            return;
        }

        Swal.fire({
            title: '¿Desconciliar movimiento?',
            text: 'Esto marcará el movimiento como no conciliado. ¿Deseas continuar?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Sí, desconciliar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (!result.isConfirmed) return;

            $.ajax({
                url: '{{ route("bancos-conciliacion.marcarComoConciliado") }}',
                type: 'POST',
                data: {
                    movimiento_id: movimientoId,
                    conciliado: false
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    Swal.fire({
                        title: 'Procesando...',
                        text: 'Por favor espera mientras se desconcilia el movimiento.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                },
                success: function(response) {
                    Swal.close();
                    if (response && response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Movimiento desconciliado',
                            text: response.message || 'El movimiento se ha marcado como no conciliado.',
                            timer: 1700,
                            showConfirmButton: 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);
                        pintarTotalesMovimientos(movimientosGlobales);

                        // Cerrar formulario / restaurar estado
                        cancelarEdicion();
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response?.message || 'No se pudo desconciliar el movimiento.'
                        });
                    }
                },
                error: function(xhr) {
                    Swal.close();
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: xhr.responseJSON?.message || 'Error al desconciliar el movimiento.'
                    });
                }
            });
        });
    }

    function eliminarMovimiento(movimientoId) {
        Swal.fire({
            title: '¿Eliminar registro?',
            text: 'Esta acción eliminará el registro. ¿Deseas continuar?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (!result.isConfirmed) return;

            $.ajax({
                url: '{{ route("bancos-conciliacion.eliminarMovimiento") }}',
                type: 'POST',
                data: {
                    movimiento_id: movimientoId
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    Swal.fire({
                        title: 'Eliminando...',
                        text: 'Por favor espera mientras se elimina el registro.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                },
                success: function(response) {
                    Swal.close();
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Registro eliminado',
                            text: response.message || 'El movimiento fue eliminado exitosamente.',
                            timer: 1800,
                            showConfirmButton: 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);
                        pintarTotalesMovimientos(movimientosGlobales);
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message || 'No se pudo eliminar el registro.'
                        });
                    }
                },
                error: function(xhr) {
                    Swal.close();
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: xhr.responseJSON?.message || 'Error al eliminar el registro.'
                    });
                }
            });
        });
    }

    // Función global para iniciar la descarga de cierre de conciliación (con loader y alerts)
    function cerrarConciliacion() {
        const conciliacionId = $('#conciliacionId').val();
        if (!conciliacionId) {
            Swal.fire('Selecciona una conciliación', '', 'warning');
            return;
        }
        const htmlFormato = `
            <p class="text-sm text-gray-700 mb-3">Selecciona el tipo de archivo a generar:</p>
            <div class="flex flex-col gap-2 text-left">
                <label class="flex items-center gap-2 text-sm text-gray-800 cursor-pointer">
                    <input type="radio" name="formatoCierreModal" value="excel" class="form-radio text-blue-600" checked>
                    <span>Excel (.xls) - Ideal para análisis y filtros.</span>
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-800 cursor-pointer">
                    <input type="radio" name="formatoCierreModal" value="pdf" class="form-radio text-blue-600">
                    <span>PDF (.pdf) - Perfecto para compartir o imprimir.</span>
                </label>
            </div>`;

        Swal.fire({
            title: '¿Cerrar conciliación?',
            html: htmlFormato,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Generar archivo',
            cancelButtonText: 'Cancelar',
            focusConfirm: false,
            preConfirm: () => {
                const formatoSeleccionado = document.querySelector('input[name="formatoCierreModal"]:checked');
                if (!formatoSeleccionado) {
                    Swal.showValidationMessage('Selecciona un formato para continuar.');
                    return false;
                }
                return formatoSeleccionado.value;
            }
        }).then((result) => {
            if (!result.isConfirmed) return;

            const formato = result.value || 'excel';
            const descripcionFormato = formato === 'pdf' ? 'PDF' : 'Excel';

            Swal.fire({
                title: 'Generando archivo...',
                html: `Creando tu archivo ${descripcionFormato}. Por favor espera.`,
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.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) {
                    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);

                                Swal.fire({
                                    icon: 'success',
                                    title: 'Archivo generado',
                                    text: response.message || `El archivo ${descripcionFormato} se generó correctamente.`,
                                    timer: 2000,
                                    showConfirmButton: false
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'No se recibió el archivo generado.'
                                });
                            }
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response?.message || 'Ocurrió un error al generar el archivo.'
                            });
                        }
                    } catch (err) {
                        console.error(err);
                        Swal.close();
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'No se pudo iniciar la descarga.'
                        });
                    }
                },
                error: function(xhr) {
                    Swal.close();
                    var mensaje = 'Ocurrió un error al generar el archivo.';
                    if (xhr.responseJSON && xhr.responseJSON.message) mensaje = xhr.responseJSON.message;
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: mensaje
                    });
                }
            });
        });
    }

    function eliminarConciliacionCompleta() {
        const conciliacionId = $('#conciliacionId').val();
        if (!conciliacionId) {
            Swal.fire('Selecciona una conciliación', '', 'warning');
            return;
        }

        // Confirmación antes de proceder (más firme ya que elimina todo)
        Swal.fire({
            title: '¿Eliminar conciliación?',
            html: '<p style="margin-bottom: 10px;">Se eliminará la conciliación y todos sus movimientos.</p><p style="color: #d33; font-weight: bold;">Esta acción no se puede deshacer.</p>',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Sí, eliminar conciliación',
            cancelButtonColor: '#6b7280',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (!result.isConfirmed) return;

            // Mostrar loader mientras se elimina
            Swal.fire({
                title: 'Eliminando conciliación...',
                html: 'Por favor espera mientras se elimina la conciliación.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            // 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) {
                    Swal.close();
                    if (response && response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Eliminada!',
                            text: response.message || 'La conciliación se eliminó correctamente.'
                        }).then(() => {
                            // Recargar la página
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response?.message || 'Ocurrió un error al eliminar la conciliación.'
                        });
                    }
                },
                error: function(xhr) {
                    Swal.close();
                    var mensaje = 'Ocurrió un error al eliminar la conciliación.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        mensaje = xhr.responseJSON.message;
                    }
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: mensaje
                    });
                }
            });
        });
    }
</script>
@endpush