@extends('frontend.layouts.layouts')

@section('content')
    <div class="relative min-h-screen bg-center bg-cover"
        style="background-image: url('{{ asset('img/about_us/bg-1 (1).jpg') }}');">

        <div class="relative z-0">
            <img src="{{ asset('img/blogs/img-banner-header.png') }}" class="absolute object-cover w-full h-full "
                alt="Flowbite Logo">
            <div class="relative inset-0 z-50 flex items-center justify-center py-32">
                <style>
                    .marcellus-font {
                        font-family: 'Marcellus', serif;
                    }

                    .cursive-font {
                        font-family: 'Brush Script MT', 'Comic Sans MS', 'Segoe Script', 'Lucida Handwriting', cursive;
                    }
                </style>
                <div>
                    <h1
                        class="p-4 text-xl text-center text-white sm:text-3xl md:text-5xl lg:text-6xl xl:text-7xl marcellus-font">
                        Blogs
                    </h1>
                </div>

            </div>

        </div>
        <div class="container mx-auto" style="font-family: 'Poppins', sans-serif;">
            <div>
                <div class="grid grid-cols-1 mt-20 md:gap-10 md:grid-cols-2 lg:grid-cols-4">
                    <!-- Left Panel: Popular Categories -->
                    <div class="w-full">
                        <div>
                            <p class="mb-4 font-bold">POPULAR CATEGORIES</p>
                        </div>
                        <div class="flex items-center justify-center p-3">
                            <div class="w-full space-y-2">
                                @foreach ($category as $category)
                                    <a href="{{ url('blogscategories/' . $category->id) }}"
                                        class="relative flex items-center justify-between block px-2 py-4 text-sm bg-gray-200 border border-gray-300 rounded hover:bg-gray-300">
                                        <span>{{ $category->category }}</span>
                                        <svg class="absolute w-4 h-4 text-blue-600 transform -translate-y-1/2 right-2 top-1/2"
                                            fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M9 5l7 7-7 7"></path>
                                        </svg>
                                    </a>
                                @endforeach


                            </div>
                        </div>
                        <!-- Left Panel Ad -->
                        <div class="flex flex-col items-center p-3">
                            <div class="relative">
                                <div>
                                    <img src="{{ asset('img/img-leftpanel-ad.png') }}" class="object-contain w-fit h-96"
                                        alt="Ad Image">
                                </div>
                                <div
                                    class="absolute inset-0 flex items-end justify-center mb-10 duration-300 opacity-0 hover:opacity-70">
                                    <button class="px-10 py-2 text-white border-2 border-white rounded-full">SHOP
                                        NOW</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Panel: Blog Post Content -->
                    <div class="col-span-3">
                        <div>
                            <p class="mb-4 text-3xl">{{ $blog->title }}</p>
                            <p class="mb-4 text-sm">Posted By: Admin | <span
                                    class="text-blue-600">{{ $blog->category }}</span></p>
                            <div class="pr-4">
                                <img src="{{ asset($blog->picture) }}" class="object-cover w-full h-full"
                                    alt="{{ $blog->title }}">
                            </div>
                            <div class="px-4 my-10 space-y-6">
                                <p class="mb-4 text-xl leading-relaxed">
                                    {!! $blog->description !!}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- New Blog Posts Section -->
            <div class="p-10">
                <div class="py-5">
                    <p class="text-4xl hover:underline">New Blog Posts</p>
                    <div class="ml-48">
                        <hr class="w-20 border-t-4 border-yellow-400">
                    </div>
                </div>
                <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
                    @foreach ($blogs as $blog)
                        <div>
                            <a href="{{ url('blogscategories/' . $blog->id) }}">
                                <div class="relative">
                                    <img src="{{ asset($blog->picture) }}" class="object-cover w-full h-64"
                                        alt="{{ $blog->title }}">
                                    <div
                                        class="absolute inset-0 z-0 flex items-end justify-end duration-300 bg-black bg-opacity-10 hover:bg-opacity-60">
                                        <div
                                            class="w-16 h-16 p-2 m-2 text-sm text-center text-white bg-blue-800 rounded-full">
                                            <p class="font-bold">{{ $blog->created_at->format('d') }}</p>
                                            <p>{{ $blog->created_at->format('M') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="p-5">
                                <p>
                                    <span class="text-sm text-gray-400">By Admin</span> |
                                    <span class="text-blue-600 text-md">{{ $blog->category }}</span>
                                </p>
                                <p class="mb-2 font-semibold">{{ $blog->title }}</p>
                                <a href="{{ url('blogscategories/' . $blog->id) }}"
                                    class="text-sm font-bold text-blue-600 hover:text-blue-800">
                                    Read More →
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endsection