{# templates/realization/show.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}
    {{ realization.title }} - Réalisation CSP
{% endblock %}

{% block body %}
    <div class="container mx-auto px-4 py-8">
        {# Fil d'ariane #}
        <div class="mb-6 text-sm text-gray-500">
            <a href="{{ path('app_home') }}" class="hover:underline">Accueil</a>
            &gt;
            <a href="{{ path('app_realization_index') }}" class="hover:underline">Réalisations & Conseils</a>
            &gt;
            <span class="text-gray-800 font-bold">{{ realization.title }}</span>
        </div>

        {# Détection du type #}
        {% set isAdvice = (realization.type == constant('App\\Entity\\Realization::TYPE_ADVICE')) %}

        {# 
           LOGIQUE DE GRILLE : 
           - Si Conseil : Une seule colonne (grid-cols-1)
           - Si Réalisation : 3 colonnes sur grand écran (lg:grid-cols-3) 
        #}
        <div class="grid grid-cols-1 {{ isAdvice ? '' : 'lg:grid-cols-3' }} gap-12 mb-16">

            {# Colonne Principale #}
            {# 
               LOGIQUE DE LARGEUR :
               - Si Conseil : Centré avec largeur max (mx-auto max-w-4xl)
               - Si Réalisation : Prend 2 colonnes sur 3 (lg:col-span-2)
            #}
            <div class="{{ isAdvice ? 'mx-auto w-full' : 'lg:col-span-2' }}">
                <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">{{ realization.title }}</h1>

                {# Photo Principale #}
                <div class="w-full h-96 bg-gray-200 rounded-lg overflow-hidden mb-8 shadow-sm flex items-center justify-center text-gray-400">
                    {% if realization.mainPhotoUrl %}
                        <img src="{{ realization.mainPhotoUrl }}" alt="{{ realization.title }}" class="w-full h-full object-cover">
                    {% else %}
                        <span class="text-lg font-bold">[Photo Principale : {{ realization.title }}]</span>
                    {% endif %}
                </div>

                {# Description Complète #}
                <div class="prose max-w-none text-gray-600 text-lg leading-relaxed mb-12">
                    {{ realization.description|default('')|raw|nl2br }}
                </div>

                {# Galerie Photos Supplémentaires #}
                {% if realization.additionalPhotos is not empty %}
                    <h3 class="text-2xl font-bold text-gray-800 mb-6">Galerie photos</h3>
                    <div class="flex overflow-x-auto space-x-4 pb-4 snap-x">
                        {% for photo in realization.additionalPhotos %}
                            <div class="snap-center shrink-0 w-80 h-64 bg-gray-200 rounded overflow-hidden relative shadow">
                                <img src="{{ photo.imageUrl }}" alt="Photo chantier" class="w-full h-full object-cover">
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            {# Sidebar : Infos & Prestation Associée #}
            {# ON AFFICHE UNIQUEMENT SI CE N'EST PAS UN CONSEIL #}
            {% if not isAdvice %}
                <div class="space-y-8">

                    {# Carte Prestation Associée #}
                    <div class="bg-gray-50 p-6 rounded border border-gray-200 sticky top-8">
                        <h3 class="font-bold text-gray-800 uppercase tracking-wide mb-4 text-sm">Prestation réalisée</h3>

                        {% if realization.heatingService %}
                            <div class="bg-white p-4 rounded shadow-sm border border-gray-100">
                                <p class="text-xs text-gray-500 font-bold uppercase mb-1">Chauffage</p>
                                <h4 class="font-bold text-blue-600 text-lg mb-2">{{ realization.heatingService.title }}</h4>
                                <a href="{{ path('app_heating_show', {'slug': realization.heatingService.slug}) }}" class="text-sm text-gray-600 hover:text-black underline">
                                    Voir cette prestation &rarr;
                                </a>
                            </div>
                        {% elseif realization.plumbingService %}
                            <div class="bg-white p-4 rounded shadow-sm border border-gray-100">
                                <p class="text-xs text-gray-500 font-bold uppercase mb-1">Plomberie</p>
                                <h4 class="font-bold text-blue-600 text-lg mb-2">{{ realization.plumbingService.title }}</h4>
                                <a href="{{ path('app_plumbing_show', {'slug': realization.plumbingService.slug}) }}" class="text-sm text-gray-600 hover:text-black underline">
                                    Voir cette prestation &rarr;
                                </a>
                            </div>
                        {% else %}
                            <p class="text-sm text-gray-500 italic">Aucune prestation spécifique liée.</p>
                        {% endif %}

                        <hr class="my-6 border-gray-200">

                        <h4 class="font-bold text-gray-800 mb-2">Besoin de la même chose ?</h4>
                        <p class="text-sm text-gray-600 mb-4">
                            Nos équipes sont prêtes à intervenir pour réaliser un projet similaire chez vous.
                        </p>
                        <button data-action="click->contact-modal#open" class="block w-full bg-gray-800 text-white text-center font-bold py-3 rounded hover:bg-gray-700 transition-colors">
                            Demander un devis
                        </button>
                    </div>

                </div>
            {% endif %}
        </div>

        {# Encart Contact (Bas de page) #}
        <section class="bg-gray-100 rounded p-12 text-center border-t border-gray-200">
            <h2 class="text-2xl font-bold mb-4 text-gray-800">
                {% if isAdvice %}
                    Une question ? Besoin de précisions ?
                {% else %}
                    Convaincu par notre travail ?
                {% endif %}
            </h2>
            <button data-action="click->contact-modal#open" class="inline-block bg-white text-gray-800 border border-gray-300 font-bold py-3 px-8 rounded hover:bg-gray-50 transition-colors">
                Contactez-nous
            </button>
        </section>
    </div>
{% endblock %}