{# templates/vendor/product_form.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}{{ product ? 'Modifier' : 'Ajouter' }} un produit - Espace Vendeur{% endblock %}

{% block body %}
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <div class="flex items-center mb-6">
            <a href="{{ path('vendor_products') }}" class="text-gray-600 hover:text-gray-900 mr-4">
                <i class="fas fa-arrow-left text-xl"></i>
            </a>
            <h1 class="text-2xl font-bold">{{ product ? 'Modifier' : 'Ajouter' }} un produit</h1>
        </div>
        
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <form method="POST" enctype="multipart/form-data" class="p-6 space-y-6">
                <!-- Nom du produit -->
                <div>
                    <label class="block text-sm font-medium mb-1">Nom du produit *</label>
                    <input type="text" 
                           name="name" 
                           value="{{ product ? product.name : '' }}"
                           required 
                           class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500">
                </div>
                
                <!-- Description -->
                <div>
                    <label class="block text-sm font-medium mb-1">Description *</label>
                    <textarea name="description" 
                              rows="5" 
                              required 
                              class="w-full border rounded-lg px-3 py-2">{{ product ? product.description : '' }}</textarea>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Prix -->
                    <div>
                        <label class="block text-sm font-medium mb-1">Prix (€) *</label>
                        <input type="number" 
                               name="price" 
                               step="0.01" 
                               value="{{ product ? product.price : '' }}"
                               required 
                               class="w-full border rounded-lg px-3 py-2">
                    </div>
                    
                    <!-- Prix barré -->
                    <div>
                        <label class="block text-sm font-medium mb-1">Prix barré (€)</label>
                        <input type="number" 
                               name="compareAtPrice" 
                               step="0.01" 
                               value="{{ product ? product.compareAtPrice : '' }}"
                               class="w-full border rounded-lg px-3 py-2">
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Stock -->
                    <div>
                        <label class="block text-sm font-medium mb-1">Stock *</label>
                        <input type="number" 
                               name="stock" 
                               value="{{ product ? product.stock : 0 }}"
                               required 
                               class="w-full border rounded-lg px-3 py-2">
                    </div>
                    
                    <!-- Catégorie -->
                    <div>
                        <label class="block text-sm font-medium mb-1">Catégorie *</label>
                        <select name="category" required class="w-full border rounded-lg px-3 py-2">
                            <option value="">Sélectionner une catégorie</option>
                            {% for category in categories %}
                                <option value="{{ category.id }}" 
                                    {% if product and product.category and product.category.id == category.id %}selected{% endif %}>
                                    {{ category.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                
                <!-- Images -->
                <div>
                    <label class="block text-sm font-medium mb-1">Images du produit</label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-primary-500 transition"
                         onclick="document.getElementById('imagesInput').click()">
                        <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
                        <p class="text-gray-600">Cliquez ou glissez-déposez vos images</p>
                        <p class="text-xs text-gray-400 mt-1">PNG, JPG jusqu'à 5MB</p>
                        <input type="file" 
                               id="imagesInput" 
                               name="images[]" 
                               multiple 
                               accept="image/*" 
                               class="hidden"
                               onchange="previewImages(this)">
                    </div>
                    
                    <!-- Aperçu des images -->
                    <div id="imagePreview" class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
                        {% if product and product.images %}
                            {% for image in product.images %}
                                <div class="relative group">
                                    <img src="{{ asset('uploads/products/' ~ image) }}" 
                                         class="w-full h-32 object-cover rounded-lg">
                                    <button type="button" 
                                            class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
                                        <i class="fas fa-times text-xs"></i>
                                    </button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
                
                <!-- Type de produit -->
                <div>
                    <label class="block text-sm font-medium mb-1">Type de produit</label>
                    <select name="type" class="w-full border rounded-lg px-3 py-2">
                        <option value="standard" {% if product and product.type == 'standard' %}selected{% endif %}>Standard</option>
                        <option value="digital" {% if product and product.type == 'digital' %}selected{% endif %}>Numérique</option>
                        <option value="subscription" {% if product and product.type == 'subscription' %}selected{% endif %}>Abonnement</option>
                    </select>
                </div>
                
                <!-- Boutons d'action -->
                <div class="flex justify-end space-x-3 pt-4 border-t">
                    <a href="{{ path('vendor_products') }}" 
                       class="px-4 py-2 border rounded-lg hover:bg-gray-50 transition">
                        Annuler
                    </a>
                    <button type="submit" 
                            class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
                        {{ product ? 'Mettre à jour' : 'Publier le produit' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function previewImages(input) {
        const preview = document.getElementById('imagePreview');
        
        for (let i = 0; i < input.files.length; i++) {
            const file = input.files[i];
            const reader = new FileReader();
            
            reader.onload = function(e) {
                const div = document.createElement('div');
                div.className = 'relative group';
                div.innerHTML = `
                    <img src="${e.target.result}" class="w-full h-32 object-cover rounded-lg">
                    <button type="button" 
                            class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"
                            onclick="this.parentElement.remove()">
                        <i class="fas fa-times text-xs"></i>
                    </button>
                `;
                preview.appendChild(div);
            };
            
            reader.readAsDataURL(file);
        }
    }
</script>

<style>
    input:focus, textarea:focus, select:focus {
        outline: none;
        border-color: #3b82f6;
        ring: 2px solid #3b82f6;
    }
</style>
{% endblock %}