<?php
 session_start();
 include '../config.php';
 $lang = 'en';
 $faq = $_GET['f'];

if(strlen($_SESSION['riesgos'])>90 && strlen($_COOKIE['persistID'])<2)
{
    $responseriesgos = $_SESSION['riesgos'];
    //echo $_SESSION['myArray'];
}
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  lineasDeDefensa(stage: PUBLISHED, where: {estatus: \\"publicado\\"}) {\\r\\n    estatus\\r\\n    id\\r\\n    imagen\\r\\n    texto\\r\\n    titulo\\r\\n    localizations {\\r\\n      estatus\\r\\n      id\\r\\n      imagen\\r\\n      texto\\r\\n      titulo\\r\\n    }\\r\\n  }\\r\\n  paginaAdministracionDeRiesgos(where: {id: \\"cklakmp3430yz0a78c1tkfqzj\\"}, stage: PUBLISHED) {\\r\\n    id\\r\\n    imagenDerecha\\r\\n    imagenIzquierda\\r\\n    infografia1\\r\\n    infografia2\\r\\n    slug\\r\\n    stage\\r\\n    subtituloDePagina\\r\\n    texto1\\r\\n    texto2\\r\\n    texto3\\r\\n    texto4\\r\\n    tituloDePagina\\r\\n    localizations(locales: es_MX) {\\r\\n      id\\r\\n      imagenDerecha\\r\\n      imagenIzquierda\\r\\n      infografia1\\r\\n      infografia2\\r\\n      slug\\r\\n      stage\\r\\n      subtituloDePagina\\r\\n      texto1\\r\\n      texto2\\r\\n      texto3\\r\\n      texto4\\r\\n      tituloDePagina\\r\\n    }\\r\\n  }\\r\\n  paginaContinuidadDeNegocio(where: {id: \\"cklaiq1mw2zee0a29s64e8aah\\"}, stage: PUBLISHED) {\\r\\n    id\\r\\n    imagenDerecha\\r\\n    infografia1\\r\\n    imagenIzquierda\\r\\n    infografia2\\r\\n    slug\\r\\n    stage\\r\\n    subtituloDePagina\\r\\n    texto1\\r\\n    texto2\\r\\n    texto3\\r\\n    tituloDePagina\\r\\n    localizations(locales: es_MX) {\\r\\n      id\\r\\n      imagenDerecha\\r\\n      imagenIzquierda\\r\\n      infografia1\\r\\n      infografia2\\r\\n      slug\\r\\n      stage\\r\\n      subtituloDePagina\\r\\n      texto1\\r\\n      texto2\\r\\n      texto3\\r\\n      tituloDePagina\\r\\n    }\\r\\n  }\\r\\n}\\r\\n","variables":{}}',
        CURLOPT_HTTPHEADER => array(
          'Content-Type: application/json',
          'Cookie: __cfduid=da2693cdfd39b7377a8a05e305da45b8f1613001694'
        ),
      ));
   
  $responseriesgos = curl_exec($curl);
  $_SESSION['riesgos'] = $responseriesgos;
  curl_close($curl);
}

$arrayriesgos = json_decode($responseriesgos, true);
//echo  $arrayriesgos;
$urles = $arrayriesgos['data']['paginaAdministracionDeRiesgos']['localizations'][0]['slug'];
$urlen = $arrayriesgos['data']['paginaAdministracionDeRiesgos']['slug'];
//echo $responseriesgos;

