<?php include("admin/config.php"); include 'include/head.php';?>
    <title>INNOVAPUCP | Contáctanos</title>
    <meta name='title' content='INNOVAPUCP | Contáctanos' />  
    <meta name='description' content='Con el fin de ayudarnos a proporcionarle la mejor respuesta posible, por favor, comparta un poco más de información.' />
    <meta name='url' content='<?php echo $host; ?>contacto.php' />
    <meta name='keywords' content='INNOVAPUCP,Contáctanos' />
    <!-- OpenGraph Meta Tags --> 
    <meta property="og:locale" content="es_ES" />
    <meta property="og:type" content="website" />
    <meta property='og:title' content='INNOVAPUCP | Contáctanos' />
    <meta property='og:description' content='Con el fin de ayudarnos a proporcionarle la mejor respuesta posible, por favor, comparta un poco más de información.' />
    <meta property='og:url' content='<?php echo $host; ?>contacto.php' />
    <meta property='og:image' content='<?php echo $host; ?>img/logo_redes.jpg' />

<script>   
// btn_enviar  servicio nombres formulario
$(document).ready(function () {
$('#btn_enviar').on('click', function() {
	if ( $("#formulario").valid() == true ){
		var url = "contacto-enviar.php";
		$("#respuesta").html("Enviando...");
		$("#btn_enviar").css("display", "none");

    var nombres_apellidos=document.getElementById("nombres_apellidos").value;
		$.ajax({
			type: "POST",
			url: url,
			data: $("#formulario").serialize(), // Adjuntar los campos del formulario enviado.
			success: function(data){
				if ( data == "txtCaptcha"){
					$("#respuesta").html("<span style='color:#F00'>El código ingresado es incorrecto, Inténtelo nuevamente.</span>");
					document.getElementById('imaCaptcha').src = 'captcha.php';
					$("#btn_enviar").css("display", "inline-block");
				}else{
          //location.href="send_enviado.php?n="+nombres_apellidos+"";

          window.open("send_enviado.php?n="+nombres_apellidos+"");
					$("#btn_enviar").css("display", "inline-block");
				}
			}
		});
	    return false; // Evitar ejecutar el submit del formulario.	
	}
});
    });
