@include('partials.homepage.head')
<section class="w-100 clearfix evInnerBanner" id="evInnerBanner">
   <div class="evInnerBannerOuter">
      <div class="container">
         <div class="evInnerBannerInner">
            <h1>Video Gallery</h1>
            <ul class="breadcrumb">
               <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
               <li class="breadcrumb-item active">Video Gallery</li>
            </ul>
         </div>
      </div>
   </div>
</section>
<section class="main" style="min-height:500px;">
          <div class="container main">

<div class="card">
    <div class="card-body">
        <h1 class="card-title">Video Gallery</h1>
        <div class="row">
          @forelse($galleries as $gallery)
          <div class="col-md-3">
            <a class="various fancybox" href="https://www.youtube.com/embed/{{$gallery->title}}?autoplay=1">
              <img src="http://img.youtube.com/vi/{{$gallery->title}}/mqdefault.jpg" width="100%">
            </a>
              <br>
              {!! $gallery->content !!}
          </div>
          @empty
            <p>No content.</p>
          @endforelse
        </div>




    </div>
</div>
<!-- The Modal -->
<div class="modal fade" id="loadModalAjax" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Deals</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

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

</div>




@include('partials.homepage.footer')


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha512-H9jrZiiopUdsLpg94A333EfumgUBpO9MdbxStdeITo+KEIMaNfHNvwyjjDJb+ERPaRS6DpyRlKbvPUasNItRyw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js" integrity="sha512-j7/1CJweOskkQiS5RD9W8zhEG9D9vpgByNGxPIqkO5KrXrwyDAroM9aQ9w8J7oRqwxGyz429hPVk/zR6IOMtSA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style type="text/css">
  div.hidden{
    display: none;
  }
  .tip {
  display: inline-block;
  cursor: pointer;
  padding: 5px;
  text-align: center;
}
table.tip-content-t tr td{
  border:1px solid #fff;
  padding: 5px;
}
.col-sm-3{
  width: 32%;
  float: left;
}
</style>

<script>
    $(".various").fancybox({
        type: "iframe", //<--added
        maxWidth: 600,
        maxHeight: 400,
        fitToView: false,
        width: '50%',
        height: '50%',
        autoSize: false,
        closeClick: false,
        openEffect: 'none',
        closeEffect: 'none'
    });
    window._token = '{{ csrf_token() }}';
</script>
