<?php
 session_start();
 include '../config.php';
 $lang = 'en';
 $seccion = $_GET['p'];
 //echo $seccion;

	$curl = curl_init();
    curl_setopt_array($curl, array(
        CURLOPT_URL => $endpoint_graph_cms,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_ENCODING => '',
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 0,
        CURLOPT_FOLLOWLOCATION => true,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_CUSTOMREQUEST => 'POST',
        CURLOPT_POSTFIELDS =>'{"query":"query MyQuery {\\r\\n  productosServicios(where: {slug_contains: \\"'.$seccion.'\\"}, stage: PUBLISHED, locales: en) {\\r\\n    id\\r\\n    imagenInfografia\\r\\n    imagenLateral\\r\\n    imagenPrincipal\\r\\n    logoDelServicio\\r\\n    logoImagenSecundaria\\r\\n    slug\\r\\n    subtitulo\\r\\n    textoPrincipal\\r\\n    textoSecundario\\r\\n    titulo\\r\\n    tituloDeInfografia\\r\\n    localizations {\\r\\n      imagenInfografia\\r\\n      imagenLateral\\r\\n      imagenPrincipal\\r\\n      logoImagenSecundaria\\r\\n      logoDelServicio\\r\\n      slug\\r\\n      subtitulo\\r\\n      textoPrincipal\\r\\n      textoSecundario\\r\\n      titulo\\r\\n      tituloDeInfografia\\r\\n    }\\r\\n  }\\r\\n}\\r\\n","variables":{}}',
        CURLOPT_HTTPHEADER => array(
          'Content-Type: application/json',
          'Cookie: __cfduid=da2693cdfd39b7377a8a05e305da45b8f1613001694'
        ),
      ));
      
  $responseprod = curl_exec($curl);
  $_SESSION['producto'] = $responseprod;
  curl_close($curl);

$arrayprod = json_decode($responseprod, true);
//print_r ($arrayprod);
$urlen = '/product?p='.$arrayprod['data']['productosServicios'][0]['localizations'][0]['slug'];
$urles = '/producto?p='.$arrayprod['data']['productosServicios'][0]['localizations'][0]['slug'];
//echo $arrayprod['data']['productosServicios'][0]['imagenInfografia'];

if($lang == 'en'){
	///////INFO PÁGINA
	$titulopag = $arrayprod['data']['productosServicios'][0]['titulo'];
	$subtitulopag = $arrayprod['data']['productosServicios'][0]['subtitulo'];
    $imagenDerecha =$arrayprod['data']['productosServicios'][0]['imagenDerecha'];
    $logoserv =$arrayprod['data']['productosServicios'][0]['logoDelServicio'];
    $textoPrincipal =$arrayprod['data']['productosServicios'][0]['textoPrincipal'];
    $tituloDeInfografia =$arrayprod['data']['productosServicios'][0]['tituloDeInfografia'];
    $imagenInfografia =$arrayprod['data']['productosServicios'][0]['imagenPrincipal'];
    $textoSecundario =$arrayprod['data']['productosServicios'][0]['textoSecundario'];
    $imagenLateral =$arrayprod['data']['productosServicios'][0]['imagenLateral'];
    
    $titulopag = urldecode($titulopag);
    $subtitulopag = urldecode($subtitulopag);
    $textoPrincipal = urldecode($textoPrincipal);
    $textoSecundario = urldecode($textoSecundario);
    $tituloDeInfografia = urldecode($tituloDeInfografia);
}

?>

<!DOCTYPE html>
<html lang="en" translate="no">
    <head>
        <?php include '../include/generales.php'; ?>
			
        <style>
          li::marker {
            color: #48aa42;
            /* margin-left: 15px; */
        }
        .logoserv {
    text-align: center;
    margin-bottom: 50px;
}
strong {
    margin-top: 30px;
    display: inline-block;
}
            .page-section {
                padding-top: 160px;
                padding-bottom: 30px;
            }
            .caja{
                    /* display: flex; */
                /* flex-flow: column wrap; */
                justify-content: center;
                align-items: center;
                height: 100%;
                overflow: hidden;
            }
            .box{
            /*width: 450px;*/
            /*height: 300px;*/
            overflow: hidden;
            }

            .box img{
            width: 100%;
            height: auto;
            }
            @supports(object-fit: cover){
                .box img{
                /*height: 100%;*/
                object-fit: cover;
                object-position: center center;
                }
            } 

            .padding-0{
                padding-right:0;
                padding-left:0;
            }

            .accordion a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 1rem 3rem 1rem 1rem;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border-bottom: 1px solid #e5e5e5;
}

