@extends('layouts.frontend.frontend-layout')

@section('content')

@foreach($pages as $page)

@php 

$banner    = $page->banner;
$page_name = $page->page_name;

@endphp

@endforeach

<div class="video-gal-back-banner">
    <video autoplay muted loop id="myVideo">
      <source src="http://bmp.litost.co.in/storage/app/public/uploads/pages/{{ $banner }}" type="video/mp4">
    </video>
</div>

 <section id="gallery" class="bg-lighter video-gallery">
    
      <div class="container-fluid pl-0 pr-0 pb-0">
        <div class="section-title">
          <div class="row">
            <div class="col-md-6 col-md-offset-3 text-center">
              <h2>{{ $page_name }}</h2>
              <img src="images/section-title-after.png" alt="">
            </div>
          </div>
        </div>
        <div class="section-content">
          <div class="row">
          
            <div class="col-md-12"> 
              
              <!-- Portfolio Gallery Grid -->
              <div id="grid" class="portfolio-gallery grid-4 clearfix"> 
                <!-- Portfolio Item Start -->
                @foreach($videogalleries as $videogallery)
                <div class="portfolio-item">
                  <div class="thumb">
                    <div class="flexslider-wrapper" data-controlnav="false" data-slideshow="false">
                      <div class="flexslider">
                        <ul class="slides">
                          <li><a href="{{$videogallery->embeed_url}}" title="Portfolio Gallery - Photo 1">
                                <iframe width="100%" height="315px" src="{{$videogallery->embeed_url}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                               </a>
                          </li>
                          
                        </ul>
                      </div>
                    </div>
                    <div class="overlay-shade"></div>
                    <div class="text-holder">
                      <!--<div class="title text-center">Joshep & Diana</div>-->
                    </div>
                    <div class="icons-holder">
                      <div class="icons-holder-inner">
                        <div class="social-icons icon-sm icon-dark icon-circled icon-theme-colored">
                          <a href="#"><i class="fa fa-picture-o"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div> 
                @endforeach
              </div>
              <!-- End Portfolio Gallery Grid --> 
            </div>
          </div>
        </div>
      </div>
    </section>

@endsection