@extends('layouts.user')

@section('title')
    Blog Details
@endsection

@section('content')


 <!-- Start Hero -->
 <section class="relative table w-full items-center py-36 bg-[url('../../assets/images/hero/pages.html')] bg-top bg-no-repeat bg-cover" style="background-image: url('{{ asset('images/blog-head.jpg') }}');">
            <div class="absolute inset-0 bg-gradient-to-b from-slate-900/60 via-slate-900/80 to-slate-900"></div>
            <div class="container relative">
                <div class="grid grid-cols-1 pb-8 mt-10 text-center">
                    <h3 class="text-4xl font-semibold leading-normal tracking-wider text-white">{{ $blog->title }}</h3>

                    <ul class="mt-6 list-none">
                        <li class="inline-block mx-5 text-white/50"> <span class="block text-white">Author :</span> <span class="block">{{ $blog->author_name }}</span></li>
                        <li class="inline-block mx-5 text-white/50"> <span class="block text-white">Date :</span> <span class="block">{{ $blog->created_at->format('jS F, Y'); }}</span></li>
                        <li class="inline-block mx-5 text-white/50"> <span class="block text-white">Views :</span> <span class="block">{{ $blog->views }}</span></li>
                    </ul>
                </div><!--end grid-->
            </div><!--end container-->
            
            <div class="absolute z-10 mx-3 text-center bottom-5 start-0 end-0">
                <ul class="tracking-[0.5px] mb-0 inline-block">
                    <li class="inline-block uppercase text-[13px] font-bold duration-500 ease-in-out text-white/50 hover:text-white"><a href="index-2.html">Blog</a></li>
                    <li class="inline-block text-base text-white/50 mx-0.5 ltr:rotate-0 rtl:rotate-180"><i class="mdi mdi-chevron-right"></i></li>
                    <li class="inline-block uppercase text-[13px] font-bold duration-500 ease-in-out text-white" aria-current="page">Blog Detail</li>
                </ul>
            </div>
        </section><!--end section-->
        <!-- End Hero -->

        <!-- Start -->
        <section class="relative py-16 md:py-24">
            <div class="container">
                <div class="grid grid-cols-1 gap-6 md:grid-cols-12">
                    <div class="lg:col-span-8 md:col-span-6">
                        <div class="relative overflow-hidden rounded-md shadow dark:shadow-gray-800">

                            <img src="assets/images/blog/9.jpg" alt="">

                            <div class="p-6">
                                <div class="mt-3 text-slate-400">
                                    {!! $blog->content !!}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="lg:col-span-4 md:col-span-6">
                        <div class="sticky top-20">
                            <h5 class="p-2 text-lg font-medium text-center rounded-md shadow bg-gray-50 dark:bg-slate-800 dark:shadow-gray-800">Author</h5>
                            <div class="mt-8 text-center">
                                <img src="{{ asset('/images/toy-avatar.png') }}" class="w-20 h-20 mx-auto mb-4 rounded-full shadow" alt="">

                                <a href="#" class="text-lg font-medium transition-all duration-500 ease-in-out hover:text-orange-500 h5">{{ $blog->author_name }}</a>
                                <p class="text-slate-400">{{ $blog->author_title }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container mt-16 lg:mt-24">
                <div class="grid grid-cols-1 mb-6 text-center">
                    <h3 class="text-3xl font-semibold leading-normal">Recent Blogs</h3>
                </div><!--end grid-->

                <div class="grid grid-cols-1 gap-6 pt-6 lg:grid-cols-3 md:grid-cols-2">
                @foreach($recentBlogs as $blog)
                <div class="relative w-full overflow-hidden group">
                    <div class="relative overflow-hidden rounded-md shadow dark:shadow-gray-800">
                        <img src="{{ asset('storage/images/'.$blog->featured_image) }}" style="height: 300px; object-fit: cover;" class="w-full duration-500 group-hover:scale-110" alt="">
                    </div>

                    <div class="mt-6">
                        <div class="flex mb-4">
                            <span class="flex items-center text-sm text-slate-400"><i data-feather="calendar" class="size-4 text-slate-900 dark:text-white me-1.5"></i>{{ $blog->created_at->format('jS F, Y'); }}</span>
                            <span class="flex items-center text-sm text-slate-400 ms-3"><i data-feather="eye" class="size-4 text-slate-900 dark:text-white me-1.5"></i>{{ $blog->views }}</span>
                        </div>

                        <a href="{{ route('blog-details', $blog->id) }}" class="text-lg font-semibold duration-500 ease-in-out title hover:text-orange-500">{{ $blog->title }}</a>
                        <p class="mt-2 text-slate-400">{!! mb_strimwidth($blog->content, 0, 80, '...') !!}.</p>

                        <div class="mt-3">
                            <span class="text-slate-400">by <a href="#" class="font-medium text-slate-900 dark:text-white hover:text-orange-500 dark:hover:text-orange-500">{{ $blog->author_name }}</a></span>
                        </div>
                    </div>
                </div><!--end content-->
                @endforeach

                </div><!--end grid-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- End -->


@endsection