@extends('main')
@section('styles')
  {!! Html::style(Theme::current()->assetPath.'/css/bespoke-details-1.css') !!}
  {!! Html::style(Theme::current()->assetPath.'/prettyPhoto/css/prettyPhoto.min.css') !!}
  <style media="screen">
  #sync1 .item{
    padding:  0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
  }
  #sync2 .item{
    background: #C9C9C9;
    padding: 5px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
  }
  #sync2 .item h1{
    font-size: 18px;
  }
  #sync2 .synced .item{
    background: #666;
  }
  </style>
@endsection
@section('page-title')
@endsection
@section('content')
  <section id="bespoke-details">
    <div class="container">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ Route('mobily.site.home.page') }}">{{ __('Home') }}</a></li>
        <li class="breadcrumb-item active">{{ $bespoke->title }}</li>
      </ol>
      <div class="row">
        <div class="col-md-5 col-sm-12 text-center">
          <!-- bootstrap carousel -->
          <div class="wrapper">
            @if ($bespoke->images->count())
              <div id="sync1" class="owl-carousel owl-theme-bespoke">
                @foreach ($bespoke->images as $key => $image)
                  <div class="item">
                    <a href="{{ asset($image->path) }}" class="prettyphoto" rel="prettyPhoto['gall']">
                      <img src="{{ asset($image->path) }}" alt="{{ $bespoke->title }}" class="img-responsive">
                    </a>
                  </div>
                @endforeach
              </div>
              <div id="sync2" class="owl-carousel owl-theme-bespoke">
                @foreach ($bespoke->images as $key => $image)
                  <div class="item">
                    <img src="{{ asset($image->small) }}" alt="{{ $bespoke->title }}" class="img-responsive">
                  </div>
                @endforeach
              </div>
            @else
              <a href="{{ asset($bespoke->photo) }}" class="prettyphoto" rel="prettyPhoto['gall']">
                <img src="{{ asset($bespoke->photo) }}" alt="{{ $bespoke->title }}" class="img-responsive">
              </a>
            @endif
          </div>
          <!-- /bootstrap carousel -->
        </div>
        <!-- bespoke Details -->
        <div class="col-md-7 col-sm-12">
          <div class="bespoke-content">
            <h3 class="bespoke-title">{{ $bespoke->title }}</h3>
            <p>{!! nl2br($bespoke->content) !!}</p>
          </div>
        </div>
        <!-- /bespoke Details -->
      </div>
    </div>
  </section>
  <div class="clearfix">
    <br>
  </div>
@endsection
@section('scripts')
  {!! Html::script(Theme::current()->assetPath.'/prettyPhoto/js/jquery.prettyPhoto.min.js') !!}
  <script type="text/javascript">
    jQuery(document).ready(function($){
      $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:''});
      var sync1 = $("#sync1");
      var sync2 = $("#sync2");
      sync1.owlCarousel({
        singleItem : true,
        slideSpeed : 1000,
        navigation: false,
        pagination:false,
        autoPlay : true,
        pagination:false,
        navigationText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
        afterAction : syncPosition,
        responsiveRefreshRate : 200,
      });
      sync2.owlCarousel({
        items : 5,
        itemsDesktop      : [1199,10],
        itemsDesktopSmall     : [979,10],
        itemsTablet       : [768,8],
        itemsMobile       : [479,4],
        autoPlay : true,
        navigation: true, // Show next and prev buttons
        pagination:false,
        navigationText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
        responsiveRefreshRate : 100,
        afterInit : function(el){
          el.find(".owl-item").eq(0).addClass("synced");
        }
      });
      function syncPosition(el){
        var current = this.currentItem;
        $("#sync2")
        .find(".owl-item")
        .removeClass("synced")
        .eq(current)
        .addClass("synced")
        if($("#sync2").data("owlCarousel") !== undefined){
          center(current)
        }
      }
      $("#sync2").on("click", ".owl-item", function(e){
        e.preventDefault();
        var number = $(this).data("owlItem");
        sync1.trigger("owl.goTo",number);
      });
      function center(number){
        var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
        var num = number;
        var found = false;
        for(var i in sync2visible){
          if(num === sync2visible[i]){
            var found = true;
          }
        }
        if(found===false){
          if(num>sync2visible[sync2visible.length-1]){
            sync2.trigger("owl.goTo", num - sync2visible.length+2)
          }else{
            if(num - 1 === -1){
              num = 0;
            }
            sync2.trigger("owl.goTo", num);
          }
        } else if(num === sync2visible[sync2visible.length-1]){
          sync2.trigger("owl.goTo", sync2visible[1])
        } else if(num === sync2visible[0]){
          sync2.trigger("owl.goTo", num-1)
        }
      }
    });
  </script>
@endsection