<!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>
        	.LockOff {
        		display: none;
        		visibility: hidden;
        	}
        
        	.LockOn {
        		position: fixed;
        		top: 0px;
        		right: 0px;
        		width: 105%;
        		height: 105%;
        		text-align: center;
        		color: white;
        		font-size: 30px;
        		font-weight: bold;
        		padding-top: 20%;
        		background: rgba(0, 0, 0, 0.8);
        		background-repeat: no-repeat;
        		background-position: center;
        		z-index: 999;
        	}
        
        	body {
        		background: #F4F4F4;
        		font-weight: 400;
        		padding: 0px !important;
        		font-size: 1em;
        	}
        	html {
        		padding: 0px !important;
        	}	
        
        	p,
        	h1,
        	h2,
        	h3,
        	h4,
        	h5,
        	h6 {
        		font-weight: 400;
        	}
        
        	.btn-verde,
        	a.inverse.btn-verde,
        	.inverse a.btn-verde {
        		background-color: #00a581;
        	}
        
        	.btn.btn-verde {
        		width: 30%;
        		border-radius: 30px;
        		font-size: 14px;
        	}
        
        	.btn-verde:hover,
        	.btn-nav.btn-verde:hover,
        	.btn-verde:focus,
        	.btn-nav.btn-verde:focus {
        		background-color: #00a581;
        	}
        
        	.btn-shadow.btn-verde {
        		-webkit-box-shadow: 0 4px 0 #ba463a;
        		-moz-box-shadow: 0 4px 0 #ba463a;
        		box-shadow: 0 4px 0 #ba463a;
        	}
        
        	.btn-border.btn-verde,
        	a.btn-border.btn-verde {
        		color: #00a581;
        	}
            @media screen and (max-width: 600px) {
                 table {
                       width:100%;
                   }
            }
        
            .header-logoImage-verisure{
            width: 90%;
            max-height: 100px;
            max-width: 240px;
            }
        
          .btn-verisure{
                font-family: "Avenir Next LT W01 Demi", sans-serif;
                font-weight: normal !important;
                font-style: normal !important;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                font-size: 15px;
                color: #EE0008;
                border: 1px solid #eb3e3e;
                border-radius: 40px;
                display: inline-block;
                padding: 15px 24px 15px 44px;
                text-decoration: none;
                text-align: center;
                line-height: 28px;
                text-transform: uppercase;
            }
             
            .btn-verisure { 
            color: #ffffff; 
            background-color: #FF0033; 
            border-color: #FF0033; 
            } 
 
            .btn-verisure:hover, 
            .btn-verisure:focus, 
            .btn-verisure:active, 
            .btn-verisure.active, 
            .open .dropdown-toggle.btn-verisure { 
              color: #ffffff; 
              background-color: #a62828; 
              border-color: #a62828; 
            } 
 
            .btn-verisure:active, 
            .btn-verisure.active, 
            .open .dropdown-toggle.btn-verisure { 
              background-image: none; 
            } 
             
            .btn-verisure.disabled, 
            .btn-verisure[disabled], 
            fieldset[disabled] .btn-verisure, 
            .btn-verisure.disabled:hover, 
            .btn-verisure[disabled]:hover, 
            fieldset[disabled] .btn-verisure:hover, 
            .btn-verisure.disabled:focus, 
            .btn-verisure[disabled]:focus, 
            fieldset[disabled] .btn-verisure:focus, 
            .btn-verisure.disabled:active, 
            .btn-verisure[disabled]:active, 
            fieldset[disabled] .btn-verisure:active, 
            .btn-verisure.disabled.active, 
            .btn-verisure[disabled].active, 
            fieldset[disabled] .btn-verisure.active { 
              background-color: #555758; 
              border-color: #555758; 
            } 
             
            .btn-verisure .badge { 
              color: #FF0033; 
              background-color: #ffffff; 
            }
            .modal-menu{
                max-width: 320px;
                min-width: 320px;
            }
            .afi-form .card {
                color: #000!important;
                background: #fff url('https://clientesverisure.com/media/2022/01/card.png') no-repeat scroll 10px center;
                background-position: 2px center;
            }
            .input-group-addon {
                padding: 1px 12px;
                font-size: 0.8em;
                font-weight: 400;
                line-height: 1;
                color: #555;
                text-align: center;
                background-color: #ffffff;
                /*border: 1px solid #ccc;*/
                border-radius: 4px;
                border-right: 0px !important;
                border-radius: 4px;
                border-bottom: 1px solid #ccc;
                border-top: 1px solid #ccc;
                border-left: 1px solid #ccc;                
            }
            .form-control {
                background: #ffffff;
                color: #657380;
                font-size: 0.8em;
                font-weight: 400;
                font-family: 'Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif';
                padding: 6px 8px;
                width: 100%;
                height: 39px;
                outline: 0;
                /*border: 1px solid #ccc;*/
                border-bottom: 1px solid #ccc;
                border-top: 1px solid #ccc;
                border-right: 1px solid #ccc;
                border-left: 0px !important;
                box-shadow: none;
                -webkit-transition: all 0.2s;
                -moz-transition: all 0.2s;
                -ms-transition: all 0.2s;
                -o-transition: all 0.2s;
                transition: all 0.2s;
            }
            .modal-md-1{
                margin: 0% 20% 0% 20%;
            }
            .modal-md-2{
                margin: 25% 22% 25% 22%;
            }
            .modal-md-3{
                margin: 0% 20% 0% 20%;
            }            
            .band_logos {
                height: 22px;
                width: 36px;
            }
            .band_logos_2 {
                height: 15px;
                width: 57px;
            }
            
        </style>
        <style>
            .btn-close{
                background-image: url(https://static-content.vnforapps.com/v2/css/images/close.png);
                background-size: contain;
                z-index: 1000;
                opacity: 0.5;
                background-repeat: no-repeat;
                width: 23px;
                height: 23px;
                border: 0px;
                background-position: left;
                -webkit-transition-duration: 250ms;
                transition-duration: 250ms;
                -webkit-transition-timing-function: ease;
                transition-timing-function: ease;
                -webkit-transition-property: opacity;
                transition-property: opacity;
                cursor: pointer;
                float: right;
            }
                
            /*modal_DinersAmex*/
            #modal_DinersAmex .input-group-addon i{
                /*margin: 2px;*/
                font-size: 17px;
                color: #b9b9b9;
            }
            
            #modal_DinersAmex .modal-body div .row div{
                /*padding: 0px;*/
               /*width: 48%;*/
            }
            
            #modal_DinersAmex .modal-body div .row div:first-child{
                /*margin-right: 10px;*/
            } 
            
            #modal_DinersAmex .modal-body{
            padding: 25px;
            }
            
            #modal_menu .modal-body{
            padding: 25px;
            }
            
            #modal_DinersAmex .row{
                margin: 0px !important;
            }
            
            #modal_DinersAmex .btn-submit{
                background-color: rgb(225, 18, 62);
                border-color: rgb(191, 15, 53);
                border-width: 0 1px 4px 1px;
            }
            
            #modal_DinersAmex p{
                text-align: center;
                font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
                font-size: 13px !important;
                font-weight: 400;
                line-height: 1.42857143 !important;
                color: #555555;
                margin-top:0em !important; 
            }
            #modal_DinersAmex .col-6-1 {
                width: 50%;
            }
            #modal_DinersAmex .sep-right{
                padding-right: 1%;
            }
            #modal_DinersAmex .sep-left{
               padding-left: 1%;
            } 
            
            /*modal_CuentaBancaria*/
            #modal_CuentaBancaria .input-group-addon i{
                /*margin: 2px;*/
                font-size: 17px;
                color: #b9b9b9;
            }
            
            #modal_CuentaBancaria .modal-body div .row div{
                /*padding: 0px;*/
               /*width: 48%;*/
            }
            
            #modal_CuentaBancaria .modal-body div .row div:first-child{
                /*margin-right: 10px;*/
            } 
            
            #modal_CuentaBancaria .modal-body{
            padding: 25px;
            }
            
            #modal_CuentaBancaria .row{
                margin: 0px !important;
            }
            
            #modal_CuentaBancaria .btn-submit{
                background-color: rgb(225, 18, 62);
                border-color: rgb(191, 15, 53);
                border-width: 0 1px 4px 1px;
            }
            
            #modal_CuentaBancaria p{
                text-align: center !important;
                font-family: "Source Sans Pro","Helvetica Neue","Helvetica","Arial","sans-serif";
                font-size: 13px !important;
                font-weight: 400;
                line-height: 1.42857143 !important;
                color: #555555;
                margin-top:0em !important; 
            }
            #modal_CuentaBancaria .col-6-1 {
                width: 50%;
            }
            #modal_CuentaBancaria .sep-right{
                padding-right: 1%;
            }
            #modal_CuentaBancaria .sep-left{
               padding-left: 1%;
            } 
            
            @media only screen and (max-width: 600px) {
                .modal-backdrop.in{
                opacity: 0.8
                }    
                /*modal_DinersAmex*/
                #modal_DinersAmex .modal-md-1{
                    /*margin: 10px 10px 10px 10px;*/
                     margin: 30px;
                }
                
                #modal_DinersAmex{
                padding-left: 0px !important
                }
                
                /*modal_menu*/
                #modal_menu .modal-md-1{
                    margin: 30px;
                }
                
                #modal_menu{
                padding-left: 0px !important
                }
                
                /*modal_CuentaBancaria*/
                #modal_CuentaBancaria .modal-md-1{
                    /*margin: 10px 10px 10px 10px;*/
                     margin: 30px;
                }
                
                #modal_CuentaBancaria{
                padding-left: 0px !important
                }    
                
            }
            
            
            .ocultar{
                diplay:none;
            }
            
            .afi-has-error{
                border-color: #ff4136;
                -webkit-box-shadow:inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(216 79 85 / 60%) !important;
                box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(216 79 85 / 60%) !important;
            }
            
            .afi-has-error .input-group-addon{
                background-color: #ffffff;
                border-color: #ff4136;
            }
            .afi-has-error .form-control {
                border-color: #ff4136;
            }
            
    		@-webkit-keyframes animar{
    			0%{-webkit-transform:translate(0px,0px);}
    			10%{-webkit-transform:translate(20px,0px);}
    			20%{-webkit-transform:translate(0px,0px);}
    			30%{-webkit-transform:translate(20px,0px);}
    			40%{-webkit-transform:translate(0px,0px);}
    			50%{-webkit-transform:translate(20px,0px);}
    			60%{-webkit-transform:translate(0px,0px);}
    			70%{-webkit-transform:translate(20px,0px);}
    			80%{-webkit-transform:translate(0px,0px);}
    			90%{-webkit-transform:translate(20px,0px);}
    			100%{-webkit-transform:translate(0px,0px);}
    		}
    
    
        </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">
                    <div class="row">
                        <form action="" id="formcomplete">
                            <table width="600" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#F4F4F4" style="background-color: #F4F4F4;">
                                <tr>
                                    <td align="center">
                                        <!-- CREATIVIDAD -->
                                        <table width="600" height="0" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="background-color: #ffff;">
                                            <tr>
                                                <td width="600"><img src="<?= $baseUrl ?>/public/images/afiliacion/cabecera.png" alt="Alarmas para tu Hogar" width="600" border="0" style="display:block; padding:0; border:0" /></td>
                                            </tr>
                                        </table>
                                        <!-- ESTIMADO Y N° CONTRATO -->
                                        <table width="600" height="0" bgcolor="#F4F4F4" border="0" cellspacing="0" cellpadding="0" style="background-color: #F4F4F4;">
                                            <tr>
                                                <td width="600">
                                                    <p style="text-align: center;  font-size: 14px;font-family:  'Fira Sans', Arial;;color:#4d4d4d;margin: 0;">
                                                        <span style="font-weight: bold;">Estimado(a):</span> <?= $NombreCliente ?> <?= $ApellidoCliente ?>
                                                    </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="600">
                                                    <p style="text-align: center;  font-size: 14px;font-family:  'Fira Sans', Arial;;color:#4d4d4d;margin: 0;">
                                                        <span style="font-weight: bold;">N° de Contrato:</span> <?= $NroContrato ?>
                                                    </p>
                                                </td>
                                            </tr>
                                            <input id="ncontrato" name="ncontrato" type="hidden" value="<?= $NroContrato ?>">
                                            <input id="nombrecliente" name="nombrecliente" type="hidden" value="<?= $NombreCliente ?>">
                                            <input id="apellidocliente" name="apellidocliente" type="hidden" value="<?= $ApellidoCliente ?>">
                                            <input id="doc" name="doc" type="hidden" value="<?= $Documento ?>">
                                            <input id="tipodoc" name="tipodoc" type="hidden" value="<?= $TipoDocumento ?>">
                                            <input id="correocliente" name="correocliente" type="hidden" value="<?= $CorreoCliente ?>">
                                        </table>
                                        <table width="600" height="0" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="background-color: #ffff;">
                                            <tr>
                                                <td width="600"><img src="<?= $baseUrl ?>/public/images/afiliacion/banner_v2.png" alt="Alarmas para tu Hogar" width="600" border="0" style="display:block; padding:0; border:0;" /></td>
                                            </tr>
                                        </table>
                                        <table width="600" height="0" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="background-color: #ffff;">
                                            <tr>
                                                <td width="600"><img src="<?= $baseUrl ?>/public/images/afiliacion/btn-afiliese-aqui_v2.png" alt="Alarmas para tu Hogar" id="afiliar_aqui" width="600" border="0" style="display:block; padding:0; border:0;cursor: pointer;" data-toggle="modal" data-target="#modal_afiliar" /></td>
                                            </tr>
                                        </table>
                                        <br><br>
                                    </td>
                                </tr>
                            </table>
                            <div class="col-md-12">
                                <table width="600" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#F4F4F4" style="background-color: #F4F4F4;">
                                    <tr>
                                        <td align="center">
                                            <table width="550" height="0" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td align="left" style="font-size: 14px; line-height: 1px; font-family: Fira Sans, sans-serif; color: #747474; text-align: left;">
                                                        <img alt="-------" src="<?= $baseUrl ?>/public/images/afiliacion/line_dotted.gif" style="display: block; margin: 0 auto; display: inline-block; max-width: 100%; height: auto;" width="118" height="1" border="0" />
                                                        <img alt="-------" src="<?= $baseUrl ?>/public/images/afiliacion/line_dotted.gif" style="display: block; margin: 0 auto; display: inline-block; max-width: 100%; height: auto;" width="118" height="1" border="0" />
                                                    </td>
                                                    <td>
                                                        <p style="font-family:'Fira Sans',Arial;font-size: 16px;color: #4d4d4d;text-align: center;margin: 0;line-height: 20px;padding: 0px 40px;">
                                                            <strong>Servicio disponible las 24 horas del día:</strong>
                                                        </p>
                                                    </td>
                                                    <td align="right" style="font-size: 14px; line-height: 1px; font-family: Fira Sans, sans-serif; color: #747474; text-align: right;">
                                                        <img alt="-------" src="<?= $baseUrl ?>/public/images/afiliacion/line_dotted.gif" style="display: block; margin: 0 auto; display: inline-block; max-width: 100%; height: auto;" width="118" height="1" border="0">
                                                        <img alt="-------" src="<?= $baseUrl ?>/public/images/afiliacion/line_dotted.gif" style="display: block; margin: 0 auto; display: inline-block; max-width: 100%; height: auto;" width="118" height="1" border="0" />
                                                    </td>
                                                </tr>
                                            </table>
                                            <br><br>
                                            <table width="550" height="0" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td style="padding-left: 5px; padding-right: 5px; font-size: 14px; line-height: 42px; font-family: Arial, sans-serif; color: #333333; text-align: center; border-right: 0px solid #979797" width="33.333%" align="center">
                                                        <img alt="•" src="<?= $baseUrl ?>/public/images/afiliacion/ico-m.png" style="display: inline-block;" width="34" height="42" border="0">
                                                    </td>
                                                    <td style="padding-left: 5px; padding-right: 5px; font-size: 14px; line-height: 42px; font-family: Arial, sans-serif; color: #333333; text-align: center;" width="33.333%" align="center">
                                                        <img alt="•" src="<?= $baseUrl ?>/public/images/afiliacion/ico-telefono.png" style="display: inline-block;" width="45" height="42" border="0">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="padding-left: 5px; padding-right: 5px; padding-top: 16px; font-size: 13px; line-height: 15px; font-family: Arial, sans-serif; color: #737373; text-align: center;" width="33.333%" align="center">
                                                        <a href="mailto:clientes@verisure.pe" style="color: #737373; text-decoration: none; display: block; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size: 12px;">clientes@verisure.pe<br><span style="color: #a9a9a9; display: block; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size: 11px; padding-top: 4px;">24h</span></a>
                                                    </td>
                                                    <td style="padding-left: 5px; padding-right: 5px; padding-top: 16px; font-size: 13px; line-height: 15px; font-family: Arial, sans-serif; color: #737373; text-align: center;" width="33.333%" align="center">
                                                        <a href="tel:0 800 2 12 12" style="color: #737373; text-decoration: none; display: block; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size: 12px;">0 800 2 12 12<br>
                                                            <span style="color: #a9a9a9; display: block; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size: 11px; padding-top: 4px;">9 a 6 pm</span>
												        </a>
												    </td>
												</tr>
											</table>
											<br><br>
											<table style="border-radius: 0px 0px 45px 45px;background-color: #ffff;" width="550" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
										        <tbody>
											        <tr>
											            <td width="600">
											                <p style="text-align: center;  font-size: 16px;font-family:  'Fira Sans', Arial;color: #ff0033; margin-top: 20px;"> Personas que protegen a personas</p>
											                <p style="text-align: center;font-size: 12px;font-family:  'Fira Sans', Arial;color: #606060;margin-bottom: 5px;"> S&iacute;guenos en redes sociales</p>
											            </td>
											        </tr>
											        <tr>
											            <td width="600">
											                <p style="text-align: center;font-size: 12px;font-family:'Fira Sans', Arial;color: #606060;">
											                    <a href="https://www.facebook.com/AlarmasVerisurePeru/" style="color:#ff0033">Facebook</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="https://www.youtube.com/channel/UCsC7LzKdqytaOQ58IL011eQ" style="color:#ff0033">Youtube</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="https://twitter.com/VerisurePeru" style="color:#ff0033">Twitter</a>
											                </p>
											            </td>
											        </tr>
											    </tbody>
										    </table>
										</td>
									</tr>
								</table>
							</div>
						</form>
					</div>
				</div>
				<!-- Modal -->
				<div class="modal fade" id="modal_afiliar">
				    <div class="modal-dialog">
				        <div class="modal-content">
				            <div class="modal-header modal-header-danger" style="text-align: center;">
				                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				                <h3 id="myModalLabel" style="margin-bottom: 0;margin-top: 0.8em;font-size: 25px;">TÉRMINOS Y CONDICIONES</h3>
				            </div>
				            <div class="modal-body" style="background-color: #F4F4F4;">
				                <div class="row">
				                    <table width="550" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#F4F4F4" style="background-color: #F4F4F4;">
				                        <tbody>
				                            <tr>
				                                <td align="center">
				                                    <table width="550" height="0" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="background-color: #ffff;">
				                                        <tbody>
				                                            <tr>
				                                                <td width="550"><img src="<?= $baseUrl ?>/public/images/afiliacion/importante.png" alt="Alarmas para tu Hogar" width="550" border="0" style="display:block; padding:0; border:0"></td>
				                                            </tr>
				                                        </tbody>
				                                    </table>
				                                </td>
				                            </tr>
				                        </tbody>
				                    </table>
				                    <div class="col-md-12" style="padding-left: 18px;padding-right: 17px;">
				                        <table width="550" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#F4F4F4" style="background-color: #F4F4F4;">
				                            <tbody>
				                                <tr>
				                                    <td align="center">
				                                        <table width="504" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" style="background-color: #ffff;">
				                                            <tbody>
				                                                <tr>
				                                                    <td width="500">
				                                                        <p style="text-align: center;font-size: 14px;font-family:  'Fira Sans', Arial;font-weight: bold;color:#4d4d4d;/* padding: 0px 70px */">
                        													Antes de realizar la afiliación, debe tener en cuenta lo siguiente:
                        												</p>
                        												<ul style="font-family:'Fira Sans',Arial;font-size: 12px;padding-right: 25px;padding-left: 20px;color: #606060;text-align: justify;">
                        													<li>Asegúrese que su tarjeta este activa para compras en internet y cuente con el
                        														saldo suficiente para los cargos mensuales.</li>
                        													<li>Si cuenta con Pago Aplazado por Servicio de Instalación (PAI), sólo podrá
                        														actualizar los datos siempre que la tarjeta sea de crédito.</li>
                        													<li>Al afiliar su tarjeta, autoriza a cargar los pagos recurrentes de la empresa
                        														VERISURE PERÚ SAC, ya sean las cuotas de monitoreo, según los montos y
                        														condiciones del Contrato, las ampliaciones del servicio o servicios contratados,
                        														así como las cuotas PAI o cualquier suma que esté pendiente de pago, según
                        														corresponda.</li>
                        													<li>En caso de reemplazo de la tarjeta por pérdida, robo o vencimiento; o de cambio
                        														o eliminación de la cuenta bancaria, podrá utilizar este medio para realizar la
                        														re-afiliación solo del mismo contrato.</li>
                        													<li>La falta de fondos o rechazo de un cobro, no impide a VERISURE PERÚ SAC seguir
                        														realizando los cobros en la cuenta bancaria o tarjeta afiliada.</li>
                        													<li>En caso se haya establecido un monto máximo y este no permita realizar el débito 
                        													    automático por ser inferior al monto facturado, autoriza de manera expresa a 
                        													    Verisure a realizar el reajuste correspondiente hasta por el monto de su 
                        													    facturación.</li>	
                        													<li>Conozca <a href="https://clientesverisure.com/media/2021/05/tarjetas-aptas-para-afiliar.pdf" style="color: #ff0033;font-weight: 400;" target="_blank">aquí</a> las tarjetas aptas para afiliar.</li>
                        												</ul>
                        												<p></p>
                        												<div class="form-check" style="text-align: center;font-size: 14px;font-family:  'Fira Sans', Arial;font-weight: bold;color:#4d4d4d;">
                        													<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" aria-invalid="false" class="form-check-input" id="aceptoterminos">
                        																	<span class="wpcf7-list-item-label">Acepto los Términos y Condiciones</span>
                        																</label>
                        															</span>
                        														</span>
                        													</span>
                        												</div>
                        											</td>
                        										</tr>
                        									</tbody>
                        								</table>
                        							</td>
                        						</tr>
                        					</tbody>
                        				</table>
                        			</div>
                        		</div>
                        	</div>
                        	<div class="modal-footer">
                        	    <!--<div class="text-center"><input type="button" id="btn_afiliar" value="AFILIAR" class="btn btn-verde"></div>-->
                        	    <div class="text-center"><input type="button" id="btn_afiliar" value="AFILIAR" class="btn btn-verde"></div>
                        	</div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->
                
                <!-- Modal -->
                <div class="modal fade" id="modal_menu">
                    <div class="modal-dialog">
                        <div class="modal-content modal-md-1">
                            <div class="modal-header modal-header-danger" style="text-align: center;background-color: #F4F4F4;">
                                <img id="logo" class="header-logoImage-verisure" src="<?= $baseUrl ?>/public/images/afiliacion/logo_verisure_Mesa_de_trabajo.png" alt="Logo">
                                <span class="header-navClose j-hide-modal btn-close" data-dismiss="modal" aria-hidden="true"></span>
                            </div>
                            <div class="modal-body" style="background-color: #F4F4F4;">
                                <div class="row">
                                    <div class="col-md-12">
                                        <button class="btn btn-block btn-verisure" id="btnVisaMastercard">Visa o Mastercard</button>
                                        <button class="btn btn-block btn-verisure" id="btnDinersAmex">Diners o Amex</button>
                                        <button class="btn btn-block btn-verisure" id="btnCuentaBancaria">Cuenta Bancaria</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->
                
                <!-- Modal -->
                <div class="modal fade" id="modal_DinersAmex">
                    <div class="modal-dialog">
                        <div class="modal-content modal-md-1">
                            <div class="modal-header modal-header-danger" style="text-align: center;background-color: #F4F4F4;">
                                <img id="logo" class="header-logoImage-verisure" src="<?= $baseUrl ?>/public/images/afiliacion/logo_verisure_Mesa_de_trabajo.png" alt="Logo">
                                <span class="header-navClose j-hide-modal btn-close" data-dismiss="modal" aria-hidden="true"></span>
                                <p class="p-span" style='text-align: center;font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 12px;font-weight: 400;line-height: 1.42857143;color: #555555;margin-top:0em;'>
                                    Le recordamos que el cobro del servicio de monitoreo será debitado los primeros días de cada mes. No olvide activar <strong>la opción de compras por internet.</strong>
                                </p>
                            </div>
                            <div class="modal-body" style="background-color: #F4F4F4;">
                                <div class="afi-form secure-form center">
                                    <div class="form-group row" style="display: flex;">
                                        <div class="col col-6-1 sep-right">
                    			    	    <div class="form-group landscape-row nombre_cliente"> 
                        			    	    <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                    <input type="text" class="form-control"  maxlength="50" id="nombre_cliente" name="nombre_cliente" placeholder="Nombre">                                        
                                                </div>
                    			    	    </div>
                    			    	</div>
                    			    	<div class="col col-6-1 sep-left">
                    			    	    <div class="form-group landscape-row apellido_cliente">
                    			    	        <div class="input-group">
                    			    	            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    			    	            <input type="text" class="form-control" id="apellido_cliente"  maxlength="50" name="apellido_cliente" placeholder="Apellido">
                    			    	        </div>
                    			    	    </div>
                    			    	</div>
                    			    </div>
                                    <div class="form-group landscape-row correo_cliente"> 
                			    	    <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                            <input type="text" class="form-control" id="correo_cliente"  maxlength="100" name="correo_cliente" placeholder="Email">                                        
                                        </div>
            			    	    </div>			    	    
            			    	   <div class="form-group landscape-row nrotarjeta"> 
                			    	    <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
                                            <input type="text" maxlength="19" class="form-control" id="nrotarjeta" name="nrotarjeta" placeholder="Número de Tajerta">                                        
                                        </div>
            			    	    </div>
                                    <div class="form-group landscape-row fecha_vencimiento"> 
                			    	    <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                            <input  class="form-control" maxlength="5" placeholder="MM/AA" id="fecha_vencimiento" name="fecha_vencimiento"  type="text">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer" style="background-color: #F4F4F4;">
            			    	<p class="p-span" style="text-align: center;">
            						Regístrate a:
            					</p>
                                <button class="btn-control btn btn-submit btn-success btn-block btn-pay j-secure-form-submit btn-decorator" type="submit"  id="btnSuscribirseDiners" style="background-color: rgb(225, 18, 62); border-color: rgb(191, 15, 53);">Suscribirse</button>
                                <div class="col col-9 text-right"> 
                                    <img src="<?= $baseUrl ?>/public/images/afiliacion/dc.png" class="band_logos multibrand icon-dinersclub"> 
                                    <img src="<?= $baseUrl ?>/public/images/afiliacion/amex.png" class="band_logos amex_logo multibrand icon-amex" style="display: inline;">
                                </div>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->
                
                <!-- Modal -->
                <div class="modal fade" id="modal_CuentaBancaria" style="overflow-y: scroll;">
                    <div class="modal-dialog">
                        <div class="modal-content modal-md-1">
                            <div class="modal-header modal-header-danger" style="text-align: center;background-color: #F4F4F4;">
                                <img id="logo" class="header-logoImage-verisure" src="<?= $baseUrl ?>/public/images/afiliacion/logo_verisure_Mesa_de_trabajo.png" alt="Logo">
                                <span class="header-navClose j-hide-modal btn-close" data-dismiss="modal" aria-hidden="true"></span>
                                <p>
                                    Le recordamos que el cobro del servicio de monitoreo será debitado los primeros días de cada mes. No olvide activar <strong>la opción de compras por internet.</strong>
                                </p>
                            </div>
                            <div class="modal-body" style="background-color: #F4F4F4;">
                                <input type="hidden" >
                                <div class="afi-form secure-form center show">
                                    <div class="form-group landscape-row ban_nombre_cuenta">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user" style="margin: 2px;"></i></span>
                                            <input type="text" class="form-control" id="ban_nombre_cuenta" name="ban_nombre_cuenta" placeholder="Nombre del titular de la cuenta">
                                        </div>
                                    </div>
                                    <div class="form-group landscape-row ban_correo_cliente">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                            <input type="text" class="form-control" id="ban_correo_cliente"  maxlength="100" name="ban_correo_cliente" placeholder="Email">
                                        </div>
                                    </div>			    	    
                                    <div class="form-group landscape-row ban_tipo_documento"> 
                			    	    <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                			<select id="ban_tipo_documento" name="ban_tipo_documento" class="form-control" placeholder="">
                                			    <option value="" disabled selected>Seleccione Tipo Documento</option>
                                                <option value="DNI">DNI</option>
                                                <option value="RUC">RUC</option>
                                                <option value="CE">CE</option>
                                			</select>
                                        </div>
            			    	    </div>			    	    
                                    <div class="form-group landscape-row ban_nro_documento"> 
                			    	    <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                            <input type="text" class="form-control" id="ban_nro_documento" name="ban_nro_documento" placeholder="Documento" maxlength="12" onkeypress="return event.charCode >= 48 && event.charCode <= 57">                                        
                                        </div>
            			    	    </div>	
                                    <div class="form-group landscape-row ban_tipo_banco"> 
                			    	    <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-bank"></i></span>
                                			<select id="ban_tipo_banco" name="ban_tipo_banco" class="form-control" placeholder="Seleccione Banca">
                                			    <option value="" disabled selected>Seleccione Banca</option>
                                                <option value="BBVA">BBVA</option>
                                                <option value="BCP">BCP</option>
                                                <option value="Scotiabank">Scotiabank</option>
                                                <option value="Interbank">Interbank</option>
                                			</select>
                                        </div>
            			    	    </div>
                                    <div class="form-group landscape-row ban_tipo_cuenta"> 
                			    	    <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-money"></i></span>
                                			<select id="ban_tipo_cuenta" name="ban_tipo_cuenta" class="form-control" placeholder="Seleccione Tipo de Cuenta">
                                			    <option value="" disabled selected>Seleccione Tipo de Cuenta</option>
                                                <option value="Ahorro">Ahorro</option>
                                                <option value="Corriente">Corriente</option>
                                			</select>
                                        </div>
            			    	    </div>
                                    <div class="form-group landscape-row ban_tipo_moneda"> 
                			    	    <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-money"></i></span>
                                			<select id="ban_tipo_moneda" name="ban_tipo_moneda" class="form-control" placeholder="Seleccione Tipo de Moneda">
                                			    <option value="" disabled selected>Seleccione Tipo de Moneda</option>
                                                <option value="Soles">Soles</option>
                                                <option value="Dolares">Dolares</option>
                                			</select>
                                        </div>
            			    	    </div>
            			    	    <div class="form-group landscape-row ban_nro_cuenta">
            			    	        <div class="input-group">
            			    	            <span class="input-group-addon"><i class="fa fa-newspaper-o"></i></span>
            			    	            <input type="text" maxlength="20" class="form-control" id="ban_nro_cuenta" name="ban_nro_cuenta" placeholder="Número de Cuenta">
            			    	        </div>
            			    	    </div>
            			    	</div>
            			    </div>
            			    <div class="modal-footer" style="background-color: #F4F4F4;">
            			        <p>Regístrate a:</p>
            			        <button class="btn-control btn btn-submit btn-success btn-block btn-pay j-secure-form-submit btn-decorator" type="submit" id="btnSuscribirseCuenta" style="background-color: rgb(225, 18, 62); border-color: rgb(191, 15, 53);">Suscribirse</button>
            			        <div class="col col-9 text-center">
            			            <img src="<?= $baseUrl ?>/public/images/afiliacion/bcp.png" class="band_logos_2 multibrand icon-dinersclub">
            			            <img src="<?= $baseUrl ?>/public/images/afiliacion/bbva.png" class="band_logos_2 amex_logo multibrand icon-amex" style="display: inline;">
            			            <img src="<?= $baseUrl ?>/public/images/afiliacion/scotiabank.png" class="band_logos_2 amex_logo multibrand icon-amex" style="display: inline;">
            			            <img src="<?= $baseUrl ?>/public/images/afiliacion/interbank.png" class="band_logos_2 amex_logo multibrand icon-amex" style="display: inline;">
            			        </div>
            			    </div>
            			</div>
            		    <!-- /.modal-content -->´
            		</div>
            		<!-- /.modal-dialog -->
            	</div>
            	<!-- /.modal -->
            	
            	<div id="skm_LockPane" class="LockOff"></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>
		<!-- Otros -->
		<script type="text/javascript" src="https://static-content.vnforapps.com/v2/js/checkout.js" charset="UTF-8"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.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 type="text/javascript">
        	$(function() {
        		$("#btn_afiliar").click(function() {
        			if (!$('#aceptoterminos').prop('checked')) {
        				Swal.fire({
        					title: '¡Importante!',
        					text: "Marcar los Términos y Condiciones.",
        					icon: 'warning',
        					showCancelButton: false,
        					confirmButtonColor: '#636465',
        					cancelButtonColor: '#8b8d8e',
        					confirmButtonText: 'Cerrar'
        				});
        			} else {
        			    $('#modal_afiliar').modal('hide');
        			    $('#modal_menu').modal('show');
        			}
        			event.preventDefault();
        		});
                $("#btnVisaMastercard").click(function() {
        			    $('#modal_menu').modal('hide');
        				var lock = document.getElementById('skm_LockPane');
        				if (lock) {
        					lock.className = 'LockOn';
        					lock.innerHTML = "Procesando...";
        					// setTimeout(function() {
        					// 	lock.className = 'LockOff';
        					// }, 5000);
        				}
        				$.ajax({
        				// 	url: "{{route('irAfiliar')}}",
        				    url: "<?= $baseUrl ?>/afiliar-visa-mastercard",
        					type: "POST",
        					data: $('#formcomplete').serialize(),
        					dataType: "json",
        					success: function(response) {
        						console.log(response);
        						console.log(response.sessionkey);
        						console.log(response.merchantid);
        						if (response.success) {
        							VisanetCheckout.configure({
        								sessiontoken: response.sessionkey,
        								channel: 'web',
        								merchantid: response.merchantid,
        								purchasenumber: response.purchasenumber,
        								amount: response.amount,
        								expirationminutes: '20',
        								timeouturl: 'about:blank',
        								merchantlogo: response.url_logo,
        								formbuttoncolor: '#e1123e',
        								recurrence: 'TRUE',
        								recurrencetype: 'VARIABLE',
        								recurrencefrequency: 'MONTHLY',
        								recurrencemaxamount: response.maxamount,
        								recurrenceamount: '0.00',
        								action: response.callbackurl
        							});
        							VisanetCheckout.open();
        						} else {
        
        							Swal.fire({
        								title: 'Ocurrio un problema',
        								text: 'Favor de recargar la pagina. Si sigue presentando intentarlo más tarde',
        								icon: 'error',
        								showCancelButton: false,
        								confirmButtonColor: '#636465',
        								cancelButtonColor: '#8b8d8e',
        								confirmButtonText: 'Cerrar'
        							});
        
        						}
        						//lock.className = 'LockOff';
        						console.log(lock.className);
        					},
        					error: function(xhr, ajaxOptions, thrownError) {
        						lock.className = 'LockOff';
        						Swal.fire({
        							title: 'Ocurrio un problema con la conexión',
        							text: 'Favor de recargar la pagina. Si sigue presentando intentarlo más tarde',
        							icon: 'error',
        							showCancelButton: false,
        							confirmButtonColor: '#636465',
        							cancelButtonColor: '#8b8d8e',
        							confirmButtonText: 'Cerrar'
        						});
        					},
        					complete: function(jqXHR, textStatus) {
        						//lock.className = 'LockOff';
        						setTimeout(function() {
        							lock.className = 'LockOff';
        						}, 3200);
        					}
        				});
        				
        			event.preventDefault();
        			
        		});
        		$("#btnDinersAmex").click(function() {
        		        $('#modal_menu').modal('hide');
        			    $('#modal_DinersAmex').modal('show');
        			    $('#nombre_cliente').val('');
        			    $('#apellido_cliente').val('');
        			    $('#correo_cliente').val('');
        			    $('#nrotarjeta').val('');
        			    $('#fecha_vencimiento').val('');
        			    
        			    $('.afi-has-error').removeClass('afi-has-error');
        			    event.preventDefault();
        		});
        		$("#btnCuentaBancaria").click(function() {
        		        $('#modal_menu').modal('hide');
        			    $('#modal_CuentaBancaria').modal('show');
        			    $('#ban_nombre_cuenta').val('');
        			    $('#ban_correo_cliente').val('');
        			    $('#ban_tipo_documento').val('');
        			    $('#ban_nro_documento').val('');
        			    $('#ban_tipo_banco').val('');
        			    $('#ban_tipo_cuenta').val('');
        			    $('#ban_tipo_moneda').val('');
        			    $('#ban_nro_cuenta').val('');
        			    
        			    $('.afi-has-error').removeClass('afi-has-error');
        			    event.preventDefault();
        		});	
        		
        		$("#btnSuscribirseDiners").click(function() {
        
                        var nombre_cliente=$('#nombre_cliente').val(); 
                        var apellido_cliente=$('#apellido_cliente').val();
                        var correo_cliente = $('#correo_cliente').val();
                        var nrotarjeta = $('#nrotarjeta').val().replace(/ /g, "");
                        var fecha_vencimiento=$("#fecha_vencimiento").val();
                        
                        var ncontrato=$("#ncontrato").val();
        
                        var datos = {
                            nombre_cliente,
                            apellido_cliente,
                            correo_cliente,
                            nrotarjeta,
                            fecha_vencimiento,
                            ncontrato
                        }
                        console.log(datos);
                        if(validaformDiners(datos)){
        			    $('#modal_DinersAmex').modal('hide');
        				var lock = document.getElementById('skm_LockPane');
        				if (lock) {
        					lock.className = 'LockOn';
        					lock.innerHTML = "Procesando...";
        					// setTimeout(function() {
        					// 	lock.className = 'LockOff';
        					// }, 5000);
        				}                    
                            $.ajax({
        				// 	url: "{{route('irAfiliarDiners')}}",
        				    url: "<?= $baseUrl ?>/afiliar-diners",
        					type: "POST",
        					data: datos,
        					dataType: "json",
        					success: function(response) {
                                location.href = response.redirect_url;
        					},
        					error: function(xhr, ajaxOptions, thrownError) {
        						lock.className = 'LockOff';
        						Swal.fire({
        							title: 'Ocurrio un problema con la conexión',
        							text: 'Favor de recargar la pagina. Si sigue presentando intentarlo más tarde',
        							icon: 'error',
        							showCancelButton: false,
        							confirmButtonColor: '#636465',
        							cancelButtonColor: '#8b8d8e',
        							confirmButtonText: 'Cerrar'
        						});
        					},
        					complete: function(jqXHR, textStatus) {
        						setTimeout(function() {
        							lock.className = 'LockOff';
        						}, 3200);
        					}
        				});
                        }
        		    
                        		        
        			    event.preventDefault();
        		});
                $("#btnSuscribirseCuenta").click(function() {
        
                            var ban_nombre_cuenta=$('#ban_nombre_cuenta').val(); 
                            var ban_correo_cliente = $('#ban_correo_cliente').val();
                            var ban_tipo_documento=$('#ban_tipo_documento').val();
                            var ban_nro_documento=$('#ban_nro_documento').val();
                            var ban_tipo_banco=$('#ban_tipo_banco').val();
                            var ban_tipo_cuenta=$('#ban_tipo_cuenta').val();
                            var ban_tipo_moneda=$('#ban_tipo_moneda').val();
                            var ban_nro_cuenta=$('#ban_nro_cuenta').val();
                            
                            var ncontrato=$("#ncontrato").val();
                            var urlAfiliacion = window.location.href;
            
                            var datos = {
                                ban_nombre_cuenta,
                                ban_correo_cliente,
                                ban_tipo_documento,
                                ban_nro_documento,
                                ban_tipo_banco,
                                ban_tipo_cuenta,
                                ban_tipo_moneda,
                                ban_nro_cuenta,
                                ncontrato,
                                urlAfiliacion
                            }
                            console.log(datos);
                            if(validaformCuenta(datos)){
                               
            			    $('#modal_CuentaBancaria').modal('hide');
            				var lock = document.getElementById('skm_LockPane');
            				if (lock) {
            					lock.className = 'LockOn';
            					lock.innerHTML = "Procesando...";
            					// setTimeout(function() {
            					// 	lock.className = 'LockOff';
            					// }, 5000);
            				}                    
                                $.ajax({
            				// 	url: "{{route('irAfiliarCuenta')}}",
            					url: "<?= $baseUrl ?>/afiliar-cuenta-bancaria",
            					type: "POST",
            					data: datos,
            					dataType: "json",
            					success: function(response) {
            					    if (!response.success) 
            					    {
            					        if(!response.popup)
            					        {
            					            $('.respuesta_global').html(response.message); 
            					        }
            					        else
            					        {
                                            Swal.fire({
                                                title: '¡Error!',
                                                text: response.message,
                                                icon: 'warning',
                                                showCancelButton: false,
                                                confirmButtonColor: '#636465',
                                                cancelButtonColor: '#8b8d8e',
                                                confirmButtonText: 'Entendido!'
                                            });
            					        }
            					    }
                                    else
                                    {
                                        console.log(response.success);
                                        // location.href = response.redirect_url;
                                    }
            					},
            					error: function(xhr, ajaxOptions, thrownError) {
            						lock.className = 'LockOff';
            						Swal.fire({
            							title: 'Ocurrio un problema con la conexión',
            							text: 'Favor de recargar la pagina. Si sigue presentando intentarlo más tarde',
            							icon: 'error',
            							showCancelButton: false,
            							confirmButtonColor: '#636465',
            							cancelButtonColor: '#8b8d8e',
            							confirmButtonText: 'Cerrar'
            						});
            					},
            					complete: function(jqXHR, textStatus) {
            						setTimeout(function() {
            							lock.className = 'LockOff';
            						}, 3200);
            					}
            				});
                            
                              
                            }
            		    
                            		        
            			    event.preventDefault();
            		});		
        		
        		
        		function validaformDiners(datos){
        		    const {nombre_cliente, apellido_cliente, correo_cliente, nrotarjeta, fecha_vencimiento} = datos;
        
                    if (nombre_cliente.trim()=="") {
                         $(".nombre_cliente").addClass('afi-has-error');
                    } 
                    if (apellido_cliente.trim()=="") {
                         $(".apellido_cliente").addClass('afi-has-error');
                    }
                    if (correo_cliente.trim()=="") {
                         $(".correo_cliente").addClass('afi-has-error');
                    }
                    if (fecha_vencimiento.trim()=="") {
                         $(".fecha_vencimiento").addClass('afi-has-error');
                    }            
                    if (nrotarjeta=="") {
                        $(".nrotarjeta").addClass('afi-has-error');
                    }else if(nrotarjeta.charAt(0)!=3 && nrotarjeta.length<=15){
        				Swal.fire({
        					title: '¡Importante!',
        					text: "Error en numero de tarjeta, por favor verificar los datos ingresados",
        					icon: 'warning',
        					showCancelButton: false,
        					confirmButtonColor: '#636465',
        					cancelButtonColor: '#8b8d8e',
        					confirmButtonText: 'Cerrar'
        				});
                        $(".nrotarjeta").addClass('afi-has-error');
                        return false;
                    }else if(nrotarjeta.charAt(0)!=3 && nrotarjeta.length>=16){
                         
        				Swal.fire({
        					title: '¡Importante!',
        					text: "Error en tipo de tarjeta, por favor ingresar a menú principal y afiliar por el canal de Visa o Mastercard",
        					icon: 'warning',
        					showCancelButton: false,
        					confirmButtonColor: '#636465',
        					cancelButtonColor: '#8b8d8e',
        					confirmButtonText: 'Cerrar'
        				});
        				
                         $(".nrotarjeta").addClass('afi-has-error');
                         return false;
                    }else if(nrotarjeta.charAt(0)==3 && (nrotarjeta.length<14 || nrotarjeta.length>15)){
                        
        				Swal.fire({
        					title: '¡Importante!',
        					text: "Error en numero de tarjeta, por favor verificar los datos ingresados",
        					icon: 'warning',
        					showCancelButton: false,
        					confirmButtonColor: '#636465',
        					cancelButtonColor: '#8b8d8e',
        					confirmButtonText: 'Cerrar'
        				});
                         $(".nrotarjeta").addClass('afi-has-error');
                         return false;
                    }else if(fecha_vencimiento.length>=5){
                             var nuevafecha_vencimiento=fecha_vencimiento.split("/");
                             var hoy = new Date();
                             var fechaactual=new Date(hoy.getFullYear(),hoy.getMonth(),1);
                             var fechacomparar = new Date(parseInt(nuevafecha_vencimiento[1])+2000, parseInt(nuevafecha_vencimiento[0])-1, 1);
                                if(fechacomparar.getTime()<fechaactual.getTime()){
                                    $('.fecha_vencimiento').addClass('afi-has-error');
                    				Swal.fire({
                    					title: '¡Importante!',
                    					text: "Error en fecha de vencimiento, por favor verificar los datos ingresados",
                    					icon: 'warning',
                    					showCancelButton: false,
                    					confirmButtonColor: '#636465',
                    					cancelButtonColor: '#8b8d8e',
                    					confirmButtonText: 'Cerrar'
                    				});                            
                                    return false;                            
                                }
                    }
                    if(document.querySelector(".afi-has-error")){
                    				Swal.fire({
                    					title: '¡Importante!',
                    					text: "Verificar y completar los campos",
                    					icon: 'warning',
                    					showCancelButton: false,
                    					confirmButtonColor: '#636465',
                    					cancelButtonColor: '#8b8d8e',
                    					confirmButtonText: 'Cerrar'
                    				});                
                        return false;
                    }
                    
        
        		    return true;
        		    
        		}
                function validaformCuenta(datos){
                    const {ban_nombre_cuenta, ban_correo_cliente, ban_tipo_documento, ban_nro_documento, ban_tipo_banco,ban_tipo_cuenta,ban_tipo_moneda,ban_nro_cuenta} = datos;
        
                    if (ban_nombre_cuenta.trim()=="") {
                         $(".ban_nombre_cuenta").addClass('afi-has-error');
                    } 
                    if (ban_correo_cliente.trim()=="") {
                         $(".ban_correo_cliente").addClass('afi-has-error');
                    }
                    if (ban_tipo_documento=="" || ban_tipo_documento==null) {
                         $(".ban_tipo_documento").addClass('afi-has-error');
                    }
                    if (ban_nro_documento.trim()=="") {
                         $(".ban_nro_documento").addClass('afi-has-error');
                    }
                    if (ban_tipo_banco=="" || ban_tipo_banco==null) {
                         $(".ban_tipo_banco").addClass('afi-has-error');
                    }
                    if (ban_tipo_cuenta=="" || ban_tipo_cuenta==null) {
                         $(".ban_tipo_cuenta").addClass('afi-has-error');
                    }
                    if (ban_tipo_moneda=="" || ban_tipo_moneda==null) {
                         $(".ban_tipo_moneda").addClass('afi-has-error');
                    }
                    if (ban_nro_cuenta.trim()=="") {
                         $(".ban_nro_cuenta").addClass('afi-has-error');
                    }        
        
                    if(ban_tipo_documento=="DNI"){
                        if (ban_nro_documento.length != 8) {
                            $(".ban_nro_documento").addClass('afi-has-error');
                    		Swal.fire({
                    					title: '¡Importante!',
                    					text: "Por favor ingresar los 8 digitos del DNI",
                    					icon: 'warning',
                    					showCancelButton: false,
                    					confirmButtonColor: '#636465',
                    					cancelButtonColor: '#8b8d8e',
                    					confirmButtonText: 'Cerrar'
                    				});                            
                                    return false;                    
                        }
                    } else if(ban_tipo_documento=="RUC"){
                        if (ban_nro_documento.length != 11) {
                            $(".ban_nro_documento").addClass('afi-has-error');
                    		Swal.fire({
                    					title: '¡Importante!',
                    					text: "Por favor ingresar los 11 digitos del RUC",
                    					icon: 'warning',
                    					showCancelButton: false,
                    					confirmButtonColor: '#636465',
                    					cancelButtonColor: '#8b8d8e',
                    					confirmButtonText: 'Cerrar'
                    				});                            
                            return false;                      
                        } 
                        console.log(ban_nro_documento.substr(0, 2));
                        if(ban_nro_documento.substr(0, 2)== 10 || ban_nro_documento.substr(0, 2) == 20 || ban_nro_documento.substr(0, 2) == 15 || ban_nro_documento.substr(0, 2) == 17){
                           $(".ban_nro_documento").removeClass('afi-has-error');
                        }else{
                            $(".ban_nro_documento").addClass('afi-has-error');
                    		Swal.fire({
                    					title: '¡Importante!',
                    					text: "Por favor ingresar correctamente el RUC debe comenzar 10 o 20 o 15 o 17",
                    					icon: 'warning',
                    					showCancelButton: false,
                    					confirmButtonColor: '#636465',
                    					cancelButtonColor: '#8b8d8e',
                    					confirmButtonText: 'Cerrar'
                    				});                            
                            return false;
                        }
                    } else if(ban_tipo_documento=="CE"){ 
                        if (ban_nro_documento.length != 12) {
                            $(".ban_nro_documento").addClass('afi-has-error');
                    		Swal.fire({
                    					title: '¡Importante!',
                    					text: "Por favor ingresar los 12 digitos del CE",
                    					icon: 'warning',
                    					showCancelButton: false,
                    					confirmButtonColor: '#636465',
                    					cancelButtonColor: '#8b8d8e',
                    					confirmButtonText: 'Cerrar'
                    				});                            
                            return false;                     
                        }               
                      
                    }
                    
                    if(ban_tipo_banco=="BBVA"){
                        if (ban_nro_cuenta.trim().length <= 17 || ban_nro_cuenta.trim().length>=21) {
                            $(".ban_nro_cuenta").addClass('afi-has-error');
                    		Swal.fire({
                    					title: '¡Importante!',
                    					text: "Por favor ingresar los 18 o 20 digitos de la Cuenta",
                    					icon: 'warning',
                    					showCancelButton: false,
                    					confirmButtonColor: '#636465',
                    					cancelButtonColor: '#8b8d8e',
                    					confirmButtonText: 'Cerrar'
                    				});                            
                            return false;
                        }
                        if(ban_nro_cuenta.substr(0, 4)!='0011'){
                            $(".ban_nro_cuenta").addClass('afi-has-error');
                    		Swal.fire({
                    					title: '¡Importante!',
                    					text: "Por favor validar numero de cuenta, debe comenzar con 0011***",
                    					icon: 'warning',
                    					showCancelButton: false,
                    					confirmButtonColor: '#636465',
                    					cancelButtonColor: '#8b8d8e',
                    					confirmButtonText: 'Cerrar'
                    				});                            
                            return false;
                        }                
                    }else if(ban_tipo_banco=="BCP"){
                        if (ban_tipo_cuenta=='Ahorro') {
                            if (ban_nro_cuenta.trim().length != 14) {
                                $(".ban_nro_cuenta").addClass('afi-has-error');
                        		Swal.fire({
                        					title: '¡Importante!',
                        					text: "Por favor ingresar los 14 digitos de la Cuenta",
                        					icon: 'warning',
                        					showCancelButton: false,
                        					confirmButtonColor: '#636465',
                        					cancelButtonColor: '#8b8d8e',
                        					confirmButtonText: 'Cerrar'
                        				});                            
                                return false;
                            }
                        }else if (ban_tipo_cuenta=='Corriente'){
                            if (ban_nro_cuenta.trim().length != 13) {
                                $(".ban_nro_cuenta").addClass('afi-has-error');
                        		Swal.fire({
                        					title: '¡Importante!',
                        					text: "Por favor ingresar los 13 digitos de la Cuenta",
                        					icon: 'warning',
                        					showCancelButton: false,
                        					confirmButtonColor: '#636465',
                        					cancelButtonColor: '#8b8d8e',
                        					confirmButtonText: 'Cerrar'
                        				});                            
                                return false;
                            }                    
                        }
                        
                    }else if(ban_tipo_banco=="Scotiabank"){
                        if (ban_nro_cuenta.trim().length==14 || ban_nro_cuenta.trim().length==10 || ban_nro_cuenta.trim().length==12) {
                        }else{
                            $(".ban_nro_cuenta").addClass('afi-has-error');
                    		Swal.fire({
                    					title: '¡Importante!',
                    					text: "Por favor ingresar los 14 o 10 o 12 digitos de la Cuenta",
                    					icon: 'warning',
                    					showCancelButton: false,
                    					confirmButtonColor: '#636465',
                    					cancelButtonColor: '#8b8d8e',
                    					confirmButtonText: 'Cerrar'
                    				});                            
                            return false;                    
                        }
                        
                    }else if(ban_tipo_banco=="Interbank"){    
                        if (ban_nro_cuenta.trim().length != 13) {
                            $(".ban_nro_cuenta").addClass('afi-has-error');
                    		Swal.fire({
                    					title: '¡Importante!',
                    					text: "Por favor ingresar los 13 digitos de la Cuenta",
                    					icon: 'warning',
                    					showCancelButton: false,
                    					confirmButtonColor: '#636465',
                    					cancelButtonColor: '#8b8d8e',
                    					confirmButtonText: 'Cerrar'
                    				});                            
                            return false;
                        }               
                    }
                    
                    
                    if(document.querySelector(".afi-has-error")){
                    				Swal.fire({
                    					title: '¡Importante!',
                    					text: "Verificar y completar los campos",
                    					icon: 'warning',
                    					showCancelButton: false,
                    					confirmButtonColor: '#636465',
                    					cancelButtonColor: '#8b8d8e',
                    					confirmButtonText: 'Cerrar'
                    				});                
                        return false;
                    }
                    
                    
                    
                    return true;
        
                }		
                
                /*TC*/
                $("#nombre_cliente").bind('keypress', function(event) {
                  const $result = $('.nombre_cliente');    
                  var regex = new RegExp("^[a-zA-Z ]+$");
                  var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
                  if (!regex.test(key)) {
                    event.preventDefault();
                    return false;
                  }
                });
                $("#nombre_cliente").blur(function() {
                    const nombre_cliente=$("#nombre_cliente").val();
                    const $result = $('.nombre_cliente');
                    if (nombre_cliente.trim()!=="") {
                        $result.removeClass('afi-has-error');
                    } else {
                        $result.addClass('afi-has-error');
                    }
                });        
                $("#apellido_cliente").bind('keypress', function(event) {
                  var regex = new RegExp("^[a-zA-Z ]+$");
                  var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
                  if (!regex.test(key)) {
                    event.preventDefault();
                    return false;
                  }
                });
                $("#apellido_cliente").blur(function() {
                    const apellido_cliente=$("#apellido_cliente").val();
                    const $result = $('.apellido_cliente');
                    if (apellido_cliente.trim()!=="") {
                        $result.removeClass('afi-has-error');
                    } else {
                        $result.addClass('afi-has-error');
                    }
                });
                
                const validateEmail = (email) => {
                  return email.match(
                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                  );
                };
                
                const validate = () => {
                  const $result = $('.correo_cliente');
                  const email = $('#correo_cliente').val();
                  if (validateEmail(email)) {
                    $result.removeClass('afi-has-error');
                  } else {
                    $result.addClass('afi-has-error');
                  }
                  return false;
                }
                
                $('#correo_cliente').on('input', validate);
                $("#correo_cliente").blur(function() {
                    const correo_cliente=$("#correo_cliente").val();
                    const $result = $('.correo_cliente');
                    if (correo_cliente.trim()!=="") {
                        $result.removeClass('afi-has-error');
                    } else {
                        $result.addClass('afi-has-error');
                    }
                });
        
                $("#nrotarjeta").blur(function() {
                    const nrotarjeta=$("#nrotarjeta").val().replace(/ /g, "");
                    console.log(nrotarjeta);
                    console.log(nrotarjeta.charAt(0));
                    console.log(nrotarjeta.charAt(0)!=3 && nrotarjeta.length<=15);
                    const $result = $('.nrotarjeta');
                    if (nrotarjeta=="") {
                        $result.addClass('afi-has-error');
                    }else if(nrotarjeta.charAt(0)!=3 && nrotarjeta.length<=15){
                        console.log(1);
                        /*
        				Swal.fire({
        					title: '¡Importante!',
        					text: "Error en numero de tarjeta, por favor verificar los datos ingresados",
        					icon: 'warning',
        					showCancelButton: false,
        					confirmButtonColor: '#636465',
        					cancelButtonColor: '#8b8d8e',
        					confirmButtonText: 'Cerrar'
        				});
        				*/
                        $result.addClass('afi-has-error');
                    }else if(nrotarjeta.charAt(0)!=3 && nrotarjeta.length>=16){
                        console.log(2);
                         /*
        				Swal.fire({
        					title: '¡Importante!',
        					text: "Error en tipo de tarjeta, por favor ingresar a menú principal y afiliar por el canal de Visa o Mastercard",
        					icon: 'warning',
        					showCancelButton: false,
        					confirmButtonColor: '#636465',
        					cancelButtonColor: '#8b8d8e',
        					confirmButtonText: 'Cerrar'
        				});
        				*/
                        $result.addClass('afi-has-error');
                    }else if(nrotarjeta.charAt(0)==3 && (nrotarjeta.length<14 || nrotarjeta.length>15)){
                        console.log(3);
                        $result.addClass('afi-has-error');
                    }else {
                        $result.removeClass('afi-has-error');
                    }
                });
                $("#fecha_vencimiento").blur(function() {
                    const base=2000;
                    const fecha_vencimiento=$("#fecha_vencimiento").val();
                    const $result = $('.fecha_vencimiento');
                    if (fecha_vencimiento=="") {
                        $result.addClass('afi-has-error');
                    }else if(fecha_vencimiento.length>=5){
                             var nuevafecha_vencimiento=fecha_vencimiento.split("/");
                             var hoy = new Date();
                             var fechaactual=new Date(hoy.getFullYear(),hoy.getMonth(),1);
                             var fechacomparar = new Date(parseInt(nuevafecha_vencimiento[1])+base, parseInt(nuevafecha_vencimiento[0])-1, 1);
                            if(parseInt(nuevafecha_vencimiento[0])>=13){
                                console.log(">=13");
                                $result.addClass('afi-has-error');
                            }else{
                                console.log("entro sino fecha <12");
                                if(fechacomparar.getTime()<fechaactual.getTime()){
                                    console.log("menor a fecha actual");
                                    console.log(nuevafecha_vencimiento[1]);
                                    $result.addClass('afi-has-error');
                                }else{
                                    $result.removeClass('afi-has-error');
                                }
                                
                            }
                    }else{
                        $result.addClass('afi-has-error');
                    }
                });        
                
            let ccNumberInput = document.querySelector('#nrotarjeta'),
        		ccNumberPattern = /^\d{0,16}$/g,
        		ccNumberSeparator = " ",
        		ccNumberInputOldValue,
        		ccNumberInputOldCursor,
        		
        		ccExpiryInput = document.querySelector('#fecha_vencimiento'),
        		ccExpiryPattern = /^\d{0,4}$/g,
        		ccExpirySeparator = "/",
        		ccExpiryInputOldValue,
        		ccExpiryInputOldCursor,
        
        		mask = (value, limit, separator) => {
        			var output = [];
        			for (let i = 0; i < value.length; i++) {
        				if ( i !== 0 && i % limit === 0) {
        					output.push(separator);
        				}
        				
        				output.push(value[i]);
        			}
        			
        			return output.join("");
        		},
        		unmask = (value) => value.replace(/[^\d]/g, ''),
        		checkSeparator = (position, interval) => Math.floor(position / (interval + 1)),
        		ccNumberInputKeyDownHandler = (e) => {
        			let el = e.target;
        			ccNumberInputOldValue = el.value;
        			ccNumberInputOldCursor = el.selectionEnd;
        		},
        		ccNumberInputInputHandler = (e) => {
        			let el = e.target,
        					newValue = unmask(el.value),
        					newCursorPosition;
        			
        			if ( newValue.match(ccNumberPattern) ) {
        				newValue = mask(newValue, 4, ccNumberSeparator);
        				
        				newCursorPosition = 
        					ccNumberInputOldCursor - checkSeparator(ccNumberInputOldCursor, 4) + 
        					checkSeparator(ccNumberInputOldCursor + (newValue.length - ccNumberInputOldValue.length), 4) + 
        					(unmask(newValue).length - unmask(ccNumberInputOldValue).length);
        				
        				el.value = (newValue !== "") ? newValue : "";
        			} else {
        				el.value = ccNumberInputOldValue;
        				newCursorPosition = ccNumberInputOldCursor;
        			}
        			
        			el.setSelectionRange(newCursorPosition, newCursorPosition);
        			
        			highlightCC(el.value);
        		},
        		highlightCC = (ccValue) => {
        			let ccCardType = '',
        					ccCardTypePatterns = {
        						amex: /^3/,
        						visa: /^4/,
        						mastercard: /^5/,
        						disc: /^6/,
        						genric: /(^1|^2|^7|^8|^9|^0)/,
        					};
        			
        			for (const cardType in ccCardTypePatterns) {
        				if ( ccCardTypePatterns[cardType].test(ccValue) ) {
        					ccCardType = cardType;
        					break;
        				}
        			}
        			
        			let activeCC = document.querySelector('.cc-types__img--active'),
        					newActiveCC = document.querySelector(`.cc-types__img--${ccCardType}`);
        			
        			if (activeCC) activeCC.classList.remove('cc-types__img--active');
        			if (newActiveCC) newActiveCC.classList.add('cc-types__img--active');
        		},
        		ccExpiryInputKeyDownHandler = (e) => {
        			let el = e.target;
        			ccExpiryInputOldValue = el.value;
        			ccExpiryInputOldCursor = el.selectionEnd;
        		},
        		ccExpiryInputInputHandler = (e) => {
        			let el = e.target,
        					newValue = el.value;
        			
        			newValue = unmask(newValue);
        			if ( newValue.match(ccExpiryPattern) ) {
        				newValue = mask(newValue, 2, ccExpirySeparator);
        				el.value = newValue;
        			} else {
        				el.value = ccExpiryInputOldValue;
        			}
        		};
        
                ccNumberInput.addEventListener('keydown', ccNumberInputKeyDownHandler);
                ccNumberInput.addEventListener('input', ccNumberInputInputHandler);
                
                ccExpiryInput.addEventListener('keydown', ccExpiryInputKeyDownHandler);
                ccExpiryInput.addEventListener('input', ccExpiryInputInputHandler);
        
                /*CC*/
               $("#ban_nombre_cuenta").bind('keypress', function(event) {
                  const $result = $('.ban_nombre_cuenta');    
                  var regex = new RegExp("^[a-zA-Z ]+$");
                  var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
                  if (!regex.test(key)) {
                    event.preventDefault();
                    return false;
                  }
                });
                $("#ban_nombre_cuenta").blur(function() {
                    const ban_nombre_cuenta=$("#ban_nombre_cuenta").val();
                    const $result = $('.ban_nombre_cuenta');
                    if (ban_nombre_cuenta.trim()!=="") {
                        $result.removeClass('afi-has-error');
                    } else {
                        $result.addClass('afi-has-error');
                    }
                });        
        
                const validateCC = () => {
                  const $result = $('.ban_correo_cliente');
                  const email = $('#ban_correo_cliente').val();
                  if (validateEmail(email)) {
                    $result.removeClass('afi-has-error');
                  } else {
                    $result.addClass('afi-has-error');
                  }
                  return false;
                }
                
                $('#ban_correo_cliente').on('input', validateCC);
                $("#ban_correo_cliente").blur(function() {
                    const correo_cliente=$("#ban_correo_cliente").val();
                    const $result = $('.ban_correo_cliente');
                    if (correo_cliente.trim()!=="") {
                        $result.removeClass('afi-has-error');
                    } else {
                        $result.addClass('afi-has-error');
                    }
                });
                $("#ban_tipo_documento").blur(function() {
                    const ban_tipo_documento=$("#ban_tipo_documento").val();
                    const $result = $('.ban_tipo_documento');
                    if (ban_tipo_documento!="" || ban_tipo_documento!=null) {
                        $result.removeClass('afi-has-error');
                    } else {
                        $result.addClass('afi-has-error');
                    }
                });
                $("#ban_nro_documento").blur(function() {
                    const ban_nro_documento=$("#ban_nro_documento").val();
                    const ban_tipo_documento=$("#ban_tipo_documento").val();
                    const $result = $('.ban_nro_documento');
                    if (ban_nro_documento!="") {
                        $result.removeClass('afi-has-error');
                    } else if(ban_tipo_documento=="DNI"){
                        if (ban_nro_documento.length != 8) {
                            $result.addClass('afi-has-error');
                        }else{
                            $result.removeClass('afi-has-error')
                        }
                    } else if(ban_tipo_documento=="RUC"){
                        if (ban_nro_documento.length != 11) {
                            $result.addClass('afi-has-error');
                        }
                        if(ban_nro_documento.substr(0, 2) == 10 || ban_nro_documento.substr(0, 2) == 20 || ban_nro_documento.substr(0, 2) == 15 || ban_nro_documento.substr(0, 2) == 17){
                            $result.addClass('afi-has-error');
                        }else{
                            $result.removeClass('afi-has-error')
                        }
                    } else if(ban_tipo_documento=="CE"){   
                        if (ban_nro_documento.length != 0) {
                            $result.addClass('afi-has-error');
                        }else{
                            $result.removeClass('afi-has-error')
                        }                
                      
                    } else {
                        $result.addClass('afi-has-error');
                    }
                });
        
                $("#ban_tipo_banco").blur(function() {
                    const ban_tipo_banco=$("#ban_tipo_banco").val();
                    const $result = $('.ban_tipo_banco');
                    if (ban_tipo_banco!="" || ban_tipo_banco!=null) {
                        $result.removeClass('afi-has-error');
                    } else {
                        $result.addClass('afi-has-error');
                    }
                });
                $("#ban_tipo_cuenta").blur(function() {
                    const ban_tipo_cuenta=$("#ban_tipo_cuenta").val();
                    const $result = $('.ban_tipo_cuenta');
                    if (ban_tipo_cuenta!="" || ban_tipo_cuenta!=null) {
                        $result.removeClass('afi-has-error');
                    } else {
                        $result.addClass('afi-has-error');
                    }
                });
                $("#ban_tipo_moneda").blur(function() {
                    const ban_tipo_moneda=$("#ban_tipo_moneda").val();
                    const $result = $('.ban_tipo_moneda');
                    if (ban_tipo_moneda!="" || ban_tipo_moneda!=null) {
                        $result.removeClass('afi-has-error');
                    } else {
                        $result.addClass('afi-has-error');
                    }
                });
                $("#ban_nro_cuenta").blur(function() {
                    const ban_nro_cuenta=$("#ban_nro_cuenta").val();
                    const $result = $('.ban_nro_cuenta');
                    if (ban_nro_cuenta!="" || ban_nro_cuenta!=null) {
                        $result.removeClass('afi-has-error');
                    } else {
                        $result.addClass('afi-has-error');
                    }
                });         
        
            
        
        	});
        
        // 	$(document).ready(function() {
        // 		$.ajaxSetup({
        // 			headers: {
        // 				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        // 			}
        // 		});
        
        // 	});
        </script>
        
        <script>
        	document.addEventListener("DOMContentLoaded", function() {
        		const milisegundos = 1000;
        		setInterval(function() {
        			var lock = document.getElementById('skm_LockPane');
        			var cn = document.forms.length;
        			console.log('Entra un 1 segundo');
        			if (cn == 2) {
        				if (lock.className == 'LockOff') {
        					lock.className = 'LockOn';
        					lock.innerHTML = "Procesando...";
        					console.log('lockOn!!!! cada un 1 segundo');
        					// setTimeout(function() {
        					// 	lock.className = 'LockOff';
        					// }, 5000);
        				}
        			}
        		}, milisegundos);
        	});
        </script>
    </body>
<!--<script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script>-->

</html>