@extends('layouts.app')
@section('title', 'Garden Blogs')
@section('content')
    <section class="relative about-banner">
        <div
            class="bannerInner bg-gradient-to-t from-[#AABF86] from-[-60%] to-80% to-[#F4FFE1] px-4 sm:px-8 md:px-20 py-12 sm:py-16 md:pt-32 md:pb-32 w-[95%] sm:w-[90%] mx-auto rounded-3xl">
            <div class="container">
                <div class="flex items-center justify-center">
                    <h1
                        class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-black font-extrabold text-center leading-tight">
                        Blog And Recipes</h1>
                </div>
            </div>
        </div>
        <img src="{{ asset('front/images/blog-right.webp') }}"
            class="absolute -bottom-8 sm:-bottom-12 h-3/4 sm:h-[87.5%] right-4 sm:right-[4.5rem] object-contain hidden md:block" />
        <img src="{{ asset('front/images/sell-right.webp') }}"
            class="absolute -bottom-8 sm:-bottom-12 h-3/4 sm:h-[87.5%] left-4 sm:left-[6.5rem] object-contain hidden md:block" />
    </section>



    <section class="w-full sm:w-[95%] md:w-[90%] mt-8 sm:mt-12 md:mt-16 mx-auto">
        <div class="container px-4 sm:px-6">
            {{-- Filter and Search Section --}}
            <div
                class="flex flex-col md:flex-row justify-between items-center bg-white p-6 rounded-3xl shadow-sm border border-[#D9D9D9] mb-8">
                <div class="flex space-x-4 mb-4 md:mb-0">
                    <a href="{{ route('blogs', ['type' => 'blog']) }}"
                        class="px-6 py-2 rounded-full font-bold {{ $type == 'blog' ? 'bg-[#AABF86] text-white' : 'bg-gray-100 text-black hover:bg-gray-200' }} transition-colors">Blogs</a>
                    <a href="{{ route('blogs', ['type' => 'recipe']) }}"
                        class="px-6 py-2 rounded-full font-bold {{ $type == 'recipe' ? 'bg-[#AABF86] text-white' : 'bg-gray-100 text-black hover:bg-gray-200' }} transition-colors">Recipes</a>
                </div>
                <form action="{{ route('blogs') }}" method="GET" class="relative w-full md:w-1/3">
                    <input type="hidden" name="type" value="{{ $type }}">
                    <input type="text" name="search" value="{{ $search }}" placeholder="Search here..."
                        class="w-full bg-[#f3f4f6] rounded-full py-3 px-6 pr-12 outline-none border border-transparent focus:border-[#AABF86] transition-all">
                    <button type="submit"
                        class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#AABF86]">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </button>
                </form>
            </div>

            <div
                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 my-8 sm:my-12 p-4 sm:p-6 md:p-10 w-full max-w-7xl mx-auto">
                @forelse($blogs as $key => $value)
                    <div
                        class="border border-[#D9D9D9] rounded-3xl relative hover:shadow-lg transition-shadow bg-white overflow-hidden flex flex-col h-full">
                        <figure class="mb-0">
                            <img class="w-full h-48 sm:h-56 md:h-64 object-cover" src="{{ asset($value->image) }}"
                                alt="{{ $value->name }}">
                        </figure>
                        <div class="p-4 sm:p-5 flex flex-col flex-grow">
                            <a class="text-lg sm:text-xl md:text-2xl text-black font-bold hover:text-secondary transition-colors line-clamp-2"
                                href="{{ route('blog.details', $value->slug) }}">{{ $value->name }}</a>
                            <div class="flex justify-between items-center pt-4 mt-auto">
                                <p class="text-xs sm:text-sm text-[#3A3636]">
                                    {{ date('M d, Y', strtotime($value->created_at)) }}</p>
                                <a href="{{ route('blog.details', $value->slug) }}"
                                    class="text-xs sm:text-sm text-[#AABF86] hover:text-black font-medium transition-colors">Read
                                    More</a>
                            </div>
                        </div>
                        <span
                            class="bg-white rounded-2xl font-bold absolute top-3 left-4 px-3 py-1 text-xs sm:text-sm shadow-sm">{{ $type == 'blog' ? $value->tag ?? 'Plant care' : 'Recipe' }}</span>
                    </div>
                @empty
                    <div class="col-span-1 sm:col-span-2 lg:col-span-3 text-center py-12">
                        <p class="text-xl text-gray-500 font-medium">No results found for your search.</p>
                        <a href="{{ route('blogs', ['type' => $type]) }}"
                            class="text-[#AABF86] hover:underline mt-2 inline-block">Clear filters</a>
                    </div>
                @endforelse
            </div>
        </div>
    </section>
    <section class="w-full sm:w-[95%] md:w-[90%] mt-8 sm:mt-12 md:mt-16 mx-auto">
        <div class="container px-4 sm:px-6">
            <div class="flex items-center justify-center">
                <div class="w-full sm:w-[90%] md:w-3/4 lg:w-1/2 text-center">
                    <h2
                        class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-black font-bold relative capitalize mb-6 md:mb-8">
                        Subscribe to our newsletter
                        <img src="{{ asset('front/images/shape6.webp') }}" class="my-5 ml-auto mr-40 hidden md:block" />
                    </h2>
                    <div class="flex items-center bg-[#E0E8D4] rounded-full px-4 sm:px-5 py-4 sm:py-5 w-full mx-auto">
                        <input type="email" placeholder="Enter Your Email Here..."
                            class="bg-transparent flex-1 outline-none px-2 sm:px-4 text-sm sm:text-base text-black placeholder-black"
                            name="email" id="newsletter_email">
                        <button
                            class="bg-black text-white rounded-full w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center hover:bg-gray-800 transition-colors"
                            id="newsletter-btn">
                            <span class="text-sm sm:text-base">➝</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection