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

{% block seo %}
    <title>{{ seo.title|default(event.title) }} — {{ site.name|default('') }}</title>
    <meta name="description" content="{{ seo.description|default(event.shortDescription|default('')) }}">
    {% if seo.image|default(null) %}
    <meta property="og:image" content="{{ seo.image }}">
    {% endif %}
{% endblock %}

{% block body %}
<div class="container py-5">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
            <li class="breadcrumb-item"><a href="{{ path('app_event_index') }}">Événements</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ event.title }}</li>
        </ol>
    </nav>

    <div class="row">
        {# ====== Contenu principal ====== #}
        <div class="col-lg-8">
            <article class="event-detail">
                {# --- En-tête --- #}
                <div class="event-detail__header">
                    <div class="event-detail__date-badge">
                        <span class="event-detail__date-day">{{ event.dateStart|date('d') }}</span>
                        <span class="event-detail__date-month">{{ event.dateStart|date('M') }}</span>
                    </div>
                    <div class="event-detail__info">
                        <h1 class="event-detail__title">{{ event.title }}</h1>
                        <div class="event-detail__meta">
                            <span class="event-detail__meta-item">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
                                {{ event.dateStart|date('d/m/Y à H:i') }}
                                {% if event.dateEnd %}
                                    — {{ event.dateEnd|date('d/m/Y à H:i') }}
                                {% endif %}
                            </span>
                            {% if event.location %}
                            <span class="event-detail__meta-item">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                                {{ event.location }}
                            </span>
                            {% endif %}
                            {% if event.past %}
                            <span class="event-detail__badge event-detail__badge--past">Terminé</span>
                            {% elseif event.upcoming %}
                            <span class="event-detail__badge event-detail__badge--upcoming">À venir</span>
                            {% endif %}
                        </div>
                    </div>
                </div>

                {# --- Image --- #}
                {% if event.image %}
                <div class="event-detail__image">
                    <img src="{{ asset('documents/medias/' ~ event.image.fileName) }}"
                         alt="{{ event.title }}"
                         class="img-fluid"
                         loading="lazy">
                </div>
                {% endif %}

                {# --- Description courte --- #}
                {% if event.shortDescription %}
                <p class="event-detail__lead">{{ event.shortDescription }}</p>
                {% endif %}

                {# --- Contenu TipTap --- #}
                {% if event.content %}
                <div class="event-detail__content article-detail__content">
                    {{ event.content|raw }}
                </div>
                {% endif %}

                {# --- Retour --- #}
                <div class="event-detail__back">
                    <a href="{{ path('app_event_index') }}" class="btn btn-outline-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
                        Tous les événements
                    </a>
                </div>
            </article>
        </div>

        {# ====== Sidebar ====== #}
        <div class="col-lg-4">
            <aside class="blog-sidebar">
                {# --- Infos pratiques --- #}
                <div class="widget-event-info">
                    <h4 class="widget-event-info__title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                        Infos pratiques
                    </h4>
                    <ul class="widget-event-info__list">
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
                            <div>
                                <strong>Date</strong><br>
                                {{ event.dateStart|date('d/m/Y') }}
                                {% if event.multiDay %} → {{ event.dateEnd|date('d/m/Y') }}{% endif %}
                            </div>
                        </li>
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            <div>
                                <strong>Horaires</strong><br>
                                {{ event.dateStart|date('H:i') }}
                                {% if event.dateEnd %} — {{ event.dateEnd|date('H:i') }}{% endif %}
                            </div>
                        </li>
                        {% if event.location %}
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                            <div>
                                <strong>Lieu</strong><br>
                                {{ event.location }}
                            </div>
                        </li>
                        {% endif %}
                    </ul>
                </div>

                {# --- Produit lie (inscription/achat) --- #}
                {% if event.linkedProduct and event.linkedProduct.active %}
                <div class="widget-event-product">
                    <h4 class="widget-event-info__title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
                        Inscription / Tarif
                    </h4>
                    {% set lp = event.linkedProduct %}
                    {% if lp.priceHT is not null %}
                        <div class="widget-event-product__price mb-2">
                            <strong style="font-size: 1.3rem; color: var(--primary);">
                                {{ lp.priceTTC|number_format(2, ',', ' ') }} &euro; TTC
                            </strong>
                        </div>
                    {% endif %}
                    {% if site_context.hasModule('ecommerce') and lp.priceHT is not null and lp.availability.value == 'available' %}
                        <form action="{{ path('app_cart_add') }}" method="post" data-controller="cart-add">
                            <input type="hidden" name="productId" value="{{ lp.id }}">
                            <input type="hidden" name="qty" value="1">
                            <button type="submit" class="btn btn-primary w-100" data-action="cart-add#submit">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
                                S'inscrire / Ajouter au panier
                            </button>
                        </form>
                    {% else %}
                        <a href="{{ path('app_contact') }}" class="btn btn-outline-primary w-100">Nous contacter</a>
                    {% endif %}
                    <a href="{{ path('app_product_show', { slug: lp.slug }) }}" class="d-block text-center mt-2" style="font-size: 0.85rem;">
                        Voir les details du produit
                    </a>
                </div>
                {% endif %}

                {# --- Notifications événements --- #}
                {% include 'widgets/subscribe.html.twig' %}

                {# --- Prochains événements --- #}
                {% include '_partials/_upcoming_events_widget.html.twig' with { upcomingEvents: widget_service.findUpcomingEvents() } %}
            </aside>
        </div>
    </div>
</div>
{% endblock %}