if($lang == 'en'){
	///////INFO PÁGINA
	$riesgos_tituloDePagina = urldecode($arrayriesgos['data']['paginaAdministracionDeRiesgos']['tituloDePagina']);
    $riesgos_texto1 = rawurldecode($arrayriesgos['data']['paginaAdministracionDeRiesgos']['texto1']);
    $riesgos_texto2 = rawurldecode($arrayriesgos['data']['paginaAdministracionDeRiesgos']['texto2']);
    $riesgos_texto3 = rawurldecode($arrayriesgos['data']['paginaAdministracionDeRiesgos']['texto3']);
    $riesgos_infografia1 =$arrayriesgos['data']['paginaAdministracionDeRiesgos']['infografia1'];
    $riesgos_infografia2 =$arrayriesgos['data']['paginaAdministracionDeRiesgos']['infografia2'];


    $continuidad_tituloDePagina = urldecode($arrayriesgos['data']['paginaContinuidadDeNegocio']['tituloDePagina']);
    $continuidad_texto1 = rawurldecode($arrayriesgos['data']['paginaContinuidadDeNegocio']['texto1']);
    $continuidad_texto2 = rawurldecode($arrayriesgos['data']['paginaContinuidadDeNegocio']['texto2']);
    $continuidad_texto3 = rawurldecode($arrayriesgos['data']['paginaContinuidadDeNegocio']['texto3']);
    $continuidad_infografia1 =$arrayriesgos['data']['paginaContinuidadDeNegocio']['infografia1'];
    $continuidad_infografia2 =$arrayriesgos['data']['paginaContinuidadDeNegocio']['infografia2'];


    
}
if($lang == 'es'){
	$riesgos_tituloDePagina = urldecode($arrayriesgos['data']['paginaAdministracionDeRiesgos']['localizations'][0]['tituloDePagina']);
    $riesgos_texto1 = rawurldecode($arrayriesgos['data']['paginaAdministracionDeRiesgos']['localizations'][0]['texto1']);
    $riesgos_texto2 = rawurldecode($arrayriesgos['data']['paginaAdministracionDeRiesgos']['localizations'][0]['texto2']);
    $riesgos_texto3 = rawurldecode($arrayriesgos['data']['paginaAdministracionDeRiesgos']['localizations'][0]['texto3']);
    $riesgos_infografia1 =$arrayriesgos['data']['paginaAdministracionDeRiesgos']['localizations'][0]['infografia1'];
    $riesgos_infografia2 =$arrayriesgos['data']['paginaAdministracionDeRiesgos']['localizations'][0]['infografia2'];

    $continuidad_tituloDePagina = urldecode($arrayriesgos['data']['paginaContinuidadDeNegocio']['localizations'][0]['tituloDePagina']);
    $continuidad_texto1 = rawurldecode($arrayriesgos['data']['paginaContinuidadDeNegocio']['localizations'][0]['texto1']);
    $continuidad_texto2 = rawurldecode($arrayriesgos['data']['paginaContinuidadDeNegocio']['localizations'][0]['texto2']);
    $continuidad_texto3 = rawurldecode($arrayriesgos['data']['paginaContinuidadDeNegocio']['localizations'][0]['texto3']);
    $continuidad_infografia1 =$arrayriesgos['data']['paginaContinuidadDeNegocio']['localizations'][0]['infografia1'];
    $continuidad_infografia2 =$arrayriesgos['data']['paginaContinuidadDeNegocio']['localizations'][0]['infografia2'];
}

?>

<!DOCTYPE html>
<html lang="en" translate="no">
    <head>
        <?php include '../include/generales.php'; ?>
			
        <style>
            .page-section {
                padding-top: 180px;
                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: 60px 1rem;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
}
::marker {
    color: #48aa42;
    font-size: 15px;
}

.accordion {
    padding-top: 40px;
    
}	
.accordion a {
    color: #2b4365!important;
    font-weight: bold;
    text-decoration: none;
    font-size: 25px;
    font-family:"Montserrat", sans-serif;
}
.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;
    
}

.content h4 {
    font-size: 17.5px;
    padding: 30px 0;
}

.content ul {
    padding-left: 30px;
    font-size: 13px;
    color: #2b4365;
}
.content h5 {
    font-size: 15px;
    line-height: 1.4;
    margin-top: 40px;
}
img.infografia1 {
    width: 100%;
    max-width: 820px;
    margin: 40px auto;
}
img.imglinea {
    width: 100%;
    padding: 15px;
}
.linea {
    width: 100%;
    float: left;
}
.imgcont {
    width: 15%;
    float: left;
}
.textcont {
    width: 85%;
    float: left;
}
.textcont h6 {
    /* color: #2b4365; */
    font-weight: bold;
    font-family: "Montserrat", sans-serif;
    padding: 10px 0;
    margin-top: 20px;
}
.fancybox-container {
    z-index: 99999999!important;
}
p.ampliafoto {
    display:none;
}


