@extends('layouts.main-app')

@section('title', 'Blogs')

@section('content')

@include('layouts.navbar')

<div class="relative h-[25rem] w-full">
    <img class="absolute inset-0 object-cover object-bottom w-full h-full" src="{{asset('images/blogs/bg-header-singlepage.jpg')}}" alt="">
</div>


<div class="bg-[#595959] pb-32">
    <div data-aos="fade-up" data-aos-duration="1000" class="container max-w-screen-xl px-4 mx-auto">
        <h1 class="text-[#ffd916] font-bold text-4xl">{{$blogs->title}}</h1>
        <div class="flex items-center justify-between my-4">
            <div>
                <h1 class="text-white">By: <span class="text-[#ffd916]">{{ $blogs->user->name }}</span> </h1>
            </div>
            <div class="text-[#ffd916]">BLOG <span class="text-white">| {{ $blogs->created_at->format('d F Y') }}</span> </div>
        </div>
        <div data-aos="zoom-in" data-aos-duration="1000">
            <img class="object-cover w-full h-full" src="{{asset($blogs->image)}}" alt="">
        </div>
        <div data-aos="zoom-in" data-aos-duration="1000">
            <div class="text-white">
                {!! $blogs->description !!}
            </div>
        </div>

        <script>
            $(document).ready(function() {
                // Select the description content
                $('.text-white').find('strong').each(function() {
                    // Apply the classes to each strong element
                    $(this).addClass('text-[#ffd916] font-bold text-2xl');
                });
            });
        </script>
        <div class="border-b-2 border-b-[#ffd916] my-12">
        </div>
        <div class="flex flex-col items-center justify-between md:flex-row">
            <div data-aos="zoom-in" data-aos-duration="1000" class="flex flex-col items-start">
                <div class="flex items-center">
                    @if($prevBlog)
                    <a href="{{ route('blogs_details', $prevBlog->id) }}">
                        <button>
                            <img src="{{asset('images/homepage/btn-prev-default.png')}}" alt="">
                        </button>
                    </a>
                    <p class="text-white">Previous Post</p>
                    @else
                    <p class="text-white">No Previous Post</p>
                    @endif
                </div>
                @if($prevBlog)
                <div class="flex justify-end">
                    <div class="bg-[#ffd916] rounded-full p-8 h-[20rem] w-[20rem] flex justify-center align-center flex-col space-y-4">
                        <div>
                            <h1> <strong>Blog | </strong> {{ $prevBlog->created_at->format('d M, Y') }}</h1>
                        </div>
                        <div>
                            <h1 class="font-bold">{{ $prevBlog->title }}</h1>
                        </div>
                        <div class="flex justify-between">
                            <h1 class="font-bold">{{ $prevBlog->user->name }}</h1>
                            <a href="{{ route('blogs_details', $prevBlog->id) }}">
                                <h1 class="text-red-600">Read More ></h1>
                            </a>
                        </div>
                    </div>
                </div>
                @endif
            </div>
            <div data-aos="zoom-in" data-aos-duration="1000" class="flex flex-col items-end">
                <div class="flex items-center">
                    @if($nextBlog)
                    <p class="text-white">Next Post</p>
                    <a href="{{ route('blogs_details', $nextBlog->id) }}">
                        <button><img src="{{asset('images/homepage/btn-next-default.png')}}" alt=""></button>
                    </a>
                    @else
                    <p class="text-white">No Next Post</p>
                    @endif
                </div>
                @if($nextBlog)
                <div class="flex justify-end">
                    <div class="bg-[#ffd916] rounded-full p-8 h-[20rem] w-[20rem] flex justify-center align-center flex-col space-y-4">
                        <div>
                            <h1> <strong>Blog | </strong> {{ $nextBlog->created_at->format('d M, Y') }}</h1>
                        </div>
                        <div>
                            <h1 class="font-bold">{{ $nextBlog->title }}</h1>
                        </div>
                        <div class="flex justify-between">
                            <h1 class="font-bold">{{ $nextBlog->user->name }}</h1>
                            <a href="{{ route('blogs_details', $nextBlog->id) }}">
                                <h1 class="text-red-600">Read More ></h1>
                            </a>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@include('layouts.station')
@include('layouts.footer')



@endsection