@extends('layouts.user')

@section('title')
    Blog
@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">Blogs / News</h3>
        </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="{{ url('/') }}">Home</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">Blogs</li>
        </ul>
    </div>
</section><!--end section-->
<!-- End Hero -->

<!-- Start -->
<section class="relative py-16 md:py-24">
    <div class="container relative"> 
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 md:grid-cols-2">

            @forelse($blogs 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->slug) }}" 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-->
            @empty
            <p class="py-6 mt-2 text-center text-slate-400">No Blog Posts At The Moment!.</p>
            @endforelse
            
        </div><!--end grid-->

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


@endsection