<div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 group overflow-hidden">
    <a href="{{ route('products.show', $product->id) }}" class="block">
        <div class="relative aspect-square bg-gray-100 overflow-hidden">
            @if($product->image_url)
                <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
            @else
                <div class="w-full h-full flex items-center justify-center">
                    <span class="text-5xl text-gray-300">📦</span>
                </div>
            @endif
            
            <!-- Badges -->
            <div class="absolute top-2 left-2 flex flex-col gap-1">
                @if($product->is_featured)
                    <span class="px-2 py-1 bg-yellow-400 text-yellow-900 text-xs font-semibold rounded">Featured</span>
                @endif
                @if($product->compare_price && $product->compare_price > $product->price)
                    <span class="px-2 py-1 bg-red-500 text-white text-xs font-semibold rounded">
                        -{{ round((($product->compare_price - $product->price) / $product->compare_price) * 100) }}%
                    </span>
                @endif
            </div>
            
            <!-- Quick Add Button -->
            @auth
                @if(auth()->user()->user_type === 'company')
                    <form action="{{ route('cart.add') }}" method="POST" class="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <input type="hidden" name="quantity" value="1">
                        <button type="submit" class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 shadow-lg">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                            </svg>
                        </button>
                    </form>
                @endif
            @endauth
        </div>
    </a>
    
    <div class="p-4">
        <p class="text-xs text-gray-500 mb-1">{{ $product->supplier->company_name ?? 'Unknown Supplier' }}</p>
        <a href="{{ route('products.show', $product->id) }}">
            <h3 class="font-medium text-gray-800 line-clamp-2 hover:text-blue-600 transition mb-2">{{ $product->name }}</h3>
        </a>
        
        <!-- Rating -->
        <div class="flex items-center gap-1 mb-2">
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
                <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
            </svg>
            <span class="text-sm text-gray-600">{{ number_format($product->rating, 1) }}</span>
            @if($product->stock_quantity > 0)
                <span class="text-xs text-green-600 ml-auto">In Stock</span>
            @else
                <span class="text-xs text-red-600 ml-auto">Out of Stock</span>
            @endif
        </div>
        
        <!-- Price -->
        <div class="flex items-center gap-2">
            <span class="text-lg font-bold text-blue-600">R {{ number_format($product->price, 2) }}</span>
            @if($product->compare_price && $product->compare_price > $product->price)
                <span class="text-sm text-gray-400 line-through">R {{ number_format($product->compare_price, 2) }}</span>
            @endif
        </div>
    </div>
</div>
