{# Widget Catalogue Boutique - Version simplifiée #}
<div class="shop-catalog-widget">
    <div class="shop-catalog-container">
        {% if products|length == 0 %}
            <div class="shop-empty-state">
                <div class="shop-empty-icon">
                    <i class="fas fa-shopping-bag fa-4x"></i>
                </div>
                <h3>Aucun produit disponible</h3>
                <p>La boutique est en cours de préparation.</p>
            </div>
        {% else %}
            {# Grille de produits #}
            <div class="shop-products-grid" style="--shop-columns: {{ columns|default(3) }};">
                {% for product in products %}
                    <div class="shop-product-card" data-product-id="{{ product.id }}">
                        <a href="{{ path('shop_product_detail', {'siteName': site.internalName, 'id': product.id}) }}" class="shop-product-link">
                            {# Image du produit #}
                            <div class="shop-product-image">
                                {% if product.image %}
                                    <img src="{{ vich_uploader_asset(product, 'imageFile') }}"
                                         alt="{{ product.name }}"
                                         loading="lazy">
                                {% else %}
                                    <div class="shop-product-no-image">
                                        <i class="fas fa-box fa-3x"></i>
                                    </div>
                                {% endif %}
                            </div>

                            {# Informations produit #}
                            <div class="shop-product-info">
                                <h3 class="shop-product-name">{{ product.name }}</h3>

                            {% if showDescription and product.description %}
                                <p class="shop-product-description">
                                    {{ product.description|length > 100 ? product.description|slice(0, 100) ~ '...' : product.description }}
                                </p>
                            {% endif %}

                            <div class="shop-product-footer">
                                {% if showPrice %}
                                    <div class="shop-product-price">
                                        {{ product.price|number_format(2, ',', ' ') }} €
                                    </div>
                                {% endif %}

                                {% if showAddToCart %}
                                    <button class="shop-add-to-cart-btn"
                                            data-product-id="{{ product.id }}"
                                            data-product-name="{{ product.name }}"
                                            data-product-price="{{ product.price }}"
                                            data-product-image="{{ product.image|default('') }}"
                                            onclick="event.preventDefault(); event.stopPropagation(); addToCart({{ product.id }}, '{{ product.name|e('js') }}', {{ product.price }}, '{{ product.image|default('')|e('js') }}')">
                                        <i class="fas fa-shopping-cart"></i>
                                        Ajouter
                                    </button>
                                {% endif %}
                            </div>
                        </div>
                        </a>
                    </div>
                {% endfor %}
            </div>

            {# Pagination #}
            {% if totalPages > 1 %}
                <div class="shop-pagination">
                    {% if currentPage > 1 %}
                        <a href="?page={{ currentPage - 1 }}" class="shop-page-btn">
                            <i class="fas fa-chevron-left"></i> Précédent
                        </a>
                    {% endif %}

                    {% for page in 1..totalPages %}
                        {% if page == currentPage %}
                            <span class="shop-page-btn active">{{ page }}</span>
                        {% elseif page == 1 or page == totalPages or (page >= currentPage - 2 and page <= currentPage + 2) %}
                            <a href="?page={{ page }}" class="shop-page-btn">{{ page }}</a>
                        {% elseif page == currentPage - 3 or page == currentPage + 3 %}
                            <span class="shop-page-btn">...</span>
                        {% endif %}
                    {% endfor %}

                    {% if currentPage < totalPages %}
                        <a href="?page={{ currentPage + 1 }}" class="shop-page-btn">
                            Suivant <i class="fas fa-chevron-right"></i>
                        </a>
                    {% endif %}
                </div>
            {% endif %}
        {% endif %}
    </div>
</div>

<style>
.shop-catalog-widget {
    width: 100%;
    padding: 2rem 0;
}

.shop-catalog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Grille de produits */
.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(var(--shop-columns, 3), 1fr);
    gap: 2rem;
}

@media (max-width: 992px) {
    .shop-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .shop-products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Carte produit */
.shop-product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.shop-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.shop-product-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.shop-product-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #f5f5f5;
}

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

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

.shop-product-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}

.shop-product-info {
    padding: 1.2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.shop-product-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: #1e293b;
}

.shop-product-description {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 1rem;
    flex: 1;
}

.shop-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    gap: 1rem;
}

.shop-product-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--site-primary-color, #10b981);
}

.shop-add-to-cart-btn {
    padding: 0.6rem 1.2rem;
    background: var(--site-primary-color, #10b981);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.shop-add-to-cart-btn:hover {
    background: var(--site-primary-color-dark, #059669);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Pagination */
.shop-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.shop-page-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.shop-page-btn:hover {
    border-color: var(--site-primary-color, #10b981);
    color: var(--site-primary-color, #10b981);
}

.shop-page-btn.active {
    background: var(--site-primary-color, #10b981);
    color: white;
    border-color: var(--site-primary-color, #10b981);
}

/* État vide */
.shop-empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.shop-empty-icon {
    color: #ccc;
    margin-bottom: 1rem;
}

.shop-empty-state h3 {
    font-size: 1.5rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.shop-empty-state p {
    color: #94a3b8;
}
</style>

<script>
function addToCart(productId, productName, productPrice, productImage) {
    console.log('Adding to cart - Image path:', productImage);

    // Récupérer le panier du localStorage
    let cart = JSON.parse(localStorage.getItem('izibrick_cart') || '[]');

    // Vérifier si le produit existe déjà
    const existingItem = cart.find(item => item.id === productId);

    if (existingItem) {
        existingItem.quantity += 1;
    } else {
        cart.push({
            id: productId,
            name: productName,
            price: parseFloat(productPrice),
            quantity: 1,
            image: productImage || null
        });
    }

    // Sauvegarder le panier
    localStorage.setItem('izibrick_cart', JSON.stringify(cart));
    console.log('Cart saved:', cart);

    // Mettre à jour le compteur et le panier
    updateCartCount();
    renderCartSidebar();

    // Ouvrir le panier si la fonction existe
    if (typeof openShopCart === 'function') {
        setTimeout(() => openShopCart(), 200);
    }
}

function updateCartCount() {
    const cart = JSON.parse(localStorage.getItem('izibrick_cart') || '[]');
    const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);

    // Mettre à jour tous les badges de panier
    document.querySelectorAll('.cart-count, #cart-count-badge, #floating-cart-count').forEach(badge => {
        badge.textContent = totalItems;
    });
}

function renderCartSidebar() {
    const cartContent = document.getElementById('shop-cart-content');
    const cartFooter = document.getElementById('shop-cart-footer');
    const cartTotal = document.getElementById('cart-total');

    if (!cartContent) return;

    const cart = JSON.parse(localStorage.getItem('izibrick_cart') || '[]');

    if (cart.length === 0) {
        cartContent.innerHTML = `
            <div class="shop-cart-empty">
                <i class="fas fa-shopping-bag fa-3x"></i>
                <p>Votre panier est vide</p>
            </div>
        `;
        if (cartFooter) cartFooter.style.display = 'none';
        return;
    }

    let html = '';
    let total = 0;

    cart.forEach(item => {
        const itemTotal = item.price * item.quantity;
        total += itemTotal;

        html += `
            <div class="shop-cart-item" data-product-id="${item.id}">
                <div class="shop-cart-item-image">
                    ${item.image ?
                        `<img src="/uploads/shop/${item.image}" alt="${item.name}">` :
                        `<div class="shop-cart-item-image-placeholder"><i class="fas fa-image"></i></div>`
                    }
                </div>
                <div class="shop-cart-item-info">
                    <div class="shop-cart-item-name">${item.name}</div>
                    <div class="shop-cart-item-price">${formatPrice(item.price)}</div>
                    <div class="shop-cart-item-quantity">
                        <button class="shop-cart-qty-btn" onclick="updateCartQuantity(${item.id}, ${item.quantity - 1})">
                            <i class="fas fa-minus"></i>
                        </button>
                        <span class="shop-cart-qty-value">${item.quantity}</span>
                        <button class="shop-cart-qty-btn" onclick="updateCartQuantity(${item.id}, ${item.quantity + 1})">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                </div>
                <button class="shop-cart-item-remove" onclick="removeFromCart(${item.id})" title="Retirer">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        `;
    });

    cartContent.innerHTML = html;

    if (cartFooter) cartFooter.style.display = 'block';
    if (cartTotal) cartTotal.textContent = formatPrice(total);
}

function updateCartQuantity(productId, newQuantity) {
    let cart = JSON.parse(localStorage.getItem('izibrick_cart') || '[]');

    if (newQuantity <= 0) {
        removeFromCart(productId);
        return;
    }

    const item = cart.find(item => item.id === productId);
    if (item) {
        item.quantity = newQuantity;
        localStorage.setItem('izibrick_cart', JSON.stringify(cart));
        updateCartCount();
        renderCartSidebar();
    }
}

function removeFromCart(productId) {
    let cart = JSON.parse(localStorage.getItem('izibrick_cart') || '[]');
    cart = cart.filter(item => item.id !== productId);
    localStorage.setItem('izibrick_cart', JSON.stringify(cart));
    updateCartCount();
    renderCartSidebar();
}

function formatPrice(price) {
    return new Intl.NumberFormat('fr-FR', {
        style: 'currency',
        currency: 'EUR'
    }).format(price);
}

// Initialiser au chargement
document.addEventListener('DOMContentLoaded', function() {
    updateCartCount();
    renderCartSidebar();
});
</script>