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


	$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  paginaHistoria(where: {id: \\"ckl2t1tfsbumg0a26tr8rkpap\\"}, stage: PUBLISHED) {\\r\\n    imagenDerecha\\r\\n    imagenIzquierda\\r\\n    subtituloDeLaPagina\\r\\n    titulo\\r\\n    slug\\r\\n    localizations {\\r\\n      imagenDerecha\\r\\n      imagenIzquierda\\r\\n      subtituloDeLaPagina\\r\\n      titulo\\r\\n      slug\\r\\n    }\\r\\n  }\\r\\n}\\r\\n","variables":{}}',
        CURLOPT_HTTPHEADER => array(
          'Content-Type: application/json',
          'Cookie: __cfduid=da2693cdfd39b7377a8a05e305da45b8f1613001694'
        ),
      ));
      
      
	  
   
  $responsehistoria = curl_exec($curl);
  //$_SESSION['historia'] = $responsehistoria;
  curl_close($curl);

$arrayhistoria = json_decode($responsehistoria, true);
//echo  $arrayhistoria;
$urles = $arrayhistoria['data']['paginaHistoria']['localizations'][0]['slug'];
$urlen = $arrayhistoria['data']['paginaHistoria']['slug'];
//echo  "Es:".$urles." En:".$urlen;

if($lang == 'en'){
	///////INFO PÁGINA
    $titulopag = $arrayhistoria['data']['paginaHistoria']['titulo'];
    $imagenDerecha  = $arrayhistoria['data']['paginaHistoria']['imagenDerecha'];
    $imagenIzquierda  = $arrayhistoria['data']['paginaHistoria']['imagenIzquierda'];

	
}
if($lang == 'es'){
	$titulopag = $arrayhistoria['data']['paginaHistoria']['localizations'][0]['titulo'];
    $imagenDerecha  = $arrayhistoria['data']['paginaHistoria']['localizations'][0]['imagenDerecha'];
    $imagenIzquierda  = $arrayhistoria['data']['paginaHistoria']['localizations'][0]['imagenIzquierda'];


}




$curl2 = curl_init();

curl_setopt_array($curl2, 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  historiaSucesos(orderBy: anio_ASC, stage: PUBLISHED, where: {estatus: \\"publicado\\"}){\\r\\n    anio\\r\\n  imagen\\r\\n    textoSuceso\\r\\n    localizations {\\r\\n      anio\\r\\n  imagen\\r\\n      textoSuceso\\r\\n    }\\r\\n  }\\r\\n}\\r\\n","variables":{}}',
    CURLOPT_HTTPHEADER => array(
      'Content-Type: application/json',
      'Cookie: __cfduid=da2693cdfd39b7377a8a05e305da45b8f1613001694'
    ),
  ));

$responsesus = curl_exec($curl2);
//echo $responseins;
curl_close($curl2);

$arraysus = json_decode($responsesus, true);
?>

<!DOCTYPE html>
<html lang="en" translate="no">
    <head>
        <?php include '../include/generales.php'; ?>
		<link rel="stylesheet" href="/css/balloon.min.css">	
        <style>
            section#services {
    padding-top: 160px;
}
.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 10px 0;
}
img {
    vertical-align: middle;
    border-style: none;
    max-width: 100%;
}
.textoservs p {
    padding: 0 30px;
}
.textoservs {
    padding: 0px 12.5%;
    /* max-width: 40%; */
}
span.bullet {
    color: #48aa42;
    font-size: 20px;
    position: absolute;
    margin-left: -15px;
    margin-top: -5px;
}
.col-lg-12.instrumentos {
    padding: 30px;
}
.col-lg-4.columnains {
    float: left;
    padding-bottom: 30px;
}
.col-lg-12.instrumentos p {
    padding: 0px 30px;
}
.col-lg-12.instrumentos p span {
    padding: 0px 30px;
    color: #48aa42;
    position: relative;
}

.col-lg-12.instrumentos p i {
    color: #48aa42;
}
p.tooltipn {
    margin: 0;
}
:root {
  --balloon-color:  #48aa42;
}

.timeline {
  position: relative;
  width: 100%;
  padding: 30px 0;
}

