<?php
 session_start();
 include '../config.php';
 $lang = 'en';

if(strlen($_SESSION['mision'])>90 && strlen($_COOKIE['persistID'])<2)
{
    $responsemision = $_SESSION['mision'];
    //echo $_SESSION['mision'];
}
else{
	$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  paginasHistoria(stage: PUBLISHED) {\\r\\n    imagenDerecha\\r\\n    imagenIzquierda\\r\\n    subtituloDeLaPagina\\r\\n    titulo\\r\\n    localizations {\\r\\n      imagenDerecha\\r\\n      imagenIzquierda\\r\\n      subtituloDeLaPagina\\r\\n      titulo\\r\\n      misionVisionImagenDerecha\\r\\n      misionVisionImagenIzquierda\\r\\n      misionVisionTitulo\\r\\n      valores\\r\\n      vision\\r\\n      mision\\r\\n    }\\r\\n    misionVisionImagenDerecha\\r\\n    misionVisionImagenIzquierda\\r\\n    misionVisionTitulo\\r\\n    valores\\r\\n    vision\\r\\n    mision\\r\\n  }\\r\\n}\\r\\n","variables":{}}',
        CURLOPT_HTTPHEADER => array(
          'Content-Type: application/json',
          'Cookie: __cfduid=da2693cdfd39b7377a8a05e305da45b8f1613001694'
        ),
      ));
      
  $responsemision = curl_exec($curl);
  $_SESSION['mision'] = $responsemision;
  curl_close($curl);
}

$arraymivis = json_decode($responsemision, true);
//echo  $arraymivis;
$urles = $arraymivis['data']['paginasHistoria'][0]['localizations'][0]['slug'];
$urlen = $arraymivis['data']['paginasHistoria'][0]['slug'];

$urles = '/mision-vision';
$urlen = '/mission-vision';
//echo  "Es:".$urles." En:".$urlen;

if($lang == 'en'){
	///////INFO PÁGINA
    $titulopag = $arraymivis['data']['paginasHistoria'][0]['misionVisionTitulo'];
    $imagenDerecha  = $arraymivis['data']['paginasHistoria'][0]['misionVisionImagenDerecha'];
    $imagenIzquierda  = $arraymivis['data']['paginasHistoria'][0]['misionVisionImagenIzquierda'];
    $infografia1  = $arraymivis['data']['paginasHistoria'][0]['infografia1'];
    $infografia2  = $arraymivis['data']['paginasHistoria'][0]['infografia2'];
    $texto1  = $arraymivis['data']['paginasHistoria'][0]['mision'];
    $texto2  = $arraymivis['data']['paginasHistoria'][0]['vision'];
    $texto3  = $arraymivis['data']['paginasHistoria'][0]['valores'];
	
}
if($lang == 'es'){
	$titulopag = $arraymivis['data']['paginasHistoria'][0]['localizations'][0]['misionVisionTitulo'];
    $imagenDerecha  = $arraymivis['data']['paginasHistoria'][0]['localizations'][0]['misionVisionImagenDerecha'];
    $imagenIzquierda  = $arraymivis['data']['paginasHistoria'][0]['localizations'][0]['misionVisionImagenIzquierda'];
    $infografia1  = $arraymivis['data']['paginasHistoria'][0]['localizations'][0]['infografia1'];
    $infografia2  = $arraymivis['data']['paginasHistoria'][0]['localizations'][0]['infografia2'];
    $texto1  = $arraymivis['data']['paginasHistoria'][0]['localizations'][0]['mision'];
    $texto2  = $arraymivis['data']['paginasHistoria'][0]['localizations'][0]['vision'];
    $texto3  = $arraymivis['data']['paginasHistoria'][0]['localizations'][0]['valores'];

}

$texto1  = urldecode( $texto1 );
$texto2  = urldecode( $texto2 );
$texto3  = urldecode( $texto3 );
$titulopag = urldecode($titulopag);

?>

<!DOCTYPE html>
<html lang="en" translate="no">
    <head>
        <?php include '../include/generales.php'; ?>
			
        <style>
            section#services {
    padding-top: 160px;
    padding-bottom:0;
}
.descarga {
    background-color: #48aa42 !important;
    width: 100%!important;
    min-height: 250px;
    float: left!important;
    color: #fff!important;
    text-align: left;
    padding: 1em!important;
    font-size: 2.2em;
    margin: 0!important;
	position: relative
}
		
.descarga-icon {
		
	position: absolute;
    bottom: 1em;
    right: 1em;3
}
			
.comunicado {
    height: auto;
    position: absolute;
    right: 0;
    z-index: 1;
    background-color: #48aa42;
    padding: 10px 110px 30px 40px;
    top: 447px;
}
		
