@extends('layout.master', [
    'activePage' => $activePage,
    'categoria' => $categoria,
    'menuParent' => $menuParent,
    'titlePage' => $titlePage
])

@push('plugin-styles')
{!! Html::style('plugins/apex/apexcharts.css') !!}
{!! Html::style('assets/css/dashboard/dashboard_1.css') !!}
{!! Html::style('plugins/flatpickr/flatpickr.css') !!}
{!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
{!! Html::style('assets/css/elements/tooltip.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css"></link>

<style>

    .ui-autocomplete-input {
        font-size: 14px;
        z-index: 1000;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000 !important;
        float: left;
        display: none;
        min-width: 160px;
        width: 160px;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }
    .text-bold {
        font-weight: bold !important;
    }

    input[type="date"].form-control-sm {
        padding: .25rem .5rem !important;
    }

    input[type="file"].form-control-sm {
        padding: 0rem 1rem !important;
    }

    .btn-submit:hover {
        background-color: #E8C552 !important;
        color: black !important;
        border-color: #E8C552 !important
    }

    .results-table {
        margin: 40px !important;
        padding: .2rem !important;
        th {
            color: white !important;
            font-size: 12px !important;
        };
        td {
            text-align: center !important;

        };


        .table_body {
            margin-bottom: 10px !important;
        }
    }

    .icon-large {
        font-size: 1.5em !important;
    }

    .btn-pdf {
        background-color: #C62A2A !important;
        color: white;
        border-color: #C62A2A !important;
    }

    .input-importe {
        max-width: 15rem !important;
    }

    .input-impuesto {
        max-width: 9rem !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered  {
        display: contents;
    }

    .select2-container--bootstrap {
        min-width: 15rem !important;
    }

    .select2-container--bootstrap .select2-selection--single{
        max-height: 1.5rem !important;
        height: auto !important;
        font-size: smaller !important;
        margin-bottom: -.8rem
    }

    .hide-element {
        display: none !important;
    }

    .btn-link-xml:hover {
        color: #27b4eb !important;
    }

    .btn-link-pdf:hover {
        color: #C62A2A !important;
    }

    .btn-check {
        padding: 0rem .6rem !important
    }
</style>
@endpush

@section('content')
    <div class="sub-header-container">
        <header class="header navbar navbar-expand-sm">
            <ul class="navbar-nav flex-row">
                <li>
                    <div class="page-header">
                        <nav class="breadcrumb-one" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Operaciones')}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page"><span> {{__('PAGOS DE PROVEEDORES')}}</span></li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>

    <div class="layout-px-spacing mt-5" style="min-height: 50vh !important" id="contenedor_selector_operacion">
        <h4 class="card-title text-center">Por favor, seleccione la operación que desea realizar:</h4>
        <div class="d-flex justify-content-center mt-5 align-items-center">
            <button type="button" id="btnOpenCaptura" class="btn btn-primary btn-submit btn-lg d-inline-flex align-items-center mb-3 mr-5" title="Hacer una captura de pagos a proveedores." onclick="openCapturaPagos()">
                <i class="las la-money-check-alt icon-large"></i>
                <span class="ml-2">Capturar pagos</span>
            </button>
            <button type="button" id="btnOpenConsulta" class="btn btn-outlined-secondary btn-submit btn-lg d-inline-flex align-items-center mb-3" title="Consultar y cancelar pagos a proveedores." onclick="openConsultaPagos()">
                <i class="las la-search-dollar icon-large"></i>
                <span class="ml-2">Consultar/Cancelar</span>
            </button>
        </div>
    </div>

    <div class="layout-px-spacing" id="contenedor_captura" style="display: none !important">
        <div class="container-fluid p-0">
            <div class="d-flex justify-content-center mt-2 align-items-center">
                <button type="button" class="btn btn-outlined-secondary btn-submit btn-lg d-inline-flex align-items-center mb-3" title="Volver al menu de operaciones." onclick="volverAlSelector('contenedor_captura')">
                    <i class="las la-undo"></i>
                    <span class="ml-2">Volver</span>
                </button>

                <button type="button" class="btn btn-primary btn-submit btn-lg d-inline-flex align-items-center mb-3 ml-2" title="Restaura el formulario." onclick="cleanCapturaForm()">
                    <i class="las la-undo-alt"></i>
                    <span class="ml-2">Restaurar</span>
                </button>
            </div>

            <div class="row">
                <div class="card col-md-6">
                    <div class="card-body">
                        <h4 class="card-title">PROVEEDOR</h4>
                        <div class="row">
                            <input type="hidden" class="form-control form-control-sm" id="id_proveedor" name="id_proveedor">

                            <div class="col-md-2">
                                <label class="text-bold">Proveedor:</label>
                                <input type="text" class="form-control form-control-sm" id="proveedor_search" onkeydown="if (event.key === 'Enter') { searchProveedor(); } else { validateNumber(event); }">
                            </div>
                            <div class="col-md-2">
                                <button id="btnSearchProvider" class="btn btn-primary mt-4" type="button" onclick="searchProveedor()" disabled>Buscar</button>
                            </div>
                            <div class="col-md-8">
                                <label class="text-bold">Nombre:</label>
                                <input type="text" class="form-control form-control-sm bs-popover" id="name_proveedor" data-container="body" data-trigger="hover" data-content="Teclea el nombre del proveedor a buscar.">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <label class="text-bold">Domicilio:</label>
                                <textarea id="domicilio" class="form-control form-control-sm mr-2" cols="30" rows="1" readonly></textarea>
                            </div>

                            <div class="col-md-4">
                                <label class="text-bold">Colonia:</label>
                                <textarea id="colonia" class="form-control form-control-sm mr-2" cols="30" rows="1" readonly></textarea>
                            </div>

                            <div class="col-md-4">
                                <label class="text-bold">Pais:</label>
                                <input id="pais" type="text" class="form-control form-control-sm" readonly>
                            </div>
                        </div>

                        <div class="row d-flex justify-content-center">
                            <div class="col-md-6">
                                <label class="text-bold">Telefono:</label>
                                <input id="telefono" type="text" class="form-control form-control-sm" readonly>
                            </div>

                            <div class="col-md-6">
                                <label class="text-bold">Moneda:</label>
                                <input id="moneda" type="text" class="form-control form-control-sm" readonly>
                            </div>
                        </div>

                        <div id="divCurrency" class="row d-flex justify-content-center">
                            <div class="col-md-6" style="display: none;">
                                <label class="text-bold ">Ingresa el tipo de cambio:<span class="text-danger">*</span></label>
                                <input type="text" id="inputCurrency" class="form-control form-control-sm" oninput="formatoTipoCambio(this); unlockImporteInputs();">
                            </div>
                            <div class="col-md-6" style="display: none;">
                                <label class="text-bold ">Confirmar tipo de cambio:<span class="text-danger">*</span></label>
                                <input type="text" id="inputCurrencyConfirm" class="form-control form-control-sm" oninput="formatoTipoCambio(this); unlockImporteInputs();">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card col-md-6">
                    <div class="card-body">
                        <form action="#" method="post" id="frm_datos_trans">
                            <input id="id_moneda" name="id_moneda" type="hidden">
                            <input id="currency" name="currency" type="hidden">
                            <h4 class="card-title">DATOS CHEQUE / TRANSFERENCIA</h4>
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <label class="text-bold">Tipo de pago: <span class="text-danger">*</span></label>
                                    <select name="tipoPago" id="selectPayType" class="form-control form-control-sm" onchange="fillSelectCheckbooks('selectCheckbooks')" disabled required>
                                        <option value="" disabled selected>Seleccionar opcion...</option>
                                        <option value="transferencia">Transferencia</option>
                                        <option value="cheque">Cheque</option>
                                    </select>
                                </div>
                                <div class="col-md-8">
                                    <label class="text-bold">Chequera: <span class="text-danger">*</span></label>
                                    <select name="chequera" id="selectCheckbooks" class="form-control form-control-sm" onchange="unlockInvoiceInputs(this)" disabled required>
                                        <option value="" disabled selected>Seleccionar opcion...</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col">
                                    <label class="text-bold">Folio Cheque/Transferencia: <span class="text-danger">*</span></label>
                                    <input name="folioChequera" id="folioChequeTrans" type="text" class="form-control form-control-sm" onblur="validateInvoice()" onkeydown="validateNumber(event)"  disabled required>
                                </div>

                                <div class="col">
                                    <label class="text-bold">Folio PO. compra: </label>
                                    <input name="folioCompra" type="text" class="form-control form-control-sm" placeholder="Este dato es opcional..." onkeypress="validateFolioCompra(event); validateNumber(event)">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <label class="text-bold">{{ $nombreCampoAlmaPro }}: <span class="text-danger">*</span></label>
                                    <select name="proyecto" id="selectProyectos" class="form-control form-control-sm select2" disabled required>
                                        <option value="" disabled selected>Seleccionar opcion...</option>
                                        @foreach ($almacenes as $almacen)
                                            <option value="{{ $almacen->id }}">{{ $almacen->almacen . ' - ' . $almacen->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col d-flex justify-content-center">
                                    <label class="text-bold mr-2">¿Filtrar documentos por {{ strtolower($nombreCampoAlmaPro) }}?</label>
                                    <input type="checkbox" class="form-check" id="include_query">
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col">
                                    <label class="text-bold">Incluir comprobante (XML):</label>

                                    <div class="d-flex justify-content-center">
                                        <input id="file_xml" accept=".xml" type="file" onchange="readXML(this)" class="form-control form-control-sm form-control-file" disabled>
                                        <button type="button" id="btnRestoreFile" class="btn btn-danger btn-submit btn-sm d-inline-flex align-items-center ml-2" title="Limpiar archivo." onclick="resetFileInput(document.getElementById('file_xml'))" disabled>
                                            <i class="las la-times"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="row d-flex justify-content-center">
                                <div class="col-md-4">
                                    <label class="text-bold">Fecha (dia/mes/año): <span class="text-danger">*</span></label>
                                    <div class="input-group input-group-sm mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="las la-calendar icon-large"></i>
                                            </span>
                                        </div>
                                        <input id="fechaTrans" name="fecha" type="date" class="form-control form-control-sm" value="{{ $fecha_actual }}" disabled required>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="text-bold">Monto Total: <span class="text-danger">*</span></label>
                                    <div class="input-group input-group-sm mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                        </div>
                                        <input name="montoConFormato" id="monto" type="text" class="form-control form-control-sm" oninput="formatoMonto(this); aplicarCalculos(this)" onkeyup="validateMonto(this)" disabled required>
                                    </div>
                                </div>

                                <div class="col d-flex justify-content-center">
                                    <button id="btnLoadDocs" type="submit" class="btn btn-primary btn-submit d-inline-flex align-items-center mb-3 mt-1" title="Obtener documentos" disabled>
                                        <i class="las la-search icon-large mr-2"></i> Consultar
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="row d-flex justify-content-center">
                <div class="card col">
                    <div class="card-body">
                        <h4 class="card-title">APLICACIÓN</h4>

                        <div class="d-flex justify-content-center">
                            <button type="button" id="btnCancelLiquidate" class="btn btn-primary btn-submit ml-2" style="display: none;" onclick="cancelLiquidateAllDocuments()">Reiniciar importes</button>
                        </div>

                        <div class="results-table">
                            <table id="aplicacion_table" class="table table-responsive-sm table-sm">
                                <thead>
                                    <tr>
                                        @foreach ($camposAplicacion as $campo)
                                            <th style="text-align: center">{{ $campo }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody id="table_body">
                                </tbody>
                            </table>
                        </div>

                        <div id="divAnticipos" class="row d-flex justify-content-center">
                            <div class="col-md-4" style="display: none;">
                                <label class="text-bold">Monto del anticipo/excedente: <span class="text-danger">*</span></label>
                                <input id="montoAnticipo" type="text" class="form-control form-control-sm" oninput="formatoMonto(this); aplicarCalculos(this, true)">
                            </div>
                            <div class="col-md-4" style="display: none;">
                                <label class="text-bold">Tipo de plazo: <span class="text-danger">*</span></label>
                                <select id="selectLimitType" class="form-control form-control-sm">
                                    <option value="" selected>Seleccionar opcion...</option>
                                    @foreach ($tipos_plazos as $plazo)
                                        <option value="{{ $plazo->id }}">{{ $plazo->descripcion }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 d-flex justify-content-center">
                                <button id="btnAdvance" type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mt-4" title="Pagar un anticipo/excedente" onclick="showAdviceForm(this)" disabled>
                                    <i class="las la-money-check-alt icon-large mr-2"></i> Anticipo/excedente
                                </button>
                            </div>
                        </div>

                        <div id="resumen_pago" class="row d-flex justify-content-center mt-2">
                            <div class="col-md-4">
                                <label class="text-bold">Saldo acumulado:</label>
                                <input id="saldoAcumulado" type="text" class="form-control form-control-sm" value="0" readonly>
                            </div>
                            <div class="col-md-4">
                                <label class="text-bold">Diferencia:</label>
                                <input id="diferenciaSaldo" type="text" class="form-control form-control-sm" value="" readonly>
                            </div>
                            <div class="col-md-3 d-flex justify-content-center">
                                <button id="payDocuments" type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mt-4" title="Obtener documentos" onclick="pagarDocumentos()" disabled>
                                    <i class="las la-file-invoice-dollar icon-large mr-2"></i> Realizar el pago
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layout-px-spacing" id="contenedor_consulta" style="display: none !important">
        <div class="container-fluid p-0">
            <div class="row justify-content-center">
                <div class="card col-md-6">
                    <div class="card-body">
                        <form action="#" id="frm_consulta" method="post">
                            <h4 class="card-title">CONSULTA/CANCELACION DE PAGOS</h4>
                            <div class="row">
                                <div class="col-md-12">
                                    <label class="text-bold">Chequera: <span class="text-danger">*</span></label>
                                    <select name="chequera" id="selectChequeras" class="form-control form-control-sm select2" onchange="validateInputsConsultaPagos()" required></select></select>
                                </div>

                                <div class="col-md-12">
                                    <label class="text-bold">Folio Cheque/Transferencia: <span class="text-danger">*</span></label>
                                    <input name="folio" id="folioConsulta" type="text" class="form-control form-control-sm" onkeydown="validateNumber(event)" oninput="validateInputsConsultaPagos()" required>
                                </div>

                                <div class="col-md-12 justify-content-center mt-3">
                                    <div class="row justify-content-center">
                                        <button type="submit" id="btnConsultarPago" class="btn btn-primary btn-submit btn-lg d-inline-flex align-items-center mb-3" title="Consultar pago" disabled>
                                            <i class="las la-search-dollar icon-large"></i>
                                            <span class="ml-2">Consultar pago</span>
                                        </button>
                                        <button type="button" class="btn btn-outlined-secondary btn-submit btn-lg d-inline-flex align-items-center mb-3 ml-3" title="Volver al menu de operaciones." onclick="volverAlSelector('contenedor_consulta')">
                                            <i class="las la-undo"></i>
                                            <span class="ml-2">Volver</span>
                                        </button>
                                    </div>
                                </div>
                        </form>
                    </div>

                    <div id="info-pago" style="display: none !important">
                        <div class="col-md-12 justify-content-center">
                            <input type="hidden" id="id_pago" name="id_pago">
                            <h4 class="card-title">Información del pago</h4>
                            <div class="row">
                                <div class="col">
                                    <span class="text-bold" id="txtProveedor">Proveedor: </span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <span class="text-bold" id="txtBanco">Banco: </span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <span class="text-bold" id="txtFolio">Folio movimiento: </span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <span class="text-bold" id="txtChequera">Chequera: </span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <span class="text-bold" id="txtFecha">Fecha: </span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <span class="text-bold" id="txtMonto">Monto Total: </span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <span class="text-bold" id="txtEstatus">Estatus: </span>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <div class="col-md-12 justify-content-center mt-3">
                            <div class="row justify-content-center">
                                <button type="button" class="btn btn-primary btn-submit btn-lg d-inline-flex align-items-center mb-3" title="Limpiar formulario" onclick="cleanConsultaForm()">
                                    <i class="las la-search-dollar icon-large"></i>
                                    <span class="ml-2">Buscar otro pago</span>
                                </button>

                                <button type="button" class="btn btn-outlined-primary btn-submit btn-lg d-inline-flex align-items-center mb-3 ml-3" title="Descargar PDF" onclick="downloadPdfWithoutUrl()">
                                    <i class="las la-file-pdf icon-large"></i>
                                    <span class="ml-2">Descargar PDF</span>
                                </button>

                                <button id="btnCancelarPago" type="button" class="btn btn-pdf btn-submit btn-lg d-inline-flex align-items-center mb-3 ml-3" title="Cancelar pago" onclick="cancelPayment()">
                                    <i class="las la-ban icon-large"></i>
                                    <span class="ml-2">Cancelar pago</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('plugin-scripts')
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('plugins/table/datatable/datatables.js') !!}
@endpush

@push('custom-scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>

        const noContentMessageOptions = {
            icon: 'info',
            title: '¡Sin contenido!',
            text: 'La consulta no obtuvo ningún resultado.',
            confirmButtonText: 'Aceptar',
            customClass: {
                container: 'alert-in-modal'
            },
        }

        const noCheckbooksMessageOptions = {
            icon: 'info',
            title: '¡No se encontraron chequeras!',
            text: 'Por favor, inténtelo de nuevo más tarde.',
            confirmButtonText: 'Aceptar',
            customClass: {
                container: 'alert-in-modal'
            },
        }

        const noDocsFoundedMessageOptions = {
            icon: 'info',
            title: '¡No se encontraron documentos!',
            text: 'No se encontró ningún documento con estas caracteristicas.',
            confirmButtonText: 'Aceptar',
            customClass: {
                container: 'alert-in-modal'
            },
        }

        const noProvideerContentMessageOptions = {
            icon: 'info',
            title: '¡Sin resultados!',
            text: 'No se encontro ningún proveedor con esa información.',
            confirmButtonText: 'Aceptar',
            customClass: {
                container: 'alert-in-modal'
            },
        }

        const confirmProviderLockMessageOptions = {
            icon: 'warning',
            title: 'Seleccionar este proveedor?',
            text: '¡Se deshabilitaran los campos del proveedor!',
            showCancelButton: true,
            confirmButtonText: 'Seleccionar proveedor',
            cancelButtonText: 'Volver',
            customClass: {
                confirmButton: 'btn-primary btn-submit',
                cancelButton: 'btn-outlined-secondary '
            }
        }

        const ajaxErrorMessage = {
            icon: 'error',
            title: '¡Lo sentimos!',
            text: 'Ha ocurrido un error inesperado, intentelo de nuevo más tarde'
        }

        const importsNotValidMessage = {
            icon: 'warning',
            title: '¡Importes no validos!',
            text: 'Algunos importes no son válidos, por favor revise que la información sea correcta.'
        }

        const currencyNotValidMessage = {
            icon: 'warning',
            title: '¡Tipo de cambio inválido!',
            html: 'Por favor, <b>verifique</b> que los campos de tipo de cambio <b>coincidan</b>  y sean mayores a cero.'
        }

        const invoiceValidatedToast = {
            icon: 'success',
            title: '¡Folio validado!',
            text: 'Se ha validado el folio correctamente'
        }

        const paymentDoneSuccessMessage = {
            icon: 'success',
            title: '¡Pagos registrados!',
            showConfirmButton: false,
            allowOutsideClick: false,
        }

        const cancelPaymentSuccessMessage = {
            icon: 'success',
            title: '¡Acción realizada!',
            showConfirmButton: false,
            allowOutsideClick: false,
            timer: 1500,
            timerProgressBar: true,
        }

        const invoiceAlreadyExistsMessageOptions = {
            icon: 'warning',
            title: '¡Folio ya emitido!',
            text: '¡El folio ingresado ya ha sido emitido!'
        }

        const errorXMLUploaded = {
            icon: 'warning',
            title: '¡Problemas con el XML adjunto!',
        }

        const checkStatusSatResponseSuccess = {
            icon: 'info',
            title: '¡Consultado correctamente!',
        }

        const checkStatusSatResponseError = {
            icon: 'warning',
            title: '¡Fallo la consulta!',
        }

        const xmlMessageError = {
            icon: 'warning',
            title: '¡Se detectaron incongruencias en el comprobante adjunto!',
        }

        const advicesNotValidatedMessage = {
            icon: 'warning',
            title: '¡Anticipo no valido!',
            text: '¡Por favor, revise que los campos de anticipos/devoluciones esten llenados correctamente!'
        }

        const askForCurrencyMessage = {
            icon: 'question',
            title: '¿Deseas usar la moneda del proveedor?',
            html: 'El proveedor maneja una <b>moneda extranjera</b> ¿Deseas <b>usarla</b>?',
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: 'Usar moneda extranjera',
            denyButtonText: 'Usar moneda local',
            cancelButtonText: 'Cancelar',
            customClass: {
                confirmButton: 'btn-primary btn-submit',
            },
            allowOutsideClick: false,
        }

        const confirmCancelPaymentMessageOptions = {
            icon: 'warning',
            title: '¿Deseas cancelar el pago?',
            html: 'Presiona el boton <b>"Cancelar"</b> para continuar, o <b>"Volver"</b> para retoceder.',
            showCancelButton: true,
            showDenyButton: true,
            confirmButtonText: 'Cancelar pago',
            denyButtonText: 'Eliminar pago',
            cancelButtonText: 'Volver',
            customClass: {
                confirmButton: 'btn-danger btn-submit',
                cancelButton: 'btn-outlined-secondary',
                denyButtonText: 'btn-pdf btn-submit'
            },
            allowOutsideClick: false,
        }

        const Toast = Swal.mixin({
            toast: true,
            position: 'bottom-end',
            showConfirmButton: false,
            timer: 2500,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
                toast.addEventListener('click', () => {
                    Swal.close();
                });
            },
            customClass: {
                container: 'toast-index'
            }
        })

        let idProvider = 0;
        let showingAdvices = false;

        $(document).ready(() => {

            $(".select2").select2({
                theme: "bootstrap",
            });

            $('#name_proveedor').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{url('catalogos/proveedores/buscar-por-nombre')}}",
                        dataType: 'json',
                        data: {
                            nombre: request.term
                        },
                        success: function(data) {
                            response(data)
                        }
                    })
                },
                select: function(event, ui) {
                    searchProveedorById(ui.item.id);
                },
                selectFirst: true,
                minLength: 3
            });

            $('#frm_datos_trans').on('submit', function(event) {

                event.preventDefault();

                let formData = new FormData(this);

                formData.append('monto', formData.get('montoConFormato').replace(/[^\d.]/g, ''));
                formData.append('idProveedor', idProvider);

                formData.delete('montoConFormato');

                formData.append('include_query', $('#include_query').is(':checked') ? 1 : 0);

                const file = $('#file_xml')[0].files[0];

                if(file) {
                    formData.append('file', file);
                }

                $.ajax({
                    url: "{{ url('operaciones/pagos-proveedores/obtener-documentos') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                            $('#btnAdvance').attr('disabled', false);
                            $('#aplicacion_table').DataTable().clear().draw();

                            aplicarCalculos(document.getElementById('monto'))

                            if(jqXHR.status == 204) {
                                return Swal.fire(noDocsFoundedMessageOptions)
                            }
                            if(jqXHR.status == 202) {
                                xmlMessageError.text = res.message;
                                return Swal.fire(xmlMessageError)
                            }

                            fillApplicationTable(res.documentos, res.columnas);

                            if(res.monedasForaneas) {
                                $('#divCurrency div').show();
                                changeStateImporteInputs(true);
                                if($('#id_moneda').val() != 1) {
                                    $('#inputCurrency').focus();
                                }
                                unlockImporteInputs()
                            }

                            aplicarCalculos(document.getElementById('monto'))
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            if(error.status == 400) {
                                return Swal.fire(invoiceAlreadyExistsMessageOptions);
                            }

                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            })

            $('#folioConsulta').on('keypress', function(event) {
                if (event.which === 13) {
                    $('#frm_consulta').submit();
                }
            });

            $('#frm_consulta').on('submit', function(event) {
                event.preventDefault();

                let formData = new FormData(this);

                $.ajax({
                    url: "{{ url('operaciones/pagos-proveedores/buscar-pago') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            if(jqXHR.status == 204) {
                                return Swal.fire(noDocsFoundedMessageOptions)
                            }

                            fillPaymentInfo(res);
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            if(error.status == 400) {
                                return Swal.fire(invoiceAlreadyExistsMessageOptions);
                            }

                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            })
        });

        function fillDocumentsTable(documentos, columnas) {
            const columnKeys = Object.keys(columnas);
            const columns = columnKeys.map(function (key) {
                return columnas.length == key + 1 ? {
                    data: columnas[key],
                    render: $.fn.dataTable.render.text()
                } : {
                    data: columnas[key],
                }
            });

            $('#documentos_table').dataTable().fnDestroy();
            $('#documentos_table').dataTable({
                lengthMenu: [10, 20, 50, 100, 200, 500],
                processing: true,
                autoWidth: true,
                scrollX: true,
                scrollY: '200px',
                paging: false,
                data: documentos,
                columns: columns,
                order: [
                    [0, "asc"]
                ],
            });

            $('#documentos_table').DataTable().columns.adjust();
        }

        function fillApplicationTable(documentos, columnas) {
            const columnKeys = Object.keys(columnas);
            const columns = columnKeys.map(function (key) {
                return columnas.length == key + 1 ? {
                    data: columnas[key],
                    render: $.fn.dataTable.render.text()
                } : {
                    data: columnas[key],
                }
            });

            $('#btnLiquidate').show();
            $('#btnCancelLiquidate').show();

            $('#aplicacion_table').dataTable().fnDestroy();
            $('#aplicacion_table').dataTable({
                lengthMenu: [10, 20, 50, 100, 200, 500],
                processing: true,
                autoWidth: true,
                scrollX: true,
                scrollY: '200px',
                paging: false,
                data: documentos,
                columns: columns,
                order: [
                    [0, "asc"]
                ],
            });

            $('#aplicacion_table').DataTable().columns.adjust();
        }

        function showAdviceForm(button, newProvider = false) {
            if(!newProvider) {
                if(showingAdvices) {
                    button.text = "Cancelar"
                    $('#divAnticipos div').hide();
                    showingAdvices = false;
                    $('#divAnticipos input').val('');
                    $('#divAnticipos select').val('');
                } else {
                    button.text = "Anticipo/excedente"
                    $('#divAnticipos div').show();
                    showingAdvices = true;
                }
            } else {
                button.text = "Cancelar"
                $('#divAnticipos div').hide();
                showingAdvices = false;
                $('#divAnticipos input').val('');
                $('#divAnticipos select').val('');
            }

            aplicarCalculos(document.getElementById('montoAnticipo'), true)
        }

        function readXML(input) {
            const file = input.files[0];
            console.log(file);
            if (file && file.type === 'text/xml') {
                const reader = new FileReader();

                reader.onload = function(e) {
                    const contents = e.target.result;

                    // Parsear el contenido XML
                    const parser = new DOMParser();
                    const xmlDoc = parser.parseFromString(contents, "text/xml");

                    const namespaceURI = 'http://www.sat.gob.mx/Pagos20';
                    const pagos = xmlDoc.getElementsByTagNameNS(namespaceURI, 'Pago');

                    if(pagos.length > 0) {
                        const fechaPago = pagos[0].getAttribute('FechaPago');
                        const dateOnly = fechaPago.split('T')[0];

                        $('#fechaTrans').val(dateOnly)
                    }

                    const totales = xmlDoc.getElementsByTagNameNS(namespaceURI, 'Totales');

                    if(totales.length > 0) {
                        const montoTotal = totales[0].getAttribute('MontoTotalPagos');

                        $('#monto').val(aplicarRegexMonto(montoTotal))
                        console.log('432');
                        validateMonto(document.getElementById('monto'))
                    }
                };

                reader.readAsText(file);
            }
        }

        function cancelLiquidateAllDocuments() {
            let tabla = $('#aplicacion_table').DataTable();

            tabla.cells().every(function() {
                let cell = this;

                let input = cell.node().querySelector('input[name="importe"]');

                if (input) {
                    input.value = '';
                    aplicarCalculos(input)
                }
            });
        }

        function validateSearchProviderBtn(event) {
            $('#btnSearchProvider').attr('disabled', event.target.value == '' ? true : false);
        }

        function searchProveedor() {
            const proveedor = $('#proveedor_search').val();

            if(proveedor != '') {
                $.ajax({
                    url: "{{ url('operaciones/pagos-proveedores/obtener-proveedor-numero') }}",
                    data: {
                        numero: proveedor
                    },
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {

                            $("#loadingModal").modal("hide")

                            if(jqXHR.status == 204) {
                                clearProveedorCard();
                                return Swal.fire(noProvideerContentMessageOptions);
                            }
                            const proveedor = res.proveedor;

                            fillProveedorCard(proveedor);
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            }
        }

        function searchProveedorById(id) {
            $.ajax({
                url: "{{ url('operaciones/pagos-proveedores/obtener-proveedor-id') }}",
                data: {
                    id: id
                },
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {

                        $("#loadingModal").modal("hide")

                        if(jqXHR.status == 204) {
                            clearProveedorCard();
                            return Swal.fire(noProvideerContentMessageOptions);
                        }
                        const proveedor = res.proveedor;

                        fillProveedorCard(proveedor);
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function fillProveedorCard(proveedor) {
            $('#id_proveedor').val(proveedor['id']);
            $('#proveedor_search').val(proveedor['proveedor']);
            $('#name_proveedor').val(proveedor['nombre']);
            $('#domicilio').val(proveedor['domicilio']);
            $('#colonia').val(proveedor['colonia']);
            $('#pais').val(proveedor['pais']);
            $('#telefono').val(proveedor['telefono']);
            $('#moneda').val(proveedor['moneda']);

            if (proveedor['esMonedaExtranjera']) {
                Swal.fire(askForCurrencyMessage).then((result) => {
                    if (result.isConfirmed) {
                        $('#id_moneda').val(proveedor['id_moneda']);
                        $('#divCurrency div').show();
                    } else if (result.isDenied) {
                        $('#moneda').val('Pesos mexicanos');
                        $('#id_moneda').val(1);
                        $('#currency').val(0);
                        $('#currencyShowed').val(0);
                        $('#divCurrency div').hide();
                    } else {
                        clearProveedorCard();
                        $('#divCurrency div').hide();
                        return;
                    }
                    lockProvider();
                });
            } else {
                $('#id_moneda').val(proveedor['id_moneda']);
                $('#currency').val(0);
                $('#divCurrency div').hide();
                lockProvider();
            }
        }

        function clearProveedorCard(proveedor) {
            $('#id_proveedor').val('');
            $('#proveedor_search').val('');
            $('#name_proveedor').val('');
            $('#domicilio').val('');
            $('#colonia').val('');
            $('#pais').val('');
            $('#telefono').val('');
            $('#moneda').val('');
        }

        function lockProvider() {
            idProvider = $('#id_proveedor').val();

            $("#frm_datos_trans input").attr('disabled', true);
            $("#frm_datos_trans select").attr('disabled', true);
            $("#frm_datos_trans button").attr('disabled', true);
            $("#payDocuments").attr('disabled', true);

            $("#frm_datos_trans input[type='text']").val('');
            $("#frm_datos_trans select").val('');
            $("#selectProyectos").trigger('change');
            $('#selectCheckbooks option:not(:disabled)').remove();
            $("#selectPayType").attr('disabled', false);
            $('#btnAdvance').attr('disabled', true);

            $('#aplicacion_table').DataTable().clear().draw();
            showAdviceForm(document.getElementById('btnAdvance'), true)
        }

        function fillSelectCheckbooks(target, moneda = true) {

            $('#' + target + ' option:not(:disabled)').remove();

            $.ajax({
                url: "{{ url('operaciones/pagos-proveedores/obtener-datos-cheques') }}",
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                data: {
                    moneda: moneda ? $('#id_moneda').val() : null
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

                        if(jqXHR.status == 204) {
                            return Swal.fire(noCheckbooksMessageOptions);
                        }

                        const chequeras = res.chequeras;

                        chequeras.forEach((chequera) => {
                            $('#' + target).append($('<option>', {
                                value: chequera.id,
                                text: chequera.nombre
                            }));
                        })

                        $("#" + target).attr('disabled', false);
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function validateMonto(input) {
            const monto = parseFloat(input.value.replace(/[^\d.]/g, ''));
            $('#btnLoadDocs').attr('disabled', isNaN(monto) || monto <= 0);
        }

        function formatoTipoCambio(input) {
            input.value = aplicarRegexTipoCambio(input.value.replace(/[^\d.]/g, ''));
        }

        function aplicarRegexTipoCambio(monto) {
            let puntos = monto.match(/\./g);
            if (puntos && puntos.length > 1) {
                monto = monto.replace(/\./g, ''); // Elimina puntos adicionales
            }

            let partes = monto.split('.');
            partes[0] = partes[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');

            if (partes[1] && partes[1].length > 6) {
                partes[1] = partes[1].slice(0, 6);
            }
            monto = partes.join('.');

            return monto;
        }

        function unlockInvoiceInputs(input) {
            cleanCapturaForm(true);
            $("#folioChequeTrans").val('');

            if(input.value != '') {
                $("#folioChequeTrans").attr('disabled', false);
            }
        }

        function validateInvoice() {
            const folio = $('#folioChequeTrans').val();
            const idChequera = $('#selectCheckbooks').val();

            if(folio == '' || parseFloat(folio) == 0)
                return;

            $.ajax({
                url: "{{ url('operaciones/pagos-proveedores/validar-folio') }}",
                data: {
                    folio: folio,
                    idProveedor: idProvider,
                    idChequera: idChequera
                },
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

                        if(res.isValid === true) {
                            Toast.fire(invoiceValidatedToast)
                            $("#frm_datos_trans input").attr('disabled', false);
                            $('#btnRestoreFile').attr('disabled', false);
                            $("#selectProyectos").attr('disabled', false);
                            $('#selectProyectos').val($('#selectProyectos option').eq(1).val()).trigger('change');
                        } else {
                            Toast.fire(invoiceAlreadyExistsMessageOptions)
                            $('#folioChequeTrans').val('')
                            cleanCapturaForm(true)
                            $('#folioChequeTrans').attr('disabled', false);
                            $('#folioChequeTrans').focus();
                        }
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function aplicarCalculos(input, esAnticipo = false) {
            validarImportes(input);
            const saldoAcumulado = sumarSaldoAcumulado(esAnticipo);
            obtenerDiferencia(saldoAcumulado);
        }

        function validarImportes(input) {
            const montoMaximo = input.dataset.moneda != $('#id_moneda').val() ? (parseFloat(input.getAttribute('data-liquidacion')) * parseFloat($('#inputCurrency').val().replace(/[^\d.]/g, ''))).toFixed(2) : parseFloat(input.getAttribute('data-liquidacion'));
            let importe = parseFloat(input.value.replace(/[^\d.]/g, ''));
            if(importe > montoMaximo) {
                input.value = aplicarRegexMonto(montoMaximo)
            }
        }

        function changeStateImporteInputs(state) {
            let tabla = $('#aplicacion_table').DataTable();

            tabla.cells().every(function() {
                let cell = this;

                let input = cell.node().querySelector('input[name="importe"]');

                if (input) {
                    if(input.dataset.moneda != $('#id_moneda').val()) {
                        input.value = ''
                        input.disabled = state;
                    }
                    if(state) {
                        input.title = 'Ingresa un tipo de cambio antes de continuar...'
                    } else {
                        input.title = ''
                    }
                }
            });

            $('#saldoAcumulado').val('0');
            $('[data-type="internacional"]').attr('disabled', state);
        }

        function unlockImporteInputs() {
            const currency = parseFloat($('#inputCurrency').val().replace(/[^\d.]/g, ''));
            const confirmCurrency = parseFloat($('#inputCurrencyConfirm').val().replace(/[^\d.]/g, ''));

            if(currency <= 0 || confirmCurrency <= 0) {
                changeStateImporteInputs(true);
            } else {
                changeStateImporteInputs((currency != confirmCurrency) );
            }
        }

        function sumarSaldoAcumulado(esAnticipo) {
            let saldoAcumulado = 0;

            let tabla = $('#aplicacion_table').DataTable();
            const currency = parseFloat($('#inputCurrency').val().replace(/[^\d.]/g, ''));

            tabla.cells().every(function() {
                let cell = this;

                let input = cell.node().querySelector('input[name="importe"]');

                if (input) {
                    let importe = parseFloat(input.value.replace(/[^\d.]/g, ''));
                    if (!isNaN(importe)) {
                        saldoAcumulado += importe;
                    }
                }
            });

            if(esAnticipo) {
                const montoAnticipo = parseFloat($('#montoAnticipo').val().replace(/[^\d.]/g, ''));
                saldoAcumulado += isNaN(montoAnticipo) ? 0 : montoAnticipo
            }

            saldoAcumulado = isNaN(parseFloat(saldoAcumulado)) ? 0 : saldoAcumulado;

            $('#saldoAcumulado').val(aplicarRegexMonto(saldoAcumulado.toFixed(2)));
            return saldoAcumulado.toFixed(2);
        }


        function obtenerDiferencia(saldoAcumulado) {
            const montoInput = parseFloat($('#monto').val().replace(/[^\d.]/g, ''));
            const monto = isNaN(montoInput) ? 0 : montoInput;

            const diferenciaSaldo = parseFloat(monto - saldoAcumulado).toFixed(2);

            if(monto == 0) {
                $('#payDocuments').attr('disabled', true);
            } else {
                $('#payDocuments').attr('disabled', !isNaN(diferenciaSaldo) && diferenciaSaldo != 0);
            }

            $('#diferenciaSaldo').val(aplicarRegexMonto(diferenciaSaldo))
        }

        function liquidarDocumento(documento) {
            let input = $(`[data-documento="${documento}"]`)[0];
            const valor = parseFloat(input.getAttribute('data-liquidacion'));
            const currency = parseFloat($('#inputCurrency').val().replace(/[^\d.]/g, ''));

            if(!isNaN(valor)){
                if(input.dataset.moneda != $('#id_moneda').val()) {
                    if($('#id_moneda').val() == 1) {
                        input.value = aplicarRegexMonto((valor * currency).toFixed(2).toString());
                    } else {
                        input.value = aplicarRegexMonto((valor / currency).toFixed(2).toString());
                    }
                } else {
                    input.value = aplicarRegexMonto(valor.toString());
                }
                aplicarCalculos(input)
            }
        }

        function pagarDocumentos() {
            let tabla = $('#aplicacion_table').DataTable();
            let relacionDocumentoImporte = new Map();
            let importesValidos = true;

            tabla.cells().every(function() {
                let cell = this;

                let inputImporte = cell.node().querySelector('input[name="importe"]');

                if (inputImporte) {
                    const documento = inputImporte.getAttribute('data-documento')
                    const saldo = parseFloat(inputImporte.getAttribute('data-liquidacion'))
                    const importe = parseFloat(inputImporte.value.replace(/[^\d.]/g, ''));

                    if(!isNaN(importe) && importe > 0) {
                        if(inputImporte.dataset.moneda != $('#id_moneda').val()){
                            if(parseFloat(importe / parseFloat($('#inputCurrency').val())).toFixed(2) > saldo) {
                                importesValidos = false;
                                return;
                            }
                        } else {
                            if(importe > saldo) {
                                importesValidos = false;
                                return;
                            }
                        }

                        let inputIva = cell.node().querySelector('input[name="iva"]');
                        let importes = {};

                        if(inputIva) {
                            const valorInputIva = parseFloat(inputIva.value.replace(XXX));
                            if(valorInputIva > saldo) {
                                importesValidos = false;
                                return;
                            }

                            importes.iva = inputIva;
                        }

                        let inputIeps = cell.node().querySelector('input[name="ieps"]');

                        if(inputIeps) {
                            const valorInputIeps = parseFloat(inputIeps.value.replace(XXX));
                            if(valorInputIeps > saldo) {
                                importesValidos = false;
                                return;
                            }

                            importes.ieps = inputIeps;
                        }

                        let inputRIva = cell.node().querySelector('input[name="riva"]');

                        if(inputRIva) {
                            const valorInputRIva = parseFloat(inputRIva.value.replace(XXX));
                            if(valorInputRIva > saldo) {
                                importesValidos = false;
                                return;
                            }

                            importes.riva = inputRIva;
                        }

                        let inputRIsr = cell.node().querySelector('input[name="risr"]');

                        if(inputRIsr) {
                            const valorInputRIsr = parseFloat(inputRIsr.value.replace(XXX));
                            if(valorInputRIsr > saldo) {
                                importesValidos = false;
                                return;
                            }

                            importes.risr = inputRIsr;
                        }


                        importes.importe = importe

                        relacionDocumentoImporte.set(documento, JSON.stringify(importes))
                    }
                }
            });

            if(!importesValidos) {
                return Swal.fire(importsNotValidMessage)
            }

            if(!validateCurrencyInputs()) {
                return Swal.fire(currencyNotValidMessage)
            }

            let formData = new FormData($('#frm_datos_trans')[0]);

            Array.from(relacionDocumentoImporte).forEach(([documento, importe]) => {
                formData.append('documentos[]', documento);
                formData.append('importes[]', importe);
            });

            formData.append('monto', formData.get('montoConFormato').replace(/[^\d.]/g, ''));
            formData.append('idProveedor', idProvider);

            const tipoCambio = parseFloat($('#inputCurrency').val().replace(/[^\d.]/g, ''));
            const tipoCambioConfirmacion = parseFloat($('#inputCurrencyConfirm').val().replace(/[^\d.]/g, ''));

            formData.append('currency', tipoCambio === tipoCambioConfirmacion ? tipoCambio : 0);

            formData.delete('montoConFormato');

            if(showingAdvices) {
                if(validateAdvance()) {
                    const montoAdvance = parseFloat($('#montoAnticipo').val().replace(/[^\d.]/g, ''));
                    const tipoPlazo = $('#selectLimitType').val();

                    formData.append('montoAnticipo', montoAdvance);
                    formData.append('tipoPlazo', tipoPlazo);
                } else {
                    Swal.fire(advicesNotValidatedMessage);
                    return;
                }
            }

            $.ajax({
                url: "{{ url('operaciones/pagos-proveedores/pagar-documentos') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

                        paymentDoneSuccessMessage.html = `
                            Pagos <b>registrados correctamente</b> con el folio: <b>${$('#folioChequeTrans').val()}</b>. <br>
                            <button id="btnPdf" type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mt-4" title="Cerrar modal" onclick="closePaymentSuccessModal()">
                                Continuar
                            </button>

                            <button id="btnPdf" type="button" class="btn btn-pdf btn-submit d-inline-flex align-items-center mt-4" title="Descargar archivo PDF" onclick="downloadPdfWithUrl('${res.pdfUrl}', '${res.pdfFileName}')">
                                <i class="las la-file-pdf icon-large mr-2"></i> Descargar
                            </button>
                        `;

                        Swal.fire(paymentDoneSuccessMessage).then(() => {
                            cleanCapturaForm();
                        });
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

                        if(error.status == 422) {
                            Swal.fire(importsNotValidMessage);
                            return;
                        }

                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function validateAdvance() {
            return !isNaN(parseFloat($('#montoAnticipo').val().replace(/[^\d.]/g, ''))) && parseFloat($('#montoAnticipo').val().replace(/[^\d.]/g, '')) != 0 && $('#selectLimitType').val() != ''
        }

        function resetFileInput(fileInput) {
            fileInput.value = '';

            const newFileInput = fileInput.cloneNode();
            fileInput.parentNode.replaceChild(newFileInput, fileInput);
        }

        function cleanCapturaForm(onlyTransferInfo = false) {
            if(!onlyTransferInfo) {
                $('#contenedor_captura input[type="text"]').val('');
                $('#contenedor_captura select').val('');
                $("#selectProyectos").trigger('change');
                $('#contenedor_captura textarea').val('');

                $("#proveedor_search").attr('readonly', false);
                $("#name_proveedor").attr('readonly', false);
                $('#btnSearchProvider').attr('disabled', false);

                $("#selectPayType").attr('disabled', true);
                $("#selectCheckbooks").attr('disabled', true);
                $('#divCurrency div').hide();

                resetFileInput(document.getElementById('file_xml'));
                $('#file_xml').attr('disabled', true);
                $('#btnRestoreFile').attr('disabled', true);
                document.getElementById('proveedor_search').focus();
            }

            $("#folioChequeTrans").attr('disabled', true);
            $("#fechaTrans").attr('disabled', true);
            $("#monto").attr('disabled', true);

            $("#payDocuments").attr('disabled', true);

            $('#btnLiquidate').hide();
            $('#btnCancelLiquidate').hide();
            $('#btnAdvance').attr('disabled', true);

            $('#aplicacion_table').DataTable().clear().draw();
            validateMonto(document.getElementById('monto'));
        }

        function closePaymentSuccessModal() {
            Swal.close();
        }

        function downloadPdfWithUrl(url, fileName) {
            let link = document.createElement('a');
            link.href = url;
            link.download = fileName;

            // Descarga PDF
            link.click();
            link.remove();

            Swal.close();
        }

        function validateCurrencyInputs() {

            if($('#id_moneda').val() == 1) {
                return true;
            }
            const currency = parseFloat($('#inputCurrency').val().replace(/[^\d.]/g, ''));
            const currencyConfirm = parseFloat($('#inputCurrencyConfirm').val().replace(/[^\d.]/g, ''));

            return !(isNaN(currency) || isNaN(currencyConfirm) || currency <= 0 || currencyConfirm <= 0 || currency != currencyConfirm)
        }

        function openCapturaPagos() {
            $('#contenedor_captura').show();
            $('#contenedor_selector_operacion').hide();

            $('#aplicacion_table').dataTable().fnDestroy();
            $('#aplicacion_table').DataTable({scrollX: true, scrollY: '200px'});
            cleanCapturaForm();
        }

        function volverCapturaPagos() {
            $('#contenedor_comprobante').hide();
            $('#contenedor_captura').show();
        }

        function volverAlSelector(contenedor) {
            $('#' + contenedor).hide();
            $('#contenedor_selector_operacion').show();
            cleanCapturaForm();
        }

        function openConsultaPagos() {
            fillSelectCheckbooks('selectChequeras', false);
            $('#contenedor_consulta').show();
            $('#contenedor_selector_operacion').hide();
        }

        function validateInputsConsultaPagos() {
            $('#btnConsultarPago').attr('disabled', !$('#frm_consulta')[0].checkValidity());
        }

        function cleanConsultaForm() {
            $('#frm_consulta input').val('');
            $('#txtProveedor').children().remove();
            $('#txtEstatus').children().remove();
            $('#txtBanco').children().remove();
            $('#txtFolio').children().remove();
            $('#txtChequera').children().remove();
            $('#txtFecha').children().remove();
            $('#txtMonto').children().remove();
            validateInputsConsultaPagos();
            $('#info-pago').hide();
            $('#frm_consulta').show();
        }

        function fillPaymentInfo(info) {
            $('#frm_consulta').hide();
            $('#info-pago').show();
            $('#id_pago').val(info.id);
            $('#txtProveedor').append('<p class="text-normal">' + info.proveedor + '</p>');
            $('#txtBanco').append('<p class="text-normal"> ' + info.banco + '</p>');
            $('#txtFolio').append('<p class="text-normal"> ' + info.folio + '</p>');
            $('#txtEstatus').append('<p class="text-normal"> ' + info.estatus + '</p>');
            $('#txtChequera').append('<p class="text-normal"> ' + info.chequera + '</p>');
            $('#txtFecha').append('<p class="text-normal"> ' + info.fecha + '</p>');
            $('#txtMonto').append('<p class="text-normal"> $' + info.monto + '</p>');

            if(info.estatus == 'Cancelado')
                $('#btnCancelarPago').addClass('hide-element');
            else
                $('#btnCancelarPago').removeClass('hide-element');
        }

        function downloadPdfWithoutUrl() {
            const id = $('#id_pago').val();

            $.ajax({
                url: "{{ url('operaciones/pagos-proveedores/generar-pdf') }}",
                data: {
                    pago: id,
                },
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

                        downloadPdfWithUrl(res.pdfUrl, res.pdfFileName)
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function cancelPayment() {

            Swal.fire(confirmCancelPaymentMessageOptions).then((result) => {
                let action = '';
                let actionMesagge = '';

                if(result.isConfirmed) {
                    action =  'cancel';
                    actionMesagge =  'cancelado';
                } else if(result.isDenied){
                    action = 'delete';
                    actionMesagge = 'cancelado y eliminado';
                } else {
                    Swal.close();
                    return false;
                }

                const id = $('#id_pago').val();

                $.ajax({
                    url: "{{ url('operaciones/pagos-proveedores/cancelar-pago') }}",
                    type: "DELETE",
                    data: {
                        pago: id,
                        accion: action
                    },
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            cancelPaymentSuccessMessage.html = '¡El pago ha sido <b>' + actionMesagge + '</b> correctamente!';
                            Swal.fire(cancelPaymentSuccessMessage).then(() => {
                                cleanConsultaForm();
                            });
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            });
        }

        function validateFolioCompra(event) {
            const inputValue = event.target.value;

            if(inputValue.length > 9) {
                event.preventDefault();
            }
        }

        function validarDocumentoSat(id) {
            $.ajax({
                url: "{{ url('operaciones/pagos-proveedores/comprobar-estatus-sat') }}",
                data: {
                    id: id,
                },
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide");

                        if(jqXHR.status == 204) {
                            Swal.fire(noSatResponseMessage);
                            return
                        }

                        checkStatusSatResponseSuccess.text = res.message;
                        Swal.fire(checkStatusSatResponseSuccess);

                        if(res.estatus == 'vigente') {
                            $(`[data-icono="${id}"]`).removeClass().addClass('la la-check-circle').css({
                                'color': '#009900'
                            }).parent().attr('title', '¡Documento vigente!');
                        } else {
                            $(`[data-icono="${id}"]`).removeClass().addClass('la la-check-circle').css({
                                'color': '#FF0000'
                            }).parent().attr('title', '¡Documento cancelado!');
                        }
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

                        if(error.status == 500) {
                            Swal.fire(ajaxErrorMessage);
                            return
                        }

                        checkStatusSatResponseError.text = error.responseText;
                        Swal.fire(checkStatusSatResponseError);
                    }, 500);
                }
            })
        }
    </script>
@endpush