@extends('layouts.main-app')

@section('title')

@section('content')
    @include('layouts.navbar');
    <div class="w-full relative">
        <img class="absolute w-full h-96 object-cover" src="{{ asset('images/images/product-category.png') }}"
            alt="blog topics banner">
        <div class="relative text-center py-32">
            <h1 class="text-5xl text-white anton-regular">
                {{ strtoupper($category->name) }}
            </h1>
            <p class="text-white py-2">
             

                <p class="text-white py-2"><a href="{{ url('/') }}" class="hover:text-[#ef5400]">HOME</a>/    {{ strtoupper($category->name) }}</p>
              
            </p>
        </div>
    </div>
    <img src="{{ asset('images/images/product-mesh-background.png') }}" alt="product mesh background"
        class="absolute object-cover w-full">


    <div class="pt-14 z-50 mb-64">
        <div class="container mx-auto">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 px-4 sm:px-6 lg:px-8">
                @forelse ($products as $product)
                    <div class="relative group w-full h-64 overflow-hidden bg-white rounded-xl shadow-lg transition-transform duration-300 hover:shadow-xl">
                        <!-- Image container -->
                        <div class="aspect-w-1 aspect-h-1 bg-gray-100">
                            <a href="{{ route('item.display', $product->slug) }}" class="">
                                <img src="{{ asset($product->thumbnail_image) }}" 
                                alt="{{ $product->name }}"
                                class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
                            </a>
                                
                                
                        </div>

                        <!-- Initial label -->
                        <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-4/5 transition-opacity duration-300 group-hover:opacity-0">
                            <div class="px-4 sm:px-6 py-2 sm:py-3 bg-orange-500 text-white font-semibold text-center rounded-full shadow-md text-sm sm:text-base">
                                {!! $product->name !!}
                            </div>
                        </div>

                        <!-- Hover content -->
                        <div
                        class="absolute  bottom-4 left-2 right-2 bg-white bg-opacity-90 p-4 rounded-3xl opacity-0 group-hover:opacity-100 group-hover:translate-y-0 translate-y-4 transition-all duration-500 ease-out">
                        <div class="text-center">
                            <a href="{{ route('products.show', $category->slug) }}">
                                <div
                                    class="border border-white px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4 -mt-8 transform group-hover:scale-105 transition-transform duration-500 ease-out">
                                    {!! strtoupper($category->name) !!}
                                </div>
                            </a>
                        </div>
    
                        <!-- Display CKEditor 'items' field content -->
                        <div class="text-center text-gray-700 transition-opacity duration-500 ease-out">
                            @if (is_countable($category->items) && count($category->items) > 3)
                                <div class="grid grid-cols-2 gap-4">
                                    @foreach ($category->items as $item)
                                        <div>{!! $item !!}</div>
                                    @endforeach
                                </div>
                            @else
                                <div>{!! $category->items !!}</div>
                            @endif
                        </div>
                    </div> 
                    </div>
                @empty
                    <p class="text-center col-span-full text-gray-500 py-8">No products found in this category.</p>
                @endforelse
            </div>
        </div>
    </div>
    @include('layouts.footer')
@endsection