.accordion a:hover,
.accordion a:hover::after {
  cursor: pointer;
  color: #48aa42;
}

.accordion a:hover::after {
  border: 1px solid #48aa42;
}

.accordion a.active {
  color: #48aa42;
  border-bottom: 1px solid #48aa42;
}

.accordion a::after {
    font-family: 'Ionicons';
    content: '\f218';
    position: absolute;
    float: right;
    right: 1rem;
    font-size: 20px;
    color:#2b4365;
    padding: 0;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #2b4365;
    text-align: center;
}
.accordion a.active::after {
  font-family: 'Ionicons';
  content: '\f209';
  color: #48aa42;
  border: 1px solid #48aa42;
}

.accordion .content {
  display: none;
  padding: 1rem;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
}

.accordion .content p {
    font-size: 13px;
    font-weight: 300;
    font-family: 'Noto Sans', sans-serif;
    color: #888;
}
.accordion {
    padding-top: 40px;
    font-family:"Montserrat", sans-serif;
}	
.accordion a {
    color:#2b4365!important;
    font-weight:bold;
    text-decoration:none;
}
.accordion-item {
    padding: 12.5px 0;


}
.accordion a.btndescarga {
    background: #48aa42;
    border-radius: 10px;
    display: inline-block;
    width: auto;
    color: #fff!important;
    transition: .35s all ease;
    font-size: 15px;
    margin-right: 15px;
    padding: 10px;
}
.accordion a.btndescarga:hover {
    background: #2b4365;
}
.accordion a.btndescarga:after {
    display:none;
}
a.btndescarga i {
    padding: 0 10px;
    
}
.comunicado-bg.right {
    background-color: rgba(205,205,212, 0.4);
    padding: 40px 40px 38px 40px;
    margin-bottom: 50px;
    background-repeat: no-repeat;
    padding-left: 5%;
    background-position: right;
    padding-right: 35%;
    background-size: 30% 100%;
}
.comunicado-bg.left {
    background-color: rgba(205,205,212, 0.4);
    padding: 40px 40px 38px 40px;
    margin-bottom: 50px;
    background-repeat: no-repeat;
    padding-left: 35%;
    background-size: 30% 100%;
    padding-right: 5%;
}

h5.text-blue.my-3.text-uppercase {
    color: #48aa42!important;
}
.logoserv {
    text-align: center;
}
.infografia {
    padding: 30px 0 15px;
    text-align: center;
}

h5 {
    font-size: 1.15rem;
    padding: 30px 0;
}
a.contactlink {
    font-weight: bold;
    color: #48aa42;
    cursor:pointer;
}
iframe {
    margin: 0;
    display: inline-block;
    float: left;
    width: 100%;
}
td {
    padding: 10px 25px;
}
table {
    margin: 30px 0;
}

.col-lg-6 h5 {
    text-transform: none;
    color: #525c7a;
    font-weight:bold;
}

.container.mtop {
    margin-top: 30px;
}
.col-lg-6.titsubtit {
    font-weight: bold;
    font-family: "Montserrat", sans-serif;
}
b, strong {
    font-weight: bold;
    /* font-size: 150%; */
}
.mtop a {
    color: #48aa42;
}
.logoserv img {
    width: 100%;
}
.container.mtop .col-md-4 img {
    min-height: 220px;
    object-fit: cover;
    object-position: center;
}
img.infografia {
    width: 100%;
    max-width: 750px;
}

