@php
    $price = number_format($product->price, 0);
    $comparePrice = $product->compare_price ? number_format($product->compare_price, 0) : null;
    $salePrice = $product->sale_price ? number_format($product->sale_price, 0) : null;
    $route = route('product.show', $product->slug);
    $cartRoute = route('cart.add');
    $img = $product->thumbnail_url;
    $name = $product->name;
    $id = $product->id;
    $isOutOfStock = $product->stock_quantity <= 0;
    $discountPct = ($product->sale_price && $product->price > 0)
        ? round((($product->price - $product->sale_price) / $product->price) * 100)
        : null;
@endphp

<div class="flex flex-col relative w-full group rounded-2xl bg-white overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
    {{-- Image --}}
    <a href="{{ $route }}" class="block relative aspect-square overflow-hidden bg-[#f8f8f8] p-3">
        {{-- Wishlist --}}
        <button type="button" class="absolute top-2 right-2 w-7 h-7 z-10 flex items-center justify-center bg-white/80 backdrop-blur rounded-full shadow text-gray-300 hover:text-red-500 hover:bg-white transition-all duration-200">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
        </button>
        {{-- Discount Badge --}}
        @if($discountPct)
        <span class="absolute top-2 left-2 z-10 bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-md">-{{ $discountPct }}%</span>
        @endif
        <img src="{{ $img }}"
             onerror="this.onerror=null; this.src='https://images.unsplash.com/photo-1558066110-bf9b8b0e71ce?q=80&w=400&auto=format&fit=crop';"
             class="w-full h-full object-contain mix-blend-multiply group-hover:scale-105 transition-transform duration-500"
             alt="{{ $name }}">
    </a>

    {{-- Info --}}
    <div class="flex flex-col flex-grow px-3 pb-3 pt-2">
        <a href="{{ $route }}" class="text-[13px] font-semibold text-[#222] hover:text-[#2f9eb8] line-clamp-2 leading-snug mb-2 transition-colors">{{ $name }}</a>

        {{-- Stars --}}
        <div class="flex items-center gap-1 mb-2">
            <div class="flex text-yellow-400">
                @for($s=1;$s<=5;$s++)
                <svg class="w-3 h-3 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                @endfor
            </div>
            <span class="text-[10px] text-gray-400">(0)</span>
        </div>

        {{-- Price --}}
        <div class="flex items-baseline gap-1.5 mb-3">
            @if($salePrice)
                <span class="text-[15px] font-bold text-red-600">৳{{ $salePrice }}</span>
                <span class="text-[11px] text-gray-400 line-through">৳{{ $price }}</span>
            @else
                <span class="text-[15px] font-bold text-gray-900">৳{{ $price }}</span>
            @endif
        </div>

        {{-- Buttons --}}
        @if($isOutOfStock)
            <div class="w-full py-2 rounded-xl bg-gray-100 text-gray-400 text-[12px] font-semibold text-center cursor-not-allowed select-none">
                Out of Stock
            </div>
        @else
            <div class="flex items-center gap-1.5">
                {{-- Order Now --}}
                <form action="{{ $cartRoute }}" method="POST" class="flex-1">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $id }}">
                    <input type="hidden" name="quantity" value="1">
                    <input type="hidden" name="checkout" value="1">
                    <button type="submit"
                        class="w-full py-2 rounded-xl font-bold text-[11px] sm:text-[12px] transition-all duration-200
                               bg-gradient-to-r from-[#2f9eb8] to-[#1d7fa0] text-white
                               hover:from-[#257d91] hover:to-[#175f78] hover:shadow-md active:scale-95">
                        ⚡ Order Now
                    </button>
                </form>
                {{-- Add to Cart --}}
                <form action="{{ $cartRoute }}" method="POST" class="flex-1">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $id }}">
                    <input type="hidden" name="quantity" value="1">
                    <button type="submit"
                        class="w-full py-2 rounded-xl font-bold text-[11px] sm:text-[12px] transition-all duration-200
                               border-2 border-[#2f9eb8] text-[#2f9eb8]
                               hover:bg-[#2f9eb8] hover:text-white hover:shadow-md active:scale-95
                               flex items-center justify-center gap-1">
                        <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                        <span class="hidden xs:inline">Cart</span>
                        <span class="xs:hidden">+Cart</span>
                    </button>
                </form>
            </div>
        @endif
    </div>
</div>