ludikevent_crm/templates/dashboard/products/add.twig

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

{% block title %}Fiche Produit{% endblock %}
{% block title_header %}Gestion du <span class="text-blue-500">Matériel</span>{% endblock %}

{% block body %}
    <div class="max-w-6xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-700">
        {{ form_start(form) }}

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

            {# COLONNE GAUCHE : VISUEL & IDENTITÉ #}
            <div class="lg:col-span-2 space-y-8">

                {# 00. IMAGE DU PRODUIT #}
                <div class="backdrop-blur-xl bg-[#1e293b]/40 border border-white/5 rounded-[2.5rem] p-8 shadow-2xl">
                    <h3 class="text-lg font-bold text-white mb-6 flex items-center">
                        <span class="w-8 h-8 bg-purple-600/20 text-purple-500 rounded-lg flex items-center justify-center mr-3 text-[10px] font-black">00</span>
                        Visuel du produit
                    </h3>

                    <div class="space-y-4">
                        {# Aperçu si image existante #}
                        {% if product is defined and product.imageName %}
                            <div class="flex justify-center mb-6">
                                <div class="relative group">
                                    <img src="{{ vich_uploader_asset(product, 'imageFile') }}" class="h-48 w-72 object-cover rounded-[2rem] border border-white/10 shadow-2xl transition-transform group-hover:scale-105 duration-500">
                                    <div class="absolute inset-0 bg-black/40 rounded-[2rem] opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                        <p class="text-[10px] font-black text-white uppercase tracking-widest">Image actuelle</p>
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                        <div class="relative">
                            <label class="flex flex-col items-center justify-center w-full h-40 border-2 border-dashed border-white/10 rounded-[2rem] cursor-pointer bg-slate-900/30 hover:bg-slate-900/50 hover:border-blue-500/40 transition-all group">
                                <div class="flex flex-col items-center justify-center pt-5 pb-6 text-center px-4">
                                    <svg class="w-10 h-10 mb-3 text-slate-500 group-hover:text-blue-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                                    </svg>
                                    <p class="mb-1 text-[10px] font-black text-slate-400 uppercase tracking-widest">
                                        <span class="text-blue-500">Cliquez pour modifier</span> l'image
                                    </p>
                                    <p class="text-[9px] text-slate-600 uppercase font-bold tracking-tighter">JPG, PNG ou WEBP (Max 2Mo)</p>
                                </div>
                                {{ form_widget(form.imageFile, {'attr': {'class': 'hidden'}}) }}
                            </label>
                            <div class="text-rose-500 text-[10px] font-bold mt-2 ml-4 uppercase">
                                {{ form_errors(form.imageFile) }}
                            </div>
                        </div>
                    </div>
                </div>

                {# 01. INFORMATIONS GÉNÉRALES #}
                <div class="backdrop-blur-xl bg-[#1e293b]/40 border border-white/5 rounded-[2.5rem] p-8 shadow-2xl">
                    <h3 class="text-lg font-bold text-white mb-6 flex items-center">
                        <span class="w-8 h-8 bg-blue-600/20 text-blue-500 rounded-lg flex items-center justify-center mr-3 text-[10px] font-black">01</span>
                        Détails du Catalogue
                    </h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="md:col-span-2">
                            {{ form_label(form.name, 'Désignation Commerciale', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1 mb-2 block'}}) }}
                            {{ form_widget(form.name, {'attr': {'placeholder': 'Ex: Château Gonflable Jungle', 'class': 'w-full bg-slate-900/50 border-white/5 rounded-2xl text-white focus:ring-blue-500/20 focus:border-blue-500 transition-all py-3.5 px-5'}}) }}
                        </div>

                        <div>
                            {{ form_label(form.category, 'Catégorie', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1 mb-2 block'}}) }}
                            {{ form_widget(form.category, {'attr': {'class': 'w-full bg-slate-900/50 border-white/5 rounded-2xl text-white focus:ring-blue-500/20 focus:border-blue-500 transition-all py-3.5 px-5'}}) }}
                        </div>

                        <div>
                            {{ form_label(form.ref, 'Référence Interne (SKU)', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1 mb-2 block'}}) }}
                            {{ form_widget(form.ref, {'attr': {'placeholder': 'REF-000', 'class': 'w-full bg-slate-900/50 border-white/5 rounded-2xl text-white font-mono focus:ring-blue-500/20 focus:border-blue-500 transition-all py-3.5 px-5'}}) }}
                        </div>
                    </div>
                </div>
            </div>

            {# COLONNE DROITE : TARIFICATION #}
            <div class="lg:col-span-1 space-y-8">
                <div class="backdrop-blur-xl bg-[#1e293b]/40 border border-white/5 rounded-[2.5rem] p-8 shadow-2xl h-full border-l-emerald-500/10 border-l-2">
                    <h3 class="text-lg font-bold text-white mb-8 flex items-center">
                        <span class="w-8 h-8 bg-emerald-600/20 text-emerald-500 rounded-lg flex items-center justify-center mr-3 text-[10px] font-black">02</span>
                        Finances & Tarifs
                    </h3>

                    <div class="space-y-8">
                        {# INSTALLATION (Montant) #}
                        <div class="p-5 bg-white/5 rounded-3xl border border-white/5 relative overflow-hidden group">
                            <div class="absolute top-0 right-0 p-2 opacity-10">
                                <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                            </div>
                            {{ form_label(form.installation, 'Forfait Installation (€)', {'label_attr': {'class': 'text-[9px] font-black text-amber-500 uppercase tracking-widest mb-3 block'}}) }}
                            {{ form_widget(form.installation, {'attr': {'class': 'w-full bg-slate-950/50 border-white/10 rounded-xl text-amber-500 font-bold focus:ring-amber-500/20 focus:border-amber-500 transition-all py-3 px-4 text-lg'}}) }}
                            <p class="text-[8px] text-slate-500 mt-2 font-bold uppercase italic tracking-tighter">Saisir 0 si inclus dans la loc</p>
                        </div>

                        {# PRIX LOCATION #}
                        <div class="space-y-6">
                            <div>
                                {{ form_label(form.priceDay, 'Tarif 1er Jour (€)', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1 mb-2 block'}}) }}
                                <div class="relative">
                                    {{ form_widget(form.priceDay, {'attr': {'class': 'w-full bg-slate-900/50 border-white/5 rounded-2xl text-emerald-400 font-black text-xl focus:ring-emerald-500/20 focus:border-emerald-500 transition-all py-4 px-5'}}) }}
                                    <span class="absolute right-5 top-1/2 -translate-y-1/2 text-slate-600 font-bold">€HT</span>
                                </div>
                            </div>

                            <div>
                                {{ form_label(form.priceSup, 'Tarif Jour Sup. (€)', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1 mb-2 block'}}) }}
                                <div class="relative">
                                    {{ form_widget(form.priceSup, {'attr': {'class': 'w-full bg-slate-900/50 border-white/5 rounded-2xl text-blue-400 font-black text-xl focus:ring-blue-500/20 focus:border-blue-500 transition-all py-4 px-5'}}) }}
                                    <span class="absolute right-5 top-1/2 -translate-y-1/2 text-slate-600 font-bold">€HT</span>
                                </div>
                            </div>
                        </div>

                        {# CAUTION #}
                        <div class="pt-8 border-t border-white/5">
                            {{ form_label(form.caution, 'Montant de la Caution (€)', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1 mb-2 block'}}) }}
                            <div class="relative">
                                {{ form_widget(form.caution, {'attr': {'class': 'w-full bg-slate-900/50 border-white/5 rounded-2xl text-white font-mono focus:ring-blue-500/20 focus:border-blue-500 transition-all py-3 px-5 text-center'}}) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# FOOTER ACTIONS #}
        <div class="mt-12 mb-20 flex items-center justify-between backdrop-blur-xl bg-slate-900/40 p-6 rounded-[2rem] border border-white/5 shadow-xl">
            <a href="{{ path('app_crm_product') }}" class="px-8 py-3 text-[10px] font-black text-slate-400 hover:text-white uppercase tracking-widest transition-colors flex items-center group">
                <svg class="w-4 h-4 mr-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="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
                Retour au catalogue
            </a>

            <button type="submit" class="relative overflow-hidden group px-12 py-4 bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-black uppercase tracking-[0.2em] rounded-2xl transition-all shadow-lg shadow-blue-600/30">
                <span class="relative z-10 flex items-center">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg>
                    Enregistrer la fiche
                </span>
                <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
            </button>
        </div>

        {{ form_end(form) }}
    </div>
{% endblock %}