{% extends 'base.html.twig' %}

{% use 'analytics.html.twig' %}

{% block title %}Home{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ siteUrl('modulos/suscripcion/exports/optin.css') }}" media="all">
    <link rel="stylesheet" type="text/css" href="{{ siteUrl('modulos/imagen/style.css') }}" media="all">
{% endblock %}
{% block metas %}
{% endblock %}
{% block links %}
{% endblock %}
{% block javascript %}
    <script type="text/javascript" src="{{ siteUrl('modulos/suscripcion/exports/js.cookie-2.0.3.min.js') }}"></script>
{% endblock %}
{% block content %}
<!-- Contenedor ID 59472 BEGIN -->
<div class="container-wrapper">
    <div class="container-fluid container-inner-59472">        <div class="idp-style-class-201253"><!-- Row ID 79385 BEGIN -->
<div class="row">
    <div class="clearfix"><!-- Column ID 148312 BEGIN -->
<div class="col-sm-6">
    <div class=""><!-- ModuleInstance ID  BEGIN -->
<div class="idp-style-class-201314"><div class="text-center">
                    <a href="#" id="idp-form-suscribe-btn-6085a3c99826e" data-toggle="modal" data-target="#idp-form-popup-6085a3c99826e" class="btn btn-default" style="background-color: #d46d13; width: 80%; height: 60px; color: #ffffff; line-height: 48px; font-size: 15px; ">
                    REGÍSTRATE GRATIS
                    </a>
                </div>
        <div class="modal fade" tabindex="-1" role="dialog" id="idp-form-popup-6085a3c99826e" >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-body" id="modal-body-6085a3c99826e">

                        <form id="optinForm-6085a3c99826e" method="post" accept-charset="UTF-8"
                              action="{{ urlFor('submit-optin-6085a3c99826e') }}">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="optin-form">
                                        <div class="opitn-header">
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-striped active" role="progressbar"
                                                    aria-valuenow="50" aria-valuemin="0"
                                                    aria-valuemax="100" style="width: 50%">
                                                    <span class="value" id="progressBarText">
                                                        50% Completado
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="entradilla" id="entradillaTextHolder">
                                                Casi hemos terminado! Por favor, completa el formulario y pulsa el botón para registrarte
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-5 text-center">
                                    <img src="broken.jpg" width="100%" alt="">
                                </div>
                                <div class="col-sm-7">
                                    <h4 class="text-center titulo">
                                        Ingresa tus datos para acceder gratis al curso
                                    </h4>
                                    <fieldset>
                                        <div class="form-group">
                                            <input id="nombre-6085a3c99826e" type="text" class="form-control" placeholder="Nombre" name="nombre">
                                        </div>
                                        <div class="form-group">
                                            <input id="email-6085a3c99826e" type="email" class="form-control" placeholder="E-Mail" name="email">
                                        </div>

                                        <div class="checkbox checkbox-primary">
                                            <input type="checkbox" id="terminos" name="terminos" value="1" required="required">
                                            <label for="terminos">
                                                Acepto las
                                                <a href="https://ventas.vidroop.es/terminos-y-condiciones" target="_blank">
                                                condiciones de política de privacidad descritas
                                                </a>
                                            </label>
                                        </div>

                                        <div class="checkbox checkbox-primary">
                                            <input type="checkbox" id="acepta-emails" name="acepta-emails" value="1" required="required">
                                            <label for="acepta-emails">
                                                <a href="https://ventas.vidroop.es/clausula-email" target="_blank">Acepto recibir correos electrónicos según las declaraciones descritas</a>
                                            </label>
                                        </div>

                                        <p id="error-6085a3c99826e" class="text-danger" style="display:none">Por favor, complete todos los campos</p>

                                        <button type="submit" class="btn btn-primary btn-block">
                                            ACCEDER AHORA
                                        </button>
                                    </fieldset>
                                    <div class="text-center">
                                        <small class="debajoBotonHolder"></small>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        
            <script type="text/javascript">
                (function() {

                    var registerHandler6085a3c99826e = function($) {
                        var alreadyOpen = false;
                        var fset, bnt, form, oldBtnText;

                        $(document).ready(function() {
                            $('#idp-form-suscribe-btn-6085a3c99826e').click(function(){
                                alreadyOpen = true;
                            });

                            $('#optinForm-6085a3c99826e').submit(function(ev){
                                var form = $(this);
                                ev.preventDefault();

                                var terminos  = $('#terminos').is(':checked') || false,
                                    acemails  = $('#acepta-emails').is(':checked') || false;

                                if (!terminos) {
                                    alert('Debe aceptar los Términos y Condiciones');
                                    return false;
                                }

                                if (!acemails) {
                                    alert('Debe aceptar recibir E-mails de parte nuestra');
                                    return false;
                                }

                                Cookies.set('optinForm6085a3c99826e', 'sent');

                                var data = form.serialize() + '&url=' + encodeURI(window.location.href);

                                fset = form.find('fieldset');
                                btn = $('#optinForm-6085a3c99826e button');

                                fset.attr('disabled', 'disabled');

                                oldBtnText = btn.text();
                                btn.text('Espere por favor...');

                                $.post(form.attr('action'), data, function(data) {
                                    fset.removeAttr('disabled');

                                    if (data.status === 'ok') {
                                        $('#modal-body-6085a3c99826e').html('<div class="text-center" style="color: #000; padding: 50px 0;"><h1>Muchas gracias!</h1><p>Hemos enviado un correo a su casilla con las instrucciones para acceder al curso.</p></div>')
                                    } else {
                                        alert("Se produjo un error desconocido");
                                    }

                                }, 'json').fail(function(response) {
                                    var resp = JSON.parse(response.responseText);
                                    fset.removeAttr('disabled');
                                    btn.text(oldBtnText);

                                    if (resp.info === 'invalid_fields') {
                                        var inpNombre, inpEmail;

                                        inpNombre = $("#nombre-6085a3c99826e");
                                        if (inpNombre.val() === "") {
                                            inpNombre.parent(".form-group").addClass("has-error");
                                        }

                                        inpEmail = $("#email-6085a3c99826e");
                                        if (inpEmail.val() === "") {
                                            inpEmail.parent(".form-group").addClass("has-error");
                                        }

                                        $("#error-6085a3c99826e").show();
                                    } else {
                                        alert('Se produjo un error desconocido');
                                    }
                                });
                            });

                            
                        });
                    };

                    var timer6085a3c99826e = function() {
                        if (window.jQuery) {
                            registerHandler6085a3c99826e(window.jQuery);
                        } else {
                            window.setTimeout(timer6085a3c99826e, 100);
                        }
                    };
                    timer6085a3c99826e();
                })();
            </script>
        </div>
