@extends('front.layout.app')
@section('content')
    <section class="blog-detail">
        <div class="container">
            <div class="row">
                <div class="col-lg-8" data-aos="fade-right">
                    @if($blogDetail->getMedia('blog_images')->count() > 0)
                        <figure class="blog-detail__img w-100 mb-4">
                            <img src="{{ $blogDetail->getFirstMediaUrl('blog_images') }}" alt="image" class="img-fluid w-100 h-100">
                        </figure>
                    @endif
                    <h2 class="heading mb-2">{{$blogDetail->title ?? ''}}</h2>
<p>{!! $blogDetail->content ?? '' !!}</p>

                        <div class="row">
                            @php
                                $foundPrev = false;
                                $foundNext = false;
                            @endphp

                            @foreach($blogPosts as $blog)
                                @if(!$foundPrev && $blog->id < $blogDetail->id)
                                    <div class="col-lg-6">
                                        <div class="prev-nextBtn">
                                            <img src="{{ $blogDetail->getFirstMediaUrl('blog_images') }}" alt="image" class="img-fluid">
                                            <div>
                                                <p>Prev POST</p>
                                                <a href="{{ route('front.blog.detail', $blog->id) }}" class="title">{{ $blog->title ?? '' }}</a>
                                            </div>
                                        </div>
                                    </div>
                                    @php $foundPrev = true; @endphp
                                @endif
                            @endforeach

                            @foreach($blogPosts as $blog)
                                @if(!$foundNext && $blog->id > $blogDetail->id)
                                    <div class="col-lg-6">
                                        <div class="prev-nextBtn">
                                            <img src="{{ $blogDetail->getFirstMediaUrl('blog_images') }}" alt="image" class="img-fluid">
                                            <div>
                                                <p>NEXT POST</p>
                                                <a href="{{ route('front.blog.detail', $blog->id) }}" class="title">{{ $blog->title ?? '' }}</a>
                                            </div>
                                        </div>
                                    </div>
                                    @php $foundNext = true; @endphp
                                @endif
                            @endforeach
                        </div>

                </div>
                <div class="col-lg-4" data-aos="fade-left">
                    <form action="#" class="blog-detail__searchBox d-flex justify-content-between">
                        <input type="text" placeholder="Keyword..." class="w-100">
                        <button><i class="fas fa-search"></i></button>
                    </form>
                    <div class="blog-detail__card">
                        <h4 class="heading"><i class="far fa-sticky-note"></i> Categories</h4>
                        <p>LATEST NEWS</p>
                    </div>

                    <div class="blog-detail__card">
                        <h4 class="heading"><i class="far fa-sticky-note"></i> recently posted</h4>
                        @foreach($blogPosts->take(3) as $blog)
{{--                            @if(now()->diffInDays($blog->created_at) >= 3)--}}
                                <div class="blog-detail__cardPost">
                                    <img src="{{ $blogDetail->getFirstMediaUrl('blog_images') }}" alt="image" class="img-fluid">
                                    <div>
                                        <div class="date">{{ $blog->created_at->format('F d, Y') }}</div>
                                        <a href="{{ route('front.blog.detail', $blog->id) }}" class="title">{{ $blog->title }}</a>
                                    </div>
                                </div>
{{--                            @endif--}}
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection