<?php
/**
 * Template Name: Home Page
 */
get_header();
$banner_section = get_field('banner_section');
//echo '<pre>'; print_r($banner_section);
?>
  <!-- Header -->
  <header class="masthead" style="background-image: url(<?php echo $banner_section['background_image'];?>)">
    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          <div class="intro-text">
            <div class="intro-heading"><?php echo $banner_section['text'];?></div>
<!--             <a class="btn btn-primary text-uppercase hvr-shutter-out-horizontal" href="<?php //echo $banner_section['button_link'];?>"><?php //echo $banner_section['button_text'];?></a> -->
          </div>
        </div>
        <div class="col-sm-6">
          <div class="banner-laptop laptop-animation">
            <figure data-toggle="modal" data-target="#bannerModal">
              <img src="<?php echo $banner_section['front_image'];?>">
            </figure>
          </div>
        </div>
      </div>

    </div>
  </header>
<!-- Banner modal -->
  <div class="modal fade modal-xxl" id="bannerModal" tabindex="-1" aria-labelledby="bannerModalLabel" aria-hidden="true">
    <div class="modal-dialog video-modal ">
      <div class="modal-content">
        <div class="modal-header">
          <!-- <h5 class="modal-title" id="bannerModalLabel">Dashboard</h5> -->
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body video-popup text-center modal-without-footer">
          <!-- <img src="<?php //echo $banner_section['front_image_popup'];?>" class="img-fluid"> -->
          <div class="embed-responsive">
            <iframe class="responsive-video" src="<?php echo $banner_section['video_link'];?>" frameborder="0" allow="autoplay; fullscreen" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-presentation" allowfullscreen>
            </iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Banner modal -->
  <!-- Services -->
  <?php
  $args = array(
      'posts_per_page'   => 4,
      'orderby'          => 'date',
      'order'            => 'ASC',
      'post_type'        => 'about-products',
      'post_status'      => 'publish',
      'meta_query'	=> array(
        'relation'		=> 'AND',
            array(
                'key'	  	=> 'featured',
                'value'	  	=> 'featured',
                'compare' 	=> 'like',
            ),
        ),
      );
  $featured_about_products = get_posts( $args );
  // echo '<pre>'; print_r ($featured_about_products); echo '</pre>';
  $about_products_section = get_field('about_products_section');
  //echo '<pre>'; print_r($about_products_section);
  ?>
  <section class="page-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h3 class="section-subheading"><?php echo $about_products_section['text']; ?></h3>
        </div>
      </div>
      <div class="row">
        <?php foreach($featured_about_products as $product) {
          //echo '<pre>'; print_r ($product); echo '</pre>';
          $icon = get_field( "icon", $product->ID ); ?>
        <div class="col-md-6">
          <div class="blog-icon">
            <div class="icon-set">
              <i class="icon <?php echo $icon; ?>"></i>
            </div>
            <div class="text-content">
              <h2 class="service-heading"><?php echo $product->post_title; ?></h2>
              <p class="text-muted"><?php echo $product->post_content; ?></p>
            </div>
          </div>
        </div>
        <?php
        } ?>
        <div class="col-md-12 text-center">
          <a class="btn btn-primary  text-uppercase hvr-shutter-out-horizontal" href="<?php echo $about_products_section['button_link']; ?>"><?php echo $about_products_section['button_text'];?></a>
        </div>
      </div>
    </div>
  </section>
<?php
get_footer();
?>
<script>
$(document).ready(function(){
    /* Get iframe src attribute value i.e. YouTube video url
    and store it in a variable */
    var url = $(".responsive-video").attr('src');
    // console.log(url);
    /* Assign empty url value to the iframe src attribute when
    modal hide, which stop the video playing */
    $("#bannerModal").on('hide.bs.modal', function(){
        $(".responsive-video").attr('src', '');
    });
    
    /* Assign the initially stored url back to the iframe src
    attribute when modal is displayed again */
    $("#bannerModal").on('show.bs.modal', function(){
        $(".responsive-video").attr('src', url+'?autoplay=1');
    });
});
</script>