@extends('shared.blog')
@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">
                                <strong>Recent Posts</strong>
                            </div>
                            <div class="block-inner-content">

                                @foreach ($recent 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 -->
                <div class="row mb-4">
                    <div class="blog_inner post-holder post-holder-44 col">
                        <div class="post-content product-image-inner-blog">
                             <img src="{{ asset('public/assets/images/posts/banner/'.$data->blog_image)}}"
                             alt="{{$data->post_title}}" class="w-100">
                        </div>
                    </div>
				</div>
                    <div class="blog-right-content-1">
                        <div class="post-header post-content-inner">

                            <div class="post-title-holder clearfix">


                                        <H1 class="post-title">{{$data->post_title}}</H1>




                                <div class="item post-posed-date post-date">
                                    <i class="fa fa-calendar"> </i>
                                    <span class="value">{{$data->posted}}</span>
                                </div>
                            </div>
                            <div>
                                <p>
                                    <span class="label"> <strong> Posted:</strong> </span>
                                    <span class="value">{{$data->posted}}</span>| <strong> Author:</strong>
                                    <span class="author"> <a href="#">{{$data->author}}
                                            </span> </a>
                                </p>
                            </div>
                        </div>
                        {!!$data->post_description!!}
                    </div>
            </div>     <!-- right side blog area close -->

</div>  <!-- main row close -->

				<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 ($recent 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>
				</div>

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

@endsection