@foreach($produtos as $prod)
<div class="col-xl-4 col-md-6 mb-4" onclick="addProdutos('{{ $prod->id }}')" style="cursor: pointer;">
    <div class="card h-100 border-0 shadow-sm hover-scale transition-all overflow-hidden product-card">
        <div class="position-relative">
            <img src="{{$prod->img}}" class="card-img-top object-fit-cover" alt="{{$prod->nome}}" style="height: 200px; width: 100%;">
            
            @if($prod->precoComPromocao())
            <div class="position-absolute top-0 end-0 m-2">
                <span class="badge bg-danger rounded-pill shadow-sm animate-pulse">
                    <i class="ri-fire-line me-1"></i> Promoção
                </span>
            </div>
            @endif
        </div>
        
        <div class="card-body d-flex flex-column align-items-center text-center p-3">
            <h6 class="card-title fw-bold text-dark mb-2 text-truncate w-100" title="{{$prod->nome}}">
                {{$prod->nome}}
            </h6>
            
            <div class="mt-auto">
                @if($prod->precoComPromocao())
                    <div class="d-flex flex-column align-items-center">
                        <small class="text-decoration-line-through text-muted" style="font-size: 0.8rem;">
                            R$ {{ __moeda($prod->valor_unitario) }}
                        </small>
                        <span class="text-success fw-bold fs-5">
                            R$ {{ __moeda($prod->precoComPromocao()->valor) }}
                        </span>
                    </div>
                @else
                    @if($prod->valor_unitario > 0)
                    <span class="text-primary fw-bold fs-5">
                        R$ {{ __moeda($prod->valor_unitario) }}
                    </span>
                    @else
                    <span class="text-muted fw-bold">--</span>
                    @endif
                @endif
            </div>
        </div>
    </div>
</div>
@endforeach

<style>
    .hover-scale:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }
    .transition-all {
        transition: all 0.3s ease;
    }
    .product-card:active {
        transform: scale(0.98);
    }
    .object-fit-cover {
        object-fit: cover;
    }
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    .animate-pulse {
        animation: pulse 2s infinite;
    }
</style>