@extends('frontend.layouts.app')

@section('metatags')
    <meta name="description" content="{!! htmlspecialchars(trim(substr(strip_tags($post->description), 0, 200))) !!}" />
    <meta name="keywords" content="Unique, Packing, Fruit,export, Avocados, morocco" />
    <meta name="copyright" content="Unique Produce">
    <meta name="author" content="Yacine Boughalem">
    <meta name="url" content="{{ route('showBlog', [$post->id, $post->slug]) }}">
    <meta name="identifier-URL" content="{{ route('showBlog', [$post->id, $post->slug]) }}">

    <meta itemprop="image" content="/storage/posts/{{ $post->image }}" />
    <meta property="og:title" content="{{getTranslationPost($post->id)['title']}}" />
    <meta property="og:image" itemprop="image/*" content="/storage/posts/{{ $post->image }}" />
    <meta property="og:image:alt" content="{{getTranslationPost($post->id)['title']}}" />
    <meta property="og:url" content="{{ route('showBlog', [$post->id, $post->slug]) }}" />
    <meta property="og:type" content="website" />
    <meta property="og:image:width" content="256" />
    <meta property="og:image:height" content="256" />
    <meta property="og:site_name" content="{{getTranslationPost($post->id)['title']}} - Unique Packing" />
@endsection
@section('title', getTranslationPost($post->id)['title'])

@section('content')
    <div class="uniq--breadcrumb--area"
        style="background-image: linear-gradient(to right, rgba(27, 38, 105, 0.8),rgba(58, 182, 74, .4)),url('/assets/images/banner001.jpg');">
        <div class="container">
            <div class="uniq--breadcrumb--area--content">
                <h1 class="p-top-10 wow animated bounceInLeft" data-wow-duration="1.5s" data-wow-delay=".1s">
                    {{ getTranslationPost($post->id)['title'] }}
                </h1>
            </div>
        </div>
        <img src="/assets/images/logo--shape.svg" class="shape--logo--01 wow animated bounceInRight"
            data-wow-duration="1.5s" data-wow-delay=".1s" />
    </div>


    <section class="section--60 blog--area">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12">
                    <div class="blog-post">
                        <div class="img-holder">
                            @if (Storage::disk('public')->exists('posts/' . $post->image))
                                <img src="/storage/posts/{{ $post->image }}">
                            @else
                                <img src="" class="img-responsive">
                            @endif
                        </div>
                        <div class="text-holder">
                            <ul class="meta-info">
                                <li class="categories">
                                    @foreach ($post->categories as $cat)
                                        <a href="#">{{ $cat->name }}</a>
                                    @endforeach
                                </li>
                                <li><span style="color: rgb(194, 194, 194)">
                                    Publié le {{ $post->created_at->format('d-m-Y') }}</span></li>

                            </ul>
                            <h2 class="blog-title">{{ getTranslationPost($post->id)['title'] }}</h2>
                            <div class="t--paragraph--one">
                                {!! getTranslationPost($post->id)['description'] !!}
                            </div>
                        </div>


                    </div>

                    <div class="blog-single-prev-next-button wow slideInUp" data-wow-delay="00ms"
                        data-wow-duration="1500ms">
                            <a class="prev" href="{{ route('PrevPost', [$post->id, $post->slug]) }}"><i
                                    class="fa fa-angle-double-left" aria-hidden="true"></i>Prev Post</a>
                            <a class="middle" href="/blog">
                                <img src="{{ asset('assets/images/favicon.svg') }}" alt="Button Icon">
                                Blog
                            </a>
                            <a class="next" href="{{ route('NextPost', [$post->id, $post->slug]) }}">Next Post<i
                                    class="fa fa-angle-double-right" aria-hidden="true"></i></a>
                    </div>
                </div>

                <!--Start sidebar Wrapper-->
                <div class="col-xl-4 col-lg-4 col-md-9 col-sm-12">
                    <div class="sidebar-wrapper">
                        <div class="single-sidebar">
                            <div class="title">
                                <h3>Recent Posts</h3>
                            </div>
                            <div class="recent-post">
                                <div class="recent-post-carousel owl-carousel owl-theme owl-nav-style-one">
                                    @foreach ($postss as $post)
                                    <a href="{{ route('showBlog', [$post->id, $post->slug]) }}"
                                        style="text-decoration: none;">
                                        <div class="blog--area--item ">
                                            <div class="blog--area--item--image">
                                                @if (Storage::disk('public')->exists('posts/' . $post->image))
                                                    <img src="/storage/posts/{{ $post->image }}" id="profile-imgsrc">
                                                @else
                                                    <img src="" id="profile-imgsrc" class="img-responsive">
                                                @endif
                                            </div>
                                            <div class="blog--area--item--content">
                                                <div class="d-flex align-items-center justify-content-between">
                                                   
                                                    <div class="post-date">
                                                        <span>{{ $post->created_at->format('d-m-Y') }}</span>
                                                    </div>
                                                </div>
                                                <h2 class="p-top-10">{{ getTranslationPost($post->id)['title'] }}</h2>



                                            </div>
                                        </div>
                                    </a>
                                    @endforeach

                                </div>
                            </div>
                        </div>
                        <div class="single-sidebar">
                            <div class="title">
                                <h3>Categories</h3>
                            </div>
                            <ul class="categories clearfix">
                                @foreach ($categoriesPost as $cat_post)
                                    <li>
                                        <a href="{{ route('CategorieBlog', [$cat_post->id, $cat_post->slug]) }}"
                                            title="{{ $cat_post->posts->count() }}">
                                            <span>
                                                <img src="/assets/images/favicon.svg" alt="">
                                                <span>
                                                    {{ getTranslationCategoriePost($cat_post->id)['name'] }}
                                                </span>
                                            </span>

                                            <small>
                                                ({{ $cat_post->posts->count() }})
                                            </small>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>


                        <div class="single-sidebar">
                            <div class="title">
                                <h3>Tags</h3>
                            </div>
                            <ul class="tags clearfix">
                                @foreach ($tags as $tag)
                                    <li>
                                        <a href="{{ route('TagBlog', [$tag->id, $tag->slug]) }}"
                                            title="{{ $tag->posts->count() }}">{{ getTranslationTag($tag->id)['name'] }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>


                      

                    </div>
                </div>

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


@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
    <script type="text/javascript">
        function productCarousel() {
            if ($('.recent-post-carousel').length) {
                $('.recent-post-carousel').owlCarousel({
                    dots: true,
                    loop: true,
                    margin: 8,
                    nav: false,
                    navText: ['<span class="fas fa-chevron-left fa-2x"></span>',
                        '<span class="fas fa-chevron-right fa-2x"></span>'
                    ],
                    autoplayHoverPause: false,
                    autoplay: 6000,
                    smartSpeed: 1000,
                    responsive: {
                        0: {
                            items: 1
                        },
                        600: {
                            items: 1
                        },
                        800: {
                            items: 1
                        },
                        1024: {
                            items: 1
                        },
                        1100: {
                            items: 1
                        },
                        1200: {
                            items: 1
                        },
                        1300: {
                            items: 1
                        },
                        1400: {
                            items: 1
                        }
                    }
                });
            }
        }

        productCarousel();
    </script>

@endsection