{% 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 --- #}
        <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>
                </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 <span class="text-[#f39e36]">{{ formule.name }}</span>
                    </h1>

                    <div class="prose prose-slate mb-10">
                        <div class="text-lg font-medium text-slate-600 leading-relaxed">
                            {% 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</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>

                    <a href="{{ path('reservation_contact') }}" class="w-full bg-slate-900 text-white text-center py-6 rounded-3xl font-black uppercase italic tracking-widest hover:bg-[#fc0e50] transition-colors duration-300 shadow-xl">
                        Réserver cette formule
                    </a>
                </div>
            </div>
        </div>

        {# --- SECTION DYNAMIQUE (FREE OU PACK) --- #}
        <div class="max-w-7xl mx-auto px-4 py-20">

            {% if formule.type == "free" %}
                <flow-formule-configurator
                    data-limits='{"structure": {{ formule.formulesRestriction.nbStructureMax|default(0) }}, "alimentaire": {{ formule.formulesRestriction.nbAlimentaireMax|default(0) }}, "barnum": {{ formule.formulesRestriction.nbBarhumsMax|default(0) }}}'
                    data-prices='{"p1": {{ formule.price1j|default(0) }}, "p2": {{ formule.price2j|default(0) }}, "p5": {{ formule.price5j|default(0) }}}'
                    data-formule-id="{{ formule.id }}">
                    
                    {# --- DESIGN BENTO POUR FORMULE FREE --- #}
                    <div class="flex items-center space-x-4 mb-12">
                        <h2 class="text-4xl font-black text-slate-900 uppercase italic tracking-tighter">Composez <span class="text-[#f39e36]">votre pack</span></h2>
                        <div class="h-1 flex-grow bg-slate-100 rounded-full"></div>
                    </div>

                    {# Grille Bento des Quotas #}
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
                        <div class="bg-blue-50 border-4 border-slate-900 rounded-[2.5rem] p-8 flex flex-col justify-between h-30 group hover:-translate-y-1 transition-transform">
                            <div>
                                <p class="text-4xl font-black text-slate-900 leading-none">
                                    <span id="count-structure" class="text-[#f39e36]">0</span><span class="text-2xl text-slate-400">/{{ formule.formulesRestriction.nbStructureMax|default(0) }}</span>
                                </p>
                                <p class="text-xs font-black text-slate-400 uppercase italic mt-2 tracking-widest">Structures au choix</p>
                            </div>
                        </div>

                        <div class="bg-orange-50 border-4 border-slate-900 rounded-[2.5rem] p-8 flex flex-col justify-between h-30 group hover:-translate-y-1 transition-transform">
                            <div>
                                <p class="text-4xl font-black text-slate-900 leading-none">
                                    <span id="count-alimentaire" class="text-[#f39e36]">0</span><span class="text-2xl text-slate-400">/{{ formule.formulesRestriction.nbAlimentaireMax|default(0) }}</span>
                                </p>
                                <p class="text-xs font-black text-slate-400 uppercase italic mt-2 tracking-widest">Animations Alimentaires</p>
                            </div>
                        </div>

                        <div class="bg-purple-50 border-4 border-slate-900 rounded-[2.5rem] p-8 flex flex-col justify-between h-30 group hover:-translate-y-1 transition-transform">
                            <div>
                                <p class="text-4xl font-black text-slate-900 leading-none">
                                    <span id="count-barnum" class="text-[#f39e36]">0</span><span class="text-2xl text-slate-400">/{{ formule.formulesRestriction.nbBarhumsMax|default(0) }}</span>
                                </p>
                                <p class="text-xs font-black text-slate-400 uppercase italic mt-2 tracking-widest">Barnums & Mobilier</p>
                            </div>
                        </div>
                    </div>

                    {# Catalogue des produits éligibles #}
                    <h3 class="text-[10px] font-black text-slate-400 uppercase tracking-[0.4em] mb-8 text-center italic">— Catalogue éligible à cette formule —</h3>
                    
                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6" id="pack-grid">
                        {% for item in formule.formulesRestriction.restrictionConfig %}
                            {% set product = loadProductByName(item.product) %}
                            {% set catKey = item.type %}
                            {% if item.type != 'structure' and item.type != 'alimentaire' %}
                                {% set catKey = 'barnum' %}
                            {% endif %}
                            
                            <div class="product-card group cursor-pointer border-2 border-slate-900 rounded-[2rem] p-2 bg-white hover:bg-slate-50 transition-all shadow-[8px_8px_0px_0px_rgba(15,23,42,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 relative"
                                 data-category="{{ catKey }}"
                                 data-id="{{ product.id }}"
                                 data-selected="false">
                                
                                {# Checkbox Indicator #}
                                <div class="absolute top-4 right-4 z-10 w-6 h-6 bg-white border-2 border-slate-900 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity selection-indicator">
                                    <div class="w-3 h-3 bg-[#f39e36] rounded-full hidden"></div>
                                </div>

                                <div class="aspect-square rounded-[1.5rem] overflow-hidden bg-slate-100 mb-3 border border-slate-900/10">
                                    {% if product.image %}
                                        <img src="{{ product.image|imagine_filter('webp') }}" alt="{{ product.name }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                                    {% else %}
                                        <div class="w-full h-full flex items-center justify-center italic text-[8px] font-black text-slate-300 uppercase">Image non disp.</div>
                                    {% endif %}
                                </div>
                                <div class="px-2 pb-2">
                                    <span class="text-[8px] font-black uppercase px-2 py-0.5 rounded-full border border-slate-900 {% if item.type == 'structure' %}bg-blue-100{% elseif item.type == 'alimentaire' %}bg-orange-100{% else %}bg-purple-100{% endif %}">
                                        {{ item.type }}
                                    </span>
                                    <h4 class="text-[11px] font-black text-slate-900 uppercase italic leading-tight mt-2 line-clamp-2">{{ product.name|default(item.product) }}</h4>
                                </div>
                            </div>
                        {% endfor %}
                    </div>

                    {# Action Bar #}
                    <div class="mt-12 text-center sticky bottom-8 z-50">
                        <a id="btn-validate-pack" href="#" class="inline-block px-12 py-4 bg-slate-900 text-white rounded-full font-black uppercase italic tracking-widest hover:bg-[#fc0e50] transition-all shadow-xl opacity-50 pointer-events-none transform translate-y-4">
                            Valider mon pack (0)
                        </a>
                    </div>
                </flow-formule-configurator>
            {% endif %}

            {% if formule.type == "pack" %}
                {# --- COMPOSITION DU PACK (EXISTANT) --- #}
                <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-4 border-slate-900 rounded-3xl group hover:border-[#f39e36] transition-colors shadow-[8px_8px_0px_0px_rgba(15,23,42,1)] mb-4">
                                <div class="w-16 h-16 rounded-2xl overflow-hidden border-2 border-slate-900 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-[9px] 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-[#f39e36]">
                                    <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-4 border-slate-900 rounded-[2.5rem] relative overflow-hidden group shadow-[8px_8px_0px_0px_rgba(15,23,42,1)]">
                                <div class="w-12 h-12 bg-white border-2 border-slate-900 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>
                                <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-4 border-dashed border-slate-200 rounded-[3rem]">
                                <p class="text-slate-300 font-bold uppercase text-[10px] tracking-widest italic text-center">Aucun bonus supplémentaire inclus dans cette offre.</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

        </div>
    </div>


{% endblock %}