@extends('frontend.layout.app')

@section('content')
    <div class="breadcumb-wrapper" data-bg-src="{{ asset('frontend/assets/img/breadcumb/breadcumb-bg.jpg') }}">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Blog Details</h1>
                <div class="breadcumb-menu-wrap">
                    <ul class="breadcumb-menu">
                        <li><a href="{{route('index')}}">Home</a></li>
                        <li>Blog Details</li>
                    </ul>
                </div>
            </div>
        </div>
    </div><!--==============================
        Blog Details Area
        ==============================-->
    <section class="vs-blog-wrapper blog-details space-top space-extra-bottom">
        <div class="container">
            <div class="row gx-40">
                <div class="col-lg-8">
                    <div class="vs-blog blog-single">
                        <div class="blog-img">
                            <img src="{{ asset('storage/blog/' . $blog->image) }}" alt="Blog Image" style="width:100%; height:auto; max-height:500px; object-fit:cover;">
                        </div>
                        <div class="blog-content">
                            <div class="blog-meta">
                                <a href="#"><i class="far fa-calendar-alt"></i>{{ \Carbon\Carbon::parse($blog->created_at)->format('M d, Y') }}</a>
                            </div>
                            <h2 class="blog-title">{{ $blog->title }}</h2>
                            <p style="text-align: justify;">{!! $blog->content !!}
                            </p>
                        </div>
                    
                    </div>
                </div>
                <div class="col-lg-4">
                    <aside class="sidebar-area">
                      
                        <div class="widget">
                            <h3 class="widget_title">Recent Blogs</h3>
                            <div class="recent-post-wrap">
                                @foreach($recentBlogs as $recent)
                                    <div class="recent-post">
                                        <div class="media-img">
                                            <a href="{{ route('blogdetails', $recent->slug) }}">
                                                <img src="{{ asset('storage/blog/' . $recent->image) }}"
                                                     alt="{{ $recent->imagealt ?? 'Blog Image' }}"
                                                     style="width:80px; height:80px; object-fit:cover;">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <div class="recent-post-meta">
                                                <a href="{{ route('blogdetails', $recent->slug) }}">
                                                    <i class="far fa-calendar-alt"></i>
                                                    {{ \Carbon\Carbon::parse($recent->created_at)->format('M d, Y') }}
                                                </a>
                                            </div>
                                            <h4 class="post-title">
                                                <a class="text-inherit" href="{{ route('blogdetails', $recent->slug) }}">
                                                    {{ \Illuminate\Support\Str::limit($recent->title, 55) }}
                                                </a>
                                            </h4>
                                        </div>
                                    </div>
                                @endforeach

                                @if(empty($recentBlogs) || count($recentBlogs) === 0)
                                    <div class="recent-post">
                                        <div class="media-body">
                                            <div class="recent-post-meta">
                                                <span>No recent blogs available.</span>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                   
                    </aside>
                </div>
            </div>
        </div>
    </section>
@endsection