@extends('layouts.main')

@section('title','Advanced - Gallery')

@section('header')

<link rel="stylesheet" type="text/css" href="{{ asset('css/jquery.fancybox.min.css') }}">

@endsection

@section('body')

<style type="text/css">

.inner_sec_info_w3ls_agile p {
  color: #263238;
}

.img-container {
  margin-bottom: 10px;  
  overflow: hidden;
}

</style>

<div class="services-breadcrumb">
  <div class="inner_breadcrumb">
    <ul class="short_w3ls_agile">
      <li><a href="{{ url('/') }}">Home</a><span>|</span></li>
      <li>Gallery</li>
    </ul>
  </div>
</div>

<div class="banner_bottom">
  <div class="container">
    <h3 style=" color: #EF6C00; font-size: 2em;">Gallery</h3>

    <div class="inner_sec_info_w3ls_agile">
      <div class="container">

        @foreach($data->chunk(4) as $chunkedData)
        <div class="row">
          @foreach($chunkedData as $file)
          <div class="col-md-3">
            <div class="img-container">
              @if($file->data_type=="image")
              <a data-fancybox="group" data-caption="{{ $file->title }}" href="{{ url('/julian_gallery/images/'.$file->filename) }}">
                <div style="height:16em; width:18em; background: url({{ url('julian_gallery/images/'.$file->filename) }}); background-size: 18em 16em; background-position: center; background-repeat: no-repeat;"></div>
              </a>
              @else
              <a data-fancybox="group" data-caption="{{ $file->title }}" href="https://www.youtube.com/watch?v={{ $file->filename }}">
                <div style="height:16em; width:18em; background: url(https://img.youtube.com/vi/{{ $file->filename }}/default.jpg); background-size: 18em 16em; background-position: center; background-repeat: no-repeat;"></div>
                  </a>
              @endif
            </div>
          </div>
          @endforeach
        </div>
        @endforeach

        {{ $data->links() }}

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


@endsection

@section('footer')

<script src="{{ asset('js/jquery.fancybox.min.js') }}"></script>

@endsection