<!-- ModuleInstance ID  END -->

<!-- ModuleInstance ID  BEGIN -->
<div class="idp-style-class-201249"><div class="text-center"><iframe style="display: inline-block;" src="https://player.vimeo.com/video/541195271?autoplay=0&amp;loop=0&amp;portrait=&amp;title=&amp;byline=" frameborder="0" width="300" height="533"></iframe></div></div>
<!-- ModuleInstance ID  END -->

    </div></div>
<!-- Column ID 148312 END -->

<!-- Column ID 148313 BEGIN -->
<div class="col-sm-6">
    <div class=""><!-- ModuleInstance ID  BEGIN -->
<div class="idp-style-class-201251"><h4 style="text-align: center;"><span style="color: #ffffff;">Taller&nbsp;Online Gratis</span></h4>
<h1 style="text-align: center;"><span style="color: #ffffff;">De R&iacute;gidos a Libres&nbsp;al Calor de tu Piel</span></h1>
<p><span style="color: #ffffff;">&nbsp;</span></p>
<h4 style="text-align: center;"><span style="color: #ffffff;">&iquest;Sientes dolor muscular en el cuello, en los hombros y no te alivias con&nbsp;el pasar de los&nbsp;d&iacute;as?</span></h4>
<h4 style="text-align: center;"><span style="color: #ffffff;">Descubre&nbsp;una secuencia de auto masaje sencilla y muy funcional junto con una terapia de calor h&uacute;medo, que en pocos minutos te ayudar&aacute; a aliviar profundamente el malestar en esta zona.</span></h4>
<h4 style="text-align: center;"><span style="color: #ffffff;">Este taller est&aacute;&nbsp;dirigido a mujeres que est&aacute;n en el camino del auto cuidado</span></h4></div>
<!-- ModuleInstance ID  END -->

