@foreach($products as $product)
<div class="col-md-3 mb-4">
    <div class="card h-100 shadow-sm position-relative border-0">
        
        {{-- Wishlist Toggle --}}
        @php
            // Check if product is in guest/user wishlist to set initial color
            $inWishlist = false; 
            // In a real scenario, you'd pass an array of wishlisted IDs from the controller
            // or check relationship: auth()->user()?->wishlist->contains($product->id)
        @endphp

        <i onclick="toggleWishlist({{ $product->id }}, this)"
           class="bi bi-heart-fill position-absolute top-0 end-0 m-2 {{ $inWishlist ? 'text-danger' : 'text-secondary' }}"
           style="cursor:pointer; font-size:20px; z-index: 10; text-shadow: 0 0 3px #fff;"></i>

        <a href="{{ url('product/' . $product->slug) }}" class="text-decoration-none text-dark">
            <img src="{{ asset('storage/uploads/' . $product->thumbnail) }}"
                 class="card-img-top rounded-top"
                 alt="{{ $product->name }}"
                 style="height:auto; object-fit:cover;">

            <div class="card-body pb-0">
                <h6 class="text-truncate" title="{{ $product->name }}">{{ $product->name }}</h6>
                <small class="text-muted">
                    {{ $product->category->name ?? 'Uncategorized' }}
                </small>
                <h5 class="text-primary mt-2">
                    ₹{{ number_format($product->price, 2) }}
                </h5>
            </div>
        </a>

        <div class="card-footer bg-white border-0 pt-0 pb-3">
            <button onclick="addToCart({{ $product->id }})"
                class="btn btn-outline-dark w-100 btn-sm fw-bold">
                <i class="bi bi-cart-plus me-1"></i> Add to Cart
            </button>
        </div>
    </div>
</div>
@endforeach