.timeline .timeline-container {
  position: relative;
  width: 100%;
}

.timeline .timeline-end,
.timeline .timeline-start,
.timeline .timeline-year {
  position: relative;
  width: 100%;
  text-align: center;
  z-index: 1;
}

.timeline .timeline-end p,
.timeline .timeline-start p,
.timeline .timeline-year p {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 0;
  padding: 30px 0;
  text-align: center;
  background: linear-gradient(#48aa42, #00539C);
  border-radius: 100px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  color: #ffffff;
  font-size: 14px;
  text-transform: uppercase;
}

.timeline .timeline-year {
  margin: 30px 0;
}

.timeline .timeline-continue {
  position: relative;
  width: 100%;
  padding: 0px 0;
}
.timeline .timeline-continue::after {
    position: absolute;
    content: "";
    width: 3px;
    height: 100%;
    top: 0;
    left: 50%;
    margin-left: -1px;
    background: #e0e0e0;
    border-radius: 0;
}
.timeline .row.timeline-left,
.timeline .row.timeline-right .timeline-date {
  text-align: left;
}

.timeline .row.timeline-right,
.timeline .row.timeline-left .timeline-date {
  text-align: left;
}

.timeline .timeline-date {
    font-size: 14px;
    font-weight: 600;
    margin: 0px 0 0 0;
    padding: 0;
    position: absolute;
    top: calc(50% - 80px);
}
.row.timeline-left .timeline-date {
    left: 40%;
}
.row.timeline-right .timeline-date {
    left: 40%;
}

.timeline .timeline-box, .timeline .timeline-launch {
    position: relative;
    display: inline-block;
    margin: 40px 15px;
    padding: 20px;
    border: 1px solid #f5f5f7;
    border-radius: 6px;
    background: #f5f5f7;
}

.timeline .timeline-launch {
  width: 100%;
  margin: 15px 0;
  padding: 0;
  border: none;
  text-align: center;
  background: transparent;
}

.timeline-start{
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 0;
    padding: 30px 0;
    text-align: center;
    background: linear-gradient(#48aa42, #00539C);
    border-radius: 0;
    box-shadow: 0;
    font-size: 14px;
    text-transform: uppercase;
    background: url(/assets/img/bgdate.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.timeline .timeline-right .timeline-box {

    max-width: 75%;
    float: right;
}

.timeline .timeline-left .timeline-box {

    max-width: 75%;
    float: left;
    width:75%;
}
.timeline .timeline-box::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 1px;
    background: #2b4365;
    left: 0;
    margin-top: 0;
    top: 50%;
    width: 100%;
}

.timeline .timeline-box::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 1px;
    background: #48aa42;
    /* left: 0; */
    margin-top: 0;
    top: 50%;
    width: 12.5px;
    height: 12.5px;
    border-radius: 50%;
}
.timeline-left .timeline-box::after {
    margin-left: 100%;
    height: 1.5px;
}

.timeline-right .timeline-box::after {
    margin-left: -100%;
    height: 2px;
}
.timeline:before {
    opacity:0;
}

.timeline-right .timeline-box::before {
    margin-left: -34.3%;
    z-index: 2;
    margin-top: -5px;
    left: 0;
}

.timeline-left .timeline-box::before {
    margin-left: calc(125% + 26px);
    z-index: 2;
    margin-top: -5px;
    left: 0;
}
.timeline .timeline-box .timeline-icon {
  position: relative;
  width: 40px;
  height: auto;
  float: left;
}

.timeline .timeline-icon i {
  font-size: 25px;
  color: #48aa42;
}

.timeline .timeline-box .timeline-text {
  position: relative;
  width: calc(100% - 40px);
  float: left;
}

.timeline .timeline-launch .timeline-text {
  width: 100%;
}

.timeline .timeline-text h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 3px;
}

.timeline .timeline-text p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
    padding: 0;
    color: #2b4365;
}

