@props(['product'])
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition group" data-aos="fade-up">
    <a href="{{ route('products.show', $product->slug) }}" class="block relative">
        <img src="{{ asset($product->primary_image) }}" alt="{{ $product->name }}" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
        @if($product->old_price && $product->old_price > $product->price)
            <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">
                -{{ round((1 - $product->price / $product->old_price) * 100) }}%
            </span>
        @endif
    </a>
    <div class="p-4">
        <h3 class="text-lg font-semibold truncate"><a href="{{ route('products.show', $product->slug) }}" class="hover:text-primary-500">{{ $product->name }}</a></h3>
        <div class="flex items-center mt-2">
            <span class="text-xl font-bold text-primary-500">{{ number_format($product->price, 2) }} {{ session('currency_symbol', 'BDT') }}</span>
            @if($product->old_price)
                <span class="ml-2 text-sm line-through text-gray-400">{{ number_format($product->old_price, 2) }} {{ session('currency_symbol', 'BDT') }}</span>
            @endif
        </div>
        <form action="{{ route('cart.add') }}" method="POST" class="mt-3">
            @csrf
            <input type="hidden" name="product_id" value="{{ $product->id }}">
            <input type="hidden" name="quantity" value="1">
            <button type="submit" class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-md transition">{{ __('Add to Cart') }}</button>
        </form>
    </div>
</div>