@extends('layouts.app', ['activePage' => 'conciliacion_bancaria', 'menuParent' => '', 'titlePage' => __('Contabilidad - Bancos')])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-2">
            <div class="col-6">
                <h6 class="text-xl font-semibold text-gray-800">Conciliación bancaria</h6>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-6">
                        <div class="grid grid-cols-12 gap-4 mb-2">
                            <div class="col-span-2">
                                <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>Reconsultar existente</option>
                                    <option value="subir">Subir archivo PDF</option>
                                </select>
                            </div>
                            <div class="col-span-2" id="contenedorConciliacion">
                                <div class="flex items-end">
                                    <div class="flex-1">
                                        <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->tipo_cuenta }} - {{ $conciliacion?->banco?->nombre }} - {{ $conciliacion->periodo }}
                                            </option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-2 contenedorArchivo" 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" 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" 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->fecha_inicio }}">{{ $periodo->descripcion }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-2 contenedorArchivo" 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 type="button" onclick="ejecutarConciliacionBancaria()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex items-center justify-center">
                                    <i class="fas fa-search"></i> Procesar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contenedor para mostrar la información de conciliación -->
        <div id="contenedorInformacionConciliacion" class="mt-4" style="display: none;">
            <div class="bg-white rounded-lg shadow-sm border border-gray-100">
                <div class="p-4">
                    <!-- Sección de información general compacta -->
                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <!-- Información del banco -->
                            <div class="space-y-2">
                                <h6 class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Banco</h6>
                                <div id="informacionBanco" class="space-y-1">
                                    <!-- Se llenará dinámicamente -->
                                </div>
                            </div>

                            <!-- Información del receptor -->
                            <div class="space-y-2">
                                <h6 class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Receptor</h6>
                                <div id="informacionReceptor" class="space-y-1">
                                    <!-- Se llenará dinámicamente -->
                                </div>
                            </div>

                            <!-- Información financiera -->
                            <div class="space-y-2">
                                <h6 class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Financiera</h6>
                                <div id="informacionFinanciera" class="space-y-1">
                                    <!-- Se llenará dinámicamente -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tabla de movimientos -->
                    <div class="mt-4">
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <!-- Columna izquierda - Listado de movimientos -->
                            <div class="bg-gray-25 rounded-lg p-4 border border-gray-200">
                                <h6 class="text-sm font-medium text-gray-700 mb-3">Listado de Movimientos</h6>

                                <!-- 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-3 gap-4">
                                        <div class="text-center">
                                            <div class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Total Movimientos</div>
                                            <div id="totalCantidadMovimientos" class="text-lg 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">Cargos</div>
                                            <div id="totalCargosMovimientos" class="text-lg 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">Abonos</div>
                                            <div id="totalAbonosMovimientos" class="text-lg font-bold text-green-600">$0.00</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-scroll"> <!-- Quita overflow-x-auto -->
                                    <table id="tablaMovimientos" class="w-full text-sm table-fixed"> <!-- Agrega w-full y 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-56">Descripción</th>
                                                <th class="px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px] w-40">Referencia</th>
                                                <th class="px-4 py-3 text-right font-semibold text-gray-700 uppercase tracking-wide text-[11px] w-24">Cargos</th>
                                                <th class="px-4 py-3 text-right font-semibold text-gray-700 uppercase tracking-wide text-[11px] w-24">Abonos</th>
                                                <th width="10px" class="no-content"></th>
                                            </tr>
                                        </thead>
                                        <tbody id="tablaMovimientosBody" class="bg-white">
                                            <!-- Se llenará dinámicamente -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- Columna derecha - Opciones del registro seleccionado -->
                            <div class="bg-gray-25 rounded-lg p-4 border border-gray-200 opciones-container">
                                <h6 class="text-sm font-medium text-gray-700 mb-3">Conciliación</h6>

                                <!-- Contenido inicial -->
                                <div id="opcionesIniciales" 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 un movimiento para conciliar</p>
                                </div>

                                <div id="formularioOpciones" class="hidden">

                                    <div class="mb-4">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Tipo de conciliación:</label>
                                        <select id="tipoModificacion" 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="">-Selecciona-</option>
                                            <option value="CFDI">CFDI</option>
                                            <option value="POLIZA">Póliza</option>
                                        </select>
                                    </div>

                                    <!-- Sección CFDI -->
                                    <div id="seccionCFDI" class="hidden">
                                        <div class="mb-4">
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Seleccionar factura:</label>
                                            <select id="facturaSeleccionada" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2">
                                                <option value="">-Selecciona una factura-</option>
                                            </select>
                                        </div>
                                        @include('contabilidad.includes.conciliacionBancariaCreacionPago',['formasPago' => $formasPago, 'bancos' => $bancos, 'monedas' => $monedas])
                                    </div>

                                    <!-- Sección Póliza -->
                                    <div id="seccionPOLIZA" class="hidden">
                                        @include('contabilidad.includes.conciliacionBancariaCreacionPolizas',['tiposPolizas' => $tiposPolizas])
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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;
    }

    /* Estilos para el título de la sección */
    .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;
        border-bottom: 1px solid #e5e7eb !important;
    }

    .table-scroll {
        max-height: 650px;
        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;
    }

    .cursor-not-allowed {
        cursor: not-allowed !important;
    }

    /* Indicador visual para movimientos conciliados */
    .movimiento-conciliado {
        position: relative;
    }

    .movimiento-conciliado::after {
        content: "✓";
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        color: #16a34a;
        font-weight: bold;
        font-size: 14px;
    }

    #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($optionsBancos) !!}');

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

        $('.select2').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.descripcion,
                        id_cuenta_contable: cuenta.id_cuenta_contable
                    })
                );
            });

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

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

        })
    });

    function cambiarTipoOperacion() {
        var tipoOperacion = $('#tipoOperacion').val();

        // Ocultar ambos contenedores
        $('.contenedorArchivo').hide();
        $('#contenedorConciliacion').hide();

        // Mostrar el contenedor correspondiente
        if (tipoOperacion === 'subir') {
            $('.contenedorArchivo').show();
        } else if (tipoOperacion === 'reconsultar') {
            $('#contenedorConciliacion').show();
        }
    }

    function ejecutarConciliacionBancaria() {
        var tipoOperacion = $('#tipoOperacion').val();
        var tipoCuenta = $('#tipoCuentaFilter').val();
        var cuenta = $('#cuentaFilter').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;
        }

        if ((tipoCuenta == 'subir') && (!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);

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

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

        $.ajax({
            url: '{{ route("conciliacion-bancaria.ejecutar") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                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) {
                setTimeout(() => {
                    Swal.fire({
                        icon: 'success',
                        title: 'Conciliación exitosa',
                        text: response.message,
                        showConfirmButton: false,
                        timer: 2500
                    });
                    if (response.success && response.data) {
                        pintarInformacionConciliacion(response.data.data);
                    }
                }, 3000);


            },
            error: function(xhr) {
                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.success === false) {
                    let errores = xhr.responseJSON.errors;
                    let mensaje = xhr.responseJSON.message || 'Ocurrió un error de validación.';
                    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: 'Ocurrió un error al realizar la conciliación bancaria. Por favor, intenta de nuevo.',
                        confirmButtonText: 'Aceptar'
                    });
                }
            }
        });
    }

    function pintarInformacionConciliacion(data) {
        $('#contenedorInformacionConciliacion').show();
        pintarInformacionBanco(data.informacion_general);
        pintarInformacionReceptor(data.datos_receptor);
        pintarInformacionFinanciera(data.informacion_financiera);
        pintarTotalesMovimientos(data.movimientos_realizados);
        pintarTablaMovimientos(data.movimientos_realizados);
    }

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

            const totalMovimientos = movimientos.length;
            const totalCargosMovimientos = movimientos.reduce(function(acum, mov) {
                const val = parseFloat(mov.cargos || 0);
                return acum + (isNaN(val) ? 0 : val);
            }, 0);
            const totalAbonosMovimientos = movimientos.reduce(function(acum, mov) {
                const val = parseFloat(mov.abonos || 0);
                return acum + (isNaN(val) ? 0 : val);
            }, 0);

            $('#totalCantidadMovimientos').text(totalMovimientos);
            $('#totalCargosMovimientos').text('$' + totalCargosMovimientos.toLocaleString('es-MX', {
                minimumFractionDigits: 2
            }));
            $('#totalAbonosMovimientos').text('$' + totalAbonosMovimientos.toLocaleString('es-MX', {
                minimumFractionDigits: 2
            }));
        } else {
            $('#totalesMovimientos').hide();
            $('#totalCantidadMovimientos').text('0');
            $('#totalCargosMovimientos').text('$0.00');
            $('#totalAbonosMovimientos').text('$0.00');
        }
    }

    function pintarInformacionBanco(infoBanco) {
        let html = '';

        // Información esencial del banco
        if (infoBanco.nombre_banco) {
            html += `<div class="flex items-center py-1">
                <span class="text-sm font-semibold text-gray-700 w-30">Banco:</span>
                <span class="text-sm text-gray-900 ml-2">${infoBanco.nombre_banco}</span>
            </div>`;
        }

        if (infoBanco.numero_cuenta) {
            html += `<div class="flex items-center py-1">
                <span class="text-sm font-semibold text-gray-700 w-30">Cuenta:</span>
                <span class="text-sm text-gray-900 ml-2">${infoBanco.numero_cuenta}</span>
            </div>`;
        }

        if (infoBanco.periodo) {
            html += `<div class="flex items-center py-1">
                <span class="text-sm font-semibold text-gray-700 w-30">Periodo:</span>
                <span class="text-sm text-gray-900 ml-2">${infoBanco.periodo}</span>
            </div>`;
        }

        if (infoBanco.fecha_corte) {
            html += `<div class="flex items-center py-1">
                <span class="text-sm font-semibold text-gray-700 w-30">Corte:</span>
                <span class="text-sm text-gray-900 ml-2">${infoBanco.fecha_corte}</span>
            </div>`;
        }

        $('#informacionBanco').html(html);
    }

    function pintarInformacionReceptor(datosReceptor) {
        let html = '';

        // Información clave del receptor
        if (datosReceptor.nombre) {
            html += `<div class="flex items-center py-1">
                <span class="text-sm font-semibold text-gray-700 w-30">Nombre:</span>
                <span class="text-sm text-gray-900 ml-2 truncate" title="${datosReceptor.nombre}">${datosReceptor.nombre}</span>
            </div>`;
        }

        if (datosReceptor.rfc) {
            html += `<div class="flex items-center py-1">
                <span class="text-sm font-semibold text-gray-700 w-30">RFC:</span>
                <span class="text-sm text-gray-900 ml-2">${datosReceptor.rfc}</span>
            </div>`;
        }

        if (datosReceptor.clabe_interbancaria) {
            html += `<div class="flex items-center py-1">
                <span class="text-sm font-semibold text-gray-700 w-30">CLABE:</span>
                <span class="text-sm text-gray-900 ml-2">${datosReceptor.clabe_interbancaria}</span>
            </div>`;
        }

        if (datosReceptor.regimen_fiscal) {
            html += `<div class="flex items-center py-1">
                <span class="text-sm font-semibold text-gray-700 w-30">Régimen:</span>
                <span class="text-sm text-gray-900 ml-2 truncate" title="${datosReceptor.regimen_fiscal}">${datosReceptor.regimen_fiscal}</span>
            </div>`;
        }

        $('#informacionReceptor').html(html);
    }

    function pintarInformacionFinanciera(infoFinanciera) {
        let html = '';

        // Información básica
        if (infoFinanciera.moneda) {
            html += `<div class="flex items-center py-1">
                <span class="text-sm font-semibold text-gray-700 w-30">Moneda:</span>
                <span class="text-sm text-gray-900 ml-2">${infoFinanciera.moneda}</span>
            </div>`;
        }

        // Información de comportamiento - solo los datos más importantes
        if (infoFinanciera.comportamiento) {
            const comp = infoFinanciera.comportamiento;

            if (comp.saldo_anterior) {
                html += `<div class="flex items-center py-1">
                    <span class="text-sm font-semibold text-gray-700 w-30">Saldo inicial:</span>
                    <span class="text-sm text-gray-900 ml-2">$${parseFloat(comp.saldo_anterior).toLocaleString('es-MX', {minimumFractionDigits: 2})}</span>
                </div>`;
            }

            if (comp.saldo_final) {
                html += `<div class="flex items-center py-1">
                    <span class="text-sm font-semibold text-gray-700 w-30">Saldo final:</span>
                    <span class="text-sm text-gray-900 ml-2">$${parseFloat(comp.saldo_final).toLocaleString('es-MX', {minimumFractionDigits: 2})}</span>
                </div>`;
            }
        }

        $('#informacionFinanciera').html(html);
    }

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

    function pintarTablaMovimientos(movimientos) {
        // Guardar movimientos globalmente
        movimientosGlobales = movimientos;

        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";
                cursorClass = "cursor-not-allowed";
            } else {
                rowClasses += " hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50";
                hoverClasses = "hover:shadow-sm";
            }

            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} ${hoverClasses} ${cursorClass}">
                    <td class="px-4 py-3 text-[10px] text-gray-900">${movimiento.fecha_operacion || '-'}</td>
                    <td class="px-4 py-3 text-[10px] text-gray-900">${movimiento.descripcion || '-'}</td>
                    <td class="px-4 py-3 text-[10px] text-gray-900">${movimiento.referencia || '-'}</td>
                    <td class="px-4 py-3 text-right text-[10px] font-medium ${movimiento.cargos ? 'text-red-600' : 'text-gray-500'}">${movimiento.cargos ? '$' + parseFloat(movimiento.cargos).toLocaleString('es-MX', {minimumFractionDigits: 2}) : '-'}</td>
                    <td class="px-4 py-3 text-right text-[10px] font-medium ${movimiento.abonos ? 'text-green-600' : 'text-gray-500'}">${movimiento.abonos ? '$' + parseFloat(movimiento.abonos).toLocaleString('es-MX', {minimumFractionDigits: 2}) : '-'}</td>
                </tr>
            `;
            tbody.append(row);
        });

        // Agregar evento click a las filas
        $('#tablaMovimientosBody').off('click', 'tr').on('click', 'tr', function() {
            let index = $(this).data('index');
            let id = $(this).data('id');
            let referencia = $(this).data('referencia');
            let fecha = $(this).data('fecha');
            let conciliado = $(this).data('conciliado');
            tipoComprobante = $(this).data('tipo-comprobante');
            idMovimientoBancario = id;
            referenciaMovimientoBancario = referencia;
            fechaMovimientoBancario = fecha;

            // Validar si el movimiento ya está conciliado
            if (conciliado) {
                Swal.fire({
                    icon: 'info',
                    title: 'Movimiento ya conciliado',
                    html: `
                        <div class="text-left">
                            <p class="mb-3 text-gray-700">Este movimiento bancario ya ha sido conciliado previamente.</p>
                            <div class="bg-green-50 border border-green-200 rounded-lg p-3 mb-3">
                                <div class="flex items-center">
                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                    <span class="text-green-700 font-medium">Estado: Conciliado</span>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600">Los movimientos conciliados no pueden ser modificados nuevamente.</p>
                        </div>
                    `,
                    confirmButtonText: 'Entendido',
                    confirmButtonColor: '#0A415F',
                    showCloseButton: true,
                    allowOutsideClick: true
                });

                // Ocultar formulario de opciones y mostrar mensaje inicial
                $('#opcionesIniciales').removeClass('hidden');
                $('#formularioOpciones').addClass('hidden');

                // Limpiar selección visual
                $('#tablaMovimientosBody tr').removeClass('bg-gradient-to-r from-blue-100 to-indigo-100 border-l-4 border-blue-500');

                return;
            }

            seleccionarMovimiento(index);
        });
    }

    function seleccionarMovimiento(index) {
        // 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-index="${index}"]`).addClass('bg-gradient-to-r from-blue-100 to-indigo-100 border-l-4 border-blue-500');

        // Guardar movimiento seleccionado
        movimientoSeleccionado = movimientosGlobales[index];

        // Mostrar formulario de opciones
        $('#opcionesIniciales').addClass('hidden');
        $('#formularioOpciones').removeClass('hidden');

        // Mostrar información del movimiento seleccionado

        // Limpiar selecciones anteriores
        $('#tipoModificacion').val('');
        $('#facturaSeleccionada').val('');
        $('#seccionCFDI').addClass('hidden');
        $('#seccionPOLIZA').addClass('hidden');
    }


    // Eventos para el formulario de opciones
    $(document).ready(function() {
        // Evento para cambio de tipo de modificación
        $('#tipoModificacion').change(function() {
            let tipo = $(this).val();

            // Ocultar todas las secciones
            $('#seccionCFDI').addClass('hidden');
            $('#seccionPOLIZA').addClass('hidden');

            if (tipo === 'CFDI') {
                $('#seccionCFDI').removeClass('hidden');
                cargarFacturas();
            } else if (tipo === 'POLIZA') {
                $('#seccionPOLIZA').removeClass('hidden');
                generarPoliza(idMovimientoBancario, fechaMovimientoBancario, referenciaMovimientoBancario)
            }
        });
    });

    function cargarFacturas() {
        // Limpiar select de facturas
        $('#facturaSeleccionada').empty();
        $('#facturaSeleccionada').append('<option value="">-Selecciona una factura-</option>');

        // Cargar facturas desde el servidor
        $.ajax({
            url: '{{ route("conciliacion-bancaria.obtener-facturas") }}',
            type: 'GET',
            success: function(response) {
                if (response.success && response.data) {
                    response.data.forEach(function(factura) {
                        $('#facturaSeleccionada').append(
                            $('<option>', {
                                'data-tipo-comprobante': factura.tipo_comprobante == 1 ? 'emitidas' : 'recibidas',
                                value: factura.id,
                                text: `${factura.serie}-${factura.folio} - ${factura.razon_social_receptor || 'Sin cliente'}`
                            })
                        );
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'No se pudieron cargar las facturas.'
                });
            }
        });
    }
    var tipoComprobanteFactura = '';
    var id_factura = '';
    $('#facturaSeleccionada').change(function() {
        tipoComprobanteFactura = $(this).find(':selected').data('tipo-comprobante');
        $('.headerTipoComprobante').text(tipoComprobanteFactura == 'emitidas' ? 'Cliente' : 'Proveedor');
        generarPagoFactura($(this).find(':selected').val());
        id_factura = $(this).find(':selected').val();
    });

    function actualizarEstadoMovimientoConciliado(idMovimientoBancario, idPoliza, idFactura) {
        // Buscar la fila del movimiento en la tabla principal
        const filaMovimiento = $(`#tablaMovimientosBody tr[data-id="${idMovimientoBancario}"]`);

        if (filaMovimiento.length > 0) {
            // Remover clases anteriores
            filaMovimiento.removeClass('hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 hover:shadow-sm cursor-pointer');

            // Agregar clases de movimiento conciliado
            filaMovimiento.addClass('bg-green-50 movimiento-conciliado hover:bg-green-100 cursor-not-allowed');

            // Actualizar el atributo data-conciliado
            filaMovimiento.attr('data-conciliado', 'true');

            // Actualizar el movimiento en el array global
            const index = filaMovimiento.data('index');
            if (movimientosGlobales && movimientosGlobales[index]) {
                movimientosGlobales[index].conciliado = true;
                movimientosGlobales[index].poliza_id = idPoliza;
                movimientosGlobales[index].factura_id = idFactura;
            }
        }

        // Limpiar el formulario de opciones
        $('#opcionesIniciales').removeClass('hidden');
        $('#formularioOpciones').addClass('hidden');
        $('#tipoModificacion').val('');
        $('#seccionCFDI').addClass('hidden');
        $('#seccionPOLIZA').addClass('hidden');
    }
</script>
@endpush