<?php 
require_once('shared/conexionBD.php');

//encode utf8
mysqli_query($conexion,"SET NAMES utf8");

$errorEtiqueta = false;
if(isset($_POST['data-contactar'])){
  $dataContactar = $_POST['data-contactar'];
  $dataContactar = base64_decode($dataContactar);

  $errorEtiqueta = !empty($dataContactar);
}

$query = "SELECT * FROM ITT_CONFIG_PAISES ORDER BY NOMBRE asc ";
$resultado = mysqli_query($conexion, $query );
$arrPaises = array();
if($resultado) {
  if(mysqli_num_rows($resultado) >0) {
    while ($rowPaises = mysqli_fetch_assoc( $resultado) )
    {
      $arrPaises[] = $rowPaises;
    }
  }else{
    $strMensaje = "No tenemos paises disponibles.";

  }
}else{
  $strMensaje = "Error al generar la consulta para obtener los Paises, por favor reporte este problema.";
}


$queryEstados = "SELECT IDESTADO,ESTADO FROM ITT_ASW_ZONAS ORDER BY ESTADO asc ";
$resultado = mysqli_query($conexion, $queryEstados );
$arrEstados = array();
if($resultado) {
  if(mysqli_num_rows($resultado) >0) {
    while ($rowEst = mysqli_fetch_assoc( $resultado) )
    {
      $arrEstados[] = $rowEst;
    }
  }else{
    $strMensaje = "No tenemos paises disponibles.";

  }
}else{
  $strMensaje = "Error al generar la consulta para obtener los Paises, por favor reporte este problema.";
  }

?>



<!DOCTYPE html>
<!--[if IE 8 ]>    <html xml:lang="es" lang="es" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html xml:lang="es" lang="es" class="no-js ie9"> <![endif]-->
<html xml:lang="es" lang="es">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->

    <!--Producción-->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-125019062-2"></script>
   
    <!--Producción-->
    <script>

        window.dataLayer = window.dataLayer || [];

        function gtag(){dataLayer.push(arguments);}

        gtag('js', new Date());

        gtag('config', 'UA-125019062-2');

    </script>

    <!-- End Global site tag (gtag.js) - Google Analytics -->
  <!-- [if IE]> -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta http-equiv="cleartype" content="on"/>
  <!-- <![endif] -->

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
  <title>Contacto – S&amp;P</title>
  <meta name="keywords" content="E-commerce"/>
  <meta name="robots" content="INDEX,FOLLOW"/>

  <link rel="icon" href="https://statics.solerpalau.com/skin/frontend/solerpalau/default/favicon.ico" type="image/x-icon"/>
  <link rel="shortcut icon" href="https://statics.solerpalau.com/skin/frontend/solerpalau/default/favicon.ico" type="image/x-icon"/>
  
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="theme-color" content="#ffffff">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

  <!-- estilo princripal -->
  <link rel="stylesheet" type="text/css" href="css/style-css01.css" media="all" />
  <!-- estilo secundario (necesario) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script  src="js/events.js"></script>
  <script  src="js/prueba.js"></script>
  <!-- Mapas -->
  <script src="https://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.js"></script>

  <script type="text/javascript">
    var $j = jQuery.noConflict();

  </script>

