<?php header('Content-Type: text/html; charset=utf-8'); ?><!DOCTYPE html>
<html lang="es">
  <head>
    <?php include_once './php/head.php';?>
  </head>
  <body>
      <?php include_once './php/header_menu.php';?>
      <section id="slide">
          <div class="container">
              <ul id="sliderHome">
                  <?php
                  $contador=0;
                  foreach (new DirectoryIterator('./slides') as $fileInfo) {
                        if($fileInfo->isDot()) continue;
                        echo '<li><img src="./slides/'.$fileInfo->getFilename() . '"/></li>';
                        $contador++;
                    }
                  
                  ?>
              </ul>
          </div>
      </section>
      <section id="pager" class="hidden-xs hidden-sm">
          <div class="container">
              <div class="row">
                  <div class="col-md-4 text-right page-arrow-prev">
                      <a href="#"><img src='assets/img/home/arrow_slide_izq.svg' /></a>
                  </div>
                  <div class="col-md-4">
                      <div id="bx-pager" class="text-center">
                        <?php
                          for($i=0;$i<$contador;$i++){
                              echo '<a data-slide-index="'.$i.'" href="">'.($i+1).'</a>';
                          }
                          ?>
                      </div>
                  </div>
                  <div class="col-md-4 text-left page-arrow-next">
                      <a href="#"><img src='assets/img/home/arrow_slide_der.svg' /></a>
                  </div>
              </div>
          </div>
      </section>
      
      <section id="home-noticias">
          <div class="container">
              <div class="row">
                  <div class="col-md-8 col-xs-12" id="home-col-news">
                      <div class="row">
                          <div class="col-xs-12 texto-grande text-bold">
                              NOTICIAS <span class="texto-color-corporativo">CFT</span> 
                          </div>
                          <div class="col-md-9 col-xs-12">
                              <ul id="sliderNews" style="list-style: none outside none;padding:0px !important;">
                                <?php
                                  require_once './editor/php/Noticia.php';
                                  $noticias = Noticia::all(' where fecha_publicacion is not null ORDER BY fecha_publicacion desc LIMIT 4');
                                  foreach ($noticias as $noticia) {
                                      $fechaArray = explode("-", $noticia->fecha_creacion);
                                      $noticia->ruta = $fechaArray[0] . "/" . $noticia->id;
                                      ?>
                                      <li>
                                          <img src="./news/<?php echo $noticia->ruta?>/principal.jpg">
                                          <div class="bx-caption">
                                              <a class="home-news-title" href="noticias.php?id=<?php echo $noticia->id?>"><?php echo htmlentities($noticia->titulo)?></a>
                                              <span class="home-news-date noticia-fecha"><?php echo $noticia->fecha_publicacion?></span><br>
                                          </div>
                                      </li>    


                                      <?php
                                  }
                                  ?>
                          </div> 
                          <div class="col-md-3 hidden-xs hidden-sm" id="home-noticias-pager">
                              <?php
                                $contadorNoticias=0;
                                foreach ($noticias as $noticia) {
                                ?>
                              <a data-slide-index="<?php echo $contadorNoticias; ?>" href=""><img src="./news/<?php echo $noticia->ruta?>/principal.jpg"></a>
                              <?php
                                $contadorNoticias++;
                                }
                              ?>
                          </div>
                      </div>
                  </div>
                  
                  <div class="col-md-4 col-xs-12">
                      <div class="row">
                          <div class="col-xs-12 texto-grande text-bold">
                              <span class="texto-color-corporativo">¿</span>POR QU&Eacute; <span class="texto-color-corporativo">ESANE?</span> 
                          </div>
                          <div class="col-xs-12 home-video text-center" >
                              <iframe src="https://www.youtube.com/embed/4wjxlI3aZfg?autoplay=0&rel=0" frameborder="0" allowfullscreen width="100%" height="300px" ></iframe>
                              <!--<img src="assets/img/home/youtube.jpg" id="imgVideoHome"/>-->
                          </div>
                          
                      </div>
                  </div>
              </div>
          </div>
      </section>

      
      <section id="home-social">
          <div class="container">
              <div class="row">
                  <div class="col-xs-12 texto-grande">
                          &Uacute;NETE A NUESTRAS <span class="texto-color-corporativo">REDES SOCIALES</span>
                  </div>
              </div>
              <div class="row hs-row-icons">
                  <div class="col-xs-12 text-center">
                      <a href="https://www.facebook.com/EsanedelNorte2011?fref=ts" class="social-icon" target="_blank">
                          <img src="assets/img/home/face_icon.png">
                      </a>
                      <a href="https://twitter.com/EsaneCft" class="social-icon social-icon-medio" target="_blank">
                          <img src="assets/img/home/tweet_icon.png">
                      </a>
                      <a href="https://www.youtube.com/channel/UC7BmRq4KNhmO3G6X1ah1Jww" class="social-icon" target="_blank">
                          <img src="assets/img/home/youtube_icon.png">
                      </a>
                  </div>
              </div>
          </div>
          
      </section>
      
      <?php include_once './php/footer.php';?>
      
      <div class="modal fade" tabindex="-1" role="dialog" id="modalVideoHome">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">¿POR QU&Eacute; ESANE?</h4>
            </div>
            <div class="modal-body text-center">
                <iframe src="" frameborder="0" allowfullscreen width="560" height="315"></iframe>
            </div>
            
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

      <?php include_once './php/js_includes.php';?>
       <script src="editor/assets/js/moment.js"></script>
        <script src="editor/assets/js/moment-es.js"></script>
      <script src="assets/js/home.js"></script>
    

  </body>
</html>
