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

{% block title %}Création d'une nouvelle formule{% endblock %}

{% block body %}
    <div class="min-h-screen p-6 flex flex-col items-center justify-start">

        {# Header & Tabs #}
        <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_add',{type:"pack"}) }}" 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_add',{type:"free"}) }}" 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>

        {# Main Form Container #}
        <div class="w-full space-y-6">
            {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}

            {# Glass Section: Image Upload #}
            <div class="backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[2.5rem] p-8 shadow-2xl overflow-hidden relative group">
                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-blue-500/50 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">01</span>
                    Visuel de la formule
                </h3>

                <div class="flex flex-col md:flex-row items-center gap-10">
                    <div class="relative group/img">
                        <div class="w-44 h-44 rounded-3xl overflow-hidden border border-white/10 bg-slate-900/80 flex items-center justify-center shadow-inner">
                            <img id="product-image-preview"
                                 src="{{ formule.imageName ? vich_uploader_asset(formule, 'imageFile') : '#' }}"
                                 class="w-full h-full object-cover {{ formule.imageName ? '' : 'hidden' }}">

                            <svg id="product-image-placeholder"
                                 class="w-12 h-12 text-slate-700 {{ formule.imageName ? 'hidden' : '' }}"
                                 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>
                    </div>

                    <div class="flex-1 w-full space-y-4">
                        {{ form_label(form.imageFile, 'Cliquer pour uploader un visuel', {'label_attr': {'class': 'text-[10px] font-black text-slate-300 uppercase tracking-widest'}}) }}
                        {{ form_widget(form.imageFile, {
                            'id': 'product_image_input',
                            '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 file:backdrop-blur-md
                  hover:file:bg-white/20 transition-all cursor-pointer'
                            }
                        }) }}
                        <p class="text-[10px text-slate-300 italic">Formats acceptés: PNG, JPG (Max 2Mo)</p>
                    </div>
                </div>
            </div>

            {# Glass Section: Form Data #}
            <div class="backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[2.5rem] p-8 shadow-2xl">
                <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">02</span>
                    Informations Générales
                </h3>

                <div class="space-y-6">
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-300 uppercase tracking-widest ml-1">Nom de la formule</label>
                        {{ form_widget(form.name, {
                            'attr': {
                                'placeholder': 'ex: Pack Premium Gold',
                                'class': 'w-full bg-white/5 border border-white/10 rounded-xl py-4 px-5 text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all'
                            }
                        }) }}
                    </div>

                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-300 uppercase tracking-widest ml-1">Description détaillée</label>
                        {{ form_widget(form.description, {
                            'attr': {
                                'class': 'w-full bg-white/5 border border-white/10 rounded-xl py-4 px-5 text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all min-h-[150px]',
                                'placeholder': 'Décrivez les avantages de cette formule...'
                            }
                        }) }}
                    </div>
                    <button type="submit" class="group relative w-full inline-flex items-center justify-center px-8 py-4 font-black text-[10px] uppercase tracking-widest text-white transition-all bg-blue-600 rounded-xl hover:bg-blue-500 shadow-[0_10px_20px_rgba(37,99,235,0.3)]">
                        Enregistrer la configuration
                        <svg class="w-4 h-4 ml-2 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_end(form) }}
        </div>
    </div>

{% endblock %}