</head>
<body class=" cms-page-view cms-produccion-distribucion-logistica level-2 customer-logged-out">
  <!-- aqui va el header -->
  <?php include 'header.php' ?>

  <script type="text/javascript">
    //<![CDATA[

    if (typeof HIB.menu == 'object' && typeof HIB.menu.init == 'function') {
      HIB.menu.init();
    }

    //]]>
  </script>

  <div class="main-container col1-layout">
    <div class="breadcrumbs">
      <div class="container">
        <ul>
          <li class="">
          </li>
        </ul>
      </div>
    </div>
    <div class="main">
      <div class="col-main">
        <main>
          <div id="overlaySearch" class="overlay">

            <!-- Overlay content -->
            <div id="searchResults" class="overlay-content grid"></div>
          </div><div class="std"><div class="page-title dark">
            <img alt="Contacto" src="media/home/categories_home/recursos/Contacto.jpg" />
            <div class="page-title-container">
              <div class="page-title-content container">
                <h1 class="h1">Contacto</h1>
              </div>
            </div>
          </div>
          <div class="bar-title cms-footer-links">
            <center>
              <h2 class="h2-2"><i class="fas fa-angle-right fa-1x" aria-hidden="true" style="color:#00cc6a"></i> Los asesores comerciales de S&P pueden proporcionar </h2>
              <ul class="link m-top20" style="color: rgb(138, 138, 138);">
                <li class="hcol-1-1">
                 Asesoría técnica y de selección de productos  
               </li>
               <li class="hcol-1-1">
                Distribuidores autorizados de S&P 
              </li>
              <li class="hcol-1-1">
               Capacitaciones sobre ventilación y equipos S&P 
             </li>
             <li class="hcol-1-1">
               Catálogos y literatura de S&P
             </li>
             <li class="hcol-1-1">
              Servicio postventa para productos de S&P
             </li>
           </ul>
         </center>
       </div>
       <br><br>
       <div class="page-title-container ">
        <div class="grid grid-pad hcol-5-12 column">
          <!-- formulario de contacto -->
          <div class="grid">
          <h2 class="h2-2 m-bottom20 m-top20">¿No has encontrado lo que buscas?</h2>
          <p class="m-bottom20">Contacta con nosotros y te ayudaremos</p>
            <form  id="enviarFormulario" method="post">

              <input type="hidden" id="ipCliente" name="ipCliente">
              <input type="hidden" name="recaptcha_response" id="recaptchaResponse">

              <div class="form-group hcol-1-1">
                <label for="need"  >Necesito *</label>
                <div class="custom-select">
                  <select class="required-entry  validate-no-html-tags form-control " name="necesito" id="necesito" required="true">
                    <?php if($errorEtiqueta) { ?>
                        <option value='Etiquetas QR' selected style="color: #cccccc">Etiquetas QR</option>
                    <?php } else { ?>
                        <option value='' selected disabled style="color: #cccccc">Indícanos en que te podemos ayudar</option>
                    <?php } ?>
                    <option value='Información de un producto'>Información de un producto</option>
                    <option value='Asesoría técnica'> Asesoría técnica</option>
                    <option value='Soporte o servicio'> Soporte o servicio</option>
                    <option value='Software de atenuadores'> Software de atenuadores</option>
                    <option value='Otros'>Otros</option>
                  </select>
                </div>
              </div>

              <div class="form-group hcol-6-12">
                <label for="name">Nombre *</label><input class="required-entry input-text  validate-no-html-tags form-control " name="nombre" id="nombre" type="text" required="true" />

              </div>
              <div class="form-group hcol-6-12">
                <label for="lastname"  >Apellidos *</label><input class="required-entry input-text  validate-no-html-tags form-control " name="apellido" id="apellido" type="text" required="true" />
              </div>
              
              <div class="form-group hcol-1-1">
                <label for="need"  >Actividad Profesional: *</label>
                <div class="custom-select">
                  <select class="required-entry  validate-no-html-tags form-control " name="giro" id="giro" required="true">
                    
                    <option value='' selected disabled style="color: #cccccc">Indícanos la actividad profesional</option>

                    <option value='Academico'> Académico</option>
                    <option value='Agropecuaria'> Agropecuaria</option>
                    <option value='Arquitecto'> Arquitecto</option>
                    <option value='Comprador'> Comprador</option>
                    <option value='Constructor'> Constructor</option>
                    <option value='Distribuidor'> Distribuidor</option>
                    <option value='Estudiante'> Estudiante</option>
                    <option value='Ganadero'> Ganadero</option>
                    <option value='Hotelero'> Hotelero</option>
                    <option value='HVAC'> HVAC</option>
                    <option value='Industria'> Industria</option>
                    <option value='Ingeniería'> Ingeniería</option>
                    <option value='Instalador'> Instalador</option>
                    <option value='Mantenimiento'> Mantenimiento</option>
                    <option value='OEM'> OEM</option>
                    <option value='Personal'> Personal</option>
                    <option value='Proyectista'> Proyectista</option>
                    <option value='Taller'> Taller</option>
                    <option value='Otros'> Otros</option>

                  </select>
                </div>
              </div>

              <div class="form-group hcol-1-1">
                <label for="company"  >Empresa</label><input class="required-entry input-text  validate-no-html-tags form-control " name="empresa" id="empresa" type="text" required="true"/>
              </div>

              <div class="form-group hcol-1-1">
                <label for="address"  >Dirección</label><input class="required-entry input-text  validate-no-html-tags form-control " name="direccion" id="direccion" type="text"  required="true"/>

              </div>
              <div class="form-group hcol-6-12">
                <label for="postalcode"  >Código Postal</label><input class="required-entry input-text  validate-no-html-tags form-control " name="cp" id="cp" type="text" required="true" maxlength="5" />

              </div>
              <div class="form-group hcol-6-12">
                <label for="city"  >Ciudad</label><input class="required-entry input-text  validate-no-html-tags form-control " name="ciudad" id="ciudad" type="text" required="true"/>

              </div>
              <div class="form-group hcol-6-12">
                <label for="need" >País</label>
                <div class="custom-select">
                  <select class="required-entry  validate-no-html-tags form-control " name="pais" id="pais" required="true">
                   <option value='' selected disabled style="color: #cccccc">Selecciona un País</option>
                   <option value='MEXICO'>MÉXICO</option>
                   <?php
                   foreach ($arrPaises as $pais) {
                    if ($pais['IDPAIS'] != 'MX') {
                     echo "<option value='".$pais['NOMBRE']."'>".$pais['NOMBRE']."</option>";
                   }
                 }
                 ?>
               </select>
             </div>
           </div>
           <div class="form-group hcol-6-12">
            <label for="phone"  >Teléfono</label><input class="required-entry input-text  validate-no-html-tags form-control " name="telefono" id="telefono" type="text" required="true" maxlength="10" />

          </div>
          <div class="form-group hcol-1-1" id="divEstado">
           <label for="need" >Estado</label>
           <div class="custom-select">
             <select class="required-entry  validate-no-html-tags form-control " name="estado" id="estado" required="true">
              <option value='' selected disabled style="color: #cccccc">Selecciona un estado</option>
              <?php
              foreach ($arrEstados as $estado) {
                echo "<option value='".$estado['ESTADO']."'>".$estado['ESTADO']."</option>";
              }
              ?>
            </select>
          </div>
        </div>
        <div class="form-group hcol-1-1">
          <label for="email"  >Correo electrónico</label><input class="required-entry input-text  validate-no-html-tags form-control " name="email" id="email" type="email" required="true" />

        </div>
        <div class="form-group hcol-1-1">
          <label for="comments" >Comentarios</label>
          <textarea class="required-entry  validate-no-html-tags form-control " name="comentarios" id="comentarios" maxlength="80">
          </textarea>
        </div>
        <div class="form-group hcol-1-1 checkbox">
          <input class="required-entry  validate-no-html-tags form-control underline" name="aceptar_condiciones" id="aceptar_condiciones" type="checkbox" required="true" />
          <label for="aceptar_condiciones"  >Acepto los <a class="underline" href="terminos-condiciones.php" target="_blank">términos y condiciones</a></label>
        </div>
        <div class="hcol-3-1">
          <button type="submit" id="enviar" name="enviar"  class="btn small validation-passed">Enviar
          </button>
        </div>
        <div class="hcol-9-12" id="loading">
          <img src="media/img/loader2.gif" width="41px">
        </div>
      </form>
    </div>
  </div>
  <div class="grid grid-pad hcol-7-12 column" id="ZonaMapa">
    <!-- mapa con zona -->
    <div class="grid">
    <div class="hcol-1-1">
      <p class="h2-2 m-bottom20 m-top20">Ubicación</p>
      <p class="m-bottom20">Haz clic sobre el estado para ver información del asesor S&P</p>
      <div class="mapa">
        <div class="hcol-7-12"></div>
        <div class="hcol-5-12 grid-pad ">
          <div id="zona">
          </div>
        </div>
        <br><br>
        <img  class="map" id="location-map" usemap="#MapD" alt="mapa1" src="media/img/mapa7.png" />
        <map id="MapD" name="MapD">
          <area class="show-map-info" style="cursor:pointer" id="Z1" shape="poly" coords="4,10,56,9,56,16,64,22,58,32,55,32,53,40,52,44,56,55,55,68,57,75,56,95,64,104,76,114,80,129,84,131,88,138,92,143,93,151,100,163,104,169,111,178,117,184,121,192,123,199,124,210,127,216,131,222,131,228,136,233,136,242,137,249,140,253,145,253,146,250,154,258,160,267,164,272,164,278,157,285,150,287,147,278,142,268,138,265,127,254,116,246,111,239,106,236,105,228,106,216,102,203,94,193,84,185,75,180,68,177,60,170,53,164,41,151,50,155,58,154,62,151,63,140,66,137,52,118,44,110,31,96,31,87,26,78,24,66,22,58,17,53,16,48,15,39,8,31,4,20"  />

          <area class="show-map-info" shape="circle" coords="412,385,5" style="cursor:pointer" id="Z2"  />

          <area class="show-map-info" shape="poly" coords="266,328,265,335,261,341,262,348,266,348,266,353,266,360,268,365,268,369,268,377,276,386,286,390,297,396,300,401,304,407,314,412,329,416,334,419,337,413,338,410,341,408,341,402,347,401,354,402,363,403,370,404,372,406,375,403,376,397,380,388,382,376,385,368,384,366,379,368,372,370,366,369,363,366,359,368,355,366,352,362,348,362,344,362,340,358,339,353,340,348,339,345,341,339,346,331,347,328,352,320,344,315,343,320,335,326,326,326,318,320,319,314,323,309,326,306,333,303,338,305,343,309,346,312,351,315,353,311,353,306,353,303,346,304,341,300,335,293,333,283,334,278,340,277,343,273,354,265,361,256,365,252,360,250,357,246,351,246,346,242,341,240,337,239,329,238,332,246,333,254,326,255,318,256,311,254,305,258,299,265,300,273,292,277,291,288,290,296,288,308,283,309,277,304,275,298,270,300,267,298,268,293,265,290,262,289,257,293,260,300,259,303,254,303,254,309,255,316,259,324" style="cursor:pointer" id="Z3" />

          <area class="show-map-info" shape="poly" coords="428,304,429,310,427,315,425,318,426,326,430,330,435,337,433,344,431,348,428,351,431,353,435,348,438,350,438,353,434,359,436,364,433,369,435,372,441,374,447,379,449,383,447,385,443,385,436,387,435,389,426,381,425,387,422,392,424,398,424,402,423,405,415,406,415,407,424,417,440,417,441,414,442,408,448,407,451,411,454,416,457,411,465,409,467,409,471,407,471,401,472,397,478,401,484,408,486,414,496,416,494,423,498,427,507,420,515,431,524,434,533,434,538,435,543,436,543,441,541,447,540,452,540,455,541,459,541,462,544,465,561,475,585,497,589,491,588,487,589,482,585,479,598,457,628,457,627,445,619,442,610,434,604,429,612,428,611,411,605,409,600,407,596,411,591,411,587,407,585,402,585,399,580,398,579,396,570,406,569,409,555,411,544,414,537,417,527,415,523,413,517,407,509,403,499,401,491,399,485,394,482,384,479,377,474,365,471,360,455,342,449,332,446,325,446,321,453,327,455,324,441,310" style="cursor:pointer" id="Z4" />

          <area  style="cursor:pointer" id="Z5" class="show-map-info" data-sector="m1h" shape="poly" coords="311,133,316,127,321,115,338,109,351,111,355,117,365,123,372,138,374,145,384,157,387,165,395,167,398,183,407,199,416,201,420,203,429,209,442,208,446,212,453,209,454,221,451,228,446,238,443,244,441,261,442,282,442,292,440,298,443,309,438,309,432,304,427,303,418,304,413,306,404,299,399,298,397,299,389,295,391,288,386,286,380,285,377,272,375,260,368,250,363,251,359,246,352,244,344,239,335,236,327,236,323,244,322,246,315,241,310,237,308,231,308,225,311,219,309,210,313,205,304,193,297,166,305,147,309,140,310,137" >

          <area  class="show-map-info" style="cursor:pointer" id="Z6" class="show-map-info" data-sector="m1g" shape="poly" coords="592,413,586,405,585,399,580,397,588,394,595,399,605,394,598,390,602,384,608,381,612,378,615,377,611,375,613,371,619,365,620,368,623,368,624,371,625,371,630,367,619,367,617,364,619,355,622,359,620,347,622,343,621,339,621,332,628,326,637,322,647,320,656,317,663,312,674,309,698,313,698,320,697,330,694,337,689,340,688,348,689,352,688,358,683,363,689,366,691,369,689,375,689,382,693,384,688,396,686,394,685,397,678,389,679,383,674,386,675,391,669,393,665,396,665,400,663,405,657,407,655,411,637,411,620,410,620,414,622,414,622,417,620,420,609,410,598,406"> 

          <area class="show-map-info" shape="poly" coords="541,436,541,440,537,445,536,451,537,455,537,461,525,461,514,461,504,468,489,473,478,476,468,473,460,472,446,468,427,459,411,453,393,447,376,441,363,435,347,423,338,418,346,410,348,404,353,404,362,405,372,409,376,410,378,406,379,395,385,380,389,366,393,361,394,354,401,348,408,336,414,334,425,333,431,335,432,338,432,344,424,347,424,355,425,358,435,349,437,353,432,359,434,364,430,368,430,372,435,374,443,378,446,382,441,385,437,386,433,389,424,378,423,387,421,392,416,391,414,382,410,378,406,383,407,388,408,390,418,392,423,397,412,407,422,418,428,418,435,416,440,417,445,418,441,414,444,409,446,408,450,414,452,418,458,411,464,411,468,409,471,406,472,402,471,398,479,403,482,412,485,416,494,416,492,422,496,429,505,421,506,421,508,426,513,432,519,433"  style="cursor:pointer" id="Z7" />                

          <area  class="show-map-info" style="cursor:pointer" id="Z8"  shape="poly" coords="355,302,358,307,357,311,355,318,352,319,347,315,342,315,340,311,337,307,334,307,334,305,330,307,325,311,322,315,319,322,322,324,327,325,331,326,337,326,340,322,344,318,348,321,352,322,352,326,350,330,352,333,349,335,340,347,343,352,340,356,342,359,343,362,348,362,351,360,354,360,355,364,358,368,365,367,367,370,371,369,378,366,383,365,388,365,392,361,393,354,402,350,404,344,405,338,412,337,418,336,421,334,425,334,425,329,422,325,426,321,424,318,428,313,428,310,422,306,416,306,412,304,408,304,405,299,399,298,397,299,391,298,388,295,390,291,388,287,385,285,379,285,376,283,377,277,376,274,376,271,373,265,373,260,371,253,368,254,362,259,357,266,353,269,349,273,345,275,343,279,340,279,336,280,334,282,335,289,335,294,340,297,343,299,345,304,351,301,355,300" />

          <area  class="show-map-info" style="cursor:pointer" id="Z9" shape="poly" coords="192,61,201,61,200,50,228,49,239,55,241,61,260,82,266,84,272,91,276,112,311,133,295,164,302,194,310,202,310,216,307,224,308,232,316,242,319,242,324,240,328,236,329,245,330,251,321,253,309,252,304,256,297,263,297,267,297,272,290,276,290,282,288,288,284,306,278,300,275,296,268,297,270,291,267,288,259,286,256,281,250,268,247,256,239,250,235,250,226,236,222,221,220,210,216,204,209,199,207,193,206,185,195,177,192,180,189,168,183,156,181,150,189,150,192,149,192,146,192,137,193,132,190,127,191,121,194,117,194,96,191,82,189,71" />

          <area class="show-map-info" style="cursor:pointer" id="Z10" shape="poly" coords="65,24,133,61,188,61,186,73,189,85,191,100,190,119,187,120,190,132,188,144,189,149,183,148,178,150,178,154,186,166,187,174,188,182,191,184,193,181,199,185,204,191,203,197,206,204,212,206,216,211,220,214,219,225,223,240,228,245,229,251,233,254,239,252,247,264,247,269,251,278,255,286,258,287,254,294,256,301,249,299,211,254,209,247,205,247,201,243,199,233,189,228,183,222,181,216,174,216,167,209,173,204,175,201,173,195,165,187,161,188,157,177,149,176,145,168,147,158,131,154,117,134,109,120,97,97,92,77,94,72,92,68,87,67,81,64,81,59,74,56,72,59,64,53,55,49,53,43,55,33"  />
        </map>
      </div>
    </div>
  </div>
