@if($relatedProducts->count() > 0)
<div class="mt-5">
    <h3 class="fw-bold mb-4">Related Products</h3>
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
        @foreach($relatedProducts as $related)
            <div class="col">
                <div class="card h-100 shadow-sm border-0">
                    <div class="position-relative">
                        <img src="{{ $related->main_image }}" 
                             class="card-img-top" alt="{{ $related->name }}" style="height: 200px; object-fit: cover;">
                        @if($related->seller->hasActiveSubscription())
                            <span class="position-absolute top-0 end-0 badge bg-primary m-2">Verified Seller</span>
                        @endif
                    </div>
                    <div class="card-body">
                        <h5 class="card-title text-truncate">
                            <a href="{{ route('public.products.show', $related->slug) }}" class="text-decoration-none text-dark stretched-link">
                                {{ $related->name }}
                            </a>
                        </h5>
                        <p class="card-text text-primary fw-bold mb-1">{{ $related->currency == 'USD' ? '$' : '₹' }}{{ number_format($related->price, 2) }}</p>
                        <div class="tw-mb-2 tw-space-y-1.5">
                            <!-- Platform MOQ Box -->
                            <div style="">
                                <div class="tw-flex tw-items-center tw-gap-1.5">
                                    <i class="bi bi-box-seam text-orange-600" style="font-size: 0.85rem;"></i>
                                    <span class="tw-text-xs tw-font-medium" style="color: #374151; white-space: nowrap;">
                                        Platform MOQ Range: <span style="color: #000; font-weight: 600;">{{ \App\Models\Setting::getValue('min_moq', 10) }} - {{ \App\Models\Setting::getValue('max_moq', 150) }}</span>
                                    </span>
                                </div>
                            </div>
                            <!-- Product MOQ Box -->
                            <div style="">
                                <div class="tw-flex tw-items-center tw-gap-1.5">
                                    <i class="bi bi-box-seam text-orange-600" style="font-size: 0.85rem;"></i>
                                    <span class="tw-text-xs tw-font-medium" style="color: #374151; white-space: nowrap;">
                                        Product MOQ: <span style="color: #000; font-weight: 600;">{{ $related->moq }} {{ $related->unit->name ?? 'Pieces' }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <small class="tw-text-blue-600 d-block mb-1 tw-font-bold" style="font-size: 0.75rem;"><i class="bi bi-truck me-1"></i>Seller handles delivery</small>
                        <small class="text-muted d-block mb-2">{{ $related->seller->company_name }}</small>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endif