ludikevent_crm/templates/revervation/formule/show.twig

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

{# --- SEO --- #}
{% block title %}{{ formule.name }} | Formule Événementielle - Ludik Event{% endblock %}
{% block description %}{{ formule.description|striptags|slice(0, 160) }}{% endblock %}

{% block body %}
    <div class="min-h-screen bg-white font-sans antialiased pb-20">

        {# --- HEADER / FIL D'ARIANE (STYLE SIMPLE) --- #}
        <div class="max-w-7xl mx-auto pt-16 pb-8 px-4 text-center">
            <nav class="flex justify-center space-x-4 text-[10px] mb-8 uppercase tracking-[0.3em] font-black italic">
                <a href="{{ url('reservation') }}" class="text-slate-400 hover:text-[#fc0e50] transition">ACCUEIL</a>
                <span class="text-slate-300">/</span>
                <a href="{{ url('reservation_formules') }}" class="text-slate-400 hover:text-[#fc0e50] transition">FORMULES</a>
                <span class="text-slate-300">/</span>
                <span class="text-[#f39e36] underline decoration-2 underline-offset-4">{{ formule.name }}</span>
            </nav>
        </div>

        {# --- SECTION HERO : VISUEL & PRIX --- #}
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">

                {# Gauche : Image & Badge #}
                <div class="relative group">
                    <div class="rounded-[3rem] overflow-hidden border-4 border-slate-900 shadow-[15px_15px_0px_0px_rgba(15,23,42,1)] bg-slate-50">
                        {% if formule.imageName %}
                            <img src="{{ vich_uploader_asset(formule, 'imageFile') }}"
                                 alt="{{ formule.name }}"
                                 class="w-full h-auto object-contain max-h-[600px] mx-auto transform group-hover:scale-105 transition-transform duration-700">
                        {% else %}
                            <div class="aspect-square flex items-center justify-center">
                                <img src="{{ asset('provider/images/favicon.png') }}" class="w-32 opacity-20">
                            </div>
                        {% endif %}
                    </div>

                    {# Badge Type (Rose) #}
                    <div class="absolute -top-4 -right-4 bg-[#fc0e50] text-white px-8 py-3 rounded-2xl border-4 border-slate-900 font-black text-sm uppercase italic rotate-3 shadow-lg">
                        {{ formule.type|upper }}
                    </div>
                </div>

                {# Droite : Infos & Réservation #}
                <div class="flex flex-col h-full">
                    <h1 class="text-5xl md:text-7xl font-black text-slate-900 uppercase tracking-tighter italic leading-none mb-6">
                        {{ formule.name|split(' ')|first }} <span class="text-[#f39e36]">{{ formule.name|split(' ')|slice(1)|join(' ') }}</span>
                    </h1>

                    <div class="prose prose-slate mb-10">
                        <div class="text-lg font-medium text-slate-600 leading-relaxed border-[#f39e36]">
                            {% set desc = formule.description %}
                            {% if '<p' in desc or '<div' in desc or '<span' in desc or '<br' in desc %}
                                {{ desc|raw }}
                            {% else %}
                                {{ desc|nl2br }}
                            {% endif %}
                        </div>
                    </div>

                    {# BOX TARIFS DÉGRESSIFS #}
                    <div class="bg-slate-50 border-4 border-slate-900 rounded-[2.5rem] p-8 mb-8 relative">
                        <div class="absolute -top-4 left-6 bg-white border-2 border-slate-900 px-4 py-1 rounded-full text-[10px] font-black uppercase text-[#f39e36]">Tarification Dégressive</div>

                        <div class="grid grid-cols-3 gap-4">
                            <div class="text-center">
                                <p class="text-[10px] font-black text-slate-400 uppercase mb-1">1 JOUR</p>
                                <p class="text-2xl font-black text-slate-900">{{ formule.price1j|format_currency('EUR') }}</p>
                            </div>
                            <div class="text-center border-x-2 border-slate-200">
                                <p class="text-[10px] font-black text-slate-400 uppercase mb-1 text-[#f39e36]">2 JOURS</p>
                                <p class="text-2xl font-black text-[#f39e36]">{{ formule.price2j|format_currency('EUR') }}</p>
                            </div>
                            <div class="text-center">
                                <p class="text-[10px] font-black text-slate-400 uppercase mb-1 text-[#fc0e50]">5 JOURS</p>
                                <p class="text-2xl font-black text-[#fc0e50]">{{ formule.price5j|format_currency('EUR') }}</p>
                            </div>
                        </div>

                        <div class="mt-6 pt-6 border-t border-slate-200 flex justify-between items-center">
                            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Caution : {{ formule.caution|default('0') }}€</span>
                            <span class="text-[10px] font-black text-[#fc0e50] uppercase tracking-widest italic animate-pulse">
                                Économisez {{ (((formule.price1j * 5) - formule.price5j) / (formule.price1j * 5) * 100)|round }}% sur 5j
                            </span>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        {% if formule.type == "pack" %}
            {# --- COMPOSITION DU PACK --- #}
            <div class="max-w-7xl mx-auto px-4 py-20">
                <div class="flex items-center space-x-4 mb-12">
                    <h2 class="text-4xl font-black text-slate-900 uppercase italic tracking-tighter">Ce pack <span class="text-[#f39e36]">comprend</span></h2>
                    <div class="h-1 flex-grow bg-slate-100 rounded-full"></div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                    {# Liste des produits inclus #}
                    <div class="space-y-4">
                        <h3 class="text-xs font-black text-slate-400 uppercase tracking-[0.3em] mb-6 flex items-center">
                            <span class="w-2 h-2 bg-[#f39e36] rounded-full mr-2"></span> Structures & Matériel
                        </h3>
                        {% for item in formule.formulesProductIncluses %}
                            <div class="flex items-center p-4 bg-white border-2 border-slate-100 rounded-3xl group hover:border-[#f39e36] transition-colors shadow-sm">
                                <div class="w-16 h-16 rounded-2xl overflow-hidden border border-slate-100 flex-shrink-0 bg-slate-50">
                                    {% if item.product.imageName %}
                                        <img src="{{ vich_uploader_asset(item.product, 'imageFile') }}" class="w-full h-full object-cover">
                                    {% endif %}
                                </div>
                                <div class="ml-6 flex-grow">
                                    <p class="text-xs font-black text-[#f39e36] uppercase tracking-tighter">Réf: {{ item.product.ref }}</p>
                                    <h4 class="text-lg font-black text-slate-900 uppercase leading-none italic">{{ item.product.name }}</h4>
                                </div>
                                <div class="text-slate-200 group-hover:text-[#f39e36] transition-colors">
                                    <svg class="w-6 h-6" 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>
                                </div>
                            </div>
                        {% else %}
                            <p class="text-slate-400 italic">Aucun produit inclus.</p>
                        {% endfor %}
                    </div>

                    {# Liste des options incluses #}
                    <div class="space-y-4">
                        <h3 class="text-xs font-black text-slate-400 uppercase tracking-[0.3em] mb-6 flex items-center">
                            <span class="w-2 h-2 bg-[#fc0e50] rounded-full mr-2"></span> Services & Bonus Inclus
                        </h3>
                        {% for option in formule.formulesOptionsIncluses %}
                            <div class="flex items-center p-6 bg-[#fc0e50]/5 border-2 border-[#fc0e50]/20 rounded-3xl relative overflow-hidden group">
                                <div class="w-12 h-12 bg-white border-2 border-[#fc0e50] rounded-2xl flex items-center justify-center text-[#fc0e50] shadow-sm z-10">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                    </svg>
                                </div>
                                <div class="ml-6 z-10">
                                    <h4 class="text-xl font-black text-slate-900 uppercase italic leading-none">{{ option.name }}</h4>
                                    <p class="text-[10px] font-black text-[#fc0e50] uppercase tracking-widest mt-1">Avantage inclus</p>
                                </div>
                                {# Déco de fond #}
                                <div class="absolute -right-4 -bottom-4 text-6xl opacity-10 grayscale group-hover:rotate-12 transition-transform">🎁</div>
                            </div>
                        {% else %}
                            <div class="h-full flex items-center justify-center p-12 border-2 border-dashed border-slate-100 rounded-[3rem]">
                                <p class="text-slate-300 font-bold uppercase text-[10px] tracking-widest italic">Aucun bonus supplémentaire</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}