@extends('layouts.app')
@section('contents')

    <style>
        p{color: #000000a8 !important;}
        #spambot{
            color: black;
        }
    h1{color: #000000a8 !important;}
    </style>
    <div class="blog-page-content my-4" style="min-height: 400px">
        <div class="container">
            <div class="row">
                <div class="col-sm-3 dis-on-desktop-blog">
                    <div class="block-content">
                        <div class="block-title">
                            <h1 class="text-white">Recent Posts</h1>
                        </div>
                        <div class="block-inner-content">
                            @foreach($latest_blogs as $recent_blog)
                                <div class="item-1">
                                    <a class="post-item-link" href="{{ url('blog/'.$recent_blog->slug) }}">
                                        {{ $recent_blog->post_title }}
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <!-- Side bar Area Close -->

                <!-- Right side area -->
                <div class="col-sm-9 col-md">
                    <!-- blog 1 -->
                    @foreach($blogs as $blog)
                        <div class="row blog-details-right mb-4">
                            <div class="blog_inner post-holder post-holder-44 col-sm-4 col-md-4">
                                <div class="post-content product-image-inner-blog">
                                    <div class="post-description clearfix">
                                        <div class="post-ft-img-hld text-center">
                                            <a href="#" title="" class="d-flex justify-content-center">
                                                <img class="img-fluid d-block post-description" src="{{ asset('assets/images/posts/thumbnail/'.$blog->thumbnail)}}" width="280px" height="auto" alt="{{ $blog->post_title }}" title="{{ $blog->post_title }}">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                                    <div class="post-title-holder clearfix">
                                        <h2 class="post-title">
                                            <a class="post-item-link" href="{{ url('blog/'.$blog->slug) }}">
                                                <h3>{{ $blog->post_title }}</h3>
                                            </a>
                                        </h2>
                                    </div>
                                    <div>
                                        <p>
                                            <span class="label"> <strong> Posted:</strong> </span>
                                            <span class="value">{{ date('Y-m-d',strtotime($blog->created)) }}</span>| <strong> Author:</strong>
                                            <span class="author"> <a style="color: #59b000;">admin
                                      </a></span>
                                        </p>
                                    </div>
                                </div>
                                <div class="post-text-hld clearfix">
                                    <p class="mb-0">{!! mb_strimwidth($blog->post_detail, 0, 197, '...') !!}</p>
                                    <a class="post-read-more" href="{{ url('blog/'.$blog->slug) }}" title="" style="color: #59b000;">
                                        Read more </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    <div class="d-flex justify-content-center">
                        {!! $blogs->links() !!}
                    </div>
                </div>
            </div>
            <!-- 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="collapse-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($latest_blogs as $recent_blog)
                                    <div class="item-1">
                                        <a class="post-item-link" href="#">
                                            {{ $recent_blog->post_title }}
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- recent tab on mobile close -->



        </div> <!-- container close -->
    </div> <!-- page close -->
@endsection
@push('styles')
    <link rel="stylesheet" href="{{ asset("assets/css/static_pages.css") }}" type="text/css">
    <link rel="stylesheet" href="{{ asset("assets/css/blogs.css") }}" type="text/css">
    <script async src="{{ asset('assets/js/home_scripts.js') }}"></script>
@endpush