{# templates/product/show.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}{{ product.name }} - Marketplace{% endblock %}

{% block body %}
<div class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 p-6">
            <!-- Product Images -->
            <div>
                <div class="relative">
                    {% set mainImage = product.images|first %}
                    <img id="mainImage" 
                         src="{{ mainImage ? asset('uploads/products/' ~ mainImage) : 'https://via.placeholder.com/500' }}" 
                         alt="{{ product.name }}"
                         class="w-full h-96 object-cover rounded-lg">
                    
                    {% if product.compareAtPrice and product.compareAtPrice > product.price %}
                        <span class="absolute top-2 left-2 bg-red-500 text-white px-2 py-1 rounded text-sm">
                            -{{ ((product.compareAtPrice - product.price) / product.compareAtPrice * 100)|round }}%
                        </span>
                    {% endif %}
                </div>
                
                <!-- Thumbnails -->
                {% if product.images|length > 1 %}
                    <div class="flex gap-2 mt-4">
                        {% for image in product.images %}
                            <img src="{{ asset('uploads/products/' ~ image) }}" 
                                 alt="{{ product.name }}"
                                 class="w-20 h-20 object-cover rounded cursor-pointer border-2 hover:border-primary-500 transition"
                                 onclick="document.getElementById('mainImage').src = this.src">
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            
            <!-- Product Info -->
            <div>
                <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-2">
                        <a href="{{ path('vendor_show', {id: product.vendor.id}) }}" class="hover:text-primary-600">
                            {{ product.vendor.storeName }}
                        </a>
                    </div>
                    <h1 class="text-3xl font-bold mb-2">{{ product.name }}</h1>
                    
                    <!-- Rating -->
                    <div class="flex items-center mb-4">
                        <div class="flex text-yellow-400">
                            {% set rating = product.averageRating|default(0) %}
                            {% for i in 1..5 %}
                                {% if i <= rating %}
                                    <i class="fas fa-star"></i>
                                {% elseif i - 0.5 <= rating %}
                                    <i class="fas fa-star-half-alt"></i>
                                {% else %}
                                    <i class="far fa-star"></i>
                                {% endif %}
                            {% endfor %}
                        </div>
                        <span class="text-gray-500 text-sm ml-2">
                            ({{ product.reviews|length }} avis)
                        </span>
                    </div>
                    
                    <!-- Price -->
                    <div class="mb-4">
                        {% if product.compareAtPrice and product.compareAtPrice > product.price %}
                            <span class="text-3xl font-bold text-primary-600">
                                {{ product.price|number_format(2, ',', ' ') }} €
                            </span>
                            <span class="text-lg text-gray-400 line-through ml-2">
                                {{ product.compareAtPrice|number_format(2, ',', ' ') }} €
                            </span>
                        {% else %}
                            <span class="text-3xl font-bold text-primary-600">
                                {{ product.price|number_format(2, ',', ' ') }} €
                            </span>
                        {% endif %}
                    </div>
                    
                    <!-- Stock Status -->
                    <div class="mb-4">
                        {% if product.stock > 0 %}
                            {% if product.stock < 5 %}
                                <span class="text-orange-600 text-sm">
                                    <i class="fas fa-exclamation-triangle mr-1"></i>
                                    Plus que {{ product.stock }} exemplaire(s) !
                                </span>
                            {% else %}
                                <span class="text-green-600 text-sm">
                                    <i class="fas fa-check-circle mr-1"></i>
                                    En stock
                                </span>
                            {% endif %}
                        {% else %}
                            <span class="text-red-600 text-sm">
                                <i class="fas fa-times-circle mr-1"></i>
                                Rupture de stock
                            </span>
                        {% endif %}
                    </div>
                    
                    <!-- Description -->
                    <div class="mb-6">
                        <h3 class="font-semibold mb-2">Description</h3>
                        <p class="text-gray-600">{{ product.description|nl2br }}</p>
                    </div>
                    
                    <!-- Attributes -->
                    {% if product.attributes|length > 0 %}
                        <div class="mb-6">
                            <h3 class="font-semibold mb-2">Caractéristiques</h3>
                            <div class="grid grid-cols-2 gap-2">
                                {% for attr in product.attributes %}
                                    <div class="text-sm">
                                        <span class="font-medium">{{ attr.name }}:</span>
                                        <span class="text-gray-600">{{ attr.value }}</span>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                    
                    <!-- Add to Cart Form -->
                    {% if product.stock > 0 %}
                        <form action="{{ path('cart_add', {id: product.id}) }}" method="POST" class="flex items-center gap-4">
                            <div class="flex items-center border rounded-lg">
                                <button type="button" class="px-3 py-2 hover:bg-gray-100" onclick="decrementQuantity()">
                                    <i class="fas fa-minus"></i>
                                </button>
                                <input type="number" 
                                       name="quantity" 
                                       id="quantity" 
                                       value="1" 
                                       min="1" 
                                       max="{{ product.stock }}"
                                       class="w-16 text-center border-0 focus:ring-0">
                                <button type="button" class="px-3 py-2 hover:bg-gray-100" onclick="incrementQuantity()">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                            <button type="submit" class="flex-1 bg-primary-600 text-white py-3 rounded-lg hover:bg-primary-700 transition">
                                <i class="fas fa-cart-plus mr-2"></i>
                                Ajouter au panier
                            </button>
                        </form>
                    {% else %}
                        <button disabled class="w-full bg-gray-300 text-gray-500 py-3 rounded-lg cursor-not-allowed">
                            <i class="fas fa-ban mr-2"></i>
                            Indisponible
                        </button>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- Similar Products -->
    {% if similarProducts|length > 0 %}
        <div class="mt-12">
            <h2 class="text-2xl font-bold mb-6">Produits similaires</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {% for similar in similarProducts %}
                    {% include 'components/product_card.html.twig' with {product: similar} %}
                {% endfor %}
            </div>
        </div>
    {% endif %}
</div>

<script>
function decrementQuantity() {
    const input = document.getElementById('quantity');
    const value = parseInt(input.value);
    if (value > 1) {
        input.value = value - 1;
    }
}

function incrementQuantity() {
    const input = document.getElementById('quantity');
    const value = parseInt(input.value);
    const max = parseInt(input.max);
    if (value < max) {
        input.value = value + 1;
    }
}
</script>
{% endblock %}