ludikevent_crm/templates/dashboard/formules/config-free.twig

<form action="{{ path('app_crm_formules_view', {id: formule.id}) }}" method="POST" class="w-full backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[2.5rem] p-10 shadow-2xl relative overflow-hidden mt-6">
    <div class="absolute -top-24 -right-24 w-48 h-48 bg-blue-500/10 rounded-full blur-3xl pointer-events-none"></div>

    <div class="relative z-10 flex flex-col md:flex-row md:items-start gap-8">
        {# STRUCTURES #}
        <div class="flex-1">
            <label for="nbStructureMax" class="block text-lg font-medium text-white/80 mb-3 ml-2">Nombre max structures</label>
            <div class="relative group">
                <div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none text-blue-400/60 group-focus-within:text-blue-400 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                    </svg>
                </div>
                <input type="number" name="nbStructureMax" id="nbStructureMax" value="{{ formule.formulesRestriction.nbStructureMax|default(0) }}" min="0" class="block w-full pl-14 pr-6 py-4 bg-white/10 border border-white/10 rounded-2xl text-white text-xl font-semibold focus:ring-2 focus:ring-blue-500/50 outline-none transition-all">
            </div>
            <p class="mt-4 text-sm text-white/40 italic leading-relaxed">Limite totale de structures gonflables ou rigides.</p>
        </div>

        {# ALIMENTAIRE #}
        <div class="flex-1">
            <label for="nbAlimentaireMax" class="block text-lg font-medium text-white/80 mb-3 ml-2">Nombre max alimentaire</label>
            <div class="relative group">
                <div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none text-orange-400/60 group-focus-within:text-orange-400 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                    </svg>
                </div>
                <input type="number" name="nbAlimentaireMax" id="nbAlimentaireMax" value="{{ formule.formulesRestriction.nbAlimentaireMax|default(0) }}" min="0" class="block w-full pl-14 pr-6 py-4 bg-white/10 border border-white/10 rounded-2xl text-white text-xl font-semibold focus:ring-2 focus:ring-orange-500/50 outline-none transition-all">
            </div>
            <p class="mt-4 text-sm text-white/40 italic leading-relaxed">Machines à barbe à papa, popcorn, buffets, etc.</p>
        </div>

        {# BARNUMS #}
        <div class="flex-1">
            <label for="nbBarhumsMax" class="block text-lg font-medium text-white/80 mb-3 ml-2">Nombre max barnums</label>
            <div class="relative group">
                <div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none text-purple-400/60 group-focus-within:text-purple-400 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                    </svg>
                </div>
                <input type="number" name="nbBarhumsMax" id="nbBarhumsMax" value="{{ formule.formulesRestriction.nbBarhumsMax|default(0) }}" min="0" class="block w-full pl-14 pr-6 py-4 bg-white/10 border border-white/10 rounded-2xl text-white text-xl font-semibold focus:ring-2 focus:ring-purple-500/50 outline-none transition-all">
            </div>
            <p class="mt-4 text-sm text-white/40 italic leading-relaxed">Tentes de réception et protections extérieures.</p>
        </div>

        <div class="flex items-center self-center md:self-auto pt-2">
            <button type="submit" class="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-2xl transition-all shadow-lg active:scale-95">
                Enregistrer
            </button>
        </div>
    </div>
</form>

<form action="{{ path('app_crm_formules_view', {id: formule.id}) }}" method="POST" class="w-full backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[2.5rem] p-8 shadow-2xl relative overflow-hidden mt-6">
    <div class="w-full form-repeater" data-component="repeater" is="repeat-line">
        <div class="flex items-center justify-between mb-6 px-4">
            <h4 class="text-sm font-black text-white uppercase tracking-widest">Détail des produits autorisés</h4>
        </div>

        <ol class="form-repeater__rows space-y-4" data-ref="rows">
            {% for key,line in restriction %}
                <li class="form-repeater__row group animate-in slide-in-from-right-5 duration-300">
                    <fieldset class="backdrop-blur-md bg-white/5 border border-white/10 rounded-[2.5rem] p-6 hover:border-blue-500/30 transition-all shadow-xl">
                        <div class="grid grid-cols-1 lg:grid-cols-12 gap-5 items-end">
                            <input type="hidden" name="rest[{{ key }}][id]" value="{{ line.id }}">
                            {# 1. PRODUIT #}
                            <div class="lg:col-span-7">
                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block">Produit / Prestation</label>
                                <div class="relative flex items-center">
                                    <input readonly type="text" name="rest[{{ key }}][product]" value="{{ line.product }}" required class="w-full bg-slate-950/50 border border-white/10 rounded-2xl text-white focus:border-purple-500 transition-all py-3 pl-5 pr-24 text-sm outline-none">
                                    <div class="absolute right-2 flex items-center gap-1.5">
                                        <button is="search-productformule" type="button" class="p-2 bg-blue-500/10 hover:bg-blue-500 text-blue-400 hover:text-white rounded-xl transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></button>
                                        <button is="search-optionsformule" type="button" class="p-2 bg-purple-500/10 hover:bg-purple-500 text-purple-400 hover:text-white rounded-xl transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16l2.879-2.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242zM21 21l-6-6" /></svg></button>
                                    </div>
                                </div>
                            </div>

                            {# 2. TYPE #}
                            <div class="lg:col-span-4">
                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block">Catégorie de restriction</label>
                                <select ds required name="rest[{{ key }}][type]" class="w-full bg-slate-950/50 border border-white/10 rounded-2xl text-white focus:border-blue-500 transition-all py-3 px-4 text-sm outline-none appearance-none cursor-pointer">
                                    <option {% if line.type =="structure" %}selected{% endif%} value="structure">Structure</option>
                                    <option {% if line.type =="alimentaire" %}selected{% endif%} value="alimentaire">Alimentaire</option>
                                    <option {% if line.type =="barhnums" %}selected{% endif%} value="barhnums">Barnums</option>
                                </select>
                            </div>

                            {# 3. SUPPRIMER #}
                            <div class="lg:col-span-1 flex justify-center">
                                <button type="button" data-ref="removeButton" class="p-3 bg-red-500/10 hover:bg-red-500 text-red-500 hover:text-white rounded-xl transition-all">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                </button>
                            </div>
                        </div>
                    </fieldset>
                </li>
            {% endfor %}
        </ol>

        <div class="mt-6 px-4 space-y-4">
            <button type="button" data-ref="addButton" class="w-full py-4 border-2 border-dashed border-white/10 hover:border-purple-500/50 bg-white/5 hover:bg-purple-500/10 rounded-3xl text-purple-400 text-[10px] font-black uppercase tracking-[0.4em] transition-all flex items-center justify-center space-x-3 group">
                <span class="text-xl group-hover:rotate-90 transition-transform">+</span>
                <span>Ajouter une prestation</span>
            </button>

            <button type="submit" class="group w-full py-5 bg-blue-600 hover:bg-blue-500 text-white font-black text-[11px] uppercase tracking-[0.3em] rounded-2xl shadow-xl transition-all flex items-center justify-center">
                <span>Sauvegarder les modifications</span>
                <svg class="w-4 h-4 ml-3 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
            </button>
        </div>
    </div>
</form>