@forelse($products as $product)
    <div class="plp-card" id="plp-card-{{ $product->id }}">
        <div class="plp-image-wrap">
            <div class="wishlist-heart">
                <svg class="wishlist-btn" data-id="{{ $product->id }}" style="cursor:pointer;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="{{ in_array($product->id, session()->get('wishlist', [])) ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
            </div>
            @if($product->product_type || $product->status)
            <span class="plp-badge">{{ $product->product_type ?? $product->status }}</span>
            @endif
            
            @php
                $images = [];
                if (!empty($product->image)) {
                    $decoded = json_decode($product->image, true);
                    $images = is_array($decoded) ? $decoded : [$product->image];
                } else {
                    $images = ['default-placeholder.png'];
                }
                $firstImg = trim($images[0]);
                $imgSrc = str_starts_with($firstImg, 'http') ? $firstImg : asset('assets/images/product/' . $firstImg);
            @endphp
            <a href="{{ route('product.show', $product->id) }}" class="plp-img-link">
                <img src="{{ $imgSrc }}" alt="{{ $product->name }}" class="plp-main-img" onerror="this.src='{{ asset('assets/images/default-placeholder.png') }}'">
            </a>
        </div>
        <div class="plp-info">
            <h3><a href="{{ route('product.show', $product->id) }}" class="plp-title-link" style="text-decoration: none; color: inherit;">{{ $product->name }}</a></h3>
            <p class="plp-price">$ {{ $product->price }} USD</p>
            @if($product->total_carat)
            <p class="plp-carat">Carat : {{ $product->total_carat }}</p>
            @endif
            <div class="plp-options">
                <div class="plp-shapes">
                    @php
                        $shapeString = $product->stone_shape ? $product->stone_shape : 'round,oval,emerald,cushion,pear';
                        $shapesArr = array_filter(array_map('trim', explode(',', $shapeString)));
                    @endphp
                    @foreach($shapesArr as $index => $shape)
                    @php $shapeClean = str_replace(' cut', '', strtolower($shape)); @endphp
                    <img src="{{ asset('assets/images/shapes/' . $shapeClean . '.png') }}" class="shape-icon {{ $index == 0 ? 'active' : '' }}" alt="{{ $shapeClean }}" title="{{ $shape }}" onerror="this.style.display='none'">
                    @endforeach
                </div>
                <div class="plp-metals">
                    @php
                        $displayedMetals = [];
                    @endphp
                    @foreach($product->variants ?? [$product] as $variant)
                        @php
                            $metal = current(array_filter(array_map('trim', explode(',', $variant->metal ?? '14K Yellow Gold'))));
                            if(in_array($metal, $displayedMetals)) continue;
                            $displayedMetals[] = $metal;
                            
                            $mClass = 'yellow-gold';
                            $mLabel = 'YG';
                            $metalLower = strtolower($metal);
                            if(str_contains($metalLower, 'white')) { $mClass = 'white-gold'; $mLabel = 'WG'; }
                            if(str_contains($metalLower, 'rose')) { $mClass = 'rose-gold'; $mLabel = 'RG'; }
                            if(str_contains($metalLower, 'platinum') || str_contains($metalLower, 'pt')) { $mClass = 'platinum'; $mLabel = 'PL'; }
                            
                            if(preg_match('/(\d+k)/i', $metal, $matches)) {
                                $mLabel = strtoupper($matches[1]);
                            }

                            // Variant image
                            $vImages = [];
                            if (!empty($variant->image)) {
                                $vDec = json_decode($variant->image, true);
                                $vImages = is_array($vDec) ? $vDec : [$variant->image];
                            } else {
                                $vImages = ['default-placeholder.png'];
                            }
                            $vFirstImg = trim($vImages[0]);
                            $vImgSrc = str_starts_with($vFirstImg, 'http') ? $vFirstImg : asset('assets/images/product/' . $vFirstImg);
                        @endphp
                        <span class="metal-swatch dynamic-swatch {{ $mClass }} {{ $variant->id == $product->id ? 'active' : '' }}" 
                              data-img="{{ $vImgSrc }}" 
                              data-link="{{ route('product.show', $variant->id) }}" 
                              data-price="{{ $variant->price }}"
                              title="{{ $metal }}">{{ $variant->id == $product->id ? $mLabel : '' }}</span>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @empty
    <div style="grid-column: span 4; text-align: center; padding: 50px;" class="no-products-msg">
        <p>No products found. Please upload via Admin Dashboard.</p>
    </div>
    @endforelse