@extends('front.layouts.app')
@section('content')
<!-- START INNER BANNER SECTION -->
<div class="inner-banner" style="background-image: url('{!! $blog->image_url !!}');">
    <div class="container h-100">
        <div class="d-flex h-100 align-items-center justify-content-center">
            <div class="col-md-8 mx-auto">
                <div class="inner-banner-content">
                    <div class="bd-badge-row mb-3">
                        @foreach($blog->categories as $cat)
                        <div class="blog-categories-ntn" style="background-color: var(--themeBlue);
                        color: var(--white);">{!! $cat->category->name ?? "" !!}</div>
                        @endforeach
                    </div>
                    <h1>{!! $blog->name !!}</h1>
                    <div class="pd-date">{!! $blog->publish_at->format(config('constants.DISPLAY_DATE_FORMAT')) !!}</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END INNER BANNER SECTION -->

<!-- START PD CONTENT SECTION -->
<section class="pd-content-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="pd-content">
                    <p class="highlighted">
                        {!! $blog->short_description !!}
                    </p>
                    {!! $blog->description !!}
                    @if($blog->is_author_show)
                    <p class="writen-by-txt">Categories</p>
                    <div class="bd-badge-row mb-3">
                        @foreach($blog->categories as $cat)
                        <div class="blog-categories-ntn" style="background-color: var(--themeBlue);
                        color: var(--white);">{!! $cat->category->name ?? "" !!}</div>
                        @endforeach
                    </div>
                    <p class="writen-by-txt">Written By</p>
                    <div class="authors-row">
                        @foreach($blog->authors as $author)
                        <div class="author-card">
                            <img src="{!! $author->author->avatar_url ?? "" !!}" class="img-fluid" alt="{!! $author->author->name !!}" />
                            <div class="author-info-content">
                                <h5>{!! $author->author->name !!}</h5>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
                <div class="col-md-12 text-center mt-4">
                    <button type="button" class="btn btn-theme-blue" onclick="javascript:window.location.href='{!! route('blogs') !!}'">VIEW ALL BLOGS</button>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END PD CONTENT SECTION -->

@if($relatedBlogs->count())
<!-- START BD-CATEGORY SECTION -->
<section class="bd-cetegory-sec sec-py pt-0">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="sec-title text-center">
                    <h2 class="text-dark">Also Read</h2>
                </div>
                <div class="row my-blog-card-row">
                    @foreach($relatedBlogs as $relatedBlog)
                    <div class="col-md-6 col-xl-4">
                        <a href="{!! $relatedBlog->page_url !!}" class="blog-post-card" title="{!! $relatedBlog->name !!}">
                            @foreach($relatedBlog->categories as $cat)
                            <!-- <div class="blog-categories-ntn">{!! $cat->category->name ?? "" !!}</div> -->
                            @endforeach
                            <div class="blog-post-content">
                                <div class="blog-post-title">
                                    {!! $relatedBlog->name !!}
                                </div>
                                @if($relatedBlog->is_author_show)
                                <p>By <span class="blog-categories-ntn">{!! $relatedBlog->authors_name !!}</span></p>
                                @endif
                                <div class="blog-info-row">
                                    <p>{!! $relatedBlog->publish_at->format(config('constants.DISPLAY_DATE_FORMAT')) !!}</p>
                                </div>
                            </div>
                            <div class="blog-post-img">
                                <img src="{!! $relatedBlog->image_grid_url !!}" class="w-100" alt="{!! $relatedBlog->name !!}">
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END BD-CATEGORY SECTION -->
@endif
@endsection