</script>
  </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <input type="hidden" value="6" id="txt_servicio"/>
        <?php include 'include/menu.php';?>
        <div class="container-texto-menu">
          <div class="texto-menu">
            <div class="container">Contáctanos</div>
          </div>
        </div>
        <div class="container padding_section" id="contacto">
            <div class="row">
              <div class="col-xs-12 separador-top titulo-xs"><h1 class="visible-xs-block">Contáctanos</h1><br></div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                  <p>Con el fin de ayudarnos a proporcionarle la mejor respuesta posible, por favor, comparta un poco más de información y haga clic en el botón <strong>Enviar.</strong></p><br>
                  <form method="post" id="formulario">
                    <div class="form-group clearfix">
                     <label>* Solución </label>
                      <select class="form-control"  name="solucion" id="solucion" required>
                        <option value="">Seleccione</option> 
                        <option value="Asesoría y Consultoría">Asesoría y Consultoría</option>
                        <option value="Cursos In-Company | Cursos abiertos">Cursos In-Company | Cursos abiertos</option>
                        <option value="Servicios de Laboratorio">Servicios de Laboratorio</option>
                        <option value="Evaluación de Cumplimiento">Evaluación de Cumplimiento</option>
                        <option value="Outsourcing">Outsourcing</option>
                      </select>
                    </div>                            
                    <div class="form-group">
                        <label>* Nombre y Apellidos</label>
                        <input  class="form-control"
                        placeholder="Ingrese Nombre y Apellido" id="nombres_apellidos" name="nombres_apellidos" required  minlength="3" />
                    </div>

                    <div class="form-group ">
                        <label>* Empresa </label>
                        <input  class="form-control"
                               placeholder="Ingrese la empresa" name="empresa" id="empresa" required minlength="3">
                    </div>

                    <div class="form-group">
                        <label>* Cargo</label>
                        <input  class="form-control"
                        placeholder="Ingrese cargo" id="cargo" name="cargo" required minlength="3"/>
                    </div>
                    
                    <div class="form-group">
                        <label>* Correo electrónico </label>
                        <input  class="form-control"
                               placeholder="Ingrese Correo electrónico" id="correo" name="correo" type="email" required minlength="5" email="true">
                    </div>

                    <div class="form-group">
                        <label>*Teléfono</label>
                        <input  class="form-control" placeholder="Ingrese Teléfono" name="telefono" id="telefono" required number="true" maxlength="9" minlength="7" />
                    </div>
                     
                    <div class="form-group clearfix">
                      <label>* ¿Cómo se enteró de nosotros?</label>
                      <select class="form-control" name="como_se_entero_nosotros" id="como_se_entero_nosotros" required>
                        <option value="">Seleccione</option>
                        <option value="Redes sociales (Facebook, LinkedIn, Twitter)">Redes sociales (Facebook, LinkedIn)</option>
                        <option value="Búsqueda en Google">Búsqueda en Google</option>
                        <option value="Eventos">Eventos</option>
                        <option value="Otros">Otros</option>
                      </select><br>
                      <input class="form-control"   name="nosotros_o" id="nosotros_o" placeholder="Ingrese Otros" >
                    </div>

                    <div class="form-group clearfix">
                      <label>Mensaje</label>
                      <textarea class="form-control" maxlength="250" name="mensaje" id="mensaje" minlength="5"></textarea>                            
                    </div>

                    <div class="form-group">
                        <div class="row">
                          <div class="col-xxs-5 col-xs-4 col-md-3">
                              <img src="captcha.php" id="imaCaptcha" width="120" height="40" vspace="3">
                          </div>
                          <div class="col-xxs-7 col-xs-8 col-md-9">
                              <input type="text" class="form-control" id="txtCaptcha" name="txtCaptcha" placeholder="Ingresar el texto mostrado en la imagen" required>
                          </div>
                        </div>
                    </div>

                    <div class="form-group clearfix">
                      <input type="checkbox" id="aceptacion" name="aceptacion" value="1" required> Acepto los <a target="_blank" href="terminos-y-condiciones.php"><u>términos y condiciones</u></a> de uso de mis datos personales.</a>
                    </div> 

                    <input type="button" id="btn_enviar" name="btn_enviar" class="btn btn-contacto" value="Enviar">
                    <br><br>
                    <div id="respuesta"></div>
                  </form>                         
                </div>  

                <div class="col-sm-5 col-sm-offset-1" >
                    <h4>DATOS DEL CONTACTO</h4>
                    <br>
                    <ul class="lista-contacto list-unstyled">
                        <li><img src="img/02.png" alt="" />&nbsp;&nbsp;&nbsp;(511) 626 - 2506 ó (511) 626 - 2000 anexos 2506, 3161 </li>
                        <li><img src="img/03.png"  alt="" />&nbsp;&nbsp;&nbsp;<a href="mailto:innovapucp@pucp.edu.pe">innovapucp@pucp.edu.pe</a></li>
                        <li><img src="img/04.png"  alt="" />&nbsp;&nbsp;&nbsp;<a href="http://innovapucp.pucp.edu.pe/">www.<strong>innovapucp</strong>.pucp.edu.pe</a></li>
                    </ul>   
                    <div id="lista-contacto-dt">
                      <dl  class="dl-horizontal">
                        <dt><img src="img/01.png" alt="" /></dt>
                        <dd>Campus de la Pontificia Universidad Católica del Perú<br>
                            Edificio Mac Gregor, piso 10<br>
                            Av.Universitaria 1801 San Miguel, Lima - Perú
                        </dd>                  
                      </dl>
                    </div>

                    <p>Búscanos como INNOVAPUCP EN:</p>
                    
                    <ul class="contacto-redes list-unstyled list-inline">
                      <li><a target="_blank" class="ico-fb" href="https://www.facebook.com/INNOVAPUCP/"><img src="img/redes/fb_contacto.png"  alt="" /></a></li>
                      <li><a target="_blank" class="ico-lk" href="https://www.linkedin.com/company/innovapucp---centro-de-consultor-a-y-servicios-integrados-de-la-pucp?trk=tabs_biz_home"><img src="img/redes/link_contacto.png" alt=""/></a></li>
                    </ul>
                </div> 


                <div class="col-sm-5 col-sm-offset-1">
                   <div class="video-container">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3901.6379358955655!2d-77.08079468518724!3d-12.068413991452884!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c914d91c2a89%3A0xebb21cbf05579324!2sINNOVAPUCP+-+Centro+de+Consultor%C3%ADa+y+Servicios+Integrados!5e0!3m2!1ses!2spe!4v1476486680992" height="450" allowfullscreen></iframe>
                    </div>
                </div>  
            </div>                    
        </div>
         <?php include 'include/footer.php';?>
        <script src="<?php echo $host; ?>js/jquery-3.0.0.min.js"></script>
        <script src="<?php echo $host; ?>js/jquery.validate.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
         $('#frm_contacto').validate({
            rules:{
                nombres_apellidos:{
                  minlength:3,
                  required: true
                }
            },         
            errorPlacement: function(error, element) {
                if (element.attr("name") == "nosotros" ){
                    error.insertAfter(element);                
                }else if  (element.attr("name") == "servicio" ){
                   error.insertAfter(element);
                }else{
                   error.insertAfter(element);
                } 
            }
         });

          $.extend(jQuery.validator.messages, {
            required: "Este campo es obligatorio.",
            remote: "Please fix this field.",
            email: "Por favor ingresa un email válido",
            url: "Please enter a valid URL.",
            date: "Please enter a valid date.",
            dateISO: "Please enter a valid date (ISO).",
            number: "Por favor ingrese un número válido",
            digits: "Please enter only digits.",
            creditcard: "Please enter a valid credit card number.",
            equalTo: "Ingresa el mismo valor.",
            accept: "Please enter a value with a valid extension.",
            maxlength: $.validator.format("Por favor no más que {0} caracteres."),
            minlength: $.validator.format("Por favor almenos {0} caracteres."),
            rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
            range: $.validator.format("Please enter a value between {0} and {1}."),
            max: $.validator.format("Por favor ingrese un valor menor o igual a {0}."),
            min: $.validator.format("Por favor ingrese un valor mayor o igual {0}.")
        });
        $("#numero_o").hide();
        $("#nosotros_o").hide();
    $("#numero").change(function() {
      var id=document.getElementById("numero").value;
      if(id==25){
        $("#numero_o").show();
      }else{
        $("#numero_o").hide();
      }
    });

    $("#nosotros").change(function() {
      var id=document.getElementById("nosotros").value;
      if(id==4){
        $("#nosotros_o").show();
      }else{
        $("#nosotros_o").hide();
      }
    });
  
      });
        </script>
        </script>
    </body>
</html>
