{% extends 'base.html.twig' %}

{% block body %}
<section class="product-detail py-5">
    <div class="container">

        {# Breadcrumbs #}
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ path('app_product_index') }}">Catalogue</a></li>
                {% if product.category %}
                    <li class="breadcrumb-item"><a href="{{ path('app_product_category', { slug: product.category.slug }) }}">{{ product.category.name }}</a></li>
                {% endif %}
                <li class="breadcrumb-item active" aria-current="page">{{ product.title }}</li>
            </ol>
        </nav>

        <div class="row">
            {# Galerie images #}
            <div class="col-lg-6 mb-4 mb-lg-0">
                <div class="product-gallery" data-controller="product-gallery">
                    {# Image principale — fallback vers la 1re image galerie si pas d'image principale #}
                    {% set mainMedia = product.image ?? (product.galleryImages|length > 0 ? product.galleryImages|first.media : null) %}
                    <div class="product-gallery__main" data-product-gallery-target="main">
                        {% if mainMedia %}
                            <img src="{{ asset('documents/medias/' ~ mainMedia.fileName) }}"
                                 alt="{{ product.title }}"
                                 data-product-gallery-target="mainImg"
                                 class="product-gallery__main-img">
                        {% else %}
                            <div class="product-gallery__placeholder">
                                <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
                            </div>
                        {% endif %}

                        {# Badges overlay #}
                        <div class="product-gallery__badges">
                            {% if product.onSale %}
                                <span class="product-badge product-badge--promo">Promo</span>
                            {% endif %}
                            {% if product.availability.value == 'unavailable' %}
                                <span class="product-badge product-badge--unavailable">Indisponible</span>
                            {% elseif product.availability.value == 'on_request' %}
                                <span class="product-badge product-badge--request">Sur devis</span>
                            {% endif %}
                        </div>
                    </div>

                    {# Thumbnails galerie #}
                    {% set allImages = [] %}
                    {% if product.image %}
                        {% set allImages = allImages|merge([{ media: product.image, alt: product.title }]) %}
                    {% endif %}
                    {% for gi in product.galleryImages %}
                        {% if gi.media %}
                            {% set allImages = allImages|merge([{ media: gi.media, alt: gi.media.name|default(product.title) }]) %}
                        {% endif %}
                    {% endfor %}
                    {% if allImages|length > 1 %}
                    <div class="product-gallery__thumbs">
                        {% for img in allImages %}
                        <button class="product-gallery__thumb{{ loop.first ? ' active' : '' }}"
                                data-action="product-gallery#switchImage"
                                data-product-gallery-src-param="{{ asset('documents/medias/' ~ img.media.fileName) }}"
                                data-product-gallery-alt-param="{{ img.alt }}">
                            <img src="{{ asset('documents/medias/' ~ img.media.fileName) }}"
                                 alt="{{ img.alt }}" loading="lazy">
                        </button>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>

            {# Infos produit #}
            <div class="col-lg-6">
                <div class="product-info">
                    {% if product.category %}
                        <a href="{{ path('app_product_category', { slug: product.category.slug }) }}"
                           class="product-info__category">{{ product.category.name }}</a>
                    {% endif %}

                    <h1 class="product-info__title">{{ product.title }}</h1>

                    {% if product.shortDescription %}
                        <p class="product-info__short-desc">{{ product.shortDescription }}</p>
                    {% endif %}

                    {# Prix #}
                    <div class="product-info__pricing">
                        {% if product.priceHT is not null %}
                            {% if product.onSale %}
                                <span class="product-info__price-old">
                                    {{ displayHT ? product.oldPriceHT|number_format(2, ',', ' ') : product.oldPriceTTC|number_format(2, ',', ' ') }} €
                                </span>
                            {% endif %}
                            <span class="product-info__price">
                                {{ displayHT ? product.priceHT|number_format(2, ',', ' ') : product.priceTTC|number_format(2, ',', ' ') }} €
                                <small class="product-info__price-tax">{{ displayHT ? 'HT' : 'TTC' }}</small>
                            </span>
                            {% if displayHT %}
                                <span class="product-info__price-secondary">
                                    soit {{ product.priceTTC|number_format(2, ',', ' ') }} € TTC
                                </span>
                            {% else %}
                                <span class="product-info__price-secondary">
                                    soit {{ product.priceHT|number_format(2, ',', ' ') }} € HT
                                </span>
                            {% endif %}
                            <span class="product-info__vat">TVA {{ product.vatRate|number_format(0) }}%</span>
                        {% else %}
                            <span class="product-info__price-request">Prix sur demande</span>
                        {% endif %}
                    </div>

                    {# Variantes #}
                    {% if product.variants|length > 0 %}
                    <div class="product-info__variants" data-controller="product-variant">
                        <label class="product-info__variants-label">Options :</label>
                        <div class="product-info__variants-list">
                            {% for variant in product.variants %}
                                {% if variant.active %}
                                <button class="product-variant-btn {{ loop.first ? 'active' : '' }}"
                                        data-action="product-variant#select"
                                        data-product-variant-price-ht-param="{{ variant.effectivePriceHT }}"
                                        data-product-variant-price-ttc-param="{{ variant.priceTTC }}"
                                        data-product-variant-old-ht-param="{{ variant.oldPriceHT }}"
                                        data-product-variant-old-ttc-param="{{ variant.oldPriceTTC }}"
                                        data-product-variant-label-param="{{ variant.label }}"
                                        data-product-variant-id-param="{{ variant.id }}">
                                    {{ variant.label }}
                                    {% if variant.priceHT is not null %}
                                        <span class="product-variant-btn__price">
                                            {{ displayHT ? variant.effectivePriceHT|number_format(2, ',', ' ') : variant.priceTTC|number_format(2, ',', ' ') }} €
                                        </span>
                                    {% endif %}
                                </button>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}

                    {# Disponibilite #}
                    <div class="product-info__availability product-info__availability--{{ product.availability.cssClass }}">
                        <span class="product-info__availability-dot"></span>
                        {{ product.availability.label }}
                    </div>

                    {# CTAs : panier → booking → contact (on_request) → disabled #}
                    <div class="product-info__actions">
                        {% if product.bookingUrl %}
                            <a href="{{ product.bookingUrl }}" target="_blank" rel="noopener"
                               class="btn btn-primary btn-lg product-info__cta">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                                {{ product.bookingLabel|default('Reserver') }}
                            </a>
                        {% elseif product.availability.value == 'on_request' %}
                            <a href="{{ path('app_contact') }}" class="btn btn-primary btn-lg product-info__cta">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                                Demander un devis
                            </a>
                        {% elseif product.availability.value == 'available' and product.priceHT is not null and site_context.hasModule('ecommerce') %}
                            <form action="{{ path('app_cart_add') }}" method="post" class="product-info__cart-form" data-controller="cart-add">
                                {% if product.variants|length > 0 %}
                                    <input type="hidden" name="variantId" value="{{ product.variants|first.id }}" data-cart-add-target="variantId">
                                {% endif %}
                                <input type="hidden" name="productId" value="{{ product.id }}">
                                <input type="hidden" name="qty" value="1">
                                <button type="submit" class="btn btn-primary btn-lg product-info__cta" data-action="cart-add#submit">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
                                    Ajouter au panier
                                </button>
                            </form>
                        {% elseif product.availability.value == 'available' %}
                            <a href="{{ path('app_contact') }}" class="btn btn-primary btn-lg product-info__cta">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                                Nous contacter
                            </a>
                        {% else %}
                            <button class="btn btn-secondary btn-lg product-info__cta" disabled>
                                Indisponible
                            </button>
                        {% endif %}
                    </div>

                    {# Tags #}
                    {% if product.tags|length > 0 %}
                    <div class="product-info__tags">
                        {% for tag in product.tags %}
                            <span class="badge bg-light text-dark">{{ tag.title }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        {# Description longue (TipTap) #}
        {% if product.content|trim is not empty %}
        <div class="product-description mt-5">
            <h2 class="product-description__title">Description</h2>
            <div class="content-blocks">
                {{ product.content|raw }}
            </div>
        </div>
        {% endif %}

        {# Produits associes #}
        {% if relatedProducts|length > 0 %}
        <div class="product-related mt-5">
            <h2 class="product-related__title">Produits associes</h2>
            <div class="products-grid">
                {% for related in relatedProducts %}
                    {% include '_partials/_product_card.html.twig' with {
                        product: related,
                        site: site,
                        displayHT: displayHT
                    } %}
                {% endfor %}
            </div>
        </div>
        {% endif %}

    </div>
</section>

{# Lightbox (modale fullscreen pour zoom image) #}
<div class="product-lightbox" data-product-gallery-target="lightbox" hidden>
    <button class="product-lightbox__close" data-action="product-gallery#closeLightbox" aria-label="Fermer">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>
    <button class="product-lightbox__nav product-lightbox__nav--prev" data-action="product-gallery#prevImage" aria-label="Precedent">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
    </button>
    <img class="product-lightbox__img" data-product-gallery-target="lightboxImg" src="" alt="">
    <button class="product-lightbox__nav product-lightbox__nav--next" data-action="product-gallery#nextImage" aria-label="Suivant">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
    </button>
</div>
{% endblock %}