</div>

</div><!--  termina grid-pad -->
<div class="grid grid-pad">
  <!-- footer de mapa -->
  <div class="hcol-1-1 mobile-hcol-1-1"  style=" padding-bottom:40px;text-align: center;">
    
    <div class="hcol-12-12 m-hcol-12-12 mobile-hcol-1-1">
      <p class="h2-2 m-bottom20" style="color: #ea2c13;">Soler & Palau México </p>  
      <p style="color:#575658 !important">Blvd. A-15 <br>Parque Industrial Puebla 2000 <br>Puebla, Pue. México C. P. 72225 <br>Tel. 52  (222) 223 3900  <br>Tel. 52 (222) 223 3911 </p> <br>

       <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3770.8413174264197!2d-98.15938168439999!3d19.07071318709093!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85cfc1d3633ff7d7%3A0x722b91777d00b168!2sSoler+%26+Palau+Sa+De+Cv!5e0!3m2!1ses!2smx!4v1466807605645" style="border:0" allowfullscreen="" width="100%" height="auto" frameborder="0"></iframe>
    </div>
    </div>
    
    <div class="hcol-1-2 m-hcol-1-2 mobile-hcol-1-1"  id="colombia">
      <p class="h2-2 m-bottom20">Soler & Palau Colombia </p>  
     <p style="color:#575658 !important;">
       Parque Industrial Los Nogales Bodega 10 <br>
       Aut. Medellín Km 2.7  <br>
     <p style="color:#575658 !important">
       LÍNEA GRATUITA: 01800 915 72 70 <br>
       Móvil: (57) 313 240 08 79 <br>
       <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3976.1306336148978!2d-74.14574868450059!3d4.747339996552123!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e3f837591142291%3A0xec3c5a9224d2e3ac!2sParque+Industrial+Los+Nogales!5e0!3m2!1ses!2smx!4v1466807725035" style="border:0" allowfullscreen="" width="100%" frameborder="0"></iframe>
     </p>
    </div>
    
    <div class="hcol-1-2 m-hcol-1-2 mobile-hcol-1-1"  id="peru">
      <p class="h2-2 m-bottom20">Soler & Palau Perú </p>  
      <p style="color:#575658 !important;">
        Av Santuario 1061- Zarate – San Juan de Lurigancho, Lima <br>
      </p><br><br><br>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3902.3521357320305!2d-76.99899218518766!3d-12.019260991485629!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c5ed08c846d7%3A0xdbdcd64555bba4fd!2sCalle+Santuario+1061%2C+Cercado+de+Lima+15427%2C+Per%C3%BA!5e0!3m2!1ses!2smx!4v1559070593580!5m2!1ses!2smx" width="100%" frameborder="0" style="border:0" allowfullscreen></iframe>

    </div>

    <!-- fin footer mapa -->
  </div>
