@extends('layouts.app')

@section('content')
<main class="max-w-7xl mx-auto px-4 py-6 md:py-10">

    <div class="mb-8">
        <h2 class="text-xl md:text-3xl font-bold text-gray-800">
            <span class="text-orange-600">"{{ $query }}"</span> এর জন্য অনুসন্ধান ফলাফল
        </h2>
        <p class="text-gray-500 mt-2 italic">মোট {{ $products->total() }}টি পণ্য পাওয়া গেছে</p>
    </div>

    @if($products->count() > 0)
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-5">
            @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="bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden group transform hover:scale-[1.02] flex flex-col">

                    {{-- Image --}}
                    <div class="relative aspect-square bg-gray-50 overflow-hidden">
                        <a href="{{ route('product.details', $product->slug) }}">
                            <img src="{{ asset('uploads/' . $product->image) }}"
                                 class="w-full h-full object-cover group-hover:scale-110 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-3 right-3 p-2.5 rounded-full bg-white/90 hover:bg-white shadow-md backdrop-blur-sm transition-all hover:scale-110 text-gray-400">
                            <i class="fa-regular fa-heart text-sm"></i>
                        </button>

                        {{-- Sale Badge --}}
                        @if($_hasDiscount)
                            <div class="absolute top-3 left-3 bg-red-500 text-white px-2.5 py-1 rounded-full text-xs font-black shadow-lg">
                                -{{ $_discountPct }}%
                            </div>
                        @endif

                        {{-- Out of Stock Overlay --}}
                        @unless($_inStock)
                            <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
                                <span class="bg-red-500 text-white px-4 py-2 rounded-full font-bold text-xs md:text-sm">Out of Stock</span>
                            </div>
                        @endunless
                    </div>

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

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

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

                        {{-- Price --}}
                        <div class="flex items-center gap-2 flex-wrap mb-3">
                            @if($_hasDiscount)
                                <span class="text-red-500 font-black text-base md:text-lg">৳{{ number_format($_salePrice) }}</span>
                                <span class="text-gray-400 line-through text-xs">৳{{ number_format($_origPrice) }}</span>
                            @else
                                <span class="text-gray-900 font-black text-base md:text-lg">৳{{ number_format($_origPrice) }}</span>
                            @endif
                        </div>

                        {{-- Add to Cart --}}
                        <button onclick="addToCart({{ $product->id }}, 1)"
                                {{ $_inStock ? '' : 'disabled' }}
                                class="mt-auto w-full py-2.5 px-4 rounded-lg font-bold text-xs md:text-sm transition-all duration-200 flex items-center justify-center gap-2
                                {{ $_inStock ? 'bg-[#1a73e8] hover:bg-[#1558b8] text-white active:scale-95' : 'bg-gray-100 text-gray-400 cursor-not-allowed' }}">
                            <i class="fa-solid fa-cart-shopping text-xs"></i>
                            <span>{{ $_inStock ? 'Add to Cart' : 'Out of Stock' }}</span>
                        </button>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-12">
            {{ $products->appends(['query' => $query])->links() }}
        </div>
    @else
        <div class="bg-white rounded-3xl p-16 md:p-32 text-center shadow-sm border border-gray-100">
            <div class="bg-gray-100 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fa fa-search-minus text-4xl text-gray-400"></i>
            </div>
            <h4 class="text-xl md:text-2xl font-bold text-gray-800">দুঃখিত! আমরা কিছু খুঁজে পাইনি</h4>
            <p class="text-gray-500 mt-2 mb-8">অনুগ্রহ করে অন্য কোনো শব্দ দিয়ে সার্চ করুন অথবা আমাদের কালেকশন দেখুন।</p>
            <a href="{{ route('shop') }}" class="bg-orange-500 text-white px-8 py-3 rounded-full font-bold hover:bg-orange-600 transition-all">সব পণ্য দেখুন</a>
        </div>
    @endif
</main>
@endsection