{{-- Sharable Product Card Modal --}}
<style>
    /* Professional Product Share Card Styles (Fixed Static Size) */
    .share-card-container {
        background: #eef2f6; /* Light gray-blue background like reference */
        padding: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        overflow-x: auto; /* Allow horizontal scroll on small screens */
    }
    .product-share-card {
        background: #fff;
        border-radius: 12px; /* Smooth rounded corners */
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        overflow: hidden;
        /* FIXED STATIC SIZE - Same on all devices */
        width: 700px !important;
        min-width: 700px !important;
        max-width: 700px !important;
        height: 450px !important;
        min-height: 450px !important;
        max-height: 450px !important;
        display: flex;
        padding: 20px; /* Padding inside the white card */
        gap: 25px;
        flex-shrink: 0; /* Prevent shrinking */
    }
    
    /* Left Side - Image */
    .share-card-image {
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        height: 410px;
        background: #f0f0f0; /* Light gray placeholder bg */
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .share-card-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
    }

    /* Right Side - Content */
    .share-card-content {
        width: 375px;
        min-width: 375px;
        max-width: 375px;
        height: 410px;
        display: flex;
        flex-direction: column;
        position: relative;
        flex-shrink: 0;
        overflow: hidden;
    }

    /* Typography */
    .share-card-title {
        font-size: 1.4rem;
        font-weight: 700;
        color: #222;
        margin-bottom: 12px;
        line-height: 1.3;
    }
    
    .divider-line {
        height: 1px;
        background-color: #eee;
        margin: 10px 0 15px 0;
        width: 100%;
    }

    .info-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        font-size: 0.95rem;
        color: #333;
    }
    .info-icon {
        font-size: 1.2rem;
        color: #795548; /* Dark brown color for box icon */
    }

    .price-block {
        margin: 15px 0;
        font-size: 1.4rem;
        font-weight: 700;
        color: #222;
    }
    .price-block span {
        font-size: 0.95rem;
        font-weight: 400;
        color: #666;
    }

    .details-block h6 {
        font-size: 0.95rem;
        font-weight: 700;
        color: #222;
        margin-bottom: 8px;
    }
    .details-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .details-list li {
        position: relative;
        padding-left: 15px;
        font-size: 0.9rem;
        color: #444;
        margin-bottom: 4px;
        line-height: 1.4;
    }
    .details-list li::before {
        content: "•";
        position: absolute;
        left: 0;
        color: #333;
        font-weight: bold;
    }

    /* Badges Section - Outline Style */
    .badges-section {
        margin-top: auto;
        padding-top: 15px;
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        padding-right: 80px; /* Space for QR */
    }

    .custom-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 6px; /* Slightly rounded */
        background: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        color: #444;
    }
    .custom-badge i {
        font-size: 1.1rem;
    }
    .badge-verified i {
        color: #4caf50; /* Green check */
    }
    .badge-premium i {
        color: #ffa000; /* Gold/Orange bag */
    }
    .badge-premium {
        color: #b7791f; /* Gold text match */
    }

    /* QR Code */
    .qr-box {
        position: absolute;
        bottom: 0;
        right: 0;
        background: #fff;
        padding: 4px;
        border: 1px solid #eee;
        border-radius: 4px;
    }
    .qr-label {
        font-size: 0.6rem;
        text-align: center;
        color: #999;
        margin-top: 2px;
    }
</style>

