@extends('frontend.layouts.app')

@section('metatags')
    <meta name="description"
        content="Unique packing exports premium avocados from the north of the Moroccan kingdom to its clients around the globe." />
    <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="http://uniqpacking.ma/blog">
    <meta name="identifier-URL" content="http://uniqpacking.ma/blog">

    <meta itemprop="image" content="https://www.uniqpacking.ma/assets/images/logo-uniq.jpg" />
    <meta property="og:image" itemprop="image/*" content="https://www.uniqpacking.ma/assets/images/logo-uniq.jpg" />
    <meta property="og:image:width" content="256" />
    <meta property="og:image:height" content="256" />
    <meta property="og:site_name" content="Unique Packing" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

@endsection
@section('title', 'News')

@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">
                    Blog
                </h1>

                <form action="{{ route('searchBlog') }}" method="GET" class="d-none form-search p-top-40" accept-charset="utf-8">
                    @csrf
                    <div class="main">
                        <!-- Another variation with a button -->
                        <div class="input-group">
                            <input type="text" name="q" class="form-control" placeholder="Search this blog" />
                            <div class="input-group-append">
                                <button class="btn btn-secondary" type="submit">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </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>





    @if (count($posts) != 0)
        <section class="section--60 blog--area">
            <div class="container">

                <div class="row">
                    <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12">
                        <div class="row">
                            @foreach ($posts as $post)
                                <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
                                    <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="categories">
                                                        @foreach ($post->categories as $cat)
                                                            <span>{{ $cat->name }}</span>
                                                        @endforeach
                                                    </div>
                                                    <div class="post-date">
                                                        <span>{{ $post->created_at->format('d-m-Y') }}</span>
                                                    </div>
                                                </div>
                                                <h2>{{ getTranslationPost($post->id)['title'] }}</h2>

                                                <p>{!! substr(strip_tags(getTranslationPost($post->id)['description']), 0, 200) !!}...</p>


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

                    <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12">
                        <!--Start sidebar Wrapper-->
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                            <div class="sidebar-wrapper">
                                <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 class="row p-top-40">
                        <div class="col-xl-12">
                            <ul class="styled-pagination text-center">
                                {{ $posts->links() }}
                            </ul>
                        </div>
                    </div>

                </div>
        </section>

        @else
        <section class="section--60 blog--area">
            <div class="container">
    
                <div class="row">
                    <div class="col-sm-12">
                        <p class="t--paragraph--one  text-center">
                            No Post to show :(
                        </p>
                    </div>
                </div>
            </div> 
        </section>
    
    
        @endif








@endsection

@section('scripts')

@endsection