<div class="row g-0">
    <div class="col-md-6">
        <div class="tw-relative tw-pt-[100%] tw-bg-gray-100 tw-overflow-hidden">
            <img src="{{ $product->main_image }}" 
                 class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-object-contain" 
                 alt="{{ $product->name }}">
            @if($product->isPromoted())
                <span class="position-absolute top-0 end-0 m-2 badge px-3 py-2" 
                      style="background: {{ $product->promotion->package->badge_color }};">
                    {{ $product->promotion->package->badge_text }}
                </span>
            @endif
        </div>
    </div>
    <div class="col-md-6">
        <div class="p-4">
            <div class="mb-2">
                <span class="badge bg-light text-dark border">{{ $product->category->name ?? 'General' }}</span>
                @if($product->seller->is_verified)
                    <span class="badge bg-success bg-opacity-10 text-success border border-success ms-1">Verified Seller</span>
                @endif
            </div>
            
            <h4 class="fw-bold mb-2">{{ $product->name }}</h4>
            
            <div class="mb-3">
                <span class="h3 fw-bold text-primary">{{ $product->currency == 'USD' ? '$' : '₹' }}{{ number_format($product->price, 2) }}</span>
                <div class="mt-2 tw-space-y-2">
                    <!-- Platform MOQ Box -->
                    <div style="">
                        <div class="tw-flex tw-items-center tw-gap-2">
                            <i class="bi bi-box-seam text-orange-600" style="font-size: 1rem;"></i>
                            <span class="tw-text-sm tw-font-medium" style="color: #374151; white-space: nowrap;">
                                Platform MOQ Range: <span style="color: #000; font-weight: 600; font-size: 1rem;">{{ \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-2">
                            <i class="bi bi-box-seam text-orange-600" style="font-size: 1rem;"></i>
                            <span class="tw-text-sm tw-font-medium" style="color: #374151; white-space: nowrap;">
                                Product MOQ: <span style="color: #000; font-weight: 600; font-size: 1rem;">{{ $product->moq }} {{ $product->unit->name ?? 'Units' }}</span>
                            </span>
                        </div>
                    </div>
                    <div class="text-primary small fw-bold">
                        <i class="bi bi-truck me-1"></i>Seller handles delivery
                    </div>
                </div>
            </div>
            
            <p class="text-muted mb-4 small">
                {{ Str::limit($product->description, 150) }}
            </p>
            
            <div class="d-grid gap-2">
                <a href="{{ route('public.products.show', $product->slug) }}" class="btn btn-primary fw-bold">
                    View Full Details
                </a>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
            </div>
            
            <hr class="my-3">
            
            <div class="d-flex align-items-center">
                <div class="me-3">
                    @if($product->seller->logo)
                        <img src="{{ asset('storage/' . $product->seller->logo) }}" class="rounded-circle" width="40" height="40" alt="Seller">
                    @else
                        <div class="rounded-circle bg-light d-flex align-items-center justify-content-center fw-bold" style="width: 40px; height: 40px;">
                            {{ substr($product->seller->company_name, 0, 1) }}
                        </div>
                    @endif
                </div>
                <div>
                    <small class="text-muted d-block">Sold by</small>
                    <strong>{{ $product->seller->company_name }}</strong>
                </div>
            </div>
        </div>
    </div>
</div>
