{{-- Shareable Product Cards Widget - Auto-sliding Full Cards --}}
<style>
    .share-cards-widget {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 16px;
        padding: 1.5rem;
        color: white;
    }
    .share-cards-widget .widget-title {
        font-weight: 700;
        margin-bottom: 1rem;
    }
    /* Full Marketing Card Style */
    .marketing-card {
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        display: flex;
        min-height: 180px;
    }
    .marketing-card .card-image {
        width: 40%;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
    .marketing-card .card-image img {
        max-width: 100%;
        max-height: 140px;
        object-fit: contain;
    }
    .marketing-card .card-details {
        width: 60%;
        padding: 12px 14px;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .marketing-card .company-product {
        font-size: 0.75rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 6px;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .marketing-card .moq-row {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-bottom: 6px;
    }
    .marketing-card .moq-item {
        font-size: 0.6rem;
        color: #555;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .marketing-card .price-row {
        font-size: 0.85rem;
        font-weight: 800;
        color: #1a1a1a;
        margin-bottom: 6px;
    }
    .marketing-card .price-row span {
        font-size: 0.6rem;
        font-weight: 400;
        color: #777;
    }
    .marketing-card .badges-row {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        margin-top: auto;
    }
    .marketing-card .badge-mini {
        font-size: 0.5rem;
        padding: 2px 6px;
        border-radius: 10px;
        font-weight: 600;
        border: 1px solid;
    }
    .marketing-card .badge-verified {
        background: #f0fff4;
        color: #22c55e;
        border-color: #22c55e;
    }
    .marketing-card .badge-plan {
        background: #fffbeb;
        color: #b8860b;
        border-color: #daa520;
    }
    .marketing-card .qr-corner {
        position: absolute;
        bottom: 8px;
        right: 8px;
        width: 35px;
        height: 35px;
        background: #fff;
        border-radius: 4px;
        padding: 2px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .marketing-card .qr-corner i {
        font-size: 1.2rem;
        color: #333;
    }
    .share-carousel .carousel-item {
        transition: transform 0.6s ease-in-out;
    }
    .download-btn-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.7);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        opacity: 0;
        transition: opacity 0.3s;
        border-radius: 14px;
    }
    .marketing-card:hover .download-btn-overlay {
        opacity: 1;
    }
</style>

<div class="share-cards-widget mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h6 class="widget-title mb-0">
            <i class="bi bi-card-image me-2"></i>Your Marketing Cards
        </h6>
        <a href="{{ route('seller.products.index') }}" class="btn btn-sm btn-light rounded-pill px-3">
            View All <i class="bi bi-arrow-right ms-1"></i>
        </a>
    </div>

    @php
        $seller = Auth::user()->seller;
        $sellerProducts = $seller->products()->with('category')->latest()->take(10)->get();
        $plan = $seller->subscription?->plan;
        $planName = $plan ? $plan->name : 'Free';
    @endphp

    @if($sellerProducts->count() > 0)
        <div id="shareCardsCarousel" class="carousel slide share-carousel" data-bs-ride="carousel" data-bs-interval="4000">
            <div class="carousel-inner">
                @foreach($sellerProducts as $index => $product)
                    <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                        <div class="marketing-card position-relative">
                            <!-- Product Image -->
                            <div class="card-image">
                                <img src="{{ $product->main_image }}" alt="{{ $product->name }}">
                            </div>
                            
                            <!-- Product Details -->
                            <div class="card-details">
                                <!-- Company / Product Name -->
                                <div class="company-product">
                                    {{ $seller->company_name }} / {{ $product->name }}
                                </div>
                                
                                <!-- MOQ Info -->
                                <div class="moq-row">
                                    <div class="moq-item">
                                        <i class="bi bi-box-seam-fill text-orange-600"></i>
                                        <span><strong>Platform MOQ:</strong> 10 to 150</span>
                                    </div>
                                    <div class="moq-item">
                                        <i class="bi bi-box-seam-fill text-orange-600"></i>
                                        <span><strong>Product MOQ:</strong> {{ $product->moq }} pcs</span>
                                    </div>
                                </div>
                                
                                <!-- Price -->
                                <div class="price-row">
                                    ₹{{ number_format($product->price) }} <span>per pc</span>
                                </div>
                                
                                <!-- Badges -->
                                <div class="badges-row">
                                    @if($seller->is_verified)
                                        <span class="badge-mini badge-verified">
                                            <i class="bi bi-patch-check-fill"></i> Verified
                                        </span>
                                    @endif
                                    <span class="badge-mini badge-plan">
                                        {{ $planName }}
                                    </span>
                                </div>
                                
                                <!-- QR Icon -->
                                <div class="qr-corner">
                                    <i class="bi bi-qr-code"></i>
                                </div>
                            </div>
                            
                            <!-- Hover Overlay -->
                            <div class="download-btn-overlay">
                                <a href="{{ route('public.products.show', $product->slug) }}" target="_blank" class="btn btn-light btn-sm fw-bold rounded-pill px-3">
                                    <i class="bi bi-download me-1"></i>Download Card
                                </a>
                                <a href="{{ route('public.products.show', $product->slug) }}" target="_blank" class="btn btn-outline-light btn-sm rounded-pill px-3">
                                    <i class="bi bi-eye me-1"></i>View Product
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            
            <!-- Carousel Controls -->
            @if($sellerProducts->count() > 1)
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <button class="btn btn-sm btn-outline-light rounded-circle" type="button" data-bs-target="#shareCardsCarousel" data-bs-slide="prev" style="width: 32px; height: 32px;">
                        <i class="bi bi-chevron-left"></i>
                    </button>
                    
                    <div class="d-flex gap-1">
                        @foreach($sellerProducts as $index => $product)
                            <button type="button" data-bs-target="#shareCardsCarousel" data-bs-slide-to="{{ $index }}" 
                                    class="{{ $index == 0 ? 'bg-white' : 'bg-white bg-opacity-50' }}" 
                                    style="width: 8px; height: 8px; border-radius: 50%; border: none;">
                            </button>
                        @endforeach
                    </div>
                    
                    <button class="btn btn-sm btn-outline-light rounded-circle" type="button" data-bs-target="#shareCardsCarousel" data-bs-slide="next" style="width: 32px; height: 32px;">
                        <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
            @endif
        </div>
        
        <p class="text-white-50 text-center small mt-3 mb-0">
            <i class="bi bi-info-circle me-1"></i>Hover to download shareable cards for social media
        </p>
    @else
        <div class="text-center py-4">
            <i class="bi bi-box-seam display-4 text-white-50 mb-3"></i>
            <p class="text-white-50 mb-3">No products yet. Add products to create marketing cards!</p>
            <a href="{{ route('seller.products.create') }}" class="btn btn-light btn-sm fw-bold">
                <i class="bi bi-plus-lg me-1"></i>Add Product
            </a>
        </div>
    @endif
</div>