@extends('front.layouts.master')

@section('content')

    <!-- banner section start -->
    <section class="description-banner">
        <div class="container">
            <div class="banner-content">
                <h2 class="text-light font-heavy text-uppercase">BLOG DETAILS</h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item font-medium text-light"><a href="{{ route('front.home') }}">Home</a></li>
                        <li class="breadcrumb-item font-medium text-light">Blog Details</li>
                    </ol>
                </nav>
            </div>
        </div>
    </section>
    <!-- banner section end -->

    <!-- start network section -->
    <section class="news-blog-detail pt-5">
        <div class="container">
            <div class="row">
                <div class="heading facility-heading network-heading mb-5">
                    <h2 class="text-center font-bold text-uppercase">BLOG DETAILS</h2>
                </div>
                <div class="col-12 col-md-7 col-xl-8">
                    <div class="details-box">
                        <span class="d-block">
                            <img src="{!! image($blog->image, BLOG_PATH) !!}" class="w-100 h-100" alt="{{ $blog->title }}">
                        </span>
                        <h4 class="font-bold mt-3">{{ $blog->title }}</h4>
                        <div class="blog-info d-flex my-3">
                            <h3 class="font-bold mb-0 me-3"><i
                                    class="fa-solid fa-calendar-days text-primary me-2"></i>{{ dateFormat($blog->blog_date, DISPLAY_DATE) }}</h3>
                            <h3 class="font-bold mb-0"><i class="fa-regular fa-user me-2"></i>Posted By {{ $blog->posted_by }}</h3>
                        </div>
                        <div class="mb-3">{!! $blog->description !!}</div>
                    </div>
                </div>

                @if(isset($recentBlogs) && count($recentBlogs) > 0)
                <div class="col-12 col-md-5 col-xl-4">
                    <div class="recent-post">
                        <h2 class="font-extraBold text-uppercase">Recent <span class="text-primary">Posts</span></h2>

                        @foreach($recentBlogs as $rb)
                            <div class="post d-flex  mt-4">
                                <span class="d-block me-3">
                                    <img src="{!! image($rb->image, BLOG_PATH) !!}" class="w-100 h-100" alt="{{ $rb->title }}">
                                </span>
                                <div class="details">
                                    <h5 class="font-bold blog-title">{{ $rb->title }}</h5>
                                    <div class="blog-info d-flex ">
                                        <h3 class="font-bold mt-1 mb-0 me-3"><i
                                                class="fa-solid fa-calendar-days text-primary me-2"></i>{{ dateFormat($rb->blog_date, DISPLAY_DATE) }}</h3>
                                        <h3 class="font-bold mt-1 mb-0"><i class="fa-regular fa-user me-2"></i>Posted By {{ $rb->posted_by }}</h3>
                                    </div>
                                    <div class="font-medium">{!! $rb->short_description !!}</div>
                                    <a href="{{ route('front.blog-detail', $rb->slug) }}" class="text-primary font-bold text-decoration-underline">Read More</a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
        </div>
    </section>
    <!-- end network section -->
@endsection