@extends('shared.master')
@section('content')
<!--Blog-->
<div class="blog-page-content my-4">
    <div class="container">
        <div class="row">
            <div class="col-sm-3 dis-on-desktop-blog">
                <div class="sidebar sidebar-additional">
                    <div class="widget block blog-search" data-bind="scope: 'blog-search'">
                        <div class="block-content">
                            <div class="block-title">
                                <h1 class="text-white">Recent Posts</h1>
                            </div>
                            <div class="block-inner-content">
                                @foreach ($blogs as $blog)
                                    <div class="item-1">
                                        <a class="post-item-link" href="{{route('viewProduct', [$blog->slug])}}">
                                        {{$blog->post_title}}
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			<!-- Side bar Area Close -->

            <!-- Right side area -->
            <div class="col-sm-9 col-md">
			<!-- blog 1 -->
            {{-- {{ dd($data) }} --}}
            @foreach ($blogs as $key=>$post)
                <div class="row blog-details-right">
                    <div class="blog_inner post-holder post-holder-44 col-sm-3 col-md-3 text-center">
                        <div class="post-content product-image-inner-blog">
                            <div class="post-description clearfix">
                                <div class="post-ftimg-hld">
                                    <a href="#" title="{{$post->post_title}}">
                                        <img src="{{ asset('public/assets/images/posts/thumbnail/'.$post->thumbnail_image)}}"
                                            class="post-description img-fluid" alt="{{$post->post_title}}" width="220px" height="220px">
                                    </a>
                                    <div class="post-image-hover"></div>
                                    <div class="image-hover-block">
                                        <a href="javascript:void();" title="Click to zoom the image"
                                            class="btn1-popup btn1popup-{{$key}}"><i class="fa fa-search-plus"></i></a>
                                        <a href="{{route('viewProduct', [$post->slug])}}" title="Click For Read More" class="read btn1-popup"><i
                                                class="fa fa-link">
                                            </i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="blog-right-content col-sm-9">
                        <div class="post-header post-content-inner">

                            <div class="post-title-holder clearfix">
                                <h2 class="post-title">
                                    <a class="post-item-link"
                                        href="{{route('viewProduct', [$post->slug])}}">
                                        <h2 style="font-size: 2rem;">{{$post->post_title}}</h2> </a>
                                </h2>

                                <div class="item post-posed-date post-date">
                                    <i class="fa fa-calendar"> </i>
                                    <span class="value">{{$post->posted}}</span>
                                </div>
                            </div>
                            <div>
                                <p>
                                    <span class="label"> <strong> Posted:</strong> </span>
                                    <span class="value">{{$post->posted}}</span>| <strong> Author:</strong>
                                    <span class="author"> <a href="#">{{$post->author}}
                                            </span> </a>
                                </p>
                            </div>
                        </div>
                        <div class="post-text-hld clearfix">
                            <p class="mb-0">{!!$post->short_description!!} </p>
                                <a class="post-read-more"
                            href="{{route('viewProduct', [$post->slug])}}"
                            title="{{$post->post_title}}" style="color: #D53A36;">
                            Read more </a>
                        </div>
                    </div>
                </div>
                @endforeach
        </div>
     </div>

        <!-- images open on zoom-->
        <!-- Blog image 1 -->
        @foreach ($blogs as $key=>$zoom)
            <div id="item1-{{$key}}" class="item item--mod">
                <img src="{{ asset('public/assets/images/posts/banner/'.$zoom->blog_image)}}"
                    alt="{{$zoom->post_title}}" class="w-100">
                <b class="item-close js-popup-close">x</b>
            </div>
            @endforeach
    <!-- left menu on mobile -->

     <div class="row dis-on-mobile-blog mt-3">
        <div class="sidebar sidebar-additional col">
            <div class="widget block blog-search" data-bind="scope: 'blog-search'">
                <div class="block-content">
                    <a class="collap-btn-mobile" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    <div class="block-title">

                    <strong>Recent Posts</strong>

                    </div>
                        </a>
                    <div class="block-inner-content collapse" id="collapseExample">
                        @foreach ($blogs as $mbLink)
                        <div class="item-1">
                            <a class="post-item-link" href="{{route('viewProduct', [$mbLink->slug])}}">
                                {{$mbLink->post_title}}
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
</div>            <!-- recent tab on mobile close -->



    </div>  <!-- container close -->
</div>  <!-- page close -->

@endsection