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

{# Définition dynamique du titre de la page #}
{% set is_edit = form.vars.value.id is not null %}
{% block title %}
    {{ is_edit ? 'Éditer le Produit: ' ~ form.vars.value.name : 'Ajouter un nouveau Produit' }}
{% endblock %}

{% block page_title %}
    {{ is_edit ? 'Éditer le Produit' : 'Créer un nouveau Produit' }}
{% endblock %}

{% block body %}

    <div class="mx-auto bg-white p-8 rounded-xl shadow-lg border border-gray-100">

        {# Début du formulaire #}
        {{ form_start(form, {'attr': {'class': 'space-y-6', 'enctype': 'multipart/form-data'}}) }}
        {# IMPORTANT : Ajouter enctype="multipart/form-data" pour l'upload de fichier #}

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

            {# Colonne 1 : Infos de base #}
            <div class="space-y-6">
                {{ form_row(form.name) }}
                {{ form_row(form.ref) }}
                {{ form_row(form.price) }}
                {{ form_row(form.state) }}

                {# --- DÉBUT : CHAMP D'UPLOAD D'IMAGE STYLISÉ --- #}
                <div class="py-4 space-y-2">
                    <label class="block text-sm font-medium text-gray-700">
                        {{ form.image.vars.label }}
                    </label>
                    <div class="flex items-center gap-4">
                        {# Le champ de type Fichier doit rester masqué #}
                        {{ form_widget(form.image, {'attr': {'class': 'hidden', 'id': form.image.vars.id}}) }}

                        {# L'élément LABEL est stylisé pour devenir le cercle cliquable #}
                        <label for="{{ form.image.vars.id }}"
                               class="relative cursor-pointer bg-gray-200 rounded-xl w-32 h-32
                                      flex items-center justify-center border-2 border-dashed border-gray-400
                                      hover:border-indigo-600 transition duration-300 overflow-hidden shadow-inner">

                            {# L'entité Product est accessible via form.vars.value #}
                            {% set product = form.vars.value %}

                            {# 1. AFFICHAGE DE L'IMAGE EXISTANTE (si présente) #}
                            {# J'utilise 'products_image' comme nom de mapping par défaut. Ajustez si nécessaire ! #}
                            {% set currentImageUrl = product.image ? vich_uploader_asset(product, 'image') : null %}

                            {% if currentImageUrl %}
                                <img src="{{ asset(currentImageUrl) }}"
                                     alt="Image produit actuelle"
                                     class="w-full h-full object-cover">

                                {# Overlay pour indiquer que c'est cliquable #}
                                <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center
                                            opacity-0 hover:opacity-100 transition duration-300 text-white font-bold text-xs p-2 text-center">
                                    Cliquer pour changer l'image
                                </div>
                            {% else %}
                                {# 2. AFFICHAGE DE L'ICÔNE PAR DÉFAUT (si aucune image) #}
                                <svg class="h-10 w-10 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 18m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                            {% endif %}
                        </label>

                        {# Afficher le nom du fichier actuel ou un message d'aide #}
                        <div class="text-sm text-gray-500">
                            {% if currentImageUrl %}
                                Image actuelle : <span class="font-medium text-gray-700">{{ product.imageFileName  }}</span>
                            {% else %}
                                Aucune image sélectionnée
                            {% endif %}
                            <p class="text-xs mt-1 text-gray-400">{{ form.image.vars.help|default('(Max 2Mo, JPG, PNG)') }}</p>
                        </div>
                    </div>
                </div>
                {# --- FIN : CHAMP D'UPLOAD D'IMAGE STYLISÉ --- #}

                <div class="pt-4 border-t">
                    <h3 class="font-semibold text-gray-700 mb-3">Options produit</h3>
                    <div class="flex flex-wrap gap-4">
                        {# Les ChoiceType Expanded pour les booléens #}
                        <div class="w-full md:w-auto flex-grow">{{ form_row(form.isHandmade) }}</div>
                        <div class="w-full md:w-auto flex-grow">{{ form_row(form.isCustom) }}</div>
                        <div class="w-full md:w-auto flex-grow">{{ form_row(form.isPromo) }}</div>
                    </div>
                </div>
            </div>

            {# Colonne 2 : Descriptions #}
            <div class="space-y-6">
                {{ form_row(form.shortDescription) }}
                {{ form_row(form.longDescription) }}
            </div>
        </div>

        {# --- BOUTONS D'ACTION (En bas) --- #}
        <div class="flex justify-end gap-3 pt-6 border-t border-gray-200 mt-8">
            {# Bouton de retour vers la liste (à adapter selon votre route) #}
            <a href="{{ path('admin_products') | default('#') }}" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg shadow-sm hover:bg-gray-50 transition">
                Annuler
            </a>

            {# Bouton de soumission (CRUCIAL) #}
            <button type="submit" class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 transition transform hover:scale-[1.01]">
                {{ is_edit ? 'Enregistrer les modifications' : 'Créer le Produit' }}
            </button>
        </div>

        {# Rendu des erreurs et champs cachés générés par Symfony #}
        {{ form_widget(form._token) }}

        {# Appel unique et correct de form_end #}
        {{ form_end(form, {'render_rest': false}) }}

    </div>

{% endblock %}
