@extends('main')
@section('styles')
	
	{!! Html::style(Theme::current()->assetPath.'/prettyPhoto/css/prettyPhoto.min.css') !!}
@endsection
@section('page-title')
@endsection
@section('content')
	<section id="product-details">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="{{ Route('mobily.site.home.page') }}">{{ __('Home') }}</a></li>
			<li class="breadcrumb-item"><a href="{{ Route('mobily.AllGallaries') }}">{{ __('Gallaries') }}</a></li>
			<li class="breadcrumb-item active">{{ $certificate->title }}</li>
		</ol>
		<div class="container-2 ">
			<h2 class="section-heading">{{ $certificate->title }}</h2>
			<p>{!! $certificate->content !!}</p>
			<div class="row">
				@if ($certificate->images)
					<div id="owl-trending-products">
						@foreach ($certificate->images as $key => $image)
							<div class="item">
								<figure class="wow fadeIn">
									<a class="prettyphoto" rel="prettyPhoto['gall']" href="{{ asset($image->path) }}">
										<img class="img-responsive" src="{{ asset($image->path) }}" alt="{{ $certificate->title }}">
									</a>
									<figcaption>
									</figcaption>
								</figure>
							</div>
							@endforeach
					</div>
					@endif
			</div>

		</div>
	</section>
@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:''});
			$("#owl-trending-products").owlCarousel({
				navigation : true, // Show next and prev buttons
				smartSpeed: 700,
				pagination: false,
				autoplay: 8000,
				margin:30,
				loop:true,
				navigationText: [ '<span class="fa fa-long-arrow-left"></span>', '<span class="fa fa-angle-right"></span>' ],
				slideSpeed : 300,
				paginationSpeed : 500,
				items : 6,

			});
		});
	</script>

@endsection