<!-- ModuleInstance ID  BEGIN -->
<div class="idp-style-class-201252"><div class="text-center">
                    <a href="#" id="idp-form-suscribe-btn-6085a14ab7f3e" data-toggle="modal" data-target="#idp-form-popup-6085a14ab7f3e" class="btn btn-default" style="background-color: #d46d13; width: 80%; height: 60px; color: #ffffff; line-height: 48px; font-size: 15px; ">
                    REGÍSTRATE GRATIS
                    </a>
                </div>
        <div class="modal fade" tabindex="-1" role="dialog" id="idp-form-popup-6085a14ab7f3e" >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-body" id="modal-body-6085a14ab7f3e">

                        <form id="optinForm-6085a14ab7f3e" method="post" accept-charset="UTF-8"
                              action="{{ urlFor('submit-optin-6085a14ab7f3e') }}">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="optin-form">
                                        <div class="opitn-header">
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-striped active" role="progressbar"
                                                    aria-valuenow="50" aria-valuemin="0"
                                                    aria-valuemax="100" style="width: 50%">
                                                    <span class="value" id="progressBarText">
                                                        50% Completado
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="entradilla" id="entradillaTextHolder">
                                                Casi hemos terminado! Por favor, completa el formulario y pulsa el botón para registrarte
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-5 text-center">
                                    <img src="broken.jpg" width="100%" alt="">
                                </div>
                                <div class="col-sm-7">
                                    <h4 class="text-center titulo">
                                        Ingresa tus datos para acceder gratis al curso
                                    </h4>
                                    <fieldset>
                                        <div class="form-group">
                                            <input id="nombre-6085a14ab7f3e" type="text" class="form-control" placeholder="Nombre" name="nombre">
                                        </div>
                                        <div class="form-group">
                                            <input id="email-6085a14ab7f3e" type="email" class="form-control" placeholder="E-Mail" name="email">
                                        </div>

                                        <div class="checkbox checkbox-primary">
                                            <input type="checkbox" id="terminos" name="terminos" value="1" required="required">
                                            <label for="terminos">
                                                Acepto las
                                                <a href="https://ventas.vidroop.es/terminos-y-condiciones" target="_blank">
                                                condiciones de política de privacidad descritas
                                                </a>
                                            </label>
                                        </div>

                                        <div class="checkbox checkbox-primary">
                                            <input type="checkbox" id="acepta-emails" name="acepta-emails" value="1" required="required">
                                            <label for="acepta-emails">
                                                <a href="https://ventas.vidroop.es/clausula-email" target="_blank">Acepto recibir correos electrónicos según las declaraciones descritas</a>
                                            </label>
                                        </div>

                                        <p id="error-6085a14ab7f3e" class="text-danger" style="display:none">Por favor, complete todos los campos</p>

                                        <button type="submit" class="btn btn-primary btn-block">
                                            ACCEDER AHORA
                                        </button>
                                    </fieldset>
                                    <div class="text-center">
                                        <small class="debajoBotonHolder"></small>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        
            <script type="text/javascript">
                (function() {

                    var registerHandler6085a14ab7f3e = function($) {
                        var alreadyOpen = false;
                        var fset, bnt, form, oldBtnText;

                        $(document).ready(function() {
                            $('#idp-form-suscribe-btn-6085a14ab7f3e').click(function(){
                                alreadyOpen = true;
                            });

                            $('#optinForm-6085a14ab7f3e').submit(function(ev){
                                var form = $(this);
                                ev.preventDefault();

                                var terminos  = $('#terminos').is(':checked') || false,
                                    acemails  = $('#acepta-emails').is(':checked') || false;

                                if (!terminos) {
                                    alert('Debe aceptar los Términos y Condiciones');
                                    return false;
                                }

                                if (!acemails) {
                                    alert('Debe aceptar recibir E-mails de parte nuestra');
                                    return false;
                                }

                                Cookies.set('optinForm6085a14ab7f3e', 'sent');

                                var data = form.serialize() + '&url=' + encodeURI(window.location.href);

                                fset = form.find('fieldset');
                                btn = $('#optinForm-6085a14ab7f3e button');

                                fset.attr('disabled', 'disabled');

                                oldBtnText = btn.text();
                                btn.text('Espere por favor...');

                                $.post(form.attr('action'), data, function(data) {
                                    fset.removeAttr('disabled');

                                    if (data.status === 'ok') {
                                        $('#modal-body-6085a14ab7f3e').html('<div class="text-center" style="color: #000; padding: 50px 0;"><h1>Muchas gracias!</h1><p>Hemos enviado un correo a su casilla con las instrucciones para acceder al curso.</p></div>')
                                    } else {
                                        alert("Se produjo un error desconocido");
                                    }

                                }, 'json').fail(function(response) {
                                    var resp = JSON.parse(response.responseText);
                                    fset.removeAttr('disabled');
                                    btn.text(oldBtnText);

                                    if (resp.info === 'invalid_fields') {
                                        var inpNombre, inpEmail;

                                        inpNombre = $("#nombre-6085a14ab7f3e");
                                        if (inpNombre.val() === "") {
                                            inpNombre.parent(".form-group").addClass("has-error");
                                        }

                                        inpEmail = $("#email-6085a14ab7f3e");
                                        if (inpEmail.val() === "") {
                                            inpEmail.parent(".form-group").addClass("has-error");
                                        }

                                        $("#error-6085a14ab7f3e").show();
                                    } else {
                                        alert('Se produjo un error desconocido');
                                    }
                                });
                            });

                            
                        });
                    };

                    var timer6085a14ab7f3e = function() {
                        if (window.jQuery) {
                            registerHandler6085a14ab7f3e(window.jQuery);
                        } else {
                            window.setTimeout(timer6085a14ab7f3e, 100);
                        }
                    };
                    timer6085a14ab7f3e();
                })();
            </script>
        </div>
<!-- ModuleInstance ID  END -->

<!-- ModuleInstance ID  BEGIN -->
<div class="idp-style-class-201250"><div class="text-center"><img width="30%" height="" src="{{ siteUrl('/uploads/fotokarla.jpg') }}" alt=""></div></div>
<!-- ModuleInstance ID  END -->

<!-- ModuleInstance ID  BEGIN -->
<div class=""><h3 style="text-align: center;"><span style="color: #993300;">Karla Maturana</span></h3>
<h4 style="text-align: center;"><span style="color: #993300;">Experta&nbsp;en Masoterapia</span></h4>
<p style="text-align: center;"><span style="color: #993300;">En este taller te ense&ntilde;ar&eacute; una t&eacute;cnica sensilla pero muy efectiva para aliviar el malestar en el cuello y los hombros.</span></p></div>
<!-- ModuleInstance ID  END -->

    </div></div>
<!-- Column ID 148313 END -->

    </div></div>
<!-- Row ID 79385 END -->

        </div>    </div></div>
<!-- Contenedor ID 59472 END -->

{% endblock %}