<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--<meta name="csrf-token" content="{{ csrf_token() }}">-->
        
        <title>Alarmas Verisure Perú</title>
        <link rel="shortcut icon" href="<?= $baseUrl ?>/public/images/favicon.ico">
        
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/bootstrap-select.min.css" rel="stylesheet" type="text/css">
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/loaders.css" rel="stylesheet" type="text/css">
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/animate.css" rel="stylesheet" type="text/css">
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/style.css" rel="stylesheet" type="text/css">
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/responsive.css" rel="stylesheet" type="text/css">
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<!-- Toastr -->
		<link href="<?= $baseUrl ?>/public/js/pages/plugins/toastr/toastr.min.css" rel="stylesheet">
        <!--<link rel="stylesheet" href="https://clientesverisure.com/wp-content/themes/verisure/css/bootstrap.min.css">-->
        <!--<link rel="stylesheet" href="https://clientesverisure.com/wp-content/themes/verisure/css/bootstrap-select.min.css">-->
        <!--<link rel="stylesheet" href="https://clientesverisure.com/wp-content/themes/verisure/css/loaders.css">-->
        <!--<link rel="stylesheet" href="https://clientesverisure.com/wp-content/themes/verisure/css/animate.css">-->
        <!--<link rel="stylesheet" href="https://clientesverisure.com/wp-content/themes/verisure/css/style.css">-->
        <!--<link rel="stylesheet" href="https://clientesverisure.com/wp-content/themes/verisure/css/responsive.css">-->
        <!--<link rel="stylesheet" href="https://clientesverisure.com/wp-content/themes/verisure/css/font-awesome.min.css">-->
        <!--<link rel="stylesheet" type="text/css" href="https://clientesverisure.com/wp-content/themes/verisure/style.css" media="all">-->
        
        <link rel='dns-prefetch' href='//fonts.googleapis.com' />
        <link rel='stylesheet' id='tt-easy-google-fonts-css' href='https://fonts.googleapis.com/css?family=Fira+Sans%3A300%2C500%2C100%2C300italic%2C200&#038;subset=latin%2Call&#038;ver=5.3.7' type='text/css' media='all' />
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
        <!-- start Simple Custom CSS and JS -->
        
        <style type="text/css">
            /*
            Formulario CF7 a 2 columnas responsive
            */
            
            #responsive-form {
                max-width: 600px/*-- change this to get your desired form width --*/;
                margin: 0 auto;
                width: 100%;
            }
            
            .form-row {
                width: 100%;
            }
            
            .column-half,
            .column-full {
                float: left;
                position: relative;
                padding: 0.65rem;
                width: 100%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box
            }
            
            .clearfix:after {
                content: "";
                display: table;
                clear: both;
            }
            
            .btn.btn-red {
                width: 40%;
                border-radius: 30px;
                font-size: 22px;
            }
            
            .text-danger {
                color: #ff0500;
                font-weight: 400;
            }
            
            .navbar.bg-transparent {
                display: none;
            }
            
            #page .section_content h1 {
                display: none;
            }
            
            /**---------------- Media query ----------------**/
            @media only screen and (min-width: 48em) {
                .column-half {
                    width: 50%;
                }
            }
        </style>
        
        <!-- end Simple Custom CSS and JS -->
        <style id="tt-easy-google-font-styles" type="text/css">
            p {
                font-family: 'Fira Sans';
                font-style: normal;
                font-weight: 300;
                text-decoration: none;
                text-transform: none;
            }
            
            h1 {
                font-family: 'Fira Sans';
                font-style: normal;
                font-weight: 500;
                text-decoration: none;
                text-transform: none;
            }
            
            h2 {
                font-family: 'Fira Sans';
                font-style: normal;
                font-weight: 500;
            }
            
            h3 {
                font-family: 'Fira Sans';
                font-style: normal;
                font-weight: 100;
            }
            
            h4 {
                font-family: 'Fira Sans';
                font-style: italic;
                font-weight: 300;
            }
            
            h5 {
                font-family: 'Fira Sans';
                font-style: italic;
                font-weight: 300;
            }
            
            h6 {
                font-family: 'Fira Sans';
                font-style: normal;
                font-weight: 500;
                text-decoration: none;
            }
            
            .section-header text-center wow fadeIn,
            .wpcf7-form-control-wrap nombre,
            .wpcf7-form-control-wrap apellidos,
            .wpcf7-form-control-wrap telefono,
            .form-group,
            .wpcf7,
            body {
                color: #3a3a3a;
                font-family: 'Fira Sans';
                font-size: 15px;
                font-style: normal;
                font-weight: 200;
                text-decoration: none;
                text-transform: none;
            }
            
            .swal2-popup {
                font-size: 1.5rem;
            }
            
            .abs-center {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
        <style>
            #page .section_content h4 {
                margin-top: 0em;
                margin-bottom: 0em;
                background: white;
            }
        
            .ocultar {
                display: none;
            }
        
            #responsive-form {
                max-width: 800px
                    /*-- change this to get your desired form width --*/
                ;
                margin: 0 auto;
                width: 100%;
            }
        
            #upselling .panel-content {
                text-align: left;
            }
        
            .aux-column-half1 {
                width: 80%;
                padding: 0;
            }
        
            .aux-column-half2 {
                width: 20%;
        
            }
        
            @media only screen and (min-width: 48em) {
                .aux-column-half1 {
                    width: 70%;
                }
        
                .aux-column-half2 {
                    width: 30%;
                }
            }
        
            #divLoading {
                background: rgba(66, 118, 164, 0.4);
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 99999;
                height: 100%;
                width: 100%;
                text-align: center;
                overflow: hidden !important;
            }
        
        </style>
    </head>
    
    <body>
        <!-- Preloader -->
        <div class="loader bg-red">
            <div class="loader-inner ball-scale-ripple-multiple vh-center">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        
        <div class="main-container" id="page">
            <section class="section section_content visible">
                <div class="container" id="upselling">
                    <div id="divLoading" style="display: none;">
                        <div style="color: #e4002b" class="la-ball-scale-ripple-multiple la-2x vh-center">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <h1>Formulario de Datos Personales</h1>
                            <p><img class="aligncenter size-full wp-image-1947" src="<?= $baseUrl ?>/public/images/clientesverisure/cabecera_dat.jpg" alt="" width="1200" height="252" srcset="<?= $baseUrl ?>/public/images/clientesverisure/cabecera_dat.jpg 1200w, <?= $baseUrl ?>/public/images/clientesverisure/cabecera_dat-300x63.jpg 300w, <?= $baseUrl ?>/public/images/clientesverisure/cabecera_dat-1024x215.jpg 1024w, <?= $baseUrl ?>/public/images/clientesverisure/cabecera_dat-768x161.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" /></p>
                            <h3 style="text-align: center;"><span style="color: #ff0000;"><strong>Formulario de Referidos</strong></span></h3>
                            <p style="text-align: center;">
                            <div role="form" class="wpcf7" id="wpcf7-f1903-p1930-o1" lang="es-ES" dir="ltr">
                                <div class="screen-reader-response"></div>
                
                                <form action="" id="formcomplete">
                                    <div id="responsive-form" class="clearfix">
                                        <div class="form-row">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="panel">
                                                        <div class="panel-heading">
                                                            <h4>Datos Generales</h4>
                                                        </div>
                                                        <div class="panel-content">
                                                            <div class="row">
                                                                <div class="column-half">
                                                                    <div class="form-group">
                                                                        <label for="">Nombre Cliente</label>
                                                                        <span class="wpcf7-form-control-wrap nombre">
                                                                            <input type="text" name="NombreCliente" size="40" class="form-control" id="NombreCliente" value="<?= $NombreCliente ?>" aria-required="true" style="cursor: not-allowed" aria-invalid="false" readonly>
                                                                            <span class="form-text text-danger" id="NombreClienteError"></span>
                                                                        </span>
                
                                                                    </div>
                                                                </div>
                                                                <div class="column-half">
                                                                    <div class="form-group">
                                                                        <label for="">Correo Cliente</label> 
                                                                        <span class="wpcf7-form-control-wrap">
                                                                            <input type="text" value="<?= $CorreoCliente ?>" name="CorreoCliente" size="40" class="form-control" id="CorreoCliente" aria-required="true" aria-invalid="false" maxlength="200">
                                                                            <span class="form-text text-danger" id="CorreoClienteError"></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row ocultar">
                                                                <div class="column-half">
                                                                    <div class="form-group">
                                                                        <label for="">Venta</label> 
                                                                        <span class="wpcf7-form-control-wrap">
                                                                            <input type="text" value="<?= $idVenta ?>" name="IdVenta" size="40" class="form-control" id="IdVenta" aria-required="true" style="cursor: not-allowed" aria-invalid="false" readonly>
                                                                            <span class="form-text text-danger" id="IdVentaError"></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                <div class="column-half">
                                                                    <div class="form-group">
                                                                        <label for="">Vendedor</label> 
                                                                        <span class="wpcf7-form-control-wrap">
                                                                            <input type="text" value="<?= $MatriculaVendedor ?>" name="Matricula" size="40" class="form-control" id="Matricula" style="cursor: not-allowed" aria-invalid="false" readonly>
                                                                            <span class="form-text text-danger" id="MatriculaError"></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row ocultar">
                                                                <div class="column-half">
                                                                    <div class="form-group">
                                                                        <label for="">TipoVenta</label> 
                                                                        <span class="wpcf7-form-control-wrap">
                                                                            <input type="text" value="<?= $TipoVenta ?>" name="TipoVenta" size="40" class="form-control" id="TipoVenta" aria-required="true" style="cursor: not-allowed" aria-invalid="false" readonly>
                                                                            <span class="form-text text-danger" id="TipoVentaError"></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                <div class="column-half">
                                                                    <div class="form-group">
                                                                        <label for="">CC</label> 
                                                                        <span class="wpcf7-form-control-wrap">
                                                                            <input type="text" value="<?= $CentroCosto ?>" name="CC" size="40" class="form-control" id="CC" style="cursor: not-allowed" aria-invalid="false" readonly>
                                                                            <span class="form-text text-danger" id="CCError"></span>
                                                                        </span>
                                                                    </div>
                                                                </div>                                                
                                                            </div>                                      
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <br>
                                        <div class="form-row">
                                            <div class="row">
                
                                                <div class="col-md-12">
                                                    <div class="panel">
                                                        <div class="panel-heading">
                                                            <h4>Añadir Referido</h4>
                                                        </div>
                                                        <div class="panel-content">
                                                            <div class="row">
                                                                <div class="column-half">
                                                                    <div class="form-group">
                                                                        <label for="">Nombre Referido</label>
                                                                        <span class="wpcf7-form-control-wrap nombre">
                                                                            <input type="text" name="auxPrimerNombre" size="40" class="form-control" id="auxPrimerNombre" aria-required="true" aria-invalid="false" maxlength="100">
                                                                            <span class="form-text text-danger" id="auxPrimerNombreError"></span>
                                                                        </span>
                
                                                                    </div>
                                                                </div>
                                                                <div class="column-half">
                                                                    <div class="form-group"><label for="">Apellido Referido</label> <span class="wpcf7-form-control-wrap"><input type="text" name="auxPrimerApellido" size="40" class="form-control" id="auxPrimerApellido" aria-required="true" aria-invalid="false" maxlength="100">
                                                                            <span class="form-text text-danger" id="auxPrimerApellidoError"></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="column-half">
                                                                    <div class="form-group"><label for="">Telefono Referido</label> <span class="wpcf7-form-control-wrap"><input type="text" name="auxTelefono" size="40" class="form-control" id="auxTelefono" aria-required="true" aria-invalid="false" maxlength="9" pattern="[0-9]+">
                                                                            <span class="form-text text-danger" id="TelefonoError"></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                <div class="column-half">
                                                                    <div class="column-half aux-column-half1">
                                                                        <div class="form-group">
                                                                            <label for="">Segmento(Residencial/Negocio)</label>
                                                                            <span class="wpcf7-form-control-wrap">
                                                                                <select name="auxSegmento" id="auxSegmento" class="form-control">
                                                                                    <option value="" disabled selected>Seleccione</option>
                                                                                    <option value="RES">Residencial</option>
                                                                                    <option value="NEG">Negocio</option>
                                                                                </select>
                                                                                <span class="form-text text-danger" id="SegmentoError"></span></span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="column-half aux-column-half2">
                                                                        <div class="form-group">
                                                                            <label for="" style="color: white;">Seleccione</label>
                                                                            <input type="button" id="btn_agregar" value="AÑADIR" class="wpcf7-form-control btn btn-dark">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-12">
                                                                    <div class="table-responsive">
                                                                        <div>
                                                                            <table id="detalles" class="table align-items-center">
                                                                                <thead class="thead-light">
                                                                                    <th scope="col" class="sort" data-sort="Opciones"></th>
                                                                                    <th scope="col" class="sort" data-sort="Nombre">Nombre Referido</th>
                                                                                    <th scope="col" class="sort" data-sort="Apellido">Apellido Referido</th>
                                                                                    <th scope="col" class="sort" data-sort="Telefono">Telefono Referido</th>
                                                                                    <th scope="col" class="sort" data-sort="Segmento">Segmento</th>
                                                                                </thead>
                                                                                <tbody class="list">
                
                                                                                </tbody>
                                                                            </table>
                                                                        </div>
                
                                                                    </div>
                                                                    <input type="hidden" name="DetalleReferido" id="DetalleReferido" value="0">
                                                                    <span class="form-text text-danger" id="DetalleReferidoError"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                
                                    <div id="responsive-form" class="clearfix">
                                        <div class="form-row">
                                            <div class="form-check"><span class="wpcf7-form-control-wrap acepto"><span class="wpcf7-form-control wpcf7-acceptance"><span class="wpcf7-list-item"><label><input type="checkbox" name="aceptoterminos" value="1" aria-invalid="false" class="form-check-input" id="aceptoterminos"><span class="wpcf7-list-item-label">Acepto los <a href="https://clientesverisure.com/terminos-y-condiciones-referido-telemarketing-2" style="color: #828282;" target="_blank">Términos y Condiciones</a></span></label></span></span></span>
                                            </div>
                                            <div class="form-check"><span class="wpcf7-form-control-wrap acepto"><span class="wpcf7-form-control wpcf7-acceptance"><span class="wpcf7-list-item"><label><input type="checkbox" name="aceptopolitica" value="1" aria-invalid="false" class="form-check-input" id="aceptopolitica"><span class="wpcf7-list-item-label">Acepto <a href="https://clientesverisure.com/politica-de-privacidad-referido-telemarketing" style="color: #828282;" target="_blank">Politica de Tratamiento de Datos</a></span></label></span></span></span>
                                            </div>
                                            <br>
                                            <div class="form-check">
                                                <span class="wpcf7-form-control-wrap acepto">
                                                    <span class="wpcf7-form-control wpcf7-acceptance">
                                                        <span class="wpcf7-list-item">
                                                        <label>
                                                        <span class="wpcf7-list-item-label" style="display:none">Revisa catálogo vigente <a href="https://clientesverisure.com/wp-content/uploads/2022/07/CATALOGO-DE-PREMIOS-VERISURE.pdf" style="color: #ff0033;" target="_blank">Aquí</a>
                                                        </span>
                                                        </label>
                                                        </span>
                                                        </span>
                                                    </span>
                                            </div>                            
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group text-center column-full"><input type="button" id="btn_enviar" value="ENVIAR" class="wpcf7-form-control wpcf7-submit btn btn-red"></div>
                                        </div>
                                    </div>
                                </form>
                
                            </div>
                            <h5 style="text-align: center;"><span style="color: #ff0000;"><em>Personas que protegen a personas</em></span></h5>
                        </div>
                    </div>
                </div>
            </section>
            
            <span class="respuesta_global"></span>
            
            <footer id="footer2-2" class="p-y footer f2 bg-edit bg-black">
                <div class="container">
                    <div class="row text-white">
                        <div class="col-sm-4 col-xs-12">
                            <p>© <script>document.write(new Date().getFullYear())</script> Verisure. Todos los derechos reservados</p>
                        </div>
                        <div class="col-sm-4 col-xs-12 text-center">
                            <ul class="footer-social">
                                <li><a href="https://www.facebook.com/AlarmasVerisurePeru/" class="inverse" target="_blank"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="https://twitter.com/VerisurePeru" class="inverse" target="_blank"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="https://www.youtube.com/channel/UCsC7LzKdqytaOQ58IL011eQ" class="inverse" target="_blank"><i class="fa fa-youtube"></i></a></li>
                                <li><a href="https://www.instagram.com/verisurepe/" class="inverse" target="_blank"><i class="fa fa-instagram"></i></a></li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-xs-12">
                            <ul class="footer-links">
                                <li><a href="https://clientesverisure.com/politica-de-privacidad/" class="edit inverse" target="_blank">Política de privacidad</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        <!-- ========================= SCRIPTS ============================== -->
        
        <script src="<?= $baseUrl ?>/public/assets/clientesverisure/js/jquery1.11.2.min.js"></script>
        <script src="<?= $baseUrl ?>/public/assets/clientesverisure/js/bootstrap.min.js"></script>
        <script src="<?= $baseUrl ?>/public/assets/clientesverisure/js/bootstrap-select.min.js"></script>
        <script src="<?= $baseUrl ?>/public/assets/clientesverisure/js/jquery.easing.1.3.min.js"></script>
        <script src="<?= $baseUrl ?>/public/assets/clientesverisure/js/wow.min.js"></script>
        <script src="<?= $baseUrl ?>/public/assets/clientesverisure/js/custom.js"></script>
		<!-- Toastr -->
		<script src="<?= $baseUrl ?>/public/js/pages/plugins/toastr/toastr.min.js"></script>
        <!--<script src="https://clientesverisure.com/wp-content/themes/verisure/js/jquery1.11.2.min.js"></script>-->
        <!--<script src="https://clientesverisure.com/wp-content/themes/verisure/js/bootstrap.min.js"></script>-->
        <!--<script src="https://clientesverisure.com/wp-content/themes/verisure/js/bootstrap-select.min.js"></script>-->
        <!--<script src="https://clientesverisure.com/wp-content/themes/verisure/js/jquery.easing.1.3.min.js"></script>-->
        <!--<script src="https://clientesverisure.com/wp-content/themes/verisure/js/wow.min.js"></script>-->
        <!--<script src="https://clientesverisure.com/wp-content/themes/verisure/js/custom.js"></script>-->
        <script>
            $(document).ready(function() {
                var divLoading = $('#divLoading');
                // $.ajaxSetup({
                //     headers: {
                //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                //     }
                // });
                $('#btn_agregar').click(function() {
                    agregar();
                });
                $('#btn_enviar').click(function() {
                    
                    if (!$('#aceptoterminos').prop('checked') || !$('#aceptopolitica').prop('checked')) {
                        Swal.fire({
                            title: '¡Advertencia!',
                            text: "Aceptar las politicas y terminos.",
                            icon: 'warning',
                            showCancelButton: false,
                            confirmButtonColor: '#636465',
                            cancelButtonColor: '#8b8d8e',
                            confirmButtonText: 'Muchas Gracias!'
                        });
                    } else {
                        $('.confirm-button-class').prop('disabled', true);
                        Swal.fire({
                            title: '¿Está seguro?',
                            text: "¡Confirmar el envio!",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#DD0612',
                            cancelButtonColor: '#8b8d8e',
                            customClass: {
                                confirmButton: 'confirm-button-class',
                                cancelButton: 'cancel-button-class',
                            },
                            confirmButtonText: '¡Si, enviar!'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                divLoading.show();
                                const nomberrores = ['NombreClienteError', 'CorreoClienteError', 'IdVentaError', 'MatriculaError','CCError','DetalleReferidoError'];
                                nomberrores.forEach(function(i) {
                                    $('span[id^="' + i + '"]').remove();
                                });
                                $.ajax({
                                    url: "<?= $baseUrl ?>/guardar-referido-tctv",
                                    type: "POST",
                                    dataType: "json",
                                    data: $('#formcomplete').serialize(),
                                    success: function(data) {
                                        if (data.success) {
                                            Swal.fire({
                                                title: '¡Registrado!',
                                                text: "Los referidos han sido enviado.",
                                                icon: 'success',
                                                showCancelButton: false,
                                                confirmButtonColor: '#636465',
                                                cancelButtonColor: '#8b8d8e',
                                                confirmButtonText: 'Muchas Gracias!'
                                            });
                                            cont = 0
                                            $("#DetalleReferido").val(cont);
                                            $("#detalles tbody tr").remove();
                                        }
                                        else
                                        {
                                            $('.respuesta_global').html(data.message);
                                        }
                                        divLoading.hide();
        
                                    },
                                    error: function(error) {
                                        if (error.status == 422) { // when status code is 422, it's a validation issue
                                            Swal.fire({
                                                title: '¡Importante!',
                                                text: "Por favor de validar los datos",
                                                icon: 'error',
                                                showCancelButton: false,
                                                confirmButtonColor: '#636465',
                                                cancelButtonColor: '#8b8d8e',
                                                confirmButtonText: 'Continuar'
                                            });
        
                                            // you can loop through the errors object and show it to the user
                                            console.warn(error.responseJSON.errors);
                                            // display errors on each form field
                                            $.each(error.responseJSON.errors, function(i, error) {
                                                var el = $(document).find('[name="' + i + '"]');
                                                $('span[id^="' + i + 'Error"]').remove();
                                                el.after($('<span id="' + i + 'Error" style="color: red;font-weight: 400;">' + error[0] + '</span>'));
                                            });
                                            divLoading.hide();
                                        }else{
                                            Swal.fire({
                                                title: '¡Error!',
                                                text: "Presentamos error en el servidor",
                                                icon: 'error',
                                                showCancelButton: false,
                                                confirmButtonColor: '#636465',
                                                cancelButtonColor: '#8b8d8e',
                                                confirmButtonText: 'Continuar'
                                            });
                                            divLoading.hide();
                                        }
                                    }
                                })
        
                            }
                        })
        
                    }
                });
        
                $("#auxTelefono").on('input', function(evt) {
                    // Solo Numeros.
                    $(this).val($(this).val().replace(/[^0-9]/g, ''));
                });
                $("#auxPrimerNombre").on('input', function(evt) {
                    // Solo Letras y espacio
                    $(this).val($(this).val().replace(/[^a-zA-Z ]/g, ''));
                });
                $("#auxPrimerApellido").on('input', function(evt) {
                    // Solo Letras y espacio
                    $(this).val($(this).val().replace(/[^a-zA-Z ]/g, ''));
                });
            });
            var cont = 0;
        
            function agregar() {
                var PrimerNombre = $("#auxPrimerNombre").val();
                var PrimerApellido = $("#auxPrimerApellido").val();
                var Telefono = $("#auxTelefono").val();
                var Segmento = $("#auxSegmento option:selected").val();
                if (PrimerNombre != "" && PrimerApellido != "" && Telefono != "" && Segmento != "") {
                    var fila = '<tr class="selected" id="fila' + cont + '">';
                    fila += '<td><a class="fa fa-remove" href="#" style="text-decoration:none;color:#DD0612;font-weight: bold;padding: 5px;" onclick="eliminar(' + cont + ')"></a></td>';
                    fila += '<td><input type="hidden" style="background-color: transparent;border-color: transparent;" name="PrimerNombre[]" value="' + PrimerNombre + '" readonly>' + PrimerNombre + '</td>';
                    fila += '<td><input type="hidden" style="background-color: transparent;border-color: transparent;" name="PrimerApellido[]" value="' + PrimerApellido + '" readonly>' + PrimerApellido + '</td>';
                    fila += '<td><input type="hidden" style="background-color: transparent;border-color: transparent;" name="Telefono[]" value="' + Telefono + '" readonly>' + Telefono + '</td>';
                    fila += '<td><input type="hidden" style="background-color: transparent;border-color: transparent;" name="Segmento[]" value="' + Segmento + '" readonly>' + Segmento + '</td>';
                    fila += '</tr>';
                    cont++;
                    limpiar();
                    $("#detalles").append(fila);
                    $("#DetalleReferido").val(cont);
                } else {
        
                    if (PrimerNombre == '') {
                        $("#auxPrimerNombre").addClass("error");
                        $("#auxPrimerNombre").after($('<span id="auxPrimerNombreError" style="color: red;font-weight: 400;">El Primer Nombre es obligatorio.</span>'));
                    } else {
                        $('span[id^="auxPrimerNombreError"]').remove();
                    }
        
                    if (PrimerApellido == '') {
                        $("#auxPrimerApellido").addClass("error");
                        $("#auxPrimerApellido").after($('<span id="auxPrimerApellidoError" style="color: red;font-weight: 400;">El Primer Apellido es obligatorio.</span>'));
                    } else {
                        $('span[id^="auxPrimerApellidoError"]').remove();
                    }
        
                    if (Telefono == '') {
                        $("#auxTelefono").addClass("error");
                        $("#auxTelefono").after($('<span id="auxTelefonoError" style="color: red;font-weight: 400;">El Telefono es obligatorio.</span>'));
                    } else {
                        $('span[id^="auxTelefonoError"]').remove();
                    }
        
                    if (Segmento == '') {
                        $("#auxSegmento").addClass("error");
                        $("#auxSegmento").after($('<span id="auxSegmentoError" style="color: red;font-weight: 400;">El Segmento es obligatorio.</span>'));
                    } else {
                        $('span[id^="auxSegmentoError"]').remove();
                    }
        
                    Swal.fire({
                        title: '¡Importante!',
                        text: "Falta completar los datos de Referido",
                        icon: 'warning',
                        showCancelButton: false,
                        confirmButtonColor: '#636465',
                        cancelButtonColor: '#8b8d8e',
                        confirmButtonText: 'Continuar'
                    })
        
                }
            }
        
            function limpiar() {
                $("#auxPrimerNombre").val("");
                $("#auxPrimerApellido").val("");
                $("#auxTelefono").val("");
                $("#auxSegmento")[0].selectedIndex = 0;
        
                $('span[id^="auxPrimerNombreError"]').remove();
                $('span[id^="auxPrimerApellidoError"]').remove();
                $('span[id^="auxTelefonoError"]').remove();
                $('span[id^="auxSegmentoError"]').remove();
        
        
            }
        
        
            function eliminar(index) {
                cont--;
                $("#fila" + index).remove();
                $("#DetalleReferido").val(cont);
            }
        </script>
    </body>
<!--<script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script>-->

</html>