@extends('layouts.public')

@section('title', $post->meta_title ?? trans('seo.title.post', ['title' => $post->title, 'category' => $post->category->title]))
@section('description', $post->meta_description ?? $post->summary)
@section('image', asset($post->image))

@section('content')
<div class="rs-breadcrumbs">
    <div class="breadcrumbs-image">
        <img src="/images/breadcrumbs/blog.jpg" alt="Zona Plus agencija za digitalni marketing - Zadar">
        <div class="breadcrumbs-inner">
            <div class="container">
                <div class="breadcrumbs-text">
                    <h1 class="breadcrumbs-title">{{$post->title}}</h1>
                    <ul class="breadcrumbs-subtitle">
                        <li><a href="{{route('public.index')}}"><i class="fa fa-home"></i> {{trans('navigation.index')}}</a></li>
                        <li><a href="{{route('public.posts')}}"> {{trans('navigation.posts')}}</a></li>
                        <li><a href="{{route('public.category', $post->category)}}"> {{$post->category->title}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>                
</div>
<div class="rs-blog-details pt-100 pb-100">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-md-12 mb-md-50">
                @if($post->images->count())
                <div id="gallery" style="display: none;">
                    <img src="{{asset($post->thumbnail)}}" alt="{{$post->title}}" data-image="{{asset($post->image)}}" data-description="{{$post->title}}">
                    @foreach($post->images as $image)
                    <img src="{{asset($image->thumbnail)}}" alt="{{$post->title}}" data-image="{{asset($image->path)}}" data-description="{{$post->title}}">
                    @endforeach
                </div>
                @else
                <img src="{{asset($post->image)}}" alt="{{$post->title}}">
                @endif
                <div class="blog-author">
                    <span class="author">{{$post->date}}</span>
                    <span class="seperator">/</span>
                    <span class="category"><a href="{{route('public.category', $post->category)}}">{{$post->category->title}}</a></span>
                </div>
                <div class="blog-desc">
                    <p><em>{{$post->summary}}</em></p>

                    {!!$post->content!!}
                    
                    @foreach($post->documents as $document)
                    <a href="{{asset($document->path)}}" target="_blank"><i class="fa fa-download"></i> {{$document->name}}</a><br>
                    @endforeach

                </div>
                <div class="blog-nav">
                    <ul class="clearfix">
                        @if($previous)
                        <li class="prev">
                            <a href="{{route('public.post', [$previous->category, $previous])}}">
                                <span class="next_link">{!!trans('global.previous')!!}</span>
                                <span class="link_text"><i class="fa fa-chevron-left"></i> {{$previous->title}}</span>
                            </a>
                        </li>
                        @endif
                        @if($next)
                        <li class="next">
                            <a href="{{route('public.post', [$next->category, $next])}}">
                                <span class="next_link">{!!trans('global.next')!!}</span>
                                <span class="link_text">{{$next->title}} <i class="fa fa-chevron-right" aria-hidden="true"></i></span>
                            </a>
                        </li>
                        @endif
                    </ul>
                </div>
            </div>
            @include('include.aside')
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel='stylesheet' href='/unitegallery/css/unite-gallery.css' type='text/css' />
<style type="text/css">
    .ug-gallery-wrapper .ug-slider-wrapper, .ug-gallery-wrapper .ug-strip-panel {
      background-color: #f9fafc;
  }
</style>
@endpush

@push('scripts')
<script type='text/javascript' src='/unitegallery/js/jquery-11.0.min.js'></script>   
<script type='text/javascript' src='/unitegallery/js/unitegallery.min.js'></script>  
<script type='text/javascript' src='/unitegallery/themes/compact/ug-theme-compact.js'></script>
<script type="text/javascript">

    jQuery(document).ready(function(){

        jQuery("#gallery").unitegallery({
            gallery_theme: "compact",
            gallery_height: 600, 
            slider_scale_mode: "fit",
            slider_control_zoom: false,
            slider_fullscreen_button_align_hor: "right",
            slider_enable_play_button: false,
            slider_enable_zoom_panel: false,
            strippanel_enable_handle: false
        });

    });

</script>
@endpush