@foreach($products as $product)
    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group">
        <div class="relative aspect-square">
            @if($product->images && count($product->images) > 0)
                <img src="{{ storage_url($product->images[0]) }}" 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 bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
                    <span class="text-4xl">🐟</span>
                </div>
            @endif
            
            @if($product->is_featured)
                <div class="absolute top-2 left-2 bg-gradient-to-r from-yellow-400 to-orange-400 text-white px-2 py-1 rounded-md text-xs font-bold shadow-md">
                    ⭐ বাছাই করা
                </div>
            @endif
            
            @if($product->original_price && $product->original_price > $product->price)
                <div class="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 rounded-md text-xs font-bold shadow-md">
                    -{{ round((($product->original_price - $product->price) / $product->original_price) * 100) }}%
                </div>
            @endif
            
            <!-- Quick View Button -->
            <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
                <button onclick="openQuickView({{ $product->id }}); return false;" 
                        class="bg-white text-gray-900 px-3 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors text-xs shadow-lg">
                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                    দ্রুত দেখুন
                </button>
            </div>
        </div>
        
        <div class="p-3">
            <p class="text-xs text-gray-500 mb-1">{{ $product->category->name }}</p>
            <h3 class="font-semibold text-gray-900 text-sm mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors leading-tight">
                {{ $product->name }}
            </h3>
            
            <div class="mb-3">
                <div class="flex items-baseline gap-2">
                    <span class="text-lg font-bold text-blue-600">৳{{ number_format($product->price, 0) }}</span>
                    <span class="text-xs text-gray-500">/{{ $product->unit }}</span>
                </div>
                @if($product->original_price && $product->original_price > $product->price)
                    <div class="text-xs text-gray-400 line-through">
                        ৳{{ number_format($product->original_price, 0) }}
                    </div>
                @endif
            </div>

            <button onclick="openQuickView({{ $product->id }}); return false;" 
                    class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors text-xs font-semibold flex items-center justify-center">
                <span class="flex items-center justify-center gap-1">
                    <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="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"></path>
                    </svg>
                    কার্টে যোগ করুন
                </span>
            </button>
        </div>
    </div>
@endforeach