.comunicado2 {
    height: auto;
    position: absolute;
    right: 0;
    z-index: 1;
    background-color: #9e9fb3;
    padding: 10px 110px 30px 40px;
    top: 796px;
}

.img-comunicado {
	max-width: 569px;
	height: 550px;
	position: absolute;
	right: 0;
	z-index:-1;
	background-color:#cdcdd4;
	padding-right: 0;
	padding-left: 0;
}
	

p {
    line-height: 1.75;
    color: #666;
}
.col-lg-4.img-int-01 {
    min-height: 400px;
}
.greenbar {
    bottom: -160px;
}

p {
    padding: 10px;
}
img {
    vertical-align: middle;
    border-style: none;
    max-width: 100%;
}
.greenbar {
    background-color: #48aa42;
    /* max-height: 170px; */
    /* margin-bottom: 170px !important; */
    position: absolute!important;
    right: 0;
    z-index: 1;
    padding: 280px 0!important;
    float: left;
    bottom: -330px;
    left: auto;
}
section#services ul {
    padding: 0 30px;
    color: #666;
}
section#services ul li {
    padding: 10px;
}

img.infografia1 {
    margin-left: -15px;
    min-height: 400px;
    object-fit: cover;
}
.textmision p {
    font-size: 20px;
    color: #2b4365;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    line-height: 1.3;
}
.textvision p {
    line-height: 1.6;
    color: #b6b8c9;
    font-size: 20px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    padding-right: 10%;
}
.contvalores {
    background: #f5f5f7;
    padding: 0 15px;
}
.contvalores p {
    padding: 0;
    color: #2b4365;
    padding-left:15px;
}
.contvalores {
    background: #f5f5f7;
    padding: 15px 30px;
    color: #2b4365;
}
.contvalores h4 {
    font-size: 17.5px;
    margin-bottom: 25px;
}
span.bullet {
    color: #48aa42;
    font-size: 25px;
    position: absolute;
    margin-left: -15px;
    margin-top: -10px;
}
.col-lg-12.textvision {
    background: #b6b8c9;
    margin: 50px 0;
    color: #2b4365;
    padding: 15px;
}
.col-lg-12.textvision p{
    color: #2b4365;
}
.textmision {
    padding: 0;
}
h4, .h4 {
    margin-bottom: 30px;
}
.col-lg-4.textmision {
    max-height: 350px;
}
.col-lg-4.textmision img {
    vertical-align: middle;
    border-style: none;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}
.col-lg-8.valores {
    padding-right: 0;
}
.textmision p {
    padding-right: 5%;
}
@media(max-width:700px){
    img.infografia1 {
    margin-left: -15px;
    min-height: 200px;
    object-fit: cover;
}
    h4, .h4 {
        font-size: 2rem;
        color: #2b4365;
    }
    section#services {
    padding-top: 90px;
}
.descarga {
    min-height: 10px;
}
.col-md-1.greenbar {
    display: none;
}
.row.enlacesinteres {
    margin-top: 0px;
}
.img-int-01 {
    width: 100%;
    height: 100px;
    margin-bottom: 40px;
}
.textmision p {
    font-size: 15px;
    color: #2b4365;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    line-height: 1.3;
    padding: 0 15px;
}
.textvision p {
    line-height: 1.6;
    color: #b6b8c9;
    font-size: 15px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    padding-right: 30px;
}
}		
	</style>
    </head>
    <body id="page-top" class="home" data-url = '<?php echo $page_url;?>'>
		
        <?php include '../include/nav2.php'; ?>
                          

            <!-- Services-->
        <section class="page-section" id="services">
			<div class="container">
            
			  <div class="row">
			
				<div class="col-lg-8 textmision">
                    <h4 class="text-left"><?php echo $titulopag;?></h4>
                  <?php echo $texto1;?>
                 
                </div>
                
                <div class="col-lg-4 textmision">
                    <img class="imgsuceso" src="<?php echo $cloudfront.$imagenDerecha;?>">
                 
                </div>
                
                <div class="col-lg-12 textvision">
                  <?php echo $texto2;?>
                 
                </div>


                
                
                <div class="col-lg-4 textmision">
                    <img class="imgsuceso" src="<?php echo $cloudfront.$imagenIzquierda;?>">
                 
                </div>
                <div class="col-lg-8 valores">
                    <div class="contvalores">
                        <p><?php echo $texto3;?></p>
                    </div>
                    
                </div>

				
                
                
				
				  
			  </div>	  
			</div>
			
			<br><br>
			
					
											
        </section>

                  		
    		<?php include '../include/footer.php'; ?>
		<script>


		</script>
    </body>
</html>
