@props(['product' => null, 'image' => null, 'title' => null, 'price' => null, 'originalPrice' => null, 'hoverImage' => null])

@php
    $isOutOfStock = false;
    if ($product) {
        $image = $product->image ? asset('storage/' . $product->image) : asset('images/placeholder.svg');
        $title = $product->name;
        $slug = $product->slug;
        $minPrice = $product->min_price;
        $maxPrice = $product->max_price;
        $isOutOfStock = $product->isOutOfStock();
        $hoverImage = $product->images->skip(1)->first()?->image_path;
        if ($hoverImage) {
            $hoverImage = asset('storage/' . $hoverImage);
        }
        
        $hasDiscount = false;
        $discountMin = null;
        $discountMax = null;
        $regularMin = $minPrice;
        $regularMax = $maxPrice;
        
        // Check if variants have discounts
        $variantsWithDiscounts = $product->variants ? $product->variants->where('discount_price', '>', 0) : collect();
        if ($variantsWithDiscounts->count() > 0) {
            $hasDiscount = true;
            $discountMin = $variantsWithDiscounts->min('discount_price');
            $discountMax = $variantsWithDiscounts->max('discount_price');
            $regularMin = $product->variants->min('price');
            $regularMax = $product->variants->max('price');
        } elseif ($product->discount_price > 0 && $product->discount_price < $product->price) {
            $hasDiscount = true;
            $discountMin = $product->discount_price;
            $discountMax = $product->discount_price;
            $regularMin = $product->price;
            $regularMax = $product->price;
        }
    } else {
        $slug = '#';
        $minPrice = $price;
        $maxPrice = $price;
        // If image is already a full URL (like in welcome.blade.php), don't prepend storage/
        $imagePath = $image;
        if (!str_starts_with($imagePath, 'http') && !str_starts_with($imagePath, 'asset')) {
            $imagePath = asset('storage/' . $imagePath);
        }
        $image = $imagePath;
        
        if ($hoverImage) {
            $hoverImagePath = $hoverImage;
            if (!str_starts_with($hoverImagePath, 'http') && !str_starts_with($hoverImagePath, 'asset')) {
                $hoverImagePath = asset('storage/' . $hoverImagePath);
            }
            $hoverImage = $hoverImagePath;
        }
    }
@endphp

<a href="{{ $product ? route('product.details', $slug) : '#' }}" class="block group cursor-pointer overflow-hidden rounded-2xl bg-white shadow-[0_2px_10px_rgba(15,23,42,0.06)] transition-all duration-500 hover:shadow-[0_6px_20px_rgba(15,23,42,0.09)]">
    <div class="relative aspect-[3/4] overflow-hidden bg-gray-100">
        @if($isOutOfStock)
            <div class="absolute left-2 top-2 z-20 rounded-full bg-gray-900/92 px-2.5 py-1 text-[9px] font-black uppercase tracking-widest text-white shadow-sm ring-1 ring-white/10">
                {{ __('Out of stock') }}
            </div>
        @endif
        <!-- Product Image -->
        <img src="{{ $image }}" alt="{{ $title }}" class="w-full h-full object-cover transition-all duration-700 {{ $hoverImage ? 'group-hover:opacity-0' : '' }} {{ $isOutOfStock ? 'grayscale-[0.35]' : '' }}">
        
        @if($hoverImage)
        <!-- Hover Image -->
        <img src="{{ $hoverImage }}" alt="{{ $title }} hover" class="absolute inset-0 w-full h-full object-cover transition-all duration-700 opacity-0 group-hover:opacity-100">
        @endif
    </div>
    
    <div class="p-4 text-center">
        {{-- Fixed 2-line slot: single-line titles stay vertically centered so cards stay even --}}
        <div class="mb-2 flex h-[2.65rem] items-center justify-center px-0.5">
            <h3 class="w-full text-sm font-bold text-gray-800 line-clamp-2 break-words leading-snug uppercase tracking-tight text-center">{{ $title }}</h3>
        </div>
        <div class="flex flex-wrap items-center justify-center gap-2 mb-1">
            @if(isset($hasDiscount) && $hasDiscount)
                <span class="text-gray-900 font-extrabold text-[15px]">
                    @if($discountMin == $discountMax)
                        ৳{{ number_format((float)$discountMin) }}
                    @else
                        ৳{{ number_format((float)$discountMin) }} - ৳{{ number_format((float)$discountMax) }}
                    @endif
                </span>
                <span class="text-gray-400 font-medium text-[11px] line-through">
                    @if($regularMin == $regularMax)
                        ৳{{ number_format((float)$regularMin) }}
                    @else
                        ৳{{ number_format((float)$regularMin) }} - ৳{{ number_format((float)$regularMax) }}
                    @endif
                </span>
            @else
                <span class="text-gray-900 font-extrabold text-[15px]">
                    @if($minPrice == $maxPrice)
                        ৳{{ number_format((float)$minPrice) }}
                    @else
                        ৳{{ number_format((float)$minPrice) }} - ৳{{ number_format((float)$maxPrice) }}
                    @endif
                </span>
            @endif
        </div>
        <div class="mt-3 opacity-90 group-hover:opacity-100 transition-opacity duration-300">
            @if($isOutOfStock)
                <span class="block w-full cursor-not-allowed py-2 px-4 bg-gray-200 text-gray-500 text-xs font-bold uppercase tracking-widest rounded-lg">
                    {{ __('Out of stock') }}
                </span>
            @else
                <span class="block w-full py-2 px-4 bg-primary text-white text-xs font-bold uppercase tracking-widest rounded-lg shadow-sm group-hover:shadow-md group-hover:bg-primary-dark transition-all duration-300">
                    {{ __('Order Now') }}
                </span>
            @endif
        </div>
    </div>
</a>