@foreach($products as $product)
    <div class="product-card glass">
        <div class="product-image-wrapper">
            <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="product-image">
            @if($product->stock <= 0)
                <span class="product-badge-stock" style="background-color: var(--color-error);">Agotado</span>
            @elseif($product->stock <= 5)
                <span class="product-badge-stock" style="background-color: var(--color-warning);">¡Últimas {{ $product->stock }} unidades!</span>
            @else
                <span class="product-badge-stock">Stock: {{ $product->stock }}</span>
            @endif
        </div>

        <div class="product-info">
            <h3 class="product-name">{{ $product->name }}</h3>
            <p class="product-description">{{ $product->description }}</p>
            
            <div class="product-footer">
                <span class="product-price">${{ number_format($product->price, 2) }}</span>
                
                @if($product->stock > 0)
                    <form action="{{ route('cart.add', $product) }}" method="POST">
                        @csrf
                        <input type="hidden" name="quantity" value="1">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" 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>
                            Añadir
                        </button>
                    </form>
                @else
                    <button class="btn btn-outline btn-sm" disabled style="opacity: 0.6; cursor: not-allowed;">
                        Sin stock
                    </button>
                @endif
            </div>
        </div>
    </div>
@endforeach