.accordion a.active {
    margin-bottom: 10px;
}
@media(max-width:600px){
    #services {
        margin-top: 0px;
    }
    h4, .h4 {
        font-size: 2rem;

    }

    p.ampliafoto {
        text-align: center;
        font-size: 12px;
        padding: 10px;
        color:  #48aa42;
        display:inline-block;
        width:100%;
    }

    .imgcont {
        width: 100%;
        float: left;
        padding: 0 20%;
    }
    .textcont {
        width: 100%;
        float: left;
    }
    .accordion .content {
        padding: 30px 0!important;
    }
    .content h3 {
        font-size: 17.5px;
    }
    

}
    </style>
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    </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-12">
				  <h4 class="text-left"><?php echo $titpag;?></h4>
				</div>	
				
				  
				<div class="col-lg-12">
                <div class="container">

                <div class="accordion">

                <div class="accordion-item" id="riesgos">
                    <a><?php echo $riesgos_tituloDePagina;?></a>
                    <div class="content">
                    <?php echo $riesgos_texto1;?>

                    

                    <?php
                    if(strlen($riesgos_infografia1)>10){

                        echo '<a data-fancybox="gallery" href="'.$cloudfront.$riesgos_infografia1.'"><img class="infografia1" src="'.$cloudfront.$riesgos_infografia1.'"></a>';

                        echo '<p class="ampliafoto">Toca la imagen para ampliarla</p>';

                    }
                    ?>

                    <?php echo $riesgos_texto2;?>

                    <?php echo $riesgos_texto3;?>


                    <?php 
                        foreach ($arrayriesgos['data']['lineasDeDefensa'] as $item) {
                            echo '<div class="linea">';
                                
                            if($lang == 'en'){

                                if(strlen($item['imagen'])>4){
                                    $img = '<img class="imglinea" src="'.$cloudfront.$item['imagen'].'">';

                                    echo '
                                    <div class="imgcont">
                                        '.$img.'
                                    </div>';
                                }
                                else{
                                    $img = '';
                                }
                                
                                echo '
                                <div class="textcont">
                                    <h6>'.urldecode($item['titulo']).'</h6>
                                    <p>'.urldecode($item['texto']).'</p>
                                </div>';
                            }

                            if($lang == 'es'){
                                foreach ($item['localizations'] as $subitem) {
                                        if(strlen($subitem['imagen'])>4){
                                            $img = '<img class="imglinea" src="'.$cloudfront.$item['imagen'].'">';
        
                                            echo '
                                            <div class="imgcont">
                                                '.$img.'
                                            </div>';
                                        }
                                        else{
                                                $img = '';
                                        }
                                            
                                        echo '
                                        <div class="textcont">
                                            <h6>'.urldecode($subitem['titulo']).'</h6>
                                            <p>'.urldecode($subitem['texto']).'</p>
                                        </div>';
                                    }
                                
                            }

                            echo '</div>';
                            
                        }
                    ?> 

                    <?php
                    if(strlen($riesgos_infografia2)>10){

                        echo '<img class="infografia1" src="'.$cloudfront.$riesgos_infografia2.'">';

                    }
                    ?>

  
                    </div>
                </div>


                <div class="accordion-item" id="continuidad">
                    <a><?php echo $continuidad_tituloDePagina;?></a>
                    <div class="content">

                    <?php echo $continuidad_texto1;?>

                    <?php echo $continuidad_texto2;?>

                    <?php
                    if(strlen($continuidad_infografia1)>10){

                        echo '<a data-fancybox="gallery" href="'.$continuidad_infografia1.'"><img class="infografia1" src="'.$cloudfront.$continuidad_infografia1.'"></a>';
                        echo '<p class="ampliafoto">Toca la imagen para ampliarla</p>';

                    }
                    ?>

                    <?php echo $continuidad_texto3;?>

                    <?php
                    if(strlen($continuidad_infografia2)>10){

                        echo '<a data-fancybox="gallery" href="'.$continuidad_infografia2.'"><img class="infografia1" src="'.$cloudfront.$continuidad_infografia2.'"></a>';

                        echo '<p class="ampliafoto">Toca la imagen para ampliarla</p>';

                    }
                    ?>

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

                </div>
				</div>	  
					
					  
				  
			  </div>	  
			</div>
			
			<br><br>
					
							
        </section>
			
    		<?php include '../include/footer.php'; ?>

            <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
            <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
		<script>
            $(document).ready(function() {
                $('.accordion a').click(function(){
                    $(this).toggleClass('active');
                    $(this).next('.content').slideToggle(400);
                });
                

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

                    setTimeout(() => {
                        $("#'.$faq.' a").click();
                    }, 750);
                    
                    ';
                }
                ?>
            });
		</script>
    </body>
</html>
