{% extends 'admin/base.html.twig' %}

{% block title %}{{ product.id ? 'Modifier' : 'Nouveau' }} produit{% endblock %}

{% block breadcrumb %}Boutique <i class="fas fa-chevron-right"></i> Produits <i class="fas fa-chevron-right"></i> {{ product.id ? 'Modifier' : 'Nouveau' }}{% endblock %}

{% block body %}
<div class="container-fluid mt-4">
    <div class="row mb-4">
        <div class="col">
            <h1>
                <i class="fas fa-box"></i> {{ product.id ? 'Modifier le produit' : 'Nouveau produit' }}
            </h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    {{ form_start(form) }}

                    <div class="row mb-3">
                        <div class="col-md-8">
                            <div class="mb-3">
                                {{ form_label(form.name) }}
                                {{ form_widget(form.name) }}
                                {{ form_errors(form.name) }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                {{ form_label(form.sku) }}
                                {{ form_widget(form.sku) }}
                                {{ form_errors(form.sku) }}
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        {{ form_label(form.description) }}
                        {{ form_widget(form.description) }}
                        {{ form_errors(form.description) }}
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="mb-3">
                                {{ form_label(form.price) }}
                                {{ form_widget(form.price) }}
                                {{ form_errors(form.price) }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                {{ form_label(form.currency) }}
                                {{ form_widget(form.currency) }}
                                {{ form_errors(form.currency) }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                {{ form_label(form.stock) }}
                                {{ form_widget(form.stock) }}
                                {{ form_errors(form.stock) }}
                                <small class="form-text text-muted">{{ form.stock.vars.help }}</small>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="mb-3">
                                {{ form_label(form.type) }}
                                {{ form_widget(form.type) }}
                                {{ form_errors(form.type) }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                {{ form_label(form.category) }}
                                {{ form_widget(form.category) }}
                                {{ form_errors(form.category) }}
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="mb-3">
                                {{ form_label(form.weight) }}
                                {{ form_widget(form.weight) }}
                                {{ form_errors(form.weight) }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                {{ form_label(form.dimensions) }}
                                {{ form_widget(form.dimensions) }}
                                {{ form_errors(form.dimensions) }}
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        {{ form_label(form.imageFile) }}
                        {{ form_widget(form.imageFile) }}
                        {{ form_errors(form.imageFile) }}
                        {% if product.image %}
                            <div class="mt-2">
                                <img src="{{ asset('uploads/shop/' ~ product.image) }}" alt="{{ product.name }}" style="max-width: 200px;">
                            </div>
                        {% endif %}
                    </div>

                    <div class="form-check mb-3">
                        {{ form_widget(form.active) }}
                        {{ form_label(form.active) }}
                        {{ form_errors(form.active) }}
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ path('admin_shop_products', {siteId: site.id}) }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Retour
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Enregistrer
                        </button>
                    </div>

                    {{ form_end(form) }}
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Aide</h5>
                </div>
                <div class="card-body">
                    <h6>Type de produit</h6>
                    <ul class="small">
                        <li><strong>Physique :</strong> Produit avec expédition</li>
                        <li><strong>Numérique :</strong> Téléchargement instantané</li>
                        <li><strong>Service :</strong> Prestation sans livraison</li>
                    </ul>

                    <h6 class="mt-3">Stock</h6>
                    <p class="small">Laissez vide pour un stock illimité. Sinon, indiquez la quantité disponible.</p>

                    <h6 class="mt-3">SKU</h6>
                    <p class="small">Référence unique du produit (optionnel).</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}