{% 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 %}