.imgicon {
    max-height: 180px;
    padding: 0px 30px;
    width: 180px!important;
    max-width: auto;
    object-fit: contain;
}
h5 {
    display: inline;
}
.producto .page-section .container li {
    margin-left: 15px;
    /* list-style-position: outside; */
    list-style-type: disc;
    list-style-position: inside;
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}
iframe {
	width: 75% !important;
	margin: 0 15% !important;
}
@media(max-width:700px){
  iframe {
  width: 100% !important;
  margin: 0 !important;
  }
  .logoserv {
  text-align: center;
  margin-bottom: 10px;
  }
  .mtop .col-md-4 {
  margin-bottom: 30px;
  }
  .imgicon {
      max-height: 90px;
      padding: 0px 30px;
      width: 100%!important;
      max-width: auto;
      object-fit: contain;
      margin-bottom: 30px;
  }
  section ul {
    margin-left: 0 !important;
  }
  .producto .page-section .container li {
    margin-left: 5px !important;
  }
  #services {
    padding-left: 10px;
    padding-right: 10px;
  }

}
    </style>
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="https://www.jerrylow.com/basictable/basictable.css" />
    </head>
    <body id="page-top" class="home producto" data-url = '<?php echo $page_url;?>'>
		
    <?php include '../include/nav2.php'; 
    ?>

                 <!-- Services-->
        <section class="page-section  contprod" id="services">
          <div class="container">
            <div class="row">
              
            <div class="col-lg-12 titsubtit" style="vertical-align: center;">
              <h1 class="text-left titserv"><?php echo $titulopag;?></h1>
   
            </div>
            
            <div class="col-lg-6 titsubtit" style="vertical-align: center;">
             
              <h2>
                <?php echo $subtitulopag;?>
              </h2>
            </div>	
            
            <?php if(strlen($logoserv)>1){
                echo '<div class="col-lg-6 padding-0 logoserv">
              <img src="'.$cloudfront.$logoserv.'" class="padding-0 img-fluid">
            </div>';
              }
              ?>

                      
            </div>	  
          </div>
			
			
			    <div class="container mtop">
            <div class="row">

            <?php if(strlen($imagenLateral)>1){ 
              $sizecolumn = '8';
              ?>

              
            
              <div class="col-md-4">
                <img src="<?php if(strlen($imagenLateral)>1){echo $cloudfront.$imagenLateral;}else{
                  echo 'https://indeval-webdocs-publico-01122020.s3.amazonaws.com/img/placeholder-image.jpg';
                }
                 ?>" class="img-fluid">
              </div>
              

            <?php
            }
            else{
              $sizecolumn = '12';
            }
            ?>
              
              <div class="col-md-<?php echo $sizecolumn;?>">
                <?php echo $textoPrincipal;?>
              </div>

              <?php if(strlen($imagenInfografia)>1){
                echo '<div class="col-md-12 infografia">
                <h3>'.$tituloDeInfografia.'</h3>
                <img class="infografia" src="'.$cloudfront.$imagenInfografia.'">
              </div>';
              }
              ?>
              
              

              <div class="col-md-12" style="padding-top:30px;">
                <?php echo $textoSecundario;?>
              </div>
					
				    </div>
          </div>
											
        </section>
			
    		<?php include '../include/footer.php'; ?>
    <script type="text/javascript" src="https://www.jerrylow.com/basictable/jquery.basictable.min.js"></script>
		<script>
            $(document).ready(function() {
                $('.accordion a').click(function(){
                    $(this).toggleClass('active');
                    $(this).next('.content').slideToggle(400);
                });
                

                <?php
                if(strlen($seccion)>2){
                    echo' 
                    
                    $("html, body").animate({
                            scrollTop: $("#'.$seccion.'").offset().top - 140
                    }, 1000);

                    setTimeout(() => {
                        $("#'.$seccion.' a").click();
                    }, 750);
                    
                    ';
                }
                ?>
            });
		</script>
    <script>
      $(document).ready(function() {
        $('table').basictable({
        });
      });
      $(document).ready(function(){

        var str1 = "ABCDEFGHIJKLMNOP";
        var str2 = "DEFG";
        if(str1.indexOf(str2) != -1){
            //alert(str2 + " found");
        }
       
      });

      setTimeout(() => {
        $('.note-float-left[style="width: 25%; float: left;"]').addClass("imgicon",function(){
            //$("h1").hide();
        });
        
        $('.note-float-right[style="width: 25%; float: right;"]').addClass("imgicon",function(){
            //$("h1").hide();
        });
      }, 100);
    </script>
    </body>
</html>
