{{-- TradeIndia-style Product Card --}}
<style>
    .tradeindia-card {
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        transition: box-shadow 0.3s ease;
    }
    .tradeindia-card:hover {
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    }
    .product-image-section {
        position: relative;
    }
    .product-image-section .country-flag {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    .product-image-section img.main-img {
        width: 100%;
        max-height: 280px;
        object-fit: contain;
        border-radius: 8px;
        background: #f8f9fa;
    }
    .product-details h5 {
        font-size: 1.25rem;
        font-weight: 700;
        color: #0066cc;
        margin-bottom: 15px;
    }
    .price-box {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
    }
    .price-box .price {
        font-size: 1.4rem;
        font-weight: 800;
        color: #333;
    }
    .price-box .price span {
        font-size: 0.9rem;
        font-weight: 500;
        color: #666;
    }
    .price-box .get-quote-btn {
        background: transparent;
        border: 2px solid #0066cc;
        color: #0066cc;
        padding: 8px 25px;
        border-radius: 25px;
        font-weight: 600;
        transition: all 0.3s;
    }
    .price-box .get-quote-btn:hover {
        background: #0066cc;
        color: #fff;
    }
    .specs-table {
        width: 100%;
    }
    .specs-table tr {
        border-bottom: 1px solid #f0f0f0;
    }
    .specs-table tr:last-child {
        border-bottom: none;
    }
    .specs-table td {
        padding: 8px 0;
        font-size: 0.9rem;
    }
    .specs-table td:first-child {
        color: #888;
        width: 120px;
    }
    .specs-table td:last-child {
        color: #333;
        font-weight: 500;
    }
    .more-details-link {
        color: #0066cc;
        font-weight: 600;
        font-size: 0.9rem;
        text-decoration: none;
    }
    .more-details-link:hover {
        text-decoration: underline;
    }
    
    /* Seller Info Section */
    .seller-info-section {
        padding-left: 20px;
        border-left: 1px solid #e8e8e8;
    }
    .seller-info-section h6 {
        font-size: 1.1rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 5px;
    }
    .seller-location {
        font-size: 0.85rem;
        color: #666;
        margin-bottom: 5px;
    }
    .seller-business-type {
        font-size: 0.8rem;
        color: #888;
        margin-bottom: 5px;
    }
    .seller-established {
        font-size: 0.8rem;
        color: #888;
        margin-bottom: 12px;
    }
    .seller-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 15px;
    }
    .seller-badges .badge-trusted {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.75rem;
        color: #2e7d32;
    }
    .seller-badges .badge-trusted i {
        color: #4caf50;
    }
    .seller-badges .badge-super {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.75rem;
        color: #f57c00;
    }
    .seller-badges .badge-years {
        background: #f5f5f5;
        color: #666;
        padding: 3px 10px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .view-mobile-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px;
        border: 2px solid #0066cc;
        border-radius: 8px;
        background: #fff;
        color: #0066cc;
        font-weight: 600;
        font-size: 0.95rem;
        margin-bottom: 10px;
        transition: all 0.3s;
        cursor: pointer;
    }
    .view-mobile-btn:hover {
        background: #f0f7ff;
    }
    .view-mobile-btn.disabled {
        border-color: #ccc;
        color: #999;
        cursor: not-allowed;
    }
    .contact-supplier-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px;
        border: none;
        border-radius: 8px;
        background: linear-gradient(135deg, #0066cc 0%, #004d99 100%);
        color: #fff;
        font-weight: 700;
        font-size: 1rem;
        transition: all 0.3s;
        cursor: pointer;
    }
    .contact-supplier-btn:hover {
        background: linear-gradient(135deg, #004d99 0%, #003366 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,102,204,0.3);
    }
    .contact-supplier-btn i.arrow {
        font-size: 1.2rem;
    }
    
    @media (max-width: 991px) {
        .seller-info-section {
            padding-left: 0;
            border-left: none;
            border-top: 1px solid #e8e8e8;
            padding-top: 20px;
            margin-top: 20px;
        }
    }
</style>

@php
    $seller = $product->seller;
    $plan = $seller->plan;
    $hasSubscription = $seller->hasActiveSubscription();
    $showContact = $hasSubscription && ($plan?->show_contact_details ?? false);
    
    // Calculate years in business
    $establishedYear = $seller->created_at?->year ?? now()->year;
    $yearsInBusiness = now()->year - $establishedYear;
    if ($yearsInBusiness < 1) $yearsInBusiness = 1;
    
    // Get first image
    $galleryImages = $product->images_json;
    if (is_string($galleryImages)) {
        $decoded = json_decode($galleryImages, true);
        $galleryImages = (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) ? $decoded : [['original' => $galleryImages]];
    }
    if (!is_array($galleryImages)) $galleryImages = [];
    $mainImage = !empty($galleryImages) ? asset('storage/' . ($galleryImages[0]['original'] ?? '')) : 'https://placehold.co/300x300?text=No+Image';
    
    // Get specs from product
    $specs = [];
    if ($product->moq) $specs['MOQ'] = $product->moq . ' ' . ($product->unit->name ?? 'Pieces');
    if ($product->specifications && is_array($product->specifications)) {
        foreach (array_slice($product->specifications, 0, 6) as $key => $value) {
            $specs[$key] = $value;
        }
    }
@endphp

<div class="tradeindia-card">
    <div class="row g-4">
        {{-- Left: Product Image --}}
        <div class="col-lg-3">
            <div class="product-image-section">
                <img src="{{ asset('images/india-flag.png') }}" alt="India" class="country-flag" onerror="this.src='https://flagcdn.com/w40/in.png'">
                <img src="{{ $mainImage }}" alt="{{ $product->name }}" class="main-img">
            </div>
        </div>
        
        {{-- Middle: Product Details --}}
        <div class="col-lg-5">
            <div class="product-details">
                <h5>
                    <a href="{{ route('public.products.show', $product->slug) }}" class="text-dark text-decoration-none">
                        {{ $product->name }}
                    </a>
                </h5>
                
                <!-- MOQ Section - Highlighted Boxes -->
                <!-- MOQ Section - Highlighted Boxes -->
                <div class="tw-mb-4 tw-space-y-2">
                    <!-- Platform MOQ Range Box -->
                    <!-- Platform MOQ Range Box -->
                    <div class="tw-mb-1">
                        <div class="tw-flex tw-items-center tw-gap-2">
                            <i class="bi bi-box-seam tw-text-orange-600 tw-text-xl"></i>
                            <span class="tw-text-base tw-font-medium tw-text-gray-700 tw-whitespace-nowrap">
                                Platform MOQ Range: <span class="tw-text-black tw-font-semibold tw-text-lg">{{ \App\Models\Setting::getValue('min_moq', 10) }} - {{ \App\Models\Setting::getValue('max_moq', 150) }}</span>
                            </span>
                        </div>
                    </div>
                    
                    <!-- Product MOQ Box -->
                    <div class="">
                        <div class="tw-flex tw-items-center tw-gap-2">
                            <i class="bi bi-box-seam tw-text-orange-600 tw-text-xl"></i>
                            <span class="tw-text-base tw-font-medium tw-text-gray-700 tw-whitespace-nowrap">
                                Product MOQ: <span class="tw-text-black tw-font-semibold tw-text-lg">{{ $product->moq ?? 1 }} {{ $product->unit->name ?? 'Pieces' }}</span>
                            </span>
                        </div>
                    </div>
                    
                    <!-- Delivery Notice -->
                    <div class="tw-flex tw-items-center tw-gap-2 tw-text-blue-600 tw-mt-2">
                        <i class="bi bi-truck tw-text-lg"></i>
                        <span class="tw-text-sm tw-font-bold">Seller handles delivery</span>
                    </div>
                </div>
                
                <div class="price-box">
                    <div class="price">
                        Price: {{ $product->currency == 'USD' ? '$' : '₹' }}{{ number_format($product->price, 0) }}
                        <span>INR/{{ $product->unit->name ?? 'Piece' }}</span>
                    </div>
                    <a href="#inquiryForm" class="get-quote-btn">Get Best Quote</a>
                </div>
                
                <table class="specs-table">
                    @foreach($specs as $label => $value)
                        @if($label !== 'MOQ')
                        <tr>
                            <td>{{ $label }}</td>
                            <td>{{ $value }}</td>
                        </tr>
                        @endif
                    @endforeach
                </table>
                
                <a href="{{ route('public.products.show', $product->slug) }}" class="more-details-link mt-3 d-inline-block">
                    More details...
                </a>
            </div>
        </div>
        
        {{-- Right: Seller Info --}}
        <div class="col-lg-4">
            <div class="seller-info-section h-100 d-flex flex-column">
                <h6>{{ $seller->company_name ?? 'Verified Seller' }}</h6>
                <div class="seller-location">
                    <i class="bi bi-geo-alt"></i> {{ $seller->city ?? 'India' }}
                </div>
                <div class="seller-business-type">
                    Business Type: {{ is_array($seller->business_type) ? implode(' | ', $seller->business_type) : ($seller->business_type ?? 'Manufacturer') }}
                </div>
                <div class="seller-established">
                    Established In: {{ $establishedYear }}
                </div>
                
                <div class="seller-badges">
                    @if($seller->is_verified || in_array($seller->kyc_status, ['submitted', 'verified']))
                        <div class="badge-trusted" style="color: #198754;">
                            <i class="bi bi-check-circle-fill" style="color: #198754;"></i> KYC Submitted
                        </div>
                    @else
                        <div class="badge-trusted" style="color: #6c757d;">
                            <i class="bi bi-exclamation-circle" style="color: #6c757d;"></i> KYC Pending
                        </div>
                    @endif
                    @if($hasSubscription && ($plan?->is_featured ?? false))
                        <div class="badge-super">
                            <i class="bi bi-star-fill"></i> Super Seller
                        </div>
                    @endif
                    <div class="badge-years">{{ $yearsInBusiness }} Years</div>
                </div>
                
                <div class="mt-auto">
                    @if($showContact)
                        <button type="button" class="view-mobile-btn" data-bs-toggle="modal" data-bs-target="#contactModal{{ $product->id }}">
                            <i class="bi bi-telephone"></i> View Mobile Number
                        </button>
                    @else
                        <button type="button" class="view-mobile-btn disabled" disabled>
                            <i class="bi bi-lock"></i> Contact Locked
                        </button>
                    @endif
                    
                    <a href="{{ route('public.products.show', $product->slug) }}#inquiryForm" class="contact-supplier-btn text-decoration-none">
                        <span>Contact Supplier</span>
                        <span class="text-white-50 small">Ask for a Quote</span>
                        <i class="bi bi-arrow-up-right arrow"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Contact Modal for this product --}}
@if($showContact)
<div class="modal fade" id="contactModal{{ $product->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-bold">Contact Details</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <div class="mb-3">
                    <i class="bi bi-telephone-fill text-primary fs-2"></i>
                </div>
                <p class="fw-bold fs-5 mb-1">{{ $seller->mobile ?? $seller->user->phone ?? 'N/A' }}</p>
                <p class="text-muted small">{{ $seller->company_name }}</p>
                <div class="d-grid gap-2 mt-3">
                    <a href="tel:{{ $seller->mobile ?? $seller->user->phone }}" class="btn btn-primary">
                        <i class="bi bi-telephone me-2"></i> Call Now
                    </a>
                    @php
                        $phone = preg_replace('/[^0-9]/', '', $seller->mobile ?? $seller->user->phone ?? '');
                        $waMsg = urlencode("Hi, I'm interested in {$product->name}. Please share details.");
                    @endphp
                    <a href="https://wa.me/{{ $phone }}?text={{ $waMsg }}" target="_blank" class="btn btn-success">
                        <i class="bi bi-whatsapp me-2"></i> WhatsApp
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endif