Files
ludikevent_crm/templates/dashboard/formules/view.twig

213 lines
14 KiB
Twig

{% extends 'dashboard/base.twig' %}
{% block title %}Modifier : {{ formule.name }}{% endblock %}
{% block actions %}
<div class="flex items-center space-x-4">
{# SYSTÈME DE STATUT TYPE 'ADMIN' ADAPTÉ AUX FORMULES #}
<div class="flex items-center">
{% if not formule.isPublish %}
<div class="flex items-center bg-white/5 backdrop-blur-xl border border-rose-500/30 rounded-2xl overflow-hidden shadow-xl">
<div class="flex items-center px-5 py-3 space-x-3 bg-rose-500/5">
<div class="w-2 h-2 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.8)]"></div>
<span class="text-[10px] font-black text-rose-500 uppercase tracking-widest">Hors ligne</span>
</div>
<a data-turbo="false" href="{{ path('app_crm_formules_view', {id: formule.id, act: 'togglePublish', status: 'true'}) }}"
class="px-6 py-3 bg-emerald-600 hover:bg-emerald-500 text-white text-[10px] font-black uppercase tracking-widest transition-all active:scale-95 border-l border-white/5">
Publier
</a>
</div>
{% else %}
<div class="flex items-center bg-white/5 backdrop-blur-xl border border-emerald-500/30 rounded-2xl overflow-hidden shadow-xl">
<div class="flex items-center px-5 py-3 space-x-3 bg-emerald-500/5">
<div class="w-2 h-2 rounded-full bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.8)] animate-pulse"></div>
<span class="text-[10px] font-black text-emerald-400 uppercase tracking-widest">En ligne</span>
</div>
<a href="{{ path('app_crm_formules_view', {id: formule.id, act: 'togglePublish', status: 'false'}) }}"
data-turbo-confirm="Voulez-vous vraiment masquer cette formule ?"
class="px-6 py-3 bg-white/5 hover:bg-rose-600 text-slate-400 hover:text-white text-[10px] font-black uppercase tracking-widest transition-all active:scale-95 border-l border-white/10">
Désactiver
</a>
</div>
{% endif %}
</div>
<a href="{{ path('app_crm_formules') }}" class="px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-slate-400 hover:text-white border border-white/5 hover:bg-white/5 transition-all">
Annuler
</a>
</div>
{% endblock %}
{% block body %}
<div class="min-h-screen p-6 flex flex-col items-center justify-start animate-in fade-in duration-500">
{# Header Infos #}
<div class="w-full mb-8 flex flex-col items-start gap-2">
<h1 class="text-4xl font-black text-white italic tracking-tighter uppercase">Modification</h1>
<div class="flex items-center space-x-3">
<p class="text-[10px] font-boldtext-slate-300 uppercase tracking-[0.3em]">ID : #{{ formule.id|format("%04d") }}</p>
<span class="w-1 h-1 bg-slate-700 rounded-full"></span>
<p class="text-[10px] font-bold text-blue-500 uppercase tracking-[0.3em]">{{ type|default('PACK')|upper }}</p>
</div>
</div>
<div class="w-full max-w-4xl mb-8 flex flex-col md:flex-row justify-center items-center gap-6">
<div class="flex gap-2 p-1 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl">
<a href="{{ path('app_crm_formules_view',{type:"pack",id:formule.id}) }}" class="px-6 py-2 rounded-xl text-sm font-bold transition-all {% if type == 'pack' %}bg-blue-600 text-white shadow-lg shadow-blue-600/20{% else %}text-slate-400 hover:text-white{% endif %}">Mode Pack</a>
<a href="{{ path('app_crm_formules_view',{type:"free",id:formule.id}) }}" class="px-6 py-2 rounded-xl text-sm font-bold transition-all {% if type == 'free' %}bg-blue-600 text-white shadow-lg shadow-blue-600/20{% else %}text-slate-400 hover:text-white{% endif %}">Mode Libre</a>
</div>
</div>
<div class="w-full space-y-6">
{{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}
{# SECTION 01 : VISUEL #}
<div class="backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[2.5rem] p-8 shadow-2xl relative group overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-blue-500/40 to-transparent"></div>
<h3 class="text-[10px] font-black text-blue-400 uppercase tracking-[0.2em] mb-8 flex items-center">
<span class="w-6 h-6 bg-blue-500/10 rounded flex items-center justify-center mr-3 font-mono text-blue-500">01</span>
Visuel de la formule
</h3>
<div class="flex flex-col md:flex-row items-center gap-10">
<div class="relative">
<div class="w-48 h-48 rounded-[2rem] overflow-hidden border-2 border-white/10 bg-slate-900 flex items-center justify-center shadow-2xl transition-transform duration-500 group-hover:scale-[1.02]">
{% if formule.imageName %}
<img src="{{ vich_uploader_asset(formule, 'imageFile') }}" class="w-full h-full object-cover">
{% else %}
<div class="text-slate-700">
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
</div>
{% endif %}
</div>
</div>
<div class="flex-1 w-full space-y-4">
<label class="text-[10px] font-black text-slate-300 uppercase tracking-widest">Remplacer l'image</label>
{{ form_widget(form.imageFile, {
'attr': {
'class': 'block w-full text-xs text-slate-400 file:mr-6 file:py-3 file:px-6 file:rounded-xl file:border file:border-white/10 file:text-[10px] file:font-black file:uppercase file:bg-white/5 file:text-white cursor-pointer transition-all hover:file:bg-white/10'
}
}) }}
<p class="text-[9px] text-slate-600 italic uppercase tracking-tighter">JPG, PNG ou WEBP • Max 2Mo</p>
</div>
</div>
</div>
{# SECTION 02 : CONTENU #}
<div class="backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[2.5rem] p-8 shadow-2xl relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-purple-500/40 to-transparent"></div>
<h3 class="text-[10px] font-black text-purple-400 uppercase tracking-[0.2em] mb-8 flex items-center">
<span class="w-6 h-6 bg-purple-500/10 rounded flex items-center justify-center mr-3 font-mono text-purple-500">02</span>
Détails & Configuration
</h3>
<div class="grid grid-cols-1 gap-6">
<div class="space-y-2">
<label class="text-[10px] font-black text-slate-300 uppercase tracking-widest ml-1">Nom du pack</label>
{{ form_widget(form.name, {
'attr': {'class': 'w-full bg-white/5 border border-white/10 rounded-xl py-4 px-5 text-white focus:ring-2 focus:ring-blue-500/50 outline-none transition-all placeholder-slate-700'}
}) }}
</div>
<div class="space-y-2">
<label class="text-[10px] font-black text-slate-300 uppercase tracking-widest ml-1">Description catalogue</label>
{{ form_widget(form.description, {
'attr': {'is':'crm-editor','class': 'w-full bg-white/5 border border-white/10 rounded-xl py-4 px-5 text-white focus:ring-2 focus:ring-blue-500/50 outline-none transition-all min-h-[150px]'}
}) }}
</div>
<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 shadow-blue-600/20 transition-all hover:-translate-y-1 active:scale-[0.98] 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>
{# Champ caché pour la publication si tu l'utilises via le formulaire classique aussi #}
<div class="hidden">
{{ form_rest(form) }}
</div>
{{ form_end(form) }}
</div>
{# SECTION 03 : FORMULAIRE TARIFICATION (AUTONOME) #}
<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">
{# Ligne décorative émeraude pour le "Money" #}
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-emerald-500/40 to-transparent"></div>
<div class="flex items-center justify-between mb-8">
<h3 class="text-[10px] font-black text-emerald-400 uppercase tracking-[0.2em] flex items-center">
<span class="w-6 h-6 bg-emerald-500/10 rounded flex items-center justify-center mr-3 font-mono text-emerald-500">03</span>
Grille Tarifaire & Caution
</h3>
{# Badge de rappel du type #}
<span class="text-[9px] font-boldtext-slate-300 uppercase px-3 py-1 bg-white/5 rounded-lg border border-white/10 italic">
Tarification
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
{# Prix 1 Jour #}
<div class="space-y-2">
<label class="text-[10px] font-black text-slate-300 uppercase tracking-widest ml-1">Tarif 1 Jour</label>
<div class="relative">
<input type="number" step="0.01" name="price[1j]" value="{{ formule.price1j|default('0.00') }}"
class="w-full bg-white/5 border border-white/10 rounded-xl py-4 pl-5 pr-12 text-white font-bold focus:ring-2 focus:ring-emerald-500/50 outline-none transition-all">
<span class="absolute right-5 top-1/2 -translate-y-1/2 text-[10px] font-black text-slate-600">€</span>
</div>
</div>
{# Prix 2 Jours #}
<div class="space-y-2">
<label class="text-[10px] font-black text-slate-300 uppercase tracking-widest ml-1">Tarif 2 Jours</label>
<div class="relative">
<input type="number" step="0.01" name="price[2j]" value="{{ formule.price2j|default('0.00') }}"
class="w-full bg-white/5 border border-white/10 rounded-xl py-4 pl-5 pr-12 text-white font-bold focus:ring-2 focus:ring-emerald-500/50 outline-none transition-all">
<span class="absolute right-5 top-1/2 -translate-y-1/2 text-[10px] font-black text-slate-600">€</span>
</div>
</div>
{# Prix 5 Jours #}
<div class="space-y-2">
<label class="text-[10px] font-black text-slate-300 uppercase tracking-widest ml-1">Tarif 5 Jours</label>
<div class="relative">
<input type="number" step="0.01" name="price[5j]" value="{{ formule.price5j|default('0.00') }}"
class="w-full bg-white/5 border border-white/10 rounded-xl py-4 pl-5 pr-12 text-white font-bold focus:ring-2 focus:ring-emerald-500/50 outline-none transition-all">
<span class="absolute right-5 top-1/2 -translate-y-1/2 text-[10px] font-black text-slate-600">€</span>
</div>
</div>
{# Caution #}
<div class="space-y-2">
<label class="text-[10px] font-black text-rose-400 uppercase tracking-widest ml-1 italic">Garantie (Caution)</label>
<div class="relative">
<input type="number" step="1" name="price[caution]" value="{{ formule.caution|default('0') }}"
class="w-full bg-rose-500/5 border border-rose-500/20 rounded-xl py-4 pl-5 pr-12 text-rose-500 font-black focus:ring-2 focus:ring-rose-500/50 outline-none transition-all">
<span class="absolute right-5 top-1/2 -translate-y-1/2 text-[10px] font-black text-rose-500/50">€</span>
</div>
</div>
</div>
{# Bouton de sauvegarde spécifique aux prix #}
<div class="flex justify-end">
<button type="submit" class="group flex items-center space-x-3 px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white rounded-2xl transition-all shadow-lg shadow-emerald-900/20 active:scale-95">
<span class="text-[10px] font-black uppercase tracking-widest">Mettre à jour la tarification</span>
<svg class="w-4 h-4 transform group-hover:rotate-12 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
</form>
{% include 'dashboard/formules/config-'~formule.type~".twig" %}
</div>
{% endblock %}