.timeline-text h4 {
    background: url(/assets/img/bgdate.png);
    background-size: 14px;
    background-repeat: no-repeat;
    font-size: 25px;
    padding-left: 25px;
    background-position: 0 5px;
}
img.imgsuceso {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 2px solid #2b4365;
	position: relative;
	z-index: 2;
	object-fit: cover;
	object-position: center;
}
span.bullet {
    color: #48aa42;
    font-size: 25px;
    position: absolute;
    margin-left: -15px;
    margin-top: -10px;
}
@media (max-width: 768px) {

  .timeline .timeline-continue::after {
    left: 40px;
  }

  .timeline .timeline-end,
  .timeline .timeline-start,
  .timeline .timeline-year,
  .timeline .row.timeline-left,
  .timeline .row.timeline-right .timeline-date,
  .timeline .row.timeline-right,
  .timeline .row.timeline-left .timeline-date,
  .timeline .timeline-launch {
    text-align: left;
  }

  .timeline .row.timeline-left .timeline-date::after,
  .timeline .row.timeline-right .timeline-date::after {
    left: 47px;
  }

  .timeline .timeline-box,
  .timeline .row.timeline-right .timeline-date,
  .timeline .row.timeline-left .timeline-date {
    margin-left: 55px;
  }

  .timeline .timeline-launch .timeline-box {
    margin-left: 0;
  }


  .timeline .timeline-left .timeline-box {
    max-width: 75%;
    float: right;
    width: 75%;
}
.timeline .timeline-continue::after {
    left: 0;
}

.timeline-left .timeline-box::before {
    margin-left: calc(-33.33% - 12px);
    z-index: 2;
    margin-top: -5px;
}

.timeline-left .timeline-box::after {
    margin-left: -30%;
    width: 30%;
}
.timeline-right .timeline-box::after {
    margin-left: -30%;
    width: 30%;
}
.timeline-start {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 0;
    padding: 30px 0;
    text-align: center;
    background: linear-gradient(#48aa42, #00539C);
    border-radius: 0;
    box-shadow: 0;
    font-size: 14px;
    text-transform: uppercase;
    background: url(/assets/img/bgdate.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-left: -25px;
}
.timeline-right .timeline-box::before {
    margin-left: calc(-40% + 6px);
    z-index: 2;
    margin-top: -5px;
}

}

p.timeline-date span {
    color: #fff!important;
    background: url(/assets/img/bgdate.png);
    height: 85px;
    background-size: 102% 99%;
    display: inline-block;
    width: 55px;
    top: -20px;
    /* position: absolute; */
    text-align: center;
    padding: 33px 0!important;
    font-size: 20px;
    font-family: "Montserrat", sans-serif;
}
.timeline .row.timeline-right  p.timeline-date span::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    background:  #2b4365;
    left: 50px;
    margin-top: -2px;
}
.timeline .row.timeline-left  p.timeline-date span::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    background:  #2b4365;
    left: -40px;
    margin-top: -2px;
}
.timeline .noimage .timeline-box::after {
    width: 33.33%;
}
@media(max-width:700px){

    .timeline .row.timeline-left  p.timeline-date span::after, .timeline .row.timeline-right  p.timeline-date span::after {
    display:none;
}


    .col-lg-12.instrumentos p {
    padding: 0px 0px;
}
    h4, .h4 {
        font-size: 1.5rem;
        color: #2b4365;
    }
    section#services {
    padding-top: 90px;
}
.descarga {
    min-height: 10px;
}
.col-md-1.greenbar {
    display: none;
}

.img-int-01 {
    width: 100%;
    height: 100px;
    margin-bottom: 40px;
}

.timeline .timeline-date {
    left: 0;
    position: relative;
    margin: 0;
    padding: 0;
    left: calc(100% - 80px)!important;
    float: none;
    margin-left: 0!important;
    /* width: 80px; */
    top: 40px;
    /* height: 80px; */
}
img.imgsuceso {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #2b4365;
    position: relative;
    z-index: 2;
}
.timeline .timeline-box, .timeline .timeline-launch {
    margin: 0px 15px;
}
}

