{!! 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: 500;
        position: relative;
    }

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

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999 !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;
    }

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

    .icon-xl {
        font-size: 2em !important;
    }

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

    .btn-csv {
        background-color: #65666e !important;
        color: white;
        border-color: #65666e !important;
    }

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

    .select2-container .select2-selection--single .select2-selection__rendered  {
            display: contents;
            font-size: .8rem !important;
        }

    .select2-selection {
        max-height: 1.8rem !important;
    }

    .select2-container--bootstrap {
        min-width: 15rem !important;
        max-height: 2rem !important;
        margin-bottom: .5rem !important;
    }

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

    .image-loading {
        margin-left: .2rem !important;
        max-width: 2rem;
        max-height: 2rem;
        width: auto;
        height: auto;
    }

    .popover {
        z-index: 9999 !important;
    }

    .btn-sm {
        max-height: 2rem !important;
        height: auto !important;
    }

    .first-insert {
        border-color: #1145bf;
        padding-right: calc(1.5em + .75rem);
        background-repeat: no-repeat;
        background-position: right calc(.375em + .1875rem) center;
        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }

    .input-group-prepend {
        max-height: 2rem !important;
    }

    .btn-excel {
        background-color: #00994C !important;
        color: white !important;
        border-color: #00994C !important
    }
</style>

