@extends('layouts.app')

@section('content')

    {{-- Category Hero Banner --}}
    <section class="border-b bg-white py-8 md:py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <nav class="flex items-center gap-2 text-xs text-gray-400 mb-4">
                <a href="{{ route('home') }}" class="hover:text-gray-700 transition-colors">হোম</a>
                <i class="fa fa-chevron-right text-[8px]"></i>
                <span class="text-gray-700 font-medium">{{ $category->name }}</span>
            </nav>
            <div class="flex items-center gap-4">
                @if($category->image)
                    <div class="w-14 h-14 md:w-16 md:h-16 rounded-lg border bg-gray-50 p-2 flex-shrink-0 shadow-sm">
                        <img src="{{ asset('uploads/' . $category->image) }}" class="w-full h-full object-contain" alt="">
                    </div>
                @endif
                <div>
                    <h1 class="text-2xl font-semibold leading-none tracking-tight text-gray-900">{{ $category->name }}</h1>
                    <p class="text-sm text-gray-500 mt-1.5">{{ $products->total() }}টি পণ্য পাওয়া গেছে</p>
                </div>
            </div>
        </div>
    </section>

    <main class="max-w-7xl mx-auto px-4 sm:px-6 py-6 md:py-8">

        @if($products->count() > 0)

            {{-- Sort/Filter Bar (CardHeader style) --}}
            <div class="rounded-lg border bg-white shadow-sm mb-6">
                <div class="flex items-center justify-between p-4 sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-gray-900">সকল পণ্য</h2>
                        <p class="text-sm text-gray-500 mt-0.5">মোট <span class="font-semibold text-gray-700">{{ $products->total() }}</span> টি পণ্য</p>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="hidden sm:inline-flex items-center gap-1.5 text-xs text-gray-400 border border-gray-200 rounded-lg px-3 py-2 bg-white shadow-sm">
                            <i class="fa fa-th-large text-orange-500"></i>
                            গ্রিড ভিউ
                        </span>
                    </div>
                </div>
            </div>

            {{-- Product Grid (ProductDropCard item style) --}}
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
                @foreach($products as $product)
                    @php
                        $_origPrice = $product->price;
                        $_salePrice = $product->sale_price ?? null;
                        $_hasDiscount = $_salePrice && $_salePrice < $_origPrice;
                        $_discountPct = $_hasDiscount ? round(($_origPrice - $_salePrice) / $_origPrice * 100) : 0;
                        $_inStock = !isset($product->stock_quantity) || $product->stock_quantity > 0;
                    @endphp
                    <div class="rounded-lg border bg-white shadow-sm overflow-hidden group transition-all duration-300 hover:shadow-md flex flex-col">

                        {{-- Image (aspect-square with rounded-md inner) --}}
                        <div class="relative p-3 pb-0">
                            <div class="relative aspect-square w-full overflow-hidden rounded-md bg-gray-50">
                                <a href="{{ route('product.details', $product->slug) }}">
                                    <img src="{{ asset('uploads/' . $product->image) }}"
                                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="{{ $product->name }}">
                                </a>

                                {{-- Wishlist Button --}}
                                <button type="button" onclick="event.preventDefault(); this.querySelector('i').classList.toggle('fa-solid'); this.querySelector('i').classList.toggle('fa-regular'); this.classList.toggle('text-red-500');"
                                        class="absolute top-2 right-2 p-2 rounded-full bg-white/90 hover:bg-white shadow-sm backdrop-blur-sm transition-all hover:scale-110 text-gray-400">
                                    <i class="fa-regular fa-heart text-xs"></i>
                                </button>

                                {{-- Sale Badge --}}
                                @if($_hasDiscount)
                                    <div class="absolute top-2 left-2 bg-red-500 text-white px-2 py-0.5 rounded-md text-[10px] font-bold shadow-sm">
                                        -{{ $_discountPct }}%
                                    </div>
                                @endif

                                {{-- Out of Stock Overlay --}}
                                @unless($_inStock)
                                    <div class="absolute inset-0 bg-black/40 flex items-center justify-center rounded-md">
                                        <span class="bg-white text-gray-700 px-3 py-1.5 rounded-md font-semibold text-xs shadow-sm">Out of Stock</span>
                                    </div>
                                @endunless
                            </div>
                        </div>

                        {{-- Content --}}
                        <div class="p-3 pt-2.5 flex flex-col flex-1">
                            @if(!empty($product->category?->name))
                                <p class="text-[10px] uppercase tracking-wider font-medium text-gray-400 mb-1">{{ $product->category->name }}</p>
                            @endif

                            <a href="{{ route('product.details', $product->slug) }}" class="hover:text-orange-500 transition-colors">
                                <h3 class="font-semibold text-sm text-gray-900 line-clamp-2 leading-snug mb-1.5">{{ $product->name }}</h3>
                            </a>

                            {{-- Rating --}}
                            @if(!empty($product->average_rating))
                                <div class="flex items-center gap-1.5 mb-1.5">
                                    <div class="flex items-center gap-0.5">
                                        @for($i = 1; $i <= 5; $i++)
                                            <i class="fa-solid fa-star text-[9px] {{ $i <= round($product->average_rating) ? 'text-yellow-400' : 'text-gray-200' }}"></i>
                                        @endfor
                                    </div>
                                    <span class="text-[10px] text-gray-400">({{ $product->reviews_count ?? 0 }})</span>
                                </div>
                            @endif

                            {{-- Price --}}
                            <div class="flex items-baseline gap-2 flex-wrap mt-auto mb-2.5">
                                @if($_hasDiscount)
                                    <span class="text-orange-600 font-bold text-base">৳{{ number_format($_salePrice) }}</span>
                                    <span class="text-gray-400 line-through text-xs">৳{{ number_format($_origPrice) }}</span>
                                @else
                                    <span class="text-gray-900 font-bold text-base">৳{{ number_format($_origPrice) }}</span>
                                @endif
                            </div>

                            {{-- Add to Cart (shadcn Button outline style) --}}
                            <button onclick="addToCart({{ $product->id }}, 1)"
                                    {{ $_inStock ? '' : 'disabled' }}
                                    class="w-full py-2 px-3 rounded-lg font-medium text-xs transition-colors flex items-center justify-center gap-1.5
                                    {{ $_inStock
                                        ? 'border border-gray-200 bg-white shadow-sm hover:bg-gray-50 hover:text-orange-600 text-gray-700 active:scale-[0.98]'
                                        : 'bg-gray-50 text-gray-400 cursor-not-allowed border border-gray-100' }}">
                                <i class="fa-solid fa-cart-shopping text-[10px]"></i>
                                <span>{{ $_inStock ? 'Add to Cart' : 'Out of Stock' }}</span>
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-10">
                {{ $products->links() }}
            </div>

        @else
            <div class="rounded-lg border bg-white shadow-sm p-16 text-center">
                <i class="fa fa-folder-open text-4xl text-gray-200 mb-4"></i>
                <h4 class="text-lg font-semibold text-gray-700 mb-2">এই ক্যাটাগরিতে এখনো কোনো পণ্য যোগ করা হয়নি!</h4>
                <a href="{{ route('home') }}" class="inline-block mt-2 text-orange-500 font-medium hover:underline text-sm">অন্যান্য পণ্য দেখুন</a>
            </div>
        @endif
    </main>

@endsection