<!-- Share Card Modal -->
<div class="modal fade" id="shareCardModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" style="max-width: 900px;">
        <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
            <div class="modal-header border-0 bg-gradient-primary text-white" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                <h5 class="modal-title fw-bold">
                    <i class="bi bi-share-fill me-2"></i>Sharable Product Card
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                
                <!-- The Professional Card -->
                <div id="shareableCard" class="share-card-container">
                    <div class="product-share-card">
                        
                        <!-- Left: Image -->
                        <div class="share-card-image">
                            @php
                                $cardImage = $product->main_image ?? asset('images/placeholder.png');
                            @endphp
                            <img src="{{ $cardImage }}" alt="{{ $product->name }}">
                        </div>

                        <!-- Right: Content -->
                        <div class="share-card-content">
                            <!-- Title -->
                            <div class="share-card-title">
                                @if($product->seller->is_verified || in_array($product->seller->kyc_status, ['submitted', 'verified']))
                                    KYC Submitted
                                @else
                                    KYC Pending
                                @endif
                                / {{ $product->name }}
                            </div>

                            <div class="divider-line"></div>

                            <!-- MOQ - Highlighted Boxes -->
                            <div style="margin-bottom: 5px;">
                                <div style="display: flex; align-items: center; gap: 8px;">
                                    <i class="bi bi-box-seam text-orange-600" style="font-size: 1.1rem;"></i>
                                    <span style="font-size: 0.95rem; font-weight: 500; color: #374151; white-space: nowrap;">
                                        Platform MOQ Range: <span style="color: #000; font-weight: 600; font-size: 1.1rem;">{{ \App\Models\Setting::getValue('min_moq', 10) }} - {{ \App\Models\Setting::getValue('max_moq', 150) }}</span>
                                    </span>
                                </div>
                            </div>
                            <div style="margin-bottom: 8px;">
                                <div style="display: flex; align-items: center; gap: 8px;">
                                    <i class="bi bi-box-seam text-orange-600" style="font-size: 1.1rem;"></i>
                                    <span style="font-size: 0.95rem; font-weight: 500; color: #374151; white-space: nowrap;">
                                        Product MOQ: <span style="color: #000; font-weight: 600; font-size: 1.1rem;">{{ $product->moq }} {{ Str::plural($product->unit->name ?? 'Piece') }}</span>
                                    </span>
                                </div>
                            </div>
                            <div class="info-row" style="color: #0d6efd; font-weight: bold;">
                                <i class="bi bi-truck info-icon"></i>
                                <span>Seller handles delivery</span>
                            </div>

                            <!-- Price -->
                            <div class="price-block">
                                Price: {{ $product->currency == 'USD' ? '$' : '₹' }}{{ number_format($product->price, $product->currency == 'USD' ? 2 : 0) }} <span>per {{ $product->unit->name ?? 'Piece' }}</span>
                            </div>

                            <div class="divider-line" style="margin-top: 5px;"></div>

                            <!-- Details -->
                            <div class="details-block">
                                <h6>Product Details:</h6>
                                <ul class="details-list">
                                    @php
                                        $descLines = array_filter(explode("\n", strip_tags($product->description ?? '')));
                                        $descLines = array_slice($descLines, 0, 3);
                                    @endphp
                                    @forelse($descLines as $line)
                                        @if(trim($line))
                                            <li>{{ Str::limit(trim($line), 60) }}</li>
                                        @endif
                                    @empty
                                        <li>Premium quality material</li>
                                        <li>Available in all standard sizes</li>
                                        <li>Durable and long-lasting</li>
                                    @endforelse
                                </ul>
                            </div>

                            <!-- Badges (Footer) -->
                            <div class="badges-section">
                                @if($product->seller->is_verified || in_array($product->seller->kyc_status, ['submitted', 'verified']))
                                    <div class="custom-badge badge-verified" style="color: #198754; border-color: #198754;">
                                        <i class="bi bi-check-circle-fill"></i> KYC Submitted
                                    </div>
                                @else
                                    <div class="custom-badge badge-verified" style="color: #6c757d; border-color: #dee2e6;">
                                        <i class="bi bi-exclamation-circle"></i> KYC Pending
                                    </div>
                                @endif

                                @php
                                    $plan = $product->seller->subscription?->plan;
                                    $planName = $plan ? $plan->name : 'Free';
                                    $isPremium = $plan && $plan->is_featured;
                                @endphp

                                @if($isPremium)
                                    <div class="custom-badge badge-premium">
                                        <i class="bi bi-bag-fill"></i> {{ $planName }}
                                    </div>
                                @else
                                    <div class="custom-badge" style="color: #666;">
                                        <i class="bi bi-box"></i> {{ $planName }}
                                    </div>
                                @endif
                            </div>

                            <!-- QR Code (Bottom Right) -->
                            <div class="qr-box">
                                <div id="qrCodeContainer" style="width: 60px; height: 60px;"></div>
                                <div class="qr-label">Scan to View</div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer border-0 bg-light justify-content-center gap-2">
                <button type="button" class="btn btn-primary fw-bold px-4" onclick="downloadShareCard()">
                    <i class="bi bi-download me-2"></i>Download Image
                </button>
                <button type="button" class="btn btn-success fw-bold px-4" onclick="shareToWhatsApp()">
                    <i class="bi bi-whatsapp me-2"></i>Share on WhatsApp
                </button>
                <button type="button" class="btn btn-info text-white fw-bold px-4" onclick="copyProductLink()">
                    <i class="bi bi-link-45deg me-2"></i>Copy Link
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Include html2canvas for Card Download -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<!-- Include QRCode.js for Dynamic QR -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<script>
// Generate QR Code when modal opens
document.getElementById('shareCardModal').addEventListener('shown.bs.modal', function () {
    const qrContainer = document.getElementById('qrCodeContainer');
    qrContainer.innerHTML = ''; // Clear previous
    
    // Dynamic URL based on current domain
    const productUrl = "{{ url()->current() }}";
    
    new QRCode(qrContainer, {
        text: productUrl,
        width: 60,
        height: 60,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.M
    });
});

// Download Share Card as Image
function downloadShareCard() {
    const card = document.getElementById('shareableCard');
    const productName = '{{ Str::slug($product->name) }}';
    const fileName = productName + '-product-card.png';
    
    html2canvas(card, {
        scale: 2, // Higher quality
        useCORS: true,
        allowTaint: true,
        backgroundColor: '#eef2f6', // Match container bg
        logging: false
    }).then(canvas => {
        // Convert to blob for better download handling
        canvas.toBlob(function(blob) {
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        }, 'image/png', 1.0);
    }).catch(err => {
        console.error('Download error:', err);
        alert('Error generating image. Please try again.');
    });
}

// Share on WhatsApp
function shareToWhatsApp() {
    const productUrl = "{{ url()->current() }}";
    const message = encodeURIComponent(
        `🛍️ Check out this product!\n\n` +
        `*{{ $product->name }}*\n` +
        `💰 Price: {{ $product->currency == 'USD' ? '$' : '₹' }}{{ number_format($product->price, $product->currency == 'USD' ? 2 : 0) }}\n` +
        `MOQ: {{ $product->moq }} {{ $product->unit->name ?? 'pcs' }}\n` +
        `🚚 Seller handle delivery\n\n` +
        `🔗 ${productUrl}\n\n` +
        `- via The Mini Port`
    );
    window.open(`https://api.whatsapp.com/send?text=${message}`, '_blank');
}

// Copy Product Link
function copyProductLink() {
    const productUrl = "{{ url()->current() }}";
    navigator.clipboard.writeText(productUrl).then(() => {
        // Show toast or alert
        alert('Product link copied to clipboard!');
    });
}
</script>