@extends('adminlte::page')

@section('plugins.Sweetalert2', true)
@section('plugins.Select1', true)
@section('plugins.Datatables', true)

@section('title', 'Intranet | Solicitud Pronto Pago De Relaciones Laborales')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')

    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-8">

                <div class="card card-primary card-tabs">

                    <div class="card-header p-0 pt-1">
                        <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Pronto De Pago Logistica</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="custom-tabs-one-profile-tab" data-toggle="pill" href="#custom-tabs-one-profile" role="tab" aria-controls="custom-tabs-one-profile" aria-selected="false">Datos Bancarios</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="custom-tabs-one-messages-tab" data-toggle="pill" href="#custom-tabs-one-messages" role="tab" aria-controls="custom-tabs-one-messages" aria-selected="false">Adjuntos</a>
                            </li>
                        </ul>
                    </div>

                    <form method="POST" action="{{ route('pronto-pago.store-solicitud-logistica') }}" id="formularioDeSolicitudProntoPago" enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <div class="tab-content" id="custom-tabs-one-tabContent">
                                <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                    <div class="form-group" id="contenedorDelCampoDescripcion">
                                        <label for="descripcion">Descripción</label>
                                        <textarea class="form-control" id="descripcion" name="descripcion" rows="3"></textarea>
                                        <div class="invalid-feedback" id="valicacionCampoDescripcion">

                                        </div>
                                    </div>

                                    <div id="contenedorDeTodosLosCamposReferentesAlTipoSolicitud">
                                        <div class="form-group">
                                            <label>Tipo De Solicitud</label>
                                            <select class="form-control listaDespegableConBuscador" id="campoTipoSolicitud" name="tipo_solicitud" data-live-search="true" onchange="establecerAccionCuandoSeCambieElTipoSolicitud(this)">
                                                <option value="">--Seleccionar Tipo Solicitud--</option>
                                                @foreach ($tiposSolicitudes as $tipoSolicitud)
                                                    @if (old('tipo_solicitud') == $tipoSolicitud)
                                                        <option selected value="{{ $tipoSolicitud }}">{{ $tipoSolicitud }}</option>
                                                    @else
                                                        <option value="{{ $tipoSolicitud }}">{{ $tipoSolicitud }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="valicacionCampoTipoSolicitud">

                                            </div>
                                        </div>

                                        <div class="form-group" id="contenedorCampoDescripcionTipoSolicitud" style="display: none;">
                                            <label for="descripcionTipoSolicitud">Descripción Tipo De Solicitud</label>
                                            <textarea class="form-control" id="descripcionTipoSolicitud" name="descripcion_tipo_solicitud" rows="3"></textarea>
                                            <div class="invalid-feedback" id="valicacionCampoDescripcionTipoSolicitud">

                                            </div>
                                        </div>

                                        <div class="form-group" id="contenedorCampoProveedor" style="display: none;">
                                            <label>Proveedor (Razon Social)</label>
                                            <select class="form-control listaDespegableConBuscador" id="campoProveedor" name="id_proveedor" data-live-search="true" onchange="habilitarBotonAgregarDatosBancarios(this)">
                                                <option value="">--Seleccionar Proveedor--</option>
                                                @foreach ($proveedores as $proveedor)
                                                    @if (old('id_proveedor') == $proveedor->id)
                                                        <option selected value="{{ $proveedor->id }}">{{ $proveedor->razon_social }}</option>
                                                    @else
                                                        <option value="{{ $proveedor->id }}">{{ $proveedor->razon_social }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="valicacionCampoProveedor">

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

                                    <div class="form-group">
                                        <label>Forma De Pago</label>
                                        <select class="form-control listaDespegableConBuscador" id="campoFormaDePago" name="forma_pago" data-live-search="true">
                                            <option value="">--Seleccionar Forma De Pago--</option>
                                            @foreach ($formasDePagos as $formaDePago)
                                                @if (old('forma_pago') == $formaDePago)
                                                    <option selected value="{{ $formaDePago }}">{{ $formaDePago }}</option>
                                                @else
                                                    <option value="{{ $formaDePago }}">{{ $formaDePago }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                        <div class="invalid-feedback" id="valicacionCampoFormaDePago">

                                        </div>
                                    </div>

                                    <fieldset class="fieldset-color-azul" id="fieldsetArticulo">
                                        <legend class="titulo-fieldset-color-azul" id="legendArticulo">Documento</legend>
                                        <div class="form-group">
                                            <label>Tipo De Documento</label>
                                            <select class="form-control listaDespegableConBuscador" id="campoTipoDocumento" name="tipo_documento" data-live-search="true" onchange="establecerAccionCuandoSeCambieElDocumento(this)">
                                                <option value="">--Seleccionar Tipo De Documento--</option>
                                                @foreach ($tiposDocumentos as $tipoDocumento)
                                                    @if (old('tipo_documento') == $tipoDocumento)
                                                        <option selected value="{{ $tipoDocumento }}">{{ $tipoDocumento }}</option>
                                                    @else
                                                        <option value="{{ $tipoDocumento }}">{{ $tipoDocumento }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="valicacionCampoTipoDocumento">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="numeroDocumento">Numero Documento</label>
                                            <input type="text" class="form-control" id="numeroDocumento" name="numero_documento" value="{{ old('numero_documento') }}">
                                            <div class="invalid-feedback" id="valicacionCampoNumeroDocumento">

                                            </div>
                                        </div>
                                        <input type="hidden" name="id_orden_compra" id="idOrdenCompra">

                                        <button type="button" onclick="abrirModalSeleccionarOc()" class="btn btn-primary" id="botonSeleccionarOrdenDeCompra" style="display: none;"><i class="fas fa-plus-square" style="margin-right: 2px;"></i> Seleccionar Orden De Compra </button>
                                        <button type="button" onclick="quitarOrdenDeCompra()" class="btn btn-danger" id="botonQuitarOrdenDeCompra" style="display: none;"><i class="fas fa-minus-square" style="margin-right: 2px;"></i> Quitar Orden De Compra </button>
                                    </fieldset>

                                    <div class="form-group">
                                        <label>Reembolsable</label>
                                        <select class="form-control listaDespegableConBuscador" id="campoReembolsable" name="reembolsable" data-live-search="true">
                                            <option value="">--Seleccionar Reembolsable--</option>
                                            @foreach ($reembolsables as $reembolsable)
                                                @if (old('reembolsable') == $reembolsable)
                                                    <option selected value="{{ $reembolsable }}">{{ $reembolsable }}</option>
                                                @else
                                                    <option value="{{ $reembolsable }}">{{ $reembolsable }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                        <div class="invalid-feedback" id="valicacionCampoReembolsable">

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>Centro De Costo</label>
                                        <select class="form-control listaDespegableConBuscador" id="idCentroCosto" name="id_centro_costo" data-live-search="true">
                                            <option value="">--Seleccionar Centro De Costo--</option>
                                            @foreach ($centrosCostos as $cc)
                                                @if (old('id_centro_costo') == $cc->id)
                                                    <option selected value="{{ $cc->id }}">{{ $cc->centro_costo }}</option>
                                                @else
                                                    <option value="{{ $cc->id }}">{{ $cc->centro_costo }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                        <div class="invalid-feedback" id="validarIdCentroCosto">

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="montoNetoTexto">Monto Neto</label>
                                        <input type="text" class="form-control" id="montoNetoTexto" name="monto_neto_texto" value="{{ old('monto_neto_texto') }}" onfocus="focusValorMontoNeto(this)" onblur="establecerValoresAlCampoMontoNeto(this)" onkeypress="return validarCampoQueSoloSeIngreseNumeros(event,this)">
                                        <div class="invalid-feedback" id="valicacionCampoMontoNetoTexto">

                                        </div>
                                    </div>
                                    <input type="hidden" name="monto_neto_numero" id="montoNetoNumero">
                                </div>

                                <div class="tab-pane fade" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">
                                    <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                        <div class="form-group">
                                            <label>Banco </label>
                                            <select class="form-control listaDespegableConBuscador" id="idBanco" name="id_banco" data-live-search="true">
                                                <option value="">--Seleccionar Nombre Del Banco--</option>
                                                @foreach ($bancos as $banco)
                                                    @if (old('id_banco') == $banco->id)
                                                        <option selected value="{{ $banco->id }}">{{ $banco->banco }}</option>
                                                    @else
                                                        <option value="{{ $banco->id }}">{{ $banco->banco }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="validarIdBanco">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Tipo De Cuenta </label>
                                            <select class="form-control listaDespegableConBuscador" name="tipo_cuenta_bancaria" id="tipoCuentaBancaria" data-live-search="true">
                                                <option value="">--Seleccionar Tipo De Cuenta Bancaria--</option>
                                                @foreach ($tiposCuentaBancarias as $tiposCuentaBancaria)
                                                    @if (old('tipo_cuenta_bancaria') == $tiposCuentaBancaria)
                                                        <option selected value="{{ $tiposCuentaBancaria }}">{{ $tiposCuentaBancaria }}</option>
                                                    @else
                                                        <option value="{{ $tiposCuentaBancaria }}">{{ $tiposCuentaBancaria }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="validarTipoCuentaBancaria">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Numero De Cuenta </label>
                                            <input type="text" class="form-control" id="numeroCuentaBancaria" name="numero_cuenta_bancaria" value="{{ old('numero_cuenta_bancaria') }}">
                                            <div class="invalid-feedback" id="validarNumeroCuentaBancaria">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Rut Cuenta Bancaria</label>
                                            <input type="text" class="form-control" name="rut_cuenta_bancaria" value="{{ old('rut_cuenta_bancaria') }}" id="rut2" onblur="cambiarCampoRutHaTexto(this)" onkeypress="return validarCampoRut(event,this)" onfocus="cambiarCampoRutHaNumero(this)">
                                            <div class="invalid-feedback" id="validarRutCuentaBancaria">

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

                                    <button type="button" class="btn btn-primary" id="botonDeAgregarDatosBancarios" style="display:none;" onclick="abrirModalSeleccionarDatosBancariosPreoveedor()"><i class="fas fa-money-check-alt" style="margin-right: 2px;"></i> Seleccionar Datos Bancarios </button>
                                </div>

                                <div class="tab-pane fade" id="custom-tabs-one-messages" role="tabpanel" aria-labelledby="custom-tabs-one-messages-tab">

                                    <div class="dt-responsive table-responsive">
                                        <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info">
                                            <thead>
                                                <tr role="row">
                                                    <th colspan="3" class="text-center">ARCHIVOS DEL PRONTO DE PAGO </th>
                                                </tr>
                                                <tr role="row">
                                                    <th>Acción</th>
                                                    <th>Archivo</th>
                                                    <th>Tipo</th>
                                                </tr>
                                            </thead>
                                            <tbody id="registroDeArchivos">
                                                <tr id="archivosNoDisponibleEnLaTabla">
                                                    <td colspan="3" class="text-center">No hay archivos disponibles en la tabla</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>


                                    <div class="form-group" id="contenedorDelSeleccionadorDeArchivo">
                                        <label>Seleccionar Archivos</label>
                                        <input type="file" class="form-control-file" id="a93541" onchange="GuardarArchivoAlSeleccionarlo(this)">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class=" card-footer">
                            <button type="button" class="btn btn-primary" id="botonDeCreacion" onclick="registrarProntoPago()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Crear Pronto Pago </button>
                            <a href="{{ route('pronto-pago.index') }}" role="button" class="btn btn-secondary mt-1"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                        </div>
                    </form>

                </div>

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

    <div class="modal fade" id="modalOrdenDeCompra" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form>
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #B08C1C; color:white;">
                        <h5 class="modal-title" id="tituloOrdenDeCompra">Listado De Ordenes De Compra </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">


                        <div class="table-responsive">
                            <table class="table" id="datatable-orden-compra" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Id Orden Compra</th>
                                        <th>Id Proveedor</th>
                                        <th>Número OC</th>
                                        <th>Fecha OC</th>
                                        <th>Razon Social Proveedor</th>
                                        <th>Nombre Del Generador De La OC</th>
                                        <th>Monto Total De La OC</th>
                                        <th>Sucursal</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" id="botonSeleccionarOc" onclick="seleccionarOrdenDeCompra()">Seleccionar </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade" id="modalDatosBancarios" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form>
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #B08C1C; color:white;">
                        <h5 class="modal-title" id="tituloDatosBancarios">Listado De Datos Bancarios </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive">
                            <table class="table" id="datatable-datos-bancarios" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Id Datos Bancarios</th>
                                        <th>Id Banco</th>
                                        <th>Proveedor</th>
                                        <th>Banco</th>
                                        <th>Tipo Cuenta Bancaria</th>
                                        <th>Numero Cuenta Bancario</th>
                                        <th>Rut Cuenta Bancario</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" id="botonSeleccionarDatoBancario" onclick="seleccionarDatoBancario()">Seleccionar </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop

@section('footer')
    <div class="float-right d-none d-sm-inline">
        Intranet
    </div>
    <strong>Copyright © 2021 <a href="http://guinezingenieria.cl/">GuiñezIngeniería.cl</a>.</strong>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/estilo-generico.css') }}">
    <style>
        .hide_column {
            display: none;
        }

        .kv-file-upload {
            display: none;
        }

        .contenedorParaVisualizarImagenDelArchivo {
            background-color: rgba(0, 0, 0, .8);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10000;
            display: grid;
            grid-template-rows: 10vh 90vh;
            color: white;

        }

        .contenedorVolver {
            padding-left: 10px;
            padding-right: 10px;
            display: grid;
            grid-template-columns: 90% 10%;
        }

        .contenedorDeImagenes {
            display: grid;
            grid-template-columns: 100%;
        }

        .tamanoImagen {
            max-width: 80%;
        }

        .tamanoIframe {
            width: 80%;
            height: 700px;
        }

        .tamanoIframeTxt {
            width: 80%;
            height: 700px;
            background-color: white;
            "

        }
    </style>
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>

    <script>
        $('#campoTipoSolicitud').selectpicker({
            dropupAuto: false,
        });
        $('#campoProveedor').selectpicker({
            dropupAuto: false,
        });
        $('#campoFormaDePago').selectpicker({
            dropupAuto: false,
        });
        $('#campoTipoDocumento').selectpicker({
            dropupAuto: false,
        });
        $('#campoReembolsable').selectpicker({
            dropupAuto: false,
        });
        $('#idCentroCosto').selectpicker({
            dropupAuto: false,
        });
        $('#idBanco').selectpicker({
            dropupAuto: false,
        });
        $('#tipoCuentaBancaria').selectpicker({
            dropupAuto: false,
        });
    </script>

    <script>
        var datatableOrdenesDeCompra = $("#datatable-orden-compra").DataTable({
            columnDefs: [{
                "targets": [0],
                "className": "hide_column"
            }, {
                "targets": [1],
                "className": "hide_column"
            }, ],
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route('orden-de-compra.obtener-registros-datatable-para-pronto-pago') }}',
                dataType: "json",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}"
                },
            },
            columns: [{
                    "data": "id",
                    "name": "id"
                },
                {
                    "data": "id_proveedor",
                    "name": "id_proveedor"
                },
                {
                    "data": "numero_oc",
                    "name": "numero_oc"
                },
                {
                    "data": "fecha_oc",
                    "name": "fecha_oc"
                },
                {
                    "data": "razon_social",
                    "name": "razon_social"
                },
                {
                    "data": "generador_de_la_oc",
                    "name": "generador_de_la_oc"
                },
                {
                    "data": "monto_total",
                    "name": "monto_total"
                }, {
                    "data": "sucursal",
                    "name": "sucursal"
                }
            ],
            select: {
                style: 'single'
            },
            orderCellsTop: true,
            //fixedHeader: true,
            lengthMenu: [
                [5, 10, 25, 50, 100, -1],
                [5, 10, 25, 50, 100, "Todos"],
            ],
            language: {
                processing: "Cargando Registros...",
                search: "Buscar",
                lengthMenu: "Mostrar_MENU_ Registros",
                info: "Mostrar desde _START_ hasta _END_ de _TOTAL_ registros",
                infoEmpty: "Opcion no disponible",
                infoFiltered: "",
                infoPostFix: "",
                loadingRecords: "Cargandos registros.",
                zeroRecords: "No hay datos disponibles en la tabla",
                emptyTable: "No hay datos disponibles en la tabla",
                paginate: {
                    first: "Primero",
                    previous: "Anterior",
                    next: "Siguiente",
                    last: "Ultimo",
                },
            },
            dom: "<'row'<'col-sm-4'l><'col-sm-4 d-flex justify-content-center' ><'col-sm-4'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-6'i><'col-sm-6'p>>"
        });

        $("#datatable-orden-compra thead tr").clone(true).appendTo("#datatable-orden-compra thead");

        $("#datatable-orden-compra thead tr:eq(1) th").each(function(i) {
            var title = $(this).text(); //es el nombre de la columna
            if (title != "Acción" && title != "Selección") {
                $(this).html(
                    '<input class="form-control" type="text" placeholder="Buscar ' + title + '" />'
                );
                $(this).removeClass("sorting");
                $(this).removeClass("sorting_asc");
                $(this).unbind();
                $(this).parent().attr('id', 'searchColumns');

                $("input", this).on("keyup change", function() {
                    if (datatableOrdenesDeCompra.column(i).search() !== this.value) {
                        datatableOrdenesDeCompra.column(i).search(this.value).draw();
                    }
                });
            } else {
                $(this).html("<div></div>");
                $(this).removeClass("sorting");
                $(this).removeClass("sorting_asc");
            }
        });
    </script>

    <script>
        var datatableDatosBancarios = $("#datatable-datos-bancarios").DataTable({
            columnDefs: [{
                "targets": [0],
                "className": "hide_column"
            }, {
                "targets": [1],
                "className": "hide_column"
            }, ],
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route('proveedor.obtener-registros-datatable-datos-bancarios') }}',
                dataType: "json",
                type: "POST",
                data: function(d) {
                    d._token = "{{ csrf_token() }} ";
                    d.proveedor = $('#campoProveedor').val();
                },
            },
            columns: [{
                    "data": "id",
                    "name": "id"
                },
                {
                    "data": "id_banco",
                    "name": "id_banco"
                },
                {
                    "data": "proveedor",
                    "name": "proveedor"
                },
                {
                    "data": "banco",
                    "name": "banco"
                },
                {
                    "data": "tipo_cuenta_bancaria",
                    "name": "tipo_cuenta_bancaria"
                },
                {
                    "data": "numero_cuenta_bancaria",
                    "name": "numero_cuenta_bancaria"
                },
                {
                    "data": "rut_cuenta_bancaria",
                    "name": "rut_cuenta_bancaria"
                }
            ],
            select: {
                style: 'single'
            },
            orderCellsTop: true,
            //fixedHeader: true,
            lengthMenu: [
                [5, 10, 25, 50, 100, -1],
                [5, 10, 25, 50, 100, "Todos"],
            ],
            language: {
                processing: "Cargando Registros...",
                search: "Buscar",
                lengthMenu: "Mostrar_MENU_ Registros",
                info: "Mostrar desde _START_ hasta _END_ de _TOTAL_ registros",
                infoEmpty: "Opcion no disponible",
                infoFiltered: "",
                infoPostFix: "",
                loadingRecords: "Cargandos registros.",
                zeroRecords: "No hay datos disponibles en la tabla",
                emptyTable: "No hay datos disponibles en la tabla",
                paginate: {
                    first: "Primero",
                    previous: "Anterior",
                    next: "Siguiente",
                    last: "Ultimo",
                },
            },
            dom: "<'row'<'col-sm-4'l><'col-sm-4 d-flex justify-content-center' ><'col-sm-4'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-6'i><'col-sm-6'p>>"
        });

        $("#datatable-datos-bancarios thead tr").clone(true).appendTo("#datatable-datos-bancarios thead");

        $("#datatable-datos-bancarios thead tr:eq(1) th").each(function(i) {
            var title = $(this).text(); //es el nombre de la columna
            if (title != "Acción" && title != "Selección") {
                $(this).html(
                    '<input class="form-control" type="text" placeholder="Buscar ' + title + '" />'
                );
                $(this).removeClass("sorting");
                $(this).removeClass("sorting_asc");
                $(this).unbind();
                $(this).parent().attr('id', 'searchColumns');

                $("input", this).on("keyup change", function() {
                    if (datatableDatosBancarios.column(i).search() !== this.value) {
                        datatableDatosBancarios.column(i).search(this.value).draw();
                    }
                });
            } else {
                $(this).html("<div></div>");
                $(this).removeClass("sorting");
                $(this).removeClass("sorting_asc");
            }
        });
    </script>

    <script>
        function establecerAccionCuandoSeCambieElTipoSolicitud(tipoSolicitud) {
            var valorTipoSolicitud = tipoSolicitud.value;
            switch (valorTipoSolicitud) {
                case "":
                    document.getElementById("contenedorDelCampoDescripcion").after(document.getElementById("contenedorDeTodosLosCamposReferentesAlTipoSolicitud"));
                    document.getElementById("contenedorCampoDescripcionTipoSolicitud").style.display = "none";
                    document.getElementById("contenedorCampoProveedor").style.display = "none";
                    if (document.getElementById("fieldsetCamposTipoSolicitud")) {
                        document.getElementById("fieldsetCamposTipoSolicitud").remove();
                    }
                    document.getElementById("botonDeAgregarDatosBancarios").style.display = "none";
                    break;
                case "Proveedores":
                    if (document.getElementById("fieldsetCamposTipoSolicitud")) {
                        $('#campoProveedor').selectpicker('val', "");
                        document.getElementById("contenedorCampoProveedor").style.display = "block";
                        document.getElementById("contenedorCampoDescripcionTipoSolicitud").style.display = "none";
                    } else {
                        var nuevoFieldset = document.createElement("fieldset");
                        //nuevoFieldset.style.cssText = 'padding:10px; border:2px solid #007bff; margin-bottom: 15px; border-radius: 10px 10px 10px 10px;';
                        nuevoFieldset.setAttribute('id', 'fieldsetCamposTipoSolicitud');
                        nuevoFieldset.setAttribute('class', 'fieldset-color-azul');
                        var nuevolegend = document.createElement("legend");
                        nuevolegend.setAttribute('class', 'titulo-fieldset-color-azul');
                        //nuevolegend.style.cssText = 'margin:0px; padding-right: 10px; padding-left: 10px;  background-color: #007bff; color:white; border-radius: 5px 5px 5px 5px;';
                        //nuevolegend.style.removeProperty('width');
                        var nuevoContenidolegend = document.createTextNode("Tipo De Solicitud");
                        nuevolegend.appendChild(nuevoContenidolegend);
                        nuevoFieldset.appendChild(nuevolegend);

                        document.getElementById("contenedorDelCampoDescripcion").after(nuevoFieldset);
                        $("#contenedorDeTodosLosCamposReferentesAlTipoSolicitud").appendTo("#fieldsetCamposTipoSolicitud");

                        $('#campoProveedor').selectpicker('val', "");
                        document.getElementById("contenedorCampoProveedor").style.display = "block";
                        document.getElementById("contenedorCampoDescripcionTipoSolicitud").style.display = "none";
                    }
                    break;
                case "Honorarios":
                    document.getElementById("contenedorDelCampoDescripcion").after(document.getElementById("contenedorDeTodosLosCamposReferentesAlTipoSolicitud"));
                    document.getElementById("contenedorCampoDescripcionTipoSolicitud").style.display = "none";
                    document.getElementById("contenedorCampoProveedor").style.display = "none";
                    if (document.getElementById("fieldsetCamposTipoSolicitud")) {
                        document.getElementById("fieldsetCamposTipoSolicitud").remove();
                    }
                    document.getElementById("botonDeAgregarDatosBancarios").style.display = "none";
                    break;
                case "Otros":
                    if (document.getElementById("fieldsetCamposTipoSolicitud")) {
                        document.getElementById("descripcionTipoSolicitud").value = "";
                        document.getElementById("contenedorCampoDescripcionTipoSolicitud").style.display = "block";
                        document.getElementById("contenedorCampoProveedor").style.display = "none";
                        document.getElementById("botonDeAgregarDatosBancarios").style.display = "none";
                    } else {
                        var nuevoFieldset = document.createElement("fieldset");
                        //nuevoFieldset.style.cssText = 'padding:10px; border:2px solid #007bff; margin-bottom: 15px; border-radius: 10px 10px 10px 10px;';
                        nuevoFieldset.setAttribute('id', 'fieldsetCamposTipoSolicitud');
                        nuevoFieldset.setAttribute('class', 'fieldset-color-azul');
                        var nuevolegend = document.createElement("legend");
                        nuevolegend.setAttribute('class', 'titulo-fieldset-color-azul');
                        //nuevolegend.style.cssText = 'margin:0px; padding-right: 10px; padding-left: 10px;  background-color: #007bff; color:white; border-radius: 5px 5px 5px 5px;';
                        //nuevolegend.style.removeProperty('width');
                        var nuevoContenidolegend = document.createTextNode("Tipo De Solicitud");
                        nuevolegend.appendChild(nuevoContenidolegend);
                        nuevoFieldset.appendChild(nuevolegend);

                        document.getElementById("contenedorDelCampoDescripcion").after(nuevoFieldset);
                        $("#contenedorDeTodosLosCamposReferentesAlTipoSolicitud").appendTo("#fieldsetCamposTipoSolicitud");

                        document.getElementById("descripcionTipoSolicitud").value = "";
                        document.getElementById("contenedorCampoDescripcionTipoSolicitud").style.display = "block";
                        document.getElementById("contenedorCampoProveedor").style.display = "none";
                        document.getElementById("botonDeAgregarDatosBancarios").style.display = "none";
                    }
                    break;
            }
        }

        function establecerAccionCuandoSeCambieElDocumento(documento) {
            var valorDocumento = documento.value;
            switch (valorDocumento) {
                case "":
                    document.getElementById("botonSeleccionarOrdenDeCompra").style.display = "none";
                    document.getElementById("botonQuitarOrdenDeCompra").style.display = "none";
                    document.getElementById("numeroDocumento").removeAttribute("readonly");
                    document.getElementById("numeroDocumento").value = "";
                    break;
                case "Factura Electronica":
                    document.getElementById("botonSeleccionarOrdenDeCompra").style.display = "none";
                    document.getElementById("botonQuitarOrdenDeCompra").style.display = "none";
                    document.getElementById("numeroDocumento").removeAttribute("readonly");
                    document.getElementById("numeroDocumento").value = "";
                    break;
                case "Factura Exenta Electronica":
                    document.getElementById("botonSeleccionarOrdenDeCompra").style.display = "none";
                    document.getElementById("botonQuitarOrdenDeCompra").style.display = "none";
                    document.getElementById("numeroDocumento").removeAttribute("readonly");
                    document.getElementById("numeroDocumento").value = "";
                    break;
                case "Boleta De Honorarios":
                    document.getElementById("botonSeleccionarOrdenDeCompra").style.display = "none";
                    document.getElementById("botonQuitarOrdenDeCompra").style.display = "none";
                    document.getElementById("numeroDocumento").removeAttribute("readonly");
                    document.getElementById("numeroDocumento").value = "";
                    break;
                case "Orden De Compra":
                    document.getElementById("botonSeleccionarOrdenDeCompra").style.display = "inline-block";
                    document.getElementById("botonQuitarOrdenDeCompra").style.display = "none";
                    document.getElementById("numeroDocumento").removeAttribute("readonly");
                    document.getElementById("numeroDocumento").value = "";
                    break;
            }
        }

        function validarCampoQueSoloSeIngreseNumeros(event, cantidad) {
            if (event.key != 1 && event.key != 2 && event.key != 3 && event.key != 4 && event.key != 5 && event.key != 6 && event.key != 7 && event.key != 8 && event.key != 9 && event.key != 0) {
                return false;
            } else {
                return true;
            }
        }

        function establecerValoresAlCampoMontoNeto(monto) {
            if (monto.value.trim() != "") {
                document.getElementById("montoNetoNumero").value = monto.value.trim().replace(",", ".");
                monto.value = monto.value.replace(",", ".");
                var formatoMonedaEntero = new Intl.NumberFormat("es-CL", {
                    style: "currency",
                    currency: "CLP",
                })

                var valor = formatoMonedaEntero.format(monto.value.trim());
                valor = valor.replace("$", "");
                valor = valor.replace("CLP", "");
                document.getElementById("montoNetoTexto").value = "CLP $ " + valor;
            }else{
                document.getElementById("montoNetoNumero").value="";
            }
        }

        function focusValorMontoNeto(monto) {
            document.getElementById("montoNetoTexto").value = document.getElementById("montoNetoNumero").value
        }

        function habilitarBotonAgregarDatosBancarios(proveedor) {
            if (proveedor.value != "" && proveedor.value != null) {
                datatableDatosBancarios.draw();
                document.getElementById("botonDeAgregarDatosBancarios").style.display = "block";
            } else {
                datatableDatosBancarios.draw();
                document.getElementById("botonDeAgregarDatosBancarios").style.display = "none";
            }
        }
    </script>

    <script>
        function getDV(numero) {
            nuevo_numero = numero.toString().split("").reverse().join("");
            for (i = 0, j = 2, suma = 0; i < nuevo_numero.length; i++, ((j == 7) ? j = 2 : j++)) {
                suma += (parseInt(nuevo_numero.charAt(i)) * j);
            }
            n_dv = 11 - (suma % 11);
            return ((n_dv == 11) ? 0 : ((n_dv == 10) ? "K" : n_dv));
        }

        function cambiarCampoRutHaNumero(campo) {
            campo.setAttribute("maxlength", "9");
            switch (campo.value.length) {
                case 2:
                    var rutNumerico = campo.value.slice(1, 2);
                    campo.value = rutNumerico;
                    break;
                case 3:
                    var rutNumerico1 = campo.value.slice(0, 1);
                    var rutNumerico2 = campo.value.slice(2, 3);
                    campo.value = rutNumerico1 + rutNumerico2;
                    break;
                case 4:
                    var rutNumerico1 = campo.value.slice(0, 2);
                    var rutNumerico2 = campo.value.slice(3, 4);
                    campo.value = rutNumerico1 + rutNumerico2;
                    break;
                case 5:
                    var rutNumerico1 = campo.value.slice(0, 3);
                    var rutNumerico2 = campo.value.slice(4, 5);
                    campo.value = rutNumerico1 + rutNumerico2;
                    break;
                case 7:
                    var rutNumerico1 = campo.value.slice(0, 1);
                    var rutNumerico2 = campo.value.slice(2, 5);
                    var rutNumerico3 = campo.value.slice(6, 7);
                    campo.value = rutNumerico1 + rutNumerico2 + rutNumerico3;
                    break;
                case 8:
                    var rutNumerico1 = campo.value.slice(0, 2);
                    var rutNumerico2 = campo.value.slice(3, 6);
                    var rutNumerico3 = campo.value.slice(7, 8);
                    campo.value = rutNumerico1 + rutNumerico2 + rutNumerico3;
                    break;
                case 9:
                    var rutNumerico1 = campo.value.slice(0, 3);
                    var rutNumerico2 = campo.value.slice(4, 7);
                    var rutNumerico3 = campo.value.slice(8, 9);
                    campo.value = rutNumerico1 + rutNumerico2 + rutNumerico3;
                    break;
                case 11:
                    var rutNumerico1 = campo.value.slice(0, 1);
                    var rutNumerico2 = campo.value.slice(2, 5);
                    var rutNumerico3 = campo.value.slice(6, 9);
                    var rutNumerico4 = campo.value.slice(10, 11);
                    campo.value = rutNumerico1 + rutNumerico2 + rutNumerico3 + rutNumerico4;
                    break;
                case 12:
                    var rutNumerico1 = campo.value.slice(0, 2);
                    var rutNumerico2 = campo.value.slice(3, 6);
                    var rutNumerico3 = campo.value.slice(7, 10);
                    var rutNumerico4 = campo.value.slice(11, 12);
                    campo.value = rutNumerico1 + rutNumerico2 + rutNumerico3 + rutNumerico4;
                    break;
            }
        }

        function cambiarCampoRutHaTexto(campo) {
            campo.setAttribute("maxlength", "12");
            switch (campo.value.length) {
                case 1:
                    var rutNumerico = campo.value;
                    campo.value = "-" + rutNumerico;
                    break;
                case 2:
                    var rutNumerico1 = campo.value.slice(0, 1);
                    var rutNumerico2 = campo.value.slice(1, 2);
                    campo.value = rutNumerico1 + "-" + rutNumerico2;
                    break;
                case 3:
                    var rutNumerico1 = campo.value.slice(0, 2);
                    var rutNumerico2 = campo.value.slice(2, 3);
                    campo.value = rutNumerico1 + "-" + rutNumerico2;
                    break;
                case 4:
                    var rutNumerico1 = campo.value.slice(0, 3);
                    var rutNumerico2 = campo.value.slice(3, 4);
                    campo.value = rutNumerico1 + "-" + rutNumerico2;
                    break;
                case 5:
                    var rutNumerico1 = campo.value.slice(0, 1);
                    var rutNumerico2 = campo.value.slice(1, 4);
                    var rutNumerico3 = campo.value.slice(4, 5);
                    campo.value = rutNumerico1 + "." + rutNumerico2 + "-" + rutNumerico3;
                    break;
                case 6:
                    var rutNumerico1 = campo.value.slice(0, 2);
                    var rutNumerico2 = campo.value.slice(2, 5);
                    var rutNumerico3 = campo.value.slice(5, 6);
                    campo.value = rutNumerico1 + "." + rutNumerico2 + "-" + rutNumerico3;
                    break;
                case 7:
                    var rutNumerico1 = campo.value.slice(0, 3);
                    var rutNumerico2 = campo.value.slice(3, 6);
                    var rutNumerico3 = campo.value.slice(6, 7);
                    campo.value = rutNumerico1 + "." + rutNumerico2 + "-" + rutNumerico3;
                    break;
                case 8:
                    var rutNumerico1 = campo.value.slice(0, 1);
                    var rutNumerico2 = campo.value.slice(1, 4);
                    var rutNumerico3 = campo.value.slice(4, 7);
                    var rutNumerico4 = campo.value.slice(7, 8);
                    campo.value = rutNumerico1 + "." + rutNumerico2 + "." + rutNumerico3 + "-" + rutNumerico4;
                    break;
                case 9:
                    var rutNumerico1 = campo.value.slice(0, 2);
                    var rutNumerico2 = campo.value.slice(2, 5);
                    var rutNumerico3 = campo.value.slice(5, 8);
                    var rutNumerico4 = campo.value.slice(8, 9);
                    campo.value = rutNumerico1 + "." + rutNumerico2 + "." + rutNumerico3 + "-" + rutNumerico4;
                    break;
            }
        }

        function validarCampoRut(event, campoRut) {
            if (event.key != 1 && event.key != 2 && event.key != 3 && event.key != 4 && event.key != 5 && event.key != 6 && event.key != 7 && event.key != 8 && event.key != 9 && event.key != 0 && event.key != "k" && event.key != "K") {
                return false;
            } else {
                if (campoRut.value.length > 8) {
                    return false;
                } else {
                    return true;
                }
            }
        }
    </script>

    <script>
        function visualizarArchivoDeLaordenDeCompra(archivo, tipo) {
            var body = document.getElementsByTagName("body")[0];
            var html = document.getElementsByTagName("html")[0];
            var contenedor = document.createElement("div");
            var contenerdorVolver = document.createElement("div");
            var contenerdorDeImagenes = document.createElement("div");

            if (tipo == "imagen") {
                var elementoImagen = document.createElement("img");
                var contenerdorImg = document.createElement("div");

                elementoImagen.setAttribute("src", archivo);
                elementoImagen.setAttribute("class", "tamanoImagen");
                elementoImagen.setAttribute("id", "imagenDelArchivo");
                contenerdorImg.setAttribute("style", "text-align: center;");

                contenedor.setAttribute("class", "contenedorParaVisualizarImagenDelArchivo");
                contenedor.setAttribute("id", "contenedorParaVisualizarImagenDelArchivo");
                contenerdorVolver.setAttribute("class", "contenedorVolver");
                contenerdorDeImagenes.setAttribute("class", "contenedorDeImagenes");

                contenerdorVolver.innerHTML =
                    "<div></div>" +
                    '<div style="display: flex; justify-content: center; align-items: center; "><button onClick="cerrarVisualizarDeArchivo()" type="button" style=" border: 0;padding: 0px; background-color: transparent;  margin: 0; color:white; cursor:pointer;"><i class="fas fa-times"></i></button></div>';

                contenerdorImg.appendChild(elementoImagen);

                contenerdorDeImagenes.appendChild(contenerdorImg);

                contenedor.appendChild(contenerdorVolver);
                contenedor.appendChild(contenerdorDeImagenes);
                body.appendChild(contenedor);

                var tamanoLetraVolver = Math.round(contenerdorVolver.offsetHeight * 0.8);
                contenerdorVolver.style.fontSize = tamanoLetraVolver + "px";
                contenerdorDeImagenes.style.fontSize = tamanoLetraVolver + "px";

                setTimeout(function() {
                    if (elementoImagen.offsetHeight > html.offsetHeight) {
                        var alturaDePantalla = elementoImagen.offsetHeight + contenerdorVolver.offsetHeight + 50;
                        contenedor.style.height = alturaDePantalla + "px";
                    } else {
                        contenedor.style.height = html.offsetHeight + "px";
                    }
                }, 100);
            }

            if (tipo == "pdf") {
                var elementoImagen = document.createElement("iframe");
                var contenerdorImg = document.createElement("div");

                elementoImagen.setAttribute("src", archivo);
                elementoImagen.setAttribute("class", "tamanoIframe");
                elementoImagen.setAttribute("id", "imagenDelArchivo");
                contenerdorImg.setAttribute("style", "text-align: center;");

                contenedor.setAttribute("class", "contenedorParaVisualizarImagenDelArchivo");
                contenedor.setAttribute("id", "contenedorParaVisualizarImagenDelArchivo");
                contenerdorVolver.setAttribute("class", "contenedorVolver");
                contenerdorDeImagenes.setAttribute("class", "contenedorDeImagenes");

                contenerdorVolver.innerHTML =
                    "<div></div>" +
                    '<div style="display: flex; justify-content: center; align-items: center; "><button onClick="cerrarVisualizarDeArchivo()" type="button" style=" border: 0;padding: 0px; background-color: transparent;  margin: 0; color:white; cursor:pointer;"><i class="fas fa-times"></i></button></div>';

                contenerdorImg.appendChild(elementoImagen);

                contenerdorDeImagenes.appendChild(contenerdorImg);

                contenedor.appendChild(contenerdorVolver);
                contenedor.appendChild(contenerdorDeImagenes);
                body.appendChild(contenedor);

                var tamanoLetraVolver = Math.round(contenerdorVolver.offsetHeight * 0.8);
                contenerdorVolver.style.fontSize = tamanoLetraVolver + "px";
                contenerdorDeImagenes.style.fontSize = tamanoLetraVolver + "px";

                setTimeout(function() {
                    if (elementoImagen.offsetHeight > html.offsetHeight) {
                        var alturaDePantalla = elementoImagen.offsetHeight + contenerdorVolver.offsetHeight + 50;
                        contenedor.style.height = alturaDePantalla + "px";
                    } else {
                        contenedor.style.height = html.offsetHeight + "px";
                    }
                }, 100);
            }

            if (tipo == "txt") {
                var elementoImagen = document.createElement("iframe");
                var contenerdorImg = document.createElement("div");

                elementoImagen.setAttribute("src", archivo);
                elementoImagen.setAttribute("class", "tamanoIframeTxt");
                elementoImagen.setAttribute("id", "imagenDelArchivo");
                contenerdorImg.setAttribute("style", "text-align: center; ");

                contenedor.setAttribute("class", "contenedorParaVisualizarImagenDelArchivo");
                contenedor.setAttribute("id", "contenedorParaVisualizarImagenDelArchivo");
                contenerdorVolver.setAttribute("class", "contenedorVolver");
                contenerdorDeImagenes.setAttribute("class", "contenedorDeImagenes");

                contenerdorVolver.innerHTML =
                    "<div></div>" +
                    '<div style="display: flex; justify-content: center; align-items: center; "><button onClick="cerrarVisualizarDeArchivo()" type="button" style=" border: 0;padding: 0px; background-color: transparent;  margin: 0; color:white; cursor:pointer;"><i class="fas fa-times"></i></button></div>';

                contenerdorImg.appendChild(elementoImagen);

                contenerdorDeImagenes.appendChild(contenerdorImg);

                contenedor.appendChild(contenerdorVolver);
                contenedor.appendChild(contenerdorDeImagenes);
                body.appendChild(contenedor);

                var tamanoLetraVolver = Math.round(contenerdorVolver.offsetHeight * 0.8);
                contenerdorVolver.style.fontSize = tamanoLetraVolver + "px";
                contenerdorDeImagenes.style.fontSize = tamanoLetraVolver + "px";

                setTimeout(function() {
                    if (elementoImagen.offsetHeight > html.offsetHeight) {
                        var alturaDePantalla = elementoImagen.offsetHeight + contenerdorVolver.offsetHeight + 50;
                        contenedor.style.height = alturaDePantalla + "px";
                    } else {
                        contenedor.style.height = html.offsetHeight + "px";
                    }
                }, 100);
            }

        }

        function cerrarVisualizarDeArchivo() {
            var contenedor = document.getElementById("contenedorParaVisualizarImagenDelArchivo");
            var body = document.getElementsByTagName("body")[0];
            body.removeChild(contenedor);
        }

        function uuid() {
            var dt = new Date().getTime();
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = (dt + Math.random() * 16) % 16 | 0;
                dt = Math.floor(dt / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }

        function eliminarArchivoDeLaTabla(registro, archivo) {
            document.getElementById(archivo).remove();
            registro.remove();

            if (document.getElementById("registroDeArchivos").innerHTML.trim().length == 0) {
                document.getElementById("registroDeArchivos").innerHTML =
                    '<tr id="archivosNoDisponibleEnLaTabla">' +
                    '<td colspan="3" class="text-center">No hay archivos disponibles en la tabla</td>' +
                    '</tr>';
            }
        }

        function GuardarArchivoAlSeleccionarlo(archivo) {
            var nombreArchivo = archivo.files[0].name;
            var extensionarchivo = nombreArchivo.split('.');
            extensionarchivo = extensionarchivo[extensionarchivo.length - 1];
            var extensionArchivoSinCambio = extensionarchivo;
            var accionesRegistroDeArchivo = "";

            if (document.getElementById("archivosNoDisponibleEnLaTabla")) {
                document.getElementById("archivosNoDisponibleEnLaTabla").remove();
            }

            var reader = new FileReader();
            reader.readAsDataURL(archivo.files[0]);
            reader.onload = function() {
                var base64 = reader.result;

                if (extensionarchivo.toLowerCase() == "png" || extensionarchivo.toLowerCase() == "jpeg" || extensionarchivo.toLowerCase() == "gif" || extensionarchivo.toLowerCase() == "jpg" || extensionarchivo.toLowerCase() == "bmp") {
                    extensionarchivo = "IMAGEN";
                    accionesRegistroDeArchivo =
                        '<a class="dropdown-item" href="#" onclick="visualizarArchivoDeLaordenDeCompra(\'' + base64 + '\',\'imagen\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                        '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "mp3" || extensionarchivo.toLowerCase() == "wav" || extensionarchivo.toLowerCase() == "wma" || extensionarchivo.toLowerCase() == "ogg") {
                    extensionarchivo = "ARCHIVO DE AUDIO";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "zip" || extensionarchivo.toLowerCase() == "rar" || extensionarchivo.toLowerCase() == "tgz" || extensionarchivo.toLowerCase() == "tar") {
                    extensionarchivo = "ARCHIVO COMPRIMIDO";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "pdf") {
                    extensionarchivo = "PDF";
                    accionesRegistroDeArchivo =
                        '<a class="dropdown-item" href="#" onclick="visualizarArchivoDeLaordenDeCompra(\'' + base64 + '\',\'pdf\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                        '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "xlsx" || extensionarchivo.toLowerCase() == "xls") {
                    extensionarchivo = "OFFICE EXCEL";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "pptx" || extensionarchivo.toLowerCase() == "ppt") {
                    extensionarchivo = "OFFICE POWER POINT";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "docx" || extensionarchivo.toLowerCase() == "doc") {
                    extensionarchivo = "OFFICE WORD";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "txt") {
                    extensionarchivo = "ARCHIVO DE TEXTO";
                    accionesRegistroDeArchivo =
                        '<a class="dropdown-item" href="#" onclick="visualizarArchivoDeLaordenDeCompra(\'' + base64 + '\',\'txt\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                        '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (
                    extensionarchivo.toLowerCase() == "mp4" || extensionarchivo.toLowerCase() == "webm" || extensionarchivo.toLowerCase() == "avi" ||
                    extensionarchivo.toLowerCase() == "asf" || extensionarchivo.toLowerCase() == "dvd" || extensionarchivo.toLowerCase() == "m1v" ||
                    extensionarchivo.toLowerCase() == "movie" || extensionarchivo.toLowerCase() == "mpeg" || extensionarchivo.toLowerCase() == "wn" || extensionarchivo.toLowerCase() == "wmv"
                ) {
                    extensionarchivo = "ARCHIVO DE VIDEO";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else {
                    extensionarchivo = "ARCHIVO DESCONOCIDO";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                }

                document.getElementById("registroDeArchivos").innerHTML +=
                    '<tr>' +
                    '<td>' +
                    '<div class="btn-group ">' +
                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                    'Acciones' +
                    '</button>' +
                    '<div class="dropdown-menu">' +
                    accionesRegistroDeArchivo +
                    //'<a class="dropdown-item" href="'+url+'" target="_blank"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>'+
                    //'<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>' +
                    '</div>' +
                    '</div>' +
                    '</td>' +
                    '<td>' + nombreArchivo + '</td>' +
                    '<td>' + extensionarchivo + '</td>' +
                    '</tr>';

                archivo.style.display = "none";
                var inputFile = document.createElement("input");
                inputFile.setAttribute("type", "file");
                inputFile.setAttribute("class", "form-control-file");
                inputFile.setAttribute("id", uuid());
                inputFile.setAttribute("onchange", "GuardarArchivoAlSeleccionarlo(this)");
                document.getElementById("contenedorDelSeleccionadorDeArchivo").appendChild(inputFile);

            };
            reader.onerror = function(error) {

            };

        }
    </script>

    <script>
        function abrirModalSeleccionarOc() {
            datatableOrdenesDeCompra.rows().deselect();
            $("#modalOrdenDeCompra").modal("show");
        }

        function seleccionarOrdenDeCompra() {
            if (datatableOrdenesDeCompra.$('tr.selected').hasClass('selected')) {
                var data = datatableOrdenesDeCompra.rows({
                    selected: true
                }).data();

                document.getElementById("botonQuitarOrdenDeCompra").style.display = "inline-block";
                document.getElementById("idOrdenCompra").value = data[0].id;
                document.getElementById("numeroDocumento").setAttribute("readonly", "true")
                document.getElementById("numeroDocumento").value = data[0].numero_oc;
                if (document.getElementById("campoTipoSolicitud").value == "Proveedores") {
                    $('#campoProveedor').selectpicker('val', data[0].id_proveedor);
                }
                $("#modalOrdenDeCompra").modal("hide");
            }
        }

        function quitarOrdenDeCompra() {
            document.getElementById("botonQuitarOrdenDeCompra").style.display = "none";
            document.getElementById("idOrdenCompra").value = "";
            document.getElementById("numeroDocumento").removeAttribute("readonly");
            document.getElementById("numeroDocumento").value = "";
        }

        function abrirModalSeleccionarDatosBancariosPreoveedor() {
            datatableDatosBancarios.rows().deselect();
            $("#modalDatosBancarios").modal("show");
        }

        function seleccionarDatoBancario() {
            if (datatableDatosBancarios.$('tr.selected').hasClass('selected')) {
                var data = datatableDatosBancarios.rows({
                    selected: true
                }).data();

                $('#idBanco').selectpicker('val', data[0].id_banco);
                $('#tipoCuentaBancaria').selectpicker('val', data[0].tipo_cuenta_bancaria);
                document.getElementById("numeroCuentaBancaria").value = data[0].numero_cuenta_bancaria;
                document.getElementById("rut2").value = data[0].rut_cuenta_bancaria;
                $("#modalDatosBancarios").modal("hide");
            }
        }
    </script>

    <script>
        function validarCampos(data) {
            if (typeof data.responseJSON.errors.descripcion !== 'undefined') {
                document.getElementById("descripcion").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoDescripcion").innerHTML = data.responseJSON.errors.descripcion;
            } else {
                document.getElementById("descripcion").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCampoDescripcion").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.tipo_solicitud !== 'undefined') {
                document.getElementById("campoTipoSolicitud").classList.remove('input-success-icon');
                document.getElementById("campoTipoSolicitud").classList.add('input-error-icon');
                document.getElementById("valicacionCampoTipoSolicitud").innerHTML = data.responseJSON.errors.tipo_solicitud;
                document.getElementById("valicacionCampoTipoSolicitud").style.display = "block";
            } else {
                document.getElementById("campoTipoSolicitud").classList.remove('input-error-icon');
                document.getElementById("campoTipoSolicitud").classList.add('input-success-icon');
                document.getElementById("valicacionCampoTipoSolicitud").innerHTML = "";
                document.getElementById("valicacionCampoTipoSolicitud").style.display = "none";
            }

            if (typeof data.responseJSON.errors.descripcion_tipo_solicitud !== 'undefined') {
                document.getElementById("descripcionTipoSolicitud").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoDescripcionTipoSolicitud").innerHTML = data.responseJSON.errors.descripcion_tipo_solicitud;
            } else {
                document.getElementById("descripcionTipoSolicitud").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCampoDescripcionTipoSolicitud").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.id_proveedor !== 'undefined') {
                document.getElementById("campoProveedor").classList.remove('input-success-icon');
                document.getElementById("campoProveedor").classList.add('input-error-icon');
                document.getElementById("valicacionCampoProveedor").innerHTML = data.responseJSON.errors.id_proveedor;
                document.getElementById("valicacionCampoProveedor").style.display = "block";
            } else {
                document.getElementById("campoProveedor").classList.remove('input-error-icon');
                document.getElementById("campoProveedor").classList.add('input-success-icon');
                document.getElementById("valicacionCampoProveedor").innerHTML = "";
                document.getElementById("valicacionCampoProveedor").style.display = "none";
            }

            if (typeof data.responseJSON.errors.forma_pago !== 'undefined') {
                document.getElementById("campoFormaDePago").classList.remove('input-success-icon');
                document.getElementById("campoFormaDePago").classList.add('input-error-icon');
                document.getElementById("valicacionCampoFormaDePago").innerHTML = data.responseJSON.errors.forma_pago;
                document.getElementById("valicacionCampoFormaDePago").style.display = "block";
            } else {
                document.getElementById("campoFormaDePago").classList.remove('input-error-icon');
                document.getElementById("campoFormaDePago").classList.add('input-success-icon');
                document.getElementById("valicacionCampoFormaDePago").innerHTML = "";
                document.getElementById("valicacionCampoFormaDePago").style.display = "none";
            }

            if (typeof data.responseJSON.errors.tipo_documento !== 'undefined') {
                document.getElementById("campoTipoDocumento").classList.remove('input-success-icon');
                document.getElementById("campoTipoDocumento").classList.add('input-error-icon');
                document.getElementById("valicacionCampoTipoDocumento").innerHTML = data.responseJSON.errors.tipo_documento;
                document.getElementById("valicacionCampoTipoDocumento").style.display = "block";
            } else {
                document.getElementById("campoTipoDocumento").classList.remove('input-error-icon');
                document.getElementById("campoTipoDocumento").classList.add('input-success-icon');
                document.getElementById("valicacionCampoTipoDocumento").innerHTML = "";
                document.getElementById("valicacionCampoTipoDocumento").style.display = "none";
            }

            if (typeof data.responseJSON.errors.numero_documento !== 'undefined') {
                document.getElementById("numeroDocumento").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoNumeroDocumento").innerHTML = data.responseJSON.errors.numero_documento;
            } else {
                document.getElementById("numeroDocumento").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCampoNumeroDocumento").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.reembolsable !== 'undefined') {
                document.getElementById("campoReembolsable").classList.remove('input-success-icon');
                document.getElementById("campoReembolsable").classList.add('input-error-icon');
                document.getElementById("valicacionCampoReembolsable").innerHTML = data.responseJSON.errors.reembolsable;
                document.getElementById("valicacionCampoReembolsable").style.display = "block";
            } else {
                document.getElementById("campoReembolsable").classList.remove('input-error-icon');
                document.getElementById("campoReembolsable").classList.add('input-success-icon');
                document.getElementById("valicacionCampoReembolsable").innerHTML = "";
                document.getElementById("valicacionCampoReembolsable").style.display = "none";
            }

            if (typeof data.responseJSON.errors.id_centro_costo !== 'undefined') {
                document.getElementById("idCentroCosto").classList.remove('input-success-icon');
                document.getElementById("idCentroCosto").classList.add('input-error-icon');
                document.getElementById("validarIdCentroCosto").innerHTML = data.responseJSON.errors.id_centro_costo;
                document.getElementById("validarIdCentroCosto").style.display = "block";
            } else {
                document.getElementById("idCentroCosto").classList.remove('input-error-icon');
                document.getElementById("idCentroCosto").classList.add('input-success-icon');
                document.getElementById("validarIdCentroCosto").innerHTML = "";
                document.getElementById("validarIdCentroCosto").style.display = "none";
            }

            if (typeof data.responseJSON.errors.monto_neto_texto !== 'undefined') {
                document.getElementById("montoNetoTexto").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoMontoNetoTexto").innerHTML = data.responseJSON.errors.monto_neto_texto;
            } else {
                if (typeof data.responseJSON.errors.monto_neto_numero !== 'undefined') {
                    document.getElementById("montoNetoTexto").setAttribute("class", "form-control is-invalid");
                    document.getElementById("valicacionCampoMontoNetoTexto").innerHTML = data.responseJSON.errors.monto_neto_numero;
                } else {
                    document.getElementById("montoNetoTexto").setAttribute("class", "form-control is-valid");
                    document.getElementById("valicacionCampoMontoNetoTexto").innerHTML = "";
                }
            }

            if (typeof data.responseJSON.errors.id_banco !== 'undefined') {
                document.getElementById("idBanco").classList.remove('input-success-icon');
                document.getElementById("idBanco").classList.add('input-error-icon');
                document.getElementById("validarIdBanco").innerHTML = data.responseJSON.errors.id_banco;
                document.getElementById("validarIdBanco").style.display = "block";
            } else {
                document.getElementById("idBanco").classList.remove('input-error-icon');
                document.getElementById("idBanco").classList.add('input-success-icon');
                document.getElementById("validarIdBanco").innerHTML = "";
                document.getElementById("validarIdBanco").style.display = "none";
            }

            if (typeof data.responseJSON.errors.tipo_cuenta_bancaria !== 'undefined') {
                document.getElementById("tipoCuentaBancaria").classList.remove('input-success-icon');
                document.getElementById("tipoCuentaBancaria").classList.add('input-error-icon');
                document.getElementById("validarTipoCuentaBancaria").innerHTML = data.responseJSON.errors.tipo_cuenta_bancaria;
                document.getElementById("validarTipoCuentaBancaria").style.display = "block";
            } else {
                document.getElementById("tipoCuentaBancaria").classList.remove('input-error-icon');
                document.getElementById("tipoCuentaBancaria").classList.add('input-success-icon');
                document.getElementById("validarTipoCuentaBancaria").innerHTML = "";
                document.getElementById("validarTipoCuentaBancaria").style.display = "none";
            }

            if (typeof data.responseJSON.errors.numero_cuenta_bancaria !== 'undefined') {
                document.getElementById("numeroCuentaBancaria").setAttribute("class", "form-control is-invalid");
                document.getElementById("validarNumeroCuentaBancaria").innerHTML = data.responseJSON.errors.numero_cuenta_bancaria;
            } else {
                document.getElementById("numeroCuentaBancaria").setAttribute("class", "form-control is-valid");
                document.getElementById("validarNumeroCuentaBancaria").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.rut_cuenta_bancaria !== 'undefined') {
                document.getElementById("rut2").setAttribute("class", "form-control is-invalid");
                document.getElementById("validarRutCuentaBancaria").innerHTML = data.responseJSON.errors.rut_cuenta_bancaria;
            } else {
                document.getElementById("rut2").setAttribute("class", "form-control is-valid");
                document.getElementById("validarRutCuentaBancaria").innerHTML = "";
            }
        }

        function registrarProntoPago() {
            document.getElementById("botonDeCreacion").setAttribute("disabled", true);
            generarLoading('{{ asset('img/logo.png') }}')
            var formData = new FormData();
            formData.append('descripcion', document.getElementById("descripcion").value);
            formData.append('tipo_solicitud', document.getElementById("campoTipoSolicitud").value);
            formData.append('descripcion_tipo_solicitud', document.getElementById("descripcionTipoSolicitud").value);
            formData.append('id_proveedor', document.getElementById("campoProveedor").value);
            formData.append('forma_pago', document.getElementById("campoFormaDePago").value);
            formData.append('numero_documento', document.getElementById("numeroDocumento").value);
            formData.append('tipo_documento', document.getElementById("campoTipoDocumento").value);
            formData.append('reembolsable', document.getElementById("campoReembolsable").value);
            formData.append('id_centro_costo', document.getElementById("idCentroCosto").value);
            formData.append('monto_neto_texto', document.getElementById("montoNetoTexto").value);
            formData.append('id_orden_compra', document.getElementById("idOrdenCompra").value);
            formData.append('monto_neto_numero', document.getElementById("montoNetoNumero").value);
            formData.append('id_banco', document.getElementById("idBanco").value);
            formData.append('tipo_cuenta_bancaria', document.getElementById("tipoCuentaBancaria").value);
            formData.append('numero_cuenta_bancaria', document.getElementById("numeroCuentaBancaria").value);
            formData.append('rut_cuenta_bancaria', document.getElementById("rut2").value);

            let totalDeArchivos = document.getElementsByClassName("form-control-file").length;
            let archivosOc = document.getElementsByClassName("form-control-file");
            let asignacionDeIdArchivo = 0;
            for (let i = 0; i < totalDeArchivos; i++) {
                if (archivosOc[i].files.length > 0) {
                    asignacionDeIdArchivo++;
                    formData.append('archivos' + i, archivosOc[i].files[0]);
                }
            }
            formData.append('totalDeArchivos', asignacionDeIdArchivo);
            var csrf = '{{ csrf_token() }}';

            $.ajax({
                url: '{{ route('pronto-pago.store-solicitud-logistica') }}',
                method: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': csrf
                },
                success: function(dataOc) {
                    console.log(dataOc)
                    eliminarLoading()
                    Swal.fire({
                            icon: 'success',
                            title: '¡Creado!',
                            text: 'La solicitud del pronto de pago se genero con éxito',
                            confirmButtonColor: "#448aff",
                            confirmButtonText: "Confirmar"
                        }).then((result) => {
                            location.reload();
                        })
                        .catch((error) => {
                            location.reload();
                        });
                },
                error: function(data) {
                    console.log(data)
                    validarCampos(data)
                    document.getElementById("botonDeCreacion").removeAttribute("disabled");
                    eliminarLoading()
                }
            })
        }
    </script>
@stop