@media(max-width:768px){
  .timeline-right .timeline-box::before, .timeline-left .timeline-box::before {
    left: -33.33%;
    margin-left: 7.5px;
}
.noimage {
    margin-top: 80px;
}
.row.columnasfooter {
    padding: 40px 15px!important;
}
}		
	</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-fluid">
			  <div class="row">

				<div class="col-lg-12 textoservs">
				  <h4 class="text-left"><?php echo $titulopag;?></h4>
                  <p><?php echo $textoPrincipal;?></p>
                 
                </div>
                
                <div class="col-lg-12">

                <div class="timeline">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="timeline-container">

          <div class="timeline-continue">

          <?php 

            $count=0;
            foreach ($arraysus['data']['historiaSucesos'] as $item) {
                $count++;
                $pos = ($count % 2 == 1) ? "left" : "right"; 

                if(strlen($item['imagen'])>5){
                  $imagen = '
                  <p class="timeline-date">
                    <img class="imgsuceso" src="'.$cloudfront.$item['imagen'].'?t='.time().'">
                  </p>';
                  $classimg = '';
                }
                else{
                  $imagen = '';
                  $classimg = 'noimage';
                }
                //echo $pos;
                if($lang == 'en'){


                      if($pos == 'right'){

                          echo '
                          <div class="'.$classimg.'  row timeline-right">
                          <div class="col-md-6">
                          '.$imagen.'
                          </div>
                          <div class="col-md-6">
                            <div class="timeline-box">
                              <div class="timeline-icon">
                                <i style="display:none;"class="fa fa-gift"></i>
                              </div>
                              <div class="timeline-text">
                              <h4> '.$item['anio'].'</h4>
                                <p>'.urldecode($item['textoSuceso']).'</p>
                              </div>
                            </div>
                          </div>
                        </div>';

                      }
                      
                      if($pos == 'left'){

                          echo '
                          
                          <div class="'.$classimg.'  row timeline-left">
                          <div class="col-md-6 d-md-none d-block">
                          '.$imagen.'
                          </div>
                          <div class="col-md-6">
                          <div class="timeline-box">
                              <div class="timeline-icon d-md-none d-block">
                              <i style="display:none;" class="fa fa-business-time"></i>
                              </div>
                              <div class="timeline-text">
                              <h4> '.$item['anio'].'</h4>
                              <p>'.urldecode($item['textoSuceso']).'</p>
                              </div>
                              <div class="timeline-icon d-md-block d-none">
                              <i style="display:none;" class="fa fa-business-time"></i>
                              </div>
                          </div>
                          </div>
                          <div class="col-md-6 d-md-block d-none">
                          '.$imagen.'
                          </p>
                          </div>
                      </div>';

                      }
                     
                  
                  
              }

                    if($lang == 'es'){
                        foreach ($item['localizations'] as $subitem) {

                            if($pos == 'right'){

                                echo '
                                <div class="'.$classimg.'  row timeline-right">
                                <div class="col-md-6">
                                '.$imagen.'
                                </div>
                                <div class="col-md-6">
                                  <div class="timeline-box">
                                    <div class="timeline-icon">
                                      <i style="display:none;"class="fa fa-gift"></i>
                                    </div>
                                    <div class="timeline-text">
                                    <h4> '.$item['anio'].'</h4>
                                      <p>'.urldecode($subitem['textoSuceso']).'</p>
                                    </div>
                                  </div>
                                </div>
                              </div>';

                            }
                            
                            if($pos == 'left'){

                                echo '
                                
                                <div class="'.$classimg.'  row timeline-left">
                                <div class="col-md-6 d-md-none d-block">
                                '.$imagen.'
                                </div>
                                <div class="col-md-6">
                                <div class="timeline-box">
                                    <div class="timeline-icon d-md-none d-block">
                                    <i style="display:none;" class="fa fa-business-time"></i>
                                    </div>
                                    <div class="timeline-text">
                                    <h4> '.$item['anio'].'</h4>
                                    <p>'.urldecode($subitem['textoSuceso']).'</p>
                                    </div>
                                    <div class="timeline-icon d-md-block d-none">
                                    <i style="display:none;" class="fa fa-business-time"></i>
                                    </div>
                                </div>
                                </div>
                                <div class="col-md-6 d-md-block d-none">
                                '.$imagen.'
                                </p>
                                </div>
                            </div>';

                            }
                           
                        }
                        
                    }
            
            }
        ?>
        



            </div>

            <div class="timeline-start">
            
          </div>
          </div>

           
          </div>


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

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

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