@extends('frontend.layouts.app')
@section('style')
    <style>
    </style>
@endsection
@section('content')
    <div class="row px-4 py-4" style="margin-top: 150px">
        <div class="col-lg-8 mb-5 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorter"
            data-appear-animation-delay="1600">
            @foreach ($blogs as $blog)
                <article class="mb-5">
                    <div class="card bg-transparent border-0 custom-border-radius-1">
                        <div class="card-body p-0 z-index-1">
                            <a href="{{ route('frontend.blog.blog_post', ['blog' => $blog->slug]) }}">
                                <img class="card-img-top custom-border-radius-1 mb-2"
                                    src="{{ asset('assets-frontend/img/demos/auto-services/blog/blog-1.jpg') }}"
                                    alt="Card Image">
                            </a>
                            <p class="text-uppercase text-color-default text-1 my-2">
                                <time pubdate datetime="2024-01-10">{{ $blog->date }}</time>
                                <span class="opacity-3 d-inline-block px-2">|</span>
                                {{ $blog->number_comments }} {{ __('website.Comments') }}
                                <span class="opacity-3 d-inline-block px-2">|</span>
                                {{ $blog->full_name }}
                            </p>
                            <div class="card-body p-0">
                                <h4 class="card-title text-5 font-weight-bold pb-1 mb-2"><a
                                        class="text-color-dark text-color-hover-primary text-decoration-none"
                                        href="{{ route('frontend.blog.blog_post', ['blog' => $blog->slug]) }}">{{ $blog->main_title }}</a>
                                </h4>

                                <p class="card-text mb-2">{{ $blog->sub_title }}</p>
                                <a href="{{ route('frontend.blog.blog_post', ['blog' => $blog->slug]) }}"
                                    class="btn btn-link font-weight-semibold text-decoration-none text-3 ps-0">{{ __('website.READ MORE') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
        <div class="blog-sidebar col-lg-4 pt-4 pt-lg-0 appear-animation" data-appear-animation="fadeInUpShorter"
            data-appear-animation-delay="1800">
            <aside class="sidebar">
                <div class="px-3 mb-4">
                    <h3 class="text-color-quaternary text-capitalize font-weight-bold text-5 m-0 mb-3">
                        {{ __('website.About The Blog') }}</h3>
                    <p class="m-0">{{ $blog->about_the_blog }}</p>
                </div>
                <div class="py-1 clearfix">
                    <hr class="my-2">
                </div>

                <div class="px-3 mt-4">
                    <h3 class="text-color-quaternary text-capitalize font-weight-bold text-5 m-0 mb-3">
                        {{ __('website.Recent Posts') }}</h3>
                    <div class="pb-2 mb-1">
                        @foreach ($recent_posts as $recent_blog)
                            <a href="#"
                                class="text-color-default text-uppercase text-1 mb-0 d-block text-decoration-none">
                                {{ $recent_blog->date }}
                                <span class="opacity-3 d-inline-block px-2">|</span>
                                {{ $recent_blog->number_comments }}
                                {{ __('website.Comments') }}
                                <span class="opacity-3 d-inline-block px-2">|</span>
                                {{ $recent_blog->full_name }}
                            </a>
                            <a href="#"
                                class="text-color-dark text-hover-primary font-weight-bold text-3 d-block pb-3 line-height-4">
                                {{ $recent_blog->main_title }}
                            </a>
                        @endforeach

                    </div>
                </div>
                

            </aside>
        </div>
    </div>
@endsection