</div>

</main>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<style>
  .error {
    font-size: 15px !important;
    font-weight: normal;
    font-family: Roboto,sans-serif;
  }
</style>
</div>
</div>
</div>
<!-- aqui va el footer -->
<?php include 'footer.php' ?>
<script>
  <?php if($errorEtiqueta){ ?>
    $j('#comentarios').attr("placeholder", "Describa el error de su etiqueta en este campo.");
  <?php } ?>
    $j('#comentarios').val('');
 $j('#loading').hide();
 $j('#estado').prop('disabled', true);


 //Por si recargan la página
 var valor = $j('#pais').val()
 if(valor== 'MEXICO'){
   $j('#estado').prop('disabled', false);
 }else{
   $j('#divEstado').hide();
   $j('#estado').prop('disabled', true);
 }

 $j('#pais').on('change', function() {
  var valor = $j('#pais').val()
  if(valor== 'MEXICO'){
    $j('#divEstado').show();
    $j('#estado').prop('disabled', false);
  }else{
    $j('#divEstado').hide();
    $j('#estado').prop('disabled', true);
  }
});

  // funcion para iluminar el estado del mapa y quitar la 
  function iterar(id){
   var data2 = false;
   var data = $j('#'+this.id).mouseover().data('maphilight') || {};
   data.alwaysOn = !data.alwaysOn;
   $j('.show-map-info').each(function(e) {
    if (!(this.id == id)) {
      $j('#'+this.id).data('maphilight', data2).trigger('alwaysOn.maphilight');
    }else{
      $j('#'+this.id).data('maphilight', data).trigger('alwaysOn.maphilight');
    }
  });
 }
 var fueraMapa = true;
 var idZona = '';
 var tenemosZona = false
 $j('.show-map-info').click(function() {
   idZona = this.id;
    // llamar la funcion pasandole el id de zona para mantener ilumina al dar clic
    iterar(idZona);
    tenemosZona = true;

    $j.ajax({
      type: 'POST',
      url: 'shared/search.php',
      data: {'id': idZona},
      beforeSend: function(){
        $j('#zona').show();
        $j('#zona').html("<center><p><img src='media/img/loader2.gif' width='60px'></p></center>");

      }
    })
    .done(function(resultado){
      $j('#zona').html(resultado);

    });
    $j('.map').maphilight({
      fill: true,
      fillColor: 'ff00000',
      fillOpacity: 0.7,
      stroke: true,
      strokeColor: 'ffffff',
      strokeOpacity: 1,
      strokeWidth: 0,
      fade: true,
      neverOn: false,
      alwaysOn: false,
      neverOnkey: "value",
      groupBy: false,
      wrapClass: true,
      shadow: true,
      shadowX: 0,
      shadowY: 0,
      shadowRadius: 9,
      shadowColor: 'ff00000',
      shadowOpacity: 2,
      shadowPosition: 'outside',
      shadowFrom: false
    });

    fueraMapa = false;

  });
   //desiluminar cuando den clic fuera del mapa
   $j('#ZonaMapa').click(function() {
     if ((fueraMapa) && (idZona != '')) {
      $j('#'+idZona).data('maphilight', 'false').trigger('alwaysOn.maphilight');
      $j('#zona').hide();
      //cambiamos estado de tenemosZona
      tenemosZona = false;
    }
    fueraMapa = true;

  });
   $j.validator.addMethod("numberAndLetters", function(value, element) {
    return this.optional(element) || /^[A-ZÑÁÉÍÓÚ 0-9 .,#-]+$/i.test(value);
  }, "Solo se permiten letras y números.");

   $j("#enviarFormulario").validate({
     rules: {
      necesito:{
        required:true
      },
      nombre: {
       required:true,
     },
     apellidos: {
       required:true,
     },
     empresa: {
      required:true 
    },
    email:{
     required:true,
     email:true
   },
   telefono: {
     required:true,
     maxlength:10
   },
   direccion: {
     required:true,
   },
   cp: {
     required:true,
   },
   ciudad: {
     required:true,
   },
   pais: {
     required:true,
   },
   comentarios: {
    required:false,
    numberAndLetters:true
  }

},
  messages:{
    necesito: {
      required: "Seleccione una opción de la lista"
    },
    nombre: {
     required: "El nombre es requerido."
   },
   apellido: {
     required: "Los apellidos son requeridos."
   },
   empresa: {
    required: "La empresa es requerida"
  },
  email:{
    required: "El correo electrónico es requerido.",
    email: "Ingrese un correo electrónico válido."
  },
  telefono:{
    required:"El teléfono es requerido."
  },
  direccion:{
    required:"La dirección es requerida."
  },
  cp:{
    required:"El Código Postal es requerido."
  },
  ciudad:{
    required:"La ciudad es requerida."
  },
  estado: {
    required: "El estado es requerido"
  },
  pais:{
    required:"El País es requerido."
  },
  comentarios:{
    required: "No se pueden ingresar carácteres alfanuméricos"
  }
}

  });
   
   $j('#enviarFormulario').submit(function(e){
    var botonEnviar = document.getElementById('enviar'); 
    e.preventDefault();
    var form = $j("#enviarFormulario");
    
    if(form.valid()) { 
      $j('#loading').show();
      $j('#enviar').hide();

      <?php if($errorEtiqueta) { ?>
        let comentarios = $j('#comentarios').val();
        comentarios += " - No se encontró información (<?php echo $dataContactar; ?>)";
        $j('#comentarios').val(comentarios);
        console.log("PRUEBA");
        console.log(comentarios);
      <?php } ?>

      var url = "shared/procesar_formularios.php";
      $j.ajax({                        
        type: "POST",                 
        url: url,                     
        data: $j("#enviarFormulario").serialize(),
        success: function(data)             
        {
          var response = JSON.parse(data);
          if (response.success) {
            swal("Datos enviados correctamente", response.mensaje , "success");
            form[0].reset();
          }else{
            swal("Se ha producido un error", response.mensaje, "error");
          }
          $j('#loading').hide();
          $j('#enviar').show();
       },
      error: function(XMLHttpRequest, textStatus, errorThrown) { 
        swal("Se ha producido un error", "No se han podido enviar los dato, Error: "+errorThrown+" ", "error");
        $j('#loading').hide();
        $j('#enviar').show();
      } 
    });
    }
  });
   //obtenemos la ip publica
   $j.getJSON('https://api.ipify.org?format=json', function(data){
     $j('#ipCliente').val(data.ip);
   });

   
 </script>
 <style>
  .bar-title.cms-footer-links {
    height: 200px;
    color: black;

  }
  .confirm {
    /*boton de confirmar de alert*/
    background-color: #ea2c13 !important;
    color: #fff;
    transition: background .3s ease 0s;
    border: none;
    box-shadow: none;
    border-radius: 17px !important;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px;
    margin: 0;
    cursor: pointer;

  }
</style>
<script src="https://www.google.com/recaptcha/api.js?render=6LfaTp4UAAAAAAiAfKSdJxyUYmAj1jIjkjJ2Z6ty"></script>
<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('6LfaTp4UAAAAAAiAfKSdJxyUYmAj1jIjkjJ2Z6ty', {action: 'homepage'}).then(function(token) {
      var recaptchaResponse = document.getElementById('recaptchaResponse');
      recaptchaResponse.value = token;

    });
  });
</script>

</div>
</div>
</body>

</html>