<div class="layout-px-spacing">
    <div class="container-fluid p-0">
        <div class="row">
            <div class="col-lg-2">
                <label>Cuenta: <span class="text-danger">*</span></label>
                <input type="text" class="form-control form-control-sm" id="cuenta_search_clientes_frecuentes" onkeydown="if (event.key === 'Enter') { searchClienteFrecuente(); } else { validateNumber(event); }">
            </div>
            <div class="col-lg-4">
                <label>Nombre: <span class="text-danger">*</span></label>
                <div class="d-flex justify-content-center">
                    <input type="text" class="form-control form-control-sm bs-popover" id="name_cliente_frecuente" data-container="body" data-trigger="hover" data-content="Teclea el nombre del cliente frecuente a buscar.">
                    <img id="loadingSearch" class="image-loading" src="{{ asset('assets/img/loading.gif')  }}" alt="Loading..." style="display: none">
                </div>
            </div>
            <div class="col-lg-2">
                <button class="btn btn-primary btn-submit mt-4" type="button" onclick="searchClienteFrecuente()">Buscar</button>
            </div>
            <div class="col-lg-2">
                <button class="btn btn-primary btn-submit mt-4" type="button" onclick="slectCliente()">Agregar</button>
            </div>
            <div class="col-lg-2 text-right">
                <a class="btn btn-primary btn-submit mt-4" title="Agregar nuevo cliente frecuente" href="#" onclick="nuevoClienteFrecuente()">
                    <i class="las la-plus mr-2"></i> Nuevo cliente frecuente
                </a>
            </div>
        </div>
        <hr>
        <div id="form_clientes_frecuentes" class="hide-element">
            <input type="hidden" id="idClienteFrecuente">
            <div class="row">
                <div class="col-md-4">
                    <label class="text-bold">Cuenta: <span class="text-danger">*</span></label>
                    <input type="text" id="cuenta_clientes_frecuentes" class="form-control form-control-sm" readonly required oninput="validateFormCaptura()">
                </div>
                <div class="col-md-8">
                    <label class="text-bold">Nombre: <span class="text-danger">*</span></label>
                    <input type="text" id="nombre_clientes_frecuentes" class="form-control form-control-sm" required oninput="validateFormCaptura()">
                </div>
            </div>

            <hr>

            <h6 class="font-weight-bold">UBICACIÓN</h6>

            <div class="row">
                <div class="col-md-3">
                    <label class="font-weight-bold">Código Postal: </label>
                    <input type="text" class="form-control form-control-sm bs-popover" id="cp" data-container="body" data-trigger="hover" data-content="Teclea el código postal a buscar.">
                </div>

                <div class="col-md-9">
                    <label class="font-weight-bold">Colonia: </label>
                    <input id="nombre_colonia" class="form-control form-control-sm" readonly>
                    <input type="hidden" class="form-control form-control-sm" id="id_colonia" name="id_colonia">
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <label class="text-bold">Domicilio:</label>
                    <textarea class="form-control form-control-sm mr-2" id="domicilio_clientes_frecuentes" cols="30" rows="1"></textarea>
                </div>
                <div class="col">
                    <label class="text-bold">Cruzamiento:</label>
                    <input type="text" id="cruzamiento_clientes_frecuentes" class="form-control form-control-sm">
                </div>
            </div>

            <h6 class="text-bold mt-3">MÁS INFORMACIÓN</h6>
            <div class="row">
                <div class="col">
                    <label class="text-bold">Teléfono:</label>
                    <input type="text" id="telefono_clientes_frecuentes" class="form-control form-control-sm" onkeydown="validateNumber(event)">
                </div>
                <div class="col">
                    <label class="text-bold">RFC: <span class="text-danger">*</span></label>
                    <input type="text" id="rfc_clientes_frecuentes" class="form-control form-control-sm" onkeypress="validateRFCInput(event)" onblur="validateRFC(this)" required>
                </div>
            </div>

            <div class="row">
                <div class="col m-auto">
                    <label class="font-weight-bold">Correo eléctronico<span class="text-danger">*</span></label>
                    <div class="input-group input-group-sm mb-3">
                        <input type="text" id="correoCliente_clientes_frecuentes" class="form-control" required oninput="validateFormCaptura()">
                        <div class="input-group-prepend">
                            <span class="input-group-text">@</span>
                            <select id="sufijoCorreoCliente_clientes_frecuentes" class="form-select2" onchange="actionOtherEmailSelected(this, 'fragmento_sufijo_personalizado_cliente_clientes_frecuentes'); validateFormCaptura()">
                                <option value="0">Correo personalizado</option>
                                @foreach ($sufijos as $index => $sufijo)
                                    <option @if ($index === 0) selected @endif value="{{ $sufijo->id }}">{{ $sufijo->sufijo }}</option>
                                @endforeach
                            </select>
                            <div id="fragmento_sufijo_personalizado_cliente_clientes_frecuentes" class="d-flex justify-content-center hide-element">
                                <input type="text" id="sufijoClientePersonalizado_clientes_frecuentes" class="form-control form-control-sm" oninput="validateFormCaptura()">
                                <a class="btn btn-primary btn-submit" title="Buscar sufijos predeterminados" href="#" onclick="showSuffixes('sufijoCorreoCliente_clientes_frecuentes', 'fragmento_sufijo_personalizado_cliente_clientes_frecuentes')">
                                    <i class="las la-binoculars"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <label class="text-bold">Descuento:</label>
                    <input type="text" id="descuento_clientes_frecuentes" class="form-control form-control-sm" onkeydown="validateNumberWithDot(event)">
                </div>
                <div class="col">
                    <label class="text-bold">Estatus: <span class="text-danger">*</span></label>
                    <select id="estatus_clientes_frecuentes" class="form-control form-control-sm text-center" onchange="validateFormCaptura();" required>
                        @foreach ($opcionesEstatus as $index => $estatus)
                            <option @if ($index === 0) selected @endif value="{{ $estatus }}">{{ $estatus }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col">
                    <label class="text-bold">Tipo de cliente: <span class="text-danger">*</span></label>
                    <select id="tipoCliente_clientes_frecuentes" class="form-control form-control-sm text-center form-select2" onchange="validateFormCaptura();" required>
                        @foreach ($tiposClientes as $tipoCliente)
                            <option value="{{ $tipoCliente->id }}">{{ $tipoCliente->descripcion }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <label class="text-bold">Contacto: </label>
                    <input type="text" id="contacto_clientes_frecuentes" class="form-control form-control-sm">
                </div>
                <div class="col">
                    <label class="text-bold">Teléfono contacto: </label>
                    <input type="text" id="telefonoContacto_clientes_frecuentes" class="form-control form-control-sm" onkeydown="validateNumber(event)">
                </div>
            </div>

            <div class="row">
                <div class="col m-auto">
                    <label class="font-weight-bold">Correo eléctronico contacto</label>
                    <div class="input-group input-group-sm mb-3">
                        <input type="text" id="correoContacto_clientes_frecuentes" class="form-control">
                        <div class="input-group-prepend">
                            <span class="input-group-text">@</span>
                            <select id="sufijoContacto_clientes_frecuentes" class="form-select2" onchange="actionOtherEmailSelected(this, 'fragmento_sufijo_personalizado_contacto_clientes_frecuentes')">
                                <option value="0">Correo personalizado</option>
                                @foreach ($sufijos as $index => $sufijo)
                                    <option @if ($index === 0) selected @endif value="{{ $sufijo->id }}">{{ $sufijo->sufijo }}</option>
                                @endforeach
                            </select>
                            <div id="fragmento_sufijo_personalizado_contacto_clientes_frecuentes" class="d-flex justify-content-center hide-element">
                                <input type="text" id="sufijoContactoPersonalizado_clientes_frecuentes" class="form-control form-control-sm">
                                <a class="btn btn-primary btn-submit" title="Buscar sufijos predeterminados" href="#" onclick="showSuffixes('sufijoContacto_clientes_frecuentes', 'fragmento_sufijo_personalizado_contacto_clientes_frecuentes')">
                                    <i class="las la-binoculars"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <label class="text-bold">Tipo de moneda: <span class="text-danger">*</span></label>
                    <select id="tipoMoneda_clientes_frecuentes" class="form-control form-control-sm text-center form-select2" onchange="validateFormCaptura();" required>
                        @foreach ($tiposMonedas as $tipoMoneda)
                            <option value="{{ $tipoMoneda->id }}">{{ $tipoMoneda->descripcion }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col">
                    <label class="text-bold">TaxID:</label>
                    <input type="text" id="tipoImpuesto_clientes_frecuentes" class="form-control form-control-sm">
                </div>
                <div class="col">
                    <label class="text-bold">Régimen fiscal: <span class="text-danger">*</span></label>
                    <select id="regimen_clientes_frecuentes" class="form-control form-control-sm text-center form-select2" onchange="validateFormCaptura();" required>
                        @foreach ($regimenes as $regimen)
                            <option value="{{ $regimen->c_RegimenFiscal }}">{{ $regimen->c_RegimenFiscal . '-' . $regimen->Descripcion }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <hr>
            <div class="justify-content-end">
                <div class="col text-right">
                    <button id="btnSave_clientes_frecuentes" type="button" class="btn btn-primary btn-submit btn-lg d-inline-flex align-items-center mb-3" onclick="guardarInfo()" disabled>
                        <i class="las la-save icon-large"></i>
                        <span class="ml-2">Guardar información</span>
                    </button>
                    <button type="button" class="btn btn-primary-outlined btn-submit btn-lg d-inline-flex align-items-center mb-3" onclick="restaurarFormulario()">
                        <i class="las la-sync icon-large"></i>
                        <span class="ml-2">Restaurar</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

    function searchClienteFrecuentebyId(id) {
        $.ajax({
            url: "{{ url('catalogos/clientes-frecuentes/buscar-por-id') }}",
            data: {
                id: id
            },
            beforeSend: () => {
                $("#loadingModal").modal("show")
            },
            success: (res, _, jqXHR) => {
                setTimeout(() => {

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

                    const clienteFrecuente = res.clienteFrecuente;

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

    function nuevoClienteFrecuente() {
        $.ajax({
            url: "{{ url('catalogos/clientes-frecuentes/obtener-nueva-cuenta') }}",
            beforeSend: () => {
                $("#loadingModal").modal("show")
                restaurarFormulario();
            },
            success: (res, _, jqXHR) => {
                setTimeout(() => {
                    $("#loadingModal").modal("hide");
                    $('#form_clientes_frecuentes').removeClass('hide-element');
                    $('#cuenta_clientes_frecuentes').val(res)
                    $('#nombre_clientes_frecuentes').focus();
                }, 500);
            },
            error: (error) => {
                setTimeout(() => {
                    $("#loadingModal").modal("hide")
                    Swal.fire({
                        icon: 'error',
                        title: '¡Lo sentimos!',
                        text: 'Ha ocurrido un error inesperado, intentelo de nuevo más tarde'
                    });
                }, 500);
            }
        })
    }

    function validateRFC(input) {
        let rfc = input.value;

        if(rfc != '') {
            if(rfcValido(rfc)) {
                validateFormCaptura(false)
            } else {
                Swal.fire({
                    icon: 'warning',
                    title: '¡RFC no valido!',
                    html: 'El <b>RFC</b> que ha ingresado <b>no es válido</b>, por favor ingrese uno correcto para poder guardar.'
                });
                $('#btnSave_clientes_frecuentes').attr('disabled', true);
            }

            return false;
        }

        $('#btnSave_clientes_frecuentes').attr('disabled', true)
    }

    function rfcValido(rfc, aceptarGenerico = true) {
        const re       = /^([A-ZÑ&]{3,4}) ?(?:- ?)?(\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])) ?(?:- ?)?([A-Z\d]{2})([A\d])$/;
        let   validado = rfc.match(re);

        if (!validado)  //Coincide con el formato general del regex?
            return false;

        //Separar el dígito verificador del resto del RFC
        const digitoVerificador = validado.pop(),
            rfcSinDigito      = validado.slice(1).join(''),
            len               = rfcSinDigito.length,

        //Obtener el digito esperado
            diccionario       = "0123456789ABCDEFGHIJKLMN&OPQRSTUVWXYZ Ñ",
            indice            = len + 1;
        let   suma,
            digitoEsperado;

        if (len == 12) suma = 0
        else suma = 481; //Ajuste para persona moral

        for(let i=0; i<len; i++)
            suma += diccionario.indexOf(rfcSinDigito.charAt(i)) * (indice - i);
        digitoEsperado = 11 - suma % 11;
        if (digitoEsperado == 11) digitoEsperado = 0;
        else if (digitoEsperado == 10) digitoEsperado = "A";

        //El dígito verificador coincide con el esperado?
        // o es un RFC Genérico (ventas a público general)?
        if ((digitoVerificador != digitoEsperado)
        && (!aceptarGenerico || rfcSinDigito + digitoVerificador != "XAXX010101000"))
            return false;
        else if (!aceptarGenerico && rfcSinDigito + digitoVerificador == "XEXX010101000")
            return false;
        return rfcSinDigito + digitoVerificador;
    }

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

        $('#btnSave_clientes_frecuentes').attr('disabled', true);

        if (((keyCode >= 48 && keyCode <= 57) ||  // Números (0-9)
            (keyCode >= 65 && keyCode <= 90) ||  // Letras mayúsculas (A-Z)
            (keyCode >= 97 && keyCode <= 122)) && // Letras minúsculas (a-z)
            inputValue.length <= 13) { // Longitud entre 12 y 13 caracteres
            return;
        } else {
            event.preventDefault();
        }
    }

    function searchClienteFrecuente() {
        const cuenta = $('#cuenta_search_clientes_frecuentes').val();

        if(cuenta !== '') {
            $.ajax({
                url: "{{ url('catalogos/clientes-frecuentes/obtener-cliente-por-cuenta') }}",
                data: {
                    cuenta: cuenta
                },
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                    restaurarFormulario()
                    $('#form_clientes_frecuentes').addClass('hide-element');
                    validateFormCaptura();
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide");
                        if(jqXHR.status === 204) {
                            Swal.fire({
                                icon: 'info',
                                title: '¡Sin contenido!',
                                text: 'La consulta no obtuvo ningún resultado.',
                                confirmButtonText: 'Aceptar',
                                customClass: {
                                    container: 'alert-in-modal'
                                },
                            })
                            return;
                        }

                        fillClienteFrecuente(res.clienteFrecuente)
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire({
                            icon: 'error',
                            title: '¡Lo sentimos!',
                            text: 'Ha ocurrido un error inesperado, intentelo de nuevo más tarde'
                        });
                    }, 500);
                }
            })
        }
    }

    function setColoniaInfo(coloniaInfo) {
        $('#cp').val(coloniaInfo.cp);
        $('#id_colonia').val(coloniaInfo.id);
        $('#nombre_colonia').val(coloniaInfo.label);
    }

    function restaurarFormulario() {
        $('#form_clientes_frecuentes input').val('');
        $('#form_clientes_frecuentes textarea').val('');
        $('#sufijoCorreoCliente_clientes_frecuentes').val($('#sufijoCorreoCliente_clientes_frecuentes option').eq(1).val()).trigger('change');
        $('#sufijoCorreoCliente_clientes_frecuentes').next('.select2-container').show();
        $('#fragmento_sufijo_personalizado_cliente_clientes_frecuentes').addClass('hide-element');
        $('#sufijoContacto_clientes_frecuentes').val($('#sufijoContacto_clientes_frecuentes option').eq(1).val()).trigger('change');
        $('#sufijoContacto_clientes_frecuentes').next('.select2-container').show();
        $('#fragmento_sufijo_personalizado_contacto_clientes_frecuentes').addClass('hide-element');
    }

    function fillClienteFrecuente(info) {
        $('#idClienteFrecuente').val(info.id);
        $('#cuenta_clientes_frecuentes').val(info.cuenta);
        $('#nombre_clientes_frecuentes').val(info.nombre);
        $('#telefono_clientes_frecuentes').val(info.telefono);
        $('#correoCliente_clientes_frecuentes').val(info.correoCliente);
        $('#sufijoCorreoCliente_clientes_frecuentes').val(info.sufijoCorreoCliente).trigger('change');
        $('#rfc_clientes_frecuentes').val(info.rfc);
        $('#descuento_clientes_frecuentes').val(info.descuento);
        $('#estatus_clientes_frecuentes').val(info.estatus);
        $('#tipoCliente_clientes_frecuentes').val(info.tipoCliente == 0 ? $('#tipoCliente_clientes_frecuentes option').eq(0).val() : info.tipoCliente).trigger('change');
        $('#contacto_clientes_frecuentes').val(info.contacto);
        $('#telefonoContacto_clientes_frecuentes').val(info.telefonoContacto);
        $('#correoContacto_clientes_frecuentes').val(info.correoContacto);
        $('#sufijoContacto_clientes_frecuentes').val(info.sufijoContacto).trigger('change');
        $('#tipoMoneda_clientes_frecuentes').val(info.tipoMoneda == 0 ? $('#tipoMoneda_clientes_frecuentes option').eq(0).val() : info.tipoMoneda).trigger('change');
        $('#tipoImpuesto_clientes_frecuentes').val(info.tipoImpuesto);
        $('#regimen_clientes_frecuentes').val(info.regimen == '' ? $('#regimen_clientes_frecuentes option').eq(0).val() : info.regimen).trigger('change');

        $('#id_colonia').val(info.id_colonia);
        $('#coloniaV').val(info.coloniaV);
        $('#estadoV').val(info.estadoV);
        $('#municipioV').val(info.municipioV);
        $('#poblacionV').val(info.poblacionV);
        $('#cpV').val(info.cpV);

        $('#sufijoClientePersonalizado_clientes_frecuentes').val(info.sufijoCorreoClientePersonalizado);
        $('#sufijoContactoPersonalizado_clientes_frecuentes').val(info.sufijoContactoPersonalizado);

        $('#domicilio_clientes_frecuentes').val(info.domicilio);
        $('#cruzamiento_clientes_frecuentes').val(info.cruzamiento);

        $('#form_clientes_frecuentes').removeClass('hide-element');
        validateFormCaptura();
    }

    function actionOtherEmailSelected(input, idFragmento) {
        if($(input).val() == 0) {
            $(input).next('.select2-container').hide();
            $('#' + idFragmento).removeClass('hide-element');
        }
    }

    function showSuffixes(input, idFragmento) {
        $('#' + input).next('.select2-container').show();
        $('#' + input).val($('#' + input + ' option').eq(1).val()).trigger('change');
        $('#' + idFragmento).addClass('hide-element');
    }

    function validateFormCaptura(verificarRfc = true) {
        let valido = true;
        $('#form_clientes_frecuentes input[required]').each(function() {
            if ($(this).val().trim() === '') {
                valido = false;
            }
        });

        const sufijoCorreoCliente = $('#sufijoCorreoCliente_clientes_frecuentes').val();

        if(sufijoCorreoCliente == 0) {
            if($('#sufijoClientePersonalizado_clientes_frecuentes').val().trim() === '') {
                valido = false;
            } else {
                valido = validarCorreoSufijoPersonalizado($('#sufijoClientePersonalizado_clientes_frecuentes').val().trim())
            }
        }

        if(verificarRfc) {
            const rfcValidado = rfcValido($('#rfc_clientes_frecuentes').val());

            $('#btnSave_clientes_frecuentes').attr('disabled', !(rfcValidado && valido))
            return
        }

        $('#btnSave_clientes_frecuentes').attr('disabled', !valido)
    }

    function validarCorreoSufijoPersonalizado(texto) {
        let regex = /^[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;

        return regex.test(texto);
    }

    function guardarInfo() {
        const formData = obtenerInfoFormulario();

        const ruta = $('#idClienteFrecuente').val() != '' ? '/actualizar' : '/crear';

        $.ajax({
            url: "{{ url('catalogos/clientes-frecuentes/') }}" + ruta,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: () => {
                $("#loadingModal").modal("show")
            },
            success: (res, _, jqXHR) => {
                setTimeout(() => {
                    $("#loadingModal").modal("hide")

                    if(ruta === '/crear'){
                        Swal.fire({
                            icon: 'success',
                            title: '¡Cliente frecuente creado!',
                            text: 'La información se ha guardado correctamente'
                        });
                    }

                    if(ruta === '/actualizar'){
                        Swal.fire({
                            icon: 'success',
                            title: '¡Cliente frecuente actualizado!',
                            text: 'La información se ha actualizado correctamente'
                        });
                    }

                    $('#idClienteFrecuente').val(res.id)
                    usaClienteFrecuente(res.id);
                     $('#modal-clientes-frecuentes').modal('hide');

                }, 500);

            },
            error: (error) => {
                setTimeout(() => {
                    $("#loadingModal").modal("hide")
                    Swal.fire({
                        icon: 'error',
                        title: '¡Lo sentimos!',
                        text: 'Ha ocurrido un error inesperado, intentelo de nuevo más tarde'
                    });
                }, 500);
            },
        });
    }

    function obtenerInfoFormulario() {
        const idClienteFrecuente = $('#idClienteFrecuente').val();
        const cuenta = $('#cuenta_clientes_frecuentes').val();
        const nombre = $('#nombre_clientes_frecuentes').val();
        const telefono = $('#telefono_clientes_frecuentes').val();
        const correoCliente = $('#correoCliente_clientes_frecuentes').val();
        const sufijoCorreoCliente = $('#sufijoCorreoCliente_clientes_frecuentes').val();
        const rfc = $('#rfc_clientes_frecuentes').val();
        const descuento = $('#descuento_clientes_frecuentes').val();
        const estatus = $('#estatus_clientes_frecuentes').val();
        const tipoCliente = $('#tipoCliente_clientes_frecuentes').val();
        const contacto = $('#contacto_clientes_frecuentes').val();
        const telefonoContacto = $('#telefonoContacto_clientes_frecuentes').val();
        const correoContacto = $('#correoContacto_clientes_frecuentes').val();
        const sufijoContacto = $('#sufijoContacto_clientes_frecuentes').val();
        const tipoMoneda = $('#tipoMoneda_clientes_frecuentes').val();
        const tipoImpuesto = $('#tipoImpuesto_clientes_frecuentes').val();
        const regimen = $('#regimen_clientes_frecuentes').val();
        const idColonia = $('#id_colonia').val();
        const sufijoClientePersonalizado = $('#sufijoClientePersonalizado_clientes_frecuentes').val();
        const sufijoContactoPersonalizado = $('#sufijoContactoPersonalizado_clientes_frecuentes').val();
        const domicilio = $('#domicilio_clientes_frecuentes').val();
        const cruzamiento = $('#cruzamiento_clientes_frecuentes').val();

        let formData = new FormData();

        formData.append('idClienteFrecuente', idClienteFrecuente);
        formData.append('cuenta', cuenta);
        formData.append('nombre', nombre);
        formData.append('telefono', telefono);
        formData.append('correoCliente', correoCliente);
        formData.append('sufijoCorreoCliente', sufijoCorreoCliente);
        formData.append('rfc', rfc);
        formData.append('descuento', descuento);
        formData.append('estatus', estatus);
        formData.append('tipoCliente', tipoCliente);
        formData.append('contacto', contacto);
        formData.append('telefonoContacto', telefonoContacto);
        formData.append('correoContacto', correoContacto);
        formData.append('sufijoContacto', sufijoContacto);
        formData.append('tipoMoneda', tipoMoneda);
        formData.append('tipoImpuesto', tipoImpuesto);
        formData.append('regimen', regimen);
        formData.append('idColonia', idColonia);
        formData.append('sufijoClientePersonalizado', sufijoClientePersonalizado);
        formData.append('sufijoContactoPersonalizado', sufijoContactoPersonalizado);
        formData.append('domicilio', domicilio);
        formData.append('cruzamiento', cruzamiento);

        return formData;
    }
</script>