{{-- E-commerce Products Component (Integration with existing widget) --}}
@php
    $displayType = $component['content']['display_type'] ?? 'grid';
    $productsPerRow = $component['content']['products_per_row'] ?? 4;
    $showPrice = $component['content']['show_price'] ?? true;
    $showAddToCart = $component['content']['show_add_to_cart'] ?? true;
    $categoryFilter = $component['content']['category_filter'] ?? null;
    $limit = $component['content']['limit'] ?? 8;

    // Get products from e-commerce module if available
    $products = [];
    if (class_exists('\App\Models\Product')) {
        $query = \App\Models\Product::where('status', 'active');

        if ($categoryFilter) {
            $query->where('category_id', $categoryFilter);
        }

        $products = $query->limit($limit)->get();
    }
@endphp

@if(count($products) > 0)
    <div class="products-showcase">
        <div class="row g-4">
            @foreach($products as $product)
                <div class="col-lg-{{ 12 / $productsPerRow }} col-md-6">
                    <div class="product-card h-100">
                        @if($product->image)
                            <div class="product-image">
                                <img src="{{ $product->image }}" alt="{{ $product->name }}" class="img-fluid">
                                @if($product->is_featured)
                                    <span class="badge bg-primary position-absolute top-0 start-0 m-2">Featured</span>
                                @endif
                                @if($product->discount > 0)
                                    <span class="badge bg-danger position-absolute top-0 end-0 m-2">
                                        -{{ $product->discount }}%
                                    </span>
                                @endif
                            </div>
                        @endif

                        <div class="product-content p-3">
                            <h5 class="product-title" style="font-family: var(--heading-font);">
                                {{ $product->name }}
                            </h5>

                            @if($product->short_description)
                                <p class="product-description text-muted small">
                                    {{ Str::limit($product->short_description, 80) }}
                                </p>
                            @endif

                            @if($showPrice)
                                <div class="product-price mb-3">
                                    @if($product->discount > 0)
                                        <span class="text-muted text-decoration-line-through me-2">
                                            ${{ number_format($product->regular_price, 2) }}
                                        </span>
                                        <span class="fw-bold" style="color: var(--primary-color); font-size: 1.2rem;">
                                            ${{ number_format($product->sale_price, 2) }}
                                        </span>
                                    @else
                                        <span class="fw-bold" style="color: var(--primary-color); font-size: 1.2rem;">
                                            ${{ number_format($product->price, 2) }}
                                        </span>
                                    @endif
                                </div>
                            @endif

                            @if($showAddToCart)
                                <button class="btn btn-primary w-100 add-to-cart" data-product-id="{{ $product->id }}">
                                    <i class="bi bi-cart-plus me-2"></i>Add to Cart
                                </button>
                            @else
                                <a href="{{ route('products.show', $product->slug) }}" class="btn btn-outline-primary w-100">
                                    View Details
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@else
    {{-- Empty State with helpful actions --}}
    <div class="empty-products-state text-center py-5">
        <div class="mb-4">
            <i class="bi bi-cart-x" style="font-size: 4rem; color: var(--primary-color, #0066FF);"></i>
        </div>
        <h3 class="mb-3" style="font-family: var(--heading-font);">No Products Yet</h3>
        <p class="text-muted mb-4">Get started by adding your first products to showcase them here.</p>

        <div class="d-flex gap-3 justify-content-center flex-wrap">
            @if(auth()->check())
                {{-- For logged-in users: show direct action buttons --}}
                <a href="{{ url('/products/create') }}" class="btn btn-primary btn-lg">
                    <i class="bi bi-plus-circle me-2"></i>Add Product
                </a>
                <a href="{{ url('/extensions') }}" class="btn btn-outline-primary btn-lg">
                    <i class="bi bi-grid-3x3-gap me-2"></i>Browse E-Commerce Widgets
                </a>
            @else
                {{-- For public visitors: show placeholder products --}}
                <button class="btn btn-outline-secondary" disabled>
                    Coming Soon
                </button>
            @endif
        </div>

        {{-- Optional: Show sample product cards as placeholders --}}
        @if(!auth()->check())
        <div class="row g-4 mt-4 opacity-50">
            @for($i = 1; $i <= 3; $i++)
            <div class="col-lg-4 col-md-6">
                <div class="product-card h-100">
                    <div class="product-image bg-light d-flex align-items-center justify-content-center">
                        <i class="bi bi-image text-muted" style="font-size: 3rem;"></i>
                    </div>
                    <div class="product-content p-3">
                        <div class="placeholder-glow">
                            <span class="placeholder col-8 mb-2 d-block"></span>
                            <span class="placeholder col-12 mb-2 d-block"></span>
                            <span class="placeholder col-6 mb-3 d-block"></span>
                            <span class="placeholder col-12 btn btn-primary disabled"></span>
                        </div>
                    </div>
                </div>
            </div>
            @endfor
        </div>
        @endif
    </div>
@endif

<style>
    .product-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }

    .product-card:hover {
        border-color: var(--primary-color);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transform: translateY(-5px);
    }

    .product-image {
        position: relative;
        overflow: hidden;
        height: 250px;
    }

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .product-card:hover .product-image img {
        transform: scale(1.05);
    }

    .product-title {
        margin-bottom: 0.5rem;
        min-height: 48px;
    }

    .product-description {
        min-height: 60px;
    }

    .add-to-cart {
        transition: all 0.3s ease;
    }

    .add-to-cart:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
</style>

<script>
document.querySelectorAll('.add-to-cart').forEach(button => {
    button.addEventListener('click', function() {
        const productId = this.dataset.productId;
        const originalText = this.innerHTML;

        this.disabled = true;
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Adding...';

        // Call your existing add-to-cart function from e-commerce widget
        fetch('/cart/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ product_id: productId, quantity: 1 })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                this.innerHTML = '<i class="bi bi-check-circle me-2"></i>Added!';
                setTimeout(() => {
                    this.innerHTML = originalText;
                    this.disabled = false;
                }, 2000);
            }
        })
        .catch(error => {
            this.innerHTML = originalText;
            this.disabled = false;
            alert('Error adding product to cart');
        });
    });
});
</script>