<?php
if($_COOKIE['cookieDisclaimerEn'] != "hidedisclaimer" ){
    $disclaimerEn = 1;
    setcookie("cookieDisclaimerEn", "hidedisclaimer", time()+ 2592000);
}
include 'config.php';
?>
<!DOCTYPE html>
<html lang="en" translate="no">
    <head>
        <?php  include '../config.php'; $lang = 'en'; include '../include/generales.php'; ?>
	<style>		
		
        .events {
            height: 250px;
            position: absolute;
            right: 228px;
            z-index:1;
            background-color:#cdcdd4;
            padding: 10px 40px;
            top:485px;
        }

        .img-events {
            max-width: 569px;
            height: 550px;
            position: absolute;
            right: 0;
            z-index:-1;
            background-color:#cdcdd4;
            padding-right: 0;
            padding-left: 0;
        }
            
        .img-txt {
            max-width: 680px;
            height: 400px;
            position: absolute;
            right: 0;
            z-index:1;
            background-color:#cdcdd4;
            padding-right: 0;
            padding-left: 0;
            padding: 40px 120px 40px 40px;
            margin-top:285px;
        }
        #carouselExampleIndicators {
            margin-top: 150px;
        }
        .carousel-caption {
            position: absolute;
            right: 15%;
            bottom: 0;
            left: 12.5%;
            z-index: 10;
            padding-top: 20px;
            padding-bottom: 20px;
            color: #fff;
            text-align: left;
            top: 15%;
        }

        .masthead-heading {
            font-size: 60px;
            font-weight: 600;
            line-height: 1.2;
            margin-bottom: 15px;
            text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
            font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        }
        #carouselExampleIndicators {
            margin-bottom: 30px;
            height: 70vh;
        }
        .carousel-inner, .carousel-item {
            height: 70vh;
        }
        .carousel-item img {
            height: 70vh;
            object-fit: cover;
            object-position: 50%;
        }

        .carousel-indicators {
            position: absolute;
            right: 0;
            top: 40%;
            left: 0;
            z-index: 15;
            display: inline-block;
            justify-content: center;
            padding-left: 0;
            margin-right: 0;
            margin-left: 2.5%;
            list-style: none;
            width: 40px;
        }

        .carousel-indicators li {
            box-sizing: content-box;
            flex: 0 1 auto;
            width: 12px;
            height: 12px;
            margin-right: 3px;
            margin-left: 3px;
            text-indent: -999px;
            cursor: pointer;
            background-color: #fff;
            background-clip: padding-box;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            opacity: 0.5;
            transition: opacity 0.6s ease;
            border-radius: 50%;
        }

        .carousel-caption h5 {
            margin-bottom: 25px;
            font-size: 17.5px;
            line-height: 1.5;
            text-shadow: 1px 1px 1px #252525;
            color:#fff;
        }

        img.logoevent {
            width: 100%;
            position: relative;
            object-fit:cover;
        }
        .col-lg-4 .innerbox {
            background: #eeeeee;
            padding: 30px;
            height: 100%;
        }
        .page-section {
            padding: 30px 0;
        }

        .avisobox {
            background: #cdcdd4;
            margin-top: 50px;
            float: right;
            margin-right: -12.5px;
            padding: 30px;
            margin-bottom: -50px;
        }

        .bannerinferior{
            background-size: cover;
            margin-bottom: 50px!important;
            margin-top: -30px;
        }
        .col-md-12 .innerbox.bg2 {
            background-color: #cdcdd4;
            float: left;
        }

        img.boximg {
            width: 100%;
            max-height: 180px;
            object-fit: cover;
            min-height: 180px;
            border: 1px solid #ccc;
        }
        .col-md-12.bgopacity {
            margin-bottom: 30px;
        }
        .innerbox2.col-md-9 {
            padding: 30px;
        }
        .col-lg-4 .innerbox h4 {
            text-transform: none!important;
            font-size: 17.5px;
        }
        #services .col-lg-4 {
            position: relative;
            overflow-y: hidden;
        }
        .bg-video-wrap {
            position: absolute;
            width: calc(100% - 25px);
            height: 180px;
            top: 0;
        }

        .bg-video-wrap video {
            width:100%;
            height: 100%;
            top: 0;
            object-fit:cover;
        }
        .bg-video-wrap .overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            background: rgba(43,67,101,.6);
            background-image: url(/assets/img/maximize.svg);
            background-size: 40px;
            background-repeat: no-repeat;
            cursor: pointer;
            background-position: center;
            opacity:0;
            transition:.35s all ease;
        }
        .bg-video-wrap .overlay:hover {
            opacity:1;
        }
        .btndest{
            position: relative!important;
            bottom: 0!important;
            margin-top: 20px;
            margin-top: 20px;

        }
        .innerbox.bg2 {
            padding-bottom: 10px!important;
        }


        @media(max-width:1024px){
            #linkdestacado .col-md-3 {
                max-width: 40%;
            }
            #linkdestacado .col-md-9 {
                max-width: 60%;
            }
        }
            
        @media(max-width:768px){
            #linkdestacado .col-md-3 {
                max-width: 100%;
            }
            #linkdestacado .col-md-9 {
                max-width: 100%;
            }
            img.logoevent {
                max-height: 300px;
            }
            .bannerinferior {
                background-size: cover;
                margin-bottom: 70px!important;
                margin-top: 0px;
            }
            #carouselExampleIndicators {
                margin-top: 60px;
                margin-bottom: 30px;
                height: 50vh;
            }
            .carousel-inner, .carousel-item {
                height: 50vh;
            }
            .carousel-item img {
                height: 50vh;
                object-fit: cover;
                object-position: 50%;
            }
            .masthead-heading {
                font-size: 45px;
            }
            .carousel-caption h5 {
                font-size: 15px;
            }
            
        }
        
        
        @media(max-width:500px){
            img.logoevent {
                max-height: 230px;
            }
            .bannerinferior {
                background-size: cover;
                margin-bottom: 70px!important;
                margin-top: 0px;
            }
            #carouselExampleIndicators {
                margin-top: 60px;
                margin-bottom: 30px;
                height: 70vh;
            }
            .carousel-inner, .carousel-item {
                height: 70vh;
            }
            .carousel-item img {
                height: 70vh;
                object-fit: cover;
                object-position: 50%;
            }
            .masthead-heading {
                font-size: 30px;
            }
            .carousel-caption h5 {
                font-size: 12.5px;
            }
            .carousel-caption {
                top: 5%;
            }
            .avisobox {
                margin-right: 0;
            }
            .bannerinferior h4 {
                font-size: 25px;
                padding-bottom: 10px;
            }
            #services .col-lg-4 {
                position: relative;
                overflow-y: hidden;
                margin-bottom: 30px;
            }
            .whitefooter {
                padding: 10px!important;
            }
            
        }
                                                
                
    </style>
    <link rel="stylesheet" href="/css/balloon.min.css">	
    </head>
    <body id="page-top" class="home">
		
		<?php include '../include/nav2.php'; ?>
		

        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              
            <?php 
                $count = 0;

                foreach ($array['data']['bannersHome'] as $item) {

                    if($count==0){
                        $classactive = 'active';
                    }
                    else{
                        $classactive = '';
                    }
                    echo '<li data-target="#carouselExampleIndicators" data-slide-to="'.$count.'" class="'.$classactive.'"></li>';

                    $count++;
                }
            
            ?>

            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">

            <?php 
                $count = 0;
                foreach ($array['data']['bannersHome'] as $item) {
                    if($lang == 'en'){
                        $banner_enlaceBoton = $item['enlaceBoton'];
                        $banner_imagenDeFondo = $item['imagenDeFondo'];
                        $banner_titulo = $item['titulo'];
                        $banner_subtitulo = $item['subtitulo'];
                        $banner_textoBoton = $item['textoBoton'];
                        
                    }
                    if($lang == 'es'){

                        foreach ($item['localizations'] as $subitem) {
                                $banner_enlaceBoton = $subitem['enlaceBoton'];
                                $banner_imagenDeFondo = $subitem['imagenDeFondo'];
                                $banner_titulo = $subitem['titulo'];
                                $banner_subtitulo = $subitem['subtitulo'];
                                $banner_textoBoton = $subitem['textoBoton'];
                        }
                        
                    }
                    if($count==0){
                        $classactive = 'active';
                    }
                    else{
                        $classactive = '';
                    }
                    if(strlen($banner_enlaceBoton)>2){
                        $botonbanner = '<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="'.$banner_enlaceBoton.'">'.$banner_textoBoton.'</a>';
                    }
                    else{
                        $botonbanner = "";
                    }  

                    echo'
                    <div class="carousel-item '.$classactive.'">
                        <img class="d-block w-100" src="'.$cloudfront.$banner_imagenDeFondo.'" data-color="lightblue" alt="'.$banner_texto.'">
                        <div class="carousel-caption d-md-block">
                            <div class="masthead-heading">'.$banner_titulo.'</div>
                            <h5>'.urldecode($banner_subtitulo).'</h5>
                            '.$botonbanner.'
                        </div>
                    </div>
                    ';

                    $count++;
                }
                
            ?>
            </div>
            <!-- Controls 
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            -->
        </a>
    </div>

        <!-- Services-->
        <section class="page-section" id="services">
            <div class="container">
                <div class="row text-left">

                <?php
                    if(strlen($titEventoDestacado)>2){
                ?>
                                    <div class="col-md-12 bgopacity">
                        <div class="innerbox bg2" id="linkdestacado" style="padding-bottom: 0 !important;">

                        <div class="innerbox2 col-md-3" style="float: left; padding:0">
                                <?php 
                                    if(strlen($fechaEventoDestacado)>0){
                                        echo '<img src="'.$cloudfront.$fechaEventoDestacado.'" class="logoevent" id="logolinkdestacado">';
                                    }
                                
                                ?>
                                
                            </div>

                            <div class="innerbox2 col-md-9" style="float: left;">
                                <h3 class="my-3"><?php echo urldecode($titEventoDestacado);?></h3>
                                <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger btndest" target="_blank" href="<?php echo $linkEventoDestacado;?>"><?php echo $botonEventoDestacado;?></a>
                            </div>
                            
                            
                            
                            
                            
                        </div> 
                    </div>
                <?php

                    }
                ?>

                        
                    <?php 
                        foreach ($array['data']['enlacesPaginaHome'] as $item) {
                        
                                if(strlen($item['encabezado'])>0){
                                    $img = $item['encabezado'];
                                }
                                else{
                                    $img = 'https://indeval-webdocs-publico-01122020.s3.amazonaws.com/img/placeholder-image.jpg';
                                }
                                
                                if(strlen($item['video'])>0){
                                    $video = '
                                    <div class="bg-video-wrap">
                                        <video src="'.$cloudfront.$item['video'].'" loop muted autoplay playsinline>
                                        </video>
                                        <a data-fancybox="video" data-width="640" data-height="360" href="'.$cloudfront.$item['video'].'">
                                            <div class="overlay">
                                            </div>
                                        </a>
                                        
                                    </div>';
                                }
                                else{
                                    $video = '';
                                }

   

                                if (strpos($item['enlaceBoton'], 'https://') !== false) {
                                    $target = "_blank";
                                }
                                else{
                                    $target="_self";
                                }
                                if($lang == 'en'){

                                        if(strlen($item['encabezado'])>0){
                                            $img = $item['encabezado'];
                                            $imgmain = ' <img class="boximg" src="'.$cloudfront.$img.'">';
                                            $minh = '';
                                        }
                                        else{
                                            $img = '';
                                            $imgmain = '';
                                            $minh = 'style="min-height: 180px;"';
                                        }

                                        if(strlen($item['video'])>0){
                                            $video = '
                                            <div class="bg-video-wrap">
                                            <video src="'.$cloudfront.$item['video'].'" loop muted autoplay playsinline>
                                            </video>
                                            <a data-fancybox="video" data-width="640" data-height="360" href="'.$cloudfront.$item['video'].'">
                                            <div class="overlay">
                                            </div>
                                        </a>
                                            
                                          </div>';
                                        }
                                        else{
                                            $video = '';
                                        }
                                        echo '
                                    <div class="col-lg-4 col-sm-6">
                                   
                                    '.$imgmain.$video.'
                                        <div class="innerbox">
                                        
                                            
                                            <h4 '.$minh.'>'.$item['titulo'].'</h4>
                                            <p>'.urldecode($item['texto']).'</p>
                                            
                                            <a target="'.$target.'" class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="'.$item['enlaceBoton'].'">'.$item['textoBoton'].'</a>
                                        </div>
                                    </div>';
                                    
                                    
                                }

                                if($lang == 'es'){

                                    foreach ($item['localizations'] as $subitem) {

                                        if(strlen($subitem['encabezado'])>0){
                                            $img = $subitem['encabezado'];
                                            $imgmain = ' <img class="boximg" src="'.$cloudfront.$img.'">';
                                            $minh = '';
                                        }
                                        else{
                                            $img = '';
                                            $imgmain = '';
                                            $minh = 'style="min-height: 180px;"';
                                        }

                                        if(strlen($subitem['video'])>0){
                                            $video = '
                                            <div class="bg-video-wrap">
                                            <video src="'.$cloudfront.$subitem['video'].'" loop muted autoplay>
                                            </video>
                                            <a data-fancybox="video" data-width="640" data-height="360" href="'.$item['video'].'">
                                            <div class="overlay">
                                            </div>
                                        </a>
                                            
                                          </div>';
                                        }
                                        else{
                                            $video = '';
                                        }

                                        if (strpos($subitem['enlaceBoton'], 'https://') !== false) {
                                            $target = "_blank";
                                        }
                                        else{
                                            $target="_self";
                                        }
                                        echo '
                                    <div class="col-lg-4 col-sm-6">
                                   
                                    '.$imgmain.$video.'
                                        <div class="innerbox">
                                        
                                            
                                            <h4 '.$minh.'>'.$subitem['titulo'].'</h4>
                                            <p>'.$subitem['texto'].'</p>
                                            
                                            <a target="'.$target.'"; class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="'.$subitem['enlaceBoton'].'">'.$subitem['textoBoton'].'</a>
                                        </div>
                                    </div>';
                                    }
                                    
                                }
                            
                        
                        }
                    ?>	
                    
                </div>
            </div>
        </section>
        <!-- Portfolio Grid-->
        <section class="page-section">
            <div class="container">
                <div class="row" style="padding: 0 10px;">
                    <div class="col-lg-4 timelinetwitter">
                        <a class="twitter-timeline" data-height="400" href="https://twitter.com/BMVMercados?ref_src=twsrc%5Etfw">Tweets by BMVMercados</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                    </div>
                    
                    <div class="col-lg-8 bannerinferior" style="background-image:url(<?php echo $cloudfront.$bannerHomeInferior;?>);">
                        <div class="col-lg-8 col-md-8 avisobox">
                        <div>   
                            <p class="date"><?php echo $articuloEncabezado;?></p>
                            <h4 class="my-3 text-uppercase"><?php echo $articuloTitulo;?></h4>
                            <p class="text-blue"><?php echo $articuloTexto;?></p><br>
                        
                            <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" target="_blank" href="<?php echo $articuloLinkBoton;?>"><?php echo $articuloTextoBoton;?></a>
                        </div>  
                    </div>
                    </div>
                    	
					
					
				    
					
                </div>
				
				
            </div>
        </section>		
    <?php 
    if($lang == 'es'){

        $linkaviso = "/cumplimiento?s=privacidad";
        $textcookies = '
        <div class="cookies cookieses">
            <div class="closecookies"></div>
                <p class="textocookies">Le informamos que al navegar en este sitio web, usted acepta el uso de cookies, web beacons y otras tecnologías, a través de las cuales es posible monitorear su comportamiento como usuario de internet y recabar datos analíticos, con el fin de brindarle una mejor experiencia de navegación. Consulte el aviso de privacidad completo <a href="'.$linkaviso.'" style="color: #48aa42;">aquí</a>.</p>
            <div class="contbtn"><a class="closecookies btncookies" onclick="closeCookies();">Cerrar</a></div>
            </div>';
    
    }
    
    if($lang == 'en'){
    
       
        $linkaviso = "/en/compliance?s=privacy";
        $textcookiesen = '
        <div class="cookies cookiesen">
            <div class="closecookies"></div>
                <p class="textocookies">We inform you that by browsing this website, you accept the use of cookies, web beacons and other technologies, through which it is possible to monitor your behavior as an Internet user and collect analytical data, in order to provide you with a better browsing experience. See the full privacy notice <a href="'.$linkaviso.'" style="color: #48aa42;">here</a>.</p>
            <div class="contbtn"><a class="closecookies btncookies btncookiesen" onclick="closeCookies();">Close</a></div>
            </div>';
    
    }
    
    include '../include/footer.php'; ?>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
    <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>
            
            $('.carousel').carousel({
                interval: 10000,
                pause: "false"
            });

            
            setTimeout(() => {
                var count_elements = $('.carousel-item').length;
                if(count_elements == 1){
                    $("body").addClass("oneslide");
                }
            }, 100);
            $('.overlay').click(function(){
                //alert('pausa');
                $('.bg-video-wrap video')[0].pause();
            });
            $('.overlay').on("mouseenter", function(){
                //alert('pausa');
                $('.bg-video-wrap video')[0].play();
            });
            $(document).ready(function(){
                var h = $("#linkdestacado").height();
                $("#logolinkdestacado").css("height", h+"px");
            })
        </script>
    </body>
</html>
