e-ticket/templates/order/payment.html.twig

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

{% block title %}Paiement - {{ order.event.title }} - E-Ticket{% endblock %}

{% block head %}
    <script src="https://js.stripe.com/v3/" defer crossorigin="anonymous"></script>
{% endblock %}

{% block body %}
<div class="w-full md:w-[80%] lg:w-[60%] mx-auto py-8 sm:py-12 px-4">

    <div class="card-brutal overflow-hidden mb-6">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Evenement</h2>
        </div>
        <div class="p-4 sm:p-6">
            <h1 class="text-xl sm:text-2xl font-black uppercase tracking-tighter mb-2">{{ order.event.title }}</h1>
            <p class="text-sm font-bold text-gray-600 mb-1">{{ order.event.startAt|date('d/m/Y') }} — {{ order.event.startAt|date('H:i') }} a {{ order.event.endAt|date('H:i') }}</p>
            <p class="text-sm font-bold text-gray-600 mb-1">{{ order.event.address }}, {{ order.event.zipcode }} {{ order.event.city }}</p>
            <p class="text-sm font-bold text-gray-400">Par {{ order.event.account.companyName ?? (order.event.account.firstName ~ ' ' ~ order.event.account.lastName) }}</p>
            <p class="text-xs font-mono text-gray-400 mt-3">Commande {{ order.orderNumber }}</p>
        </div>
    </div>

    <div class="card-brutal overflow-hidden mb-6">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Acheteur</h2>
        </div>
        <div class="p-4 sm:p-6 flex flex-wrap gap-4 sm:gap-6">
            <div>
                <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1">Nom</p>
                <p class="text-sm font-bold">{{ order.lastName }}</p>
            </div>
            <div>
                <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1">Prenom</p>
                <p class="text-sm font-bold">{{ order.firstName }}</p>
            </div>
            <div class="min-w-0">
                <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1">Email</p>
                <p class="text-sm font-bold break-all">{{ order.email }}</p>
            </div>
        </div>
    </div>

    <div class="card-brutal overflow-hidden mb-6">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Billets</h2>
        </div>
        <div class="p-4 sm:p-6">
            {% for item in order.items %}
            <div class="border-2 border-gray-900 bg-white p-3 sm:p-4 {{ not loop.last ? 'mb-3' : '' }}">
                <div class="flex flex-col gap-3">
                    <div class="flex items-center gap-3 sm:gap-4 min-w-0">
                        {% if item.billet and item.billet.pictureName %}
                            <img src="{{ ('/uploads/billets/' ~ item.billet.pictureName) | imagine_filter('thumbnail') }}" alt="{{ item.billetName }}" class="w-12 h-12 sm:w-16 sm:h-16 object-cover border border-gray-300 flex-shrink-0">
                        {% endif %}
                        <div class="min-w-0 flex-1">
                            <p class="font-black uppercase text-xs sm:text-sm">{{ item.billetName }}</p>
                            {% if item.billet and item.billet.description %}
                                <p class="text-xs text-gray-500 font-bold mt-1 line-clamp-2">{{ item.billet.description }}</p>
                            {% endif %}
                        </div>
                    </div>
                    <div class="flex items-center justify-end gap-4 sm:gap-6 flex-shrink-0">
                        <span class="text-sm font-bold text-gray-400">x{{ item.quantity }}</span>
                        <span class="font-black text-sm">{{ item.unitPriceHTDecimal|number_format(2, ',', ' ') }} &euro;/u</span>
                        <span class="font-black text-base sm:text-lg text-indigo-600">{{ item.lineTotalHTDecimal|number_format(2, ',', ' ') }} &euro;</span>
                    </div>
                </div>
            </div>
            {% endfor %}

            <div class="flex justify-between pt-4 mt-4 border-t-3 border-gray-900">
                <span class="font-black uppercase text-sm sm:text-base tracking-widest">Total</span>
                <span class="font-black text-xl sm:text-2xl text-indigo-600">{{ order.totalHTDecimal|number_format(2, ',', ' ') }} &euro;</span>
            </div>
        </div>
    </div>

    <div class="card-brutal overflow-hidden" id="payment-card" data-stripe-key="{{ stripe_public_key }}" data-stripe-account="{{ stripe_account }}" data-intent-url="{{ path('app_order_create_intent', {id: order.id}) }}" data-return-url="{{ url('app_order_success', {id: order.id}) }}" data-fallback-url="{{ path('app_order_checkout_fallback', {id: order.id}) }}" data-amount="{{ order.totalHTDecimal|number_format(2, ',', ' ') }}">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Paiement securise</h2>
        </div>
        <div class="p-4 sm:p-6">
            <noscript>
                <a href="{{ path('app_order_checkout_fallback', {id: order.id}) }}" class="w-full btn-brutal font-black uppercase text-xs sm:text-sm tracking-widest bg-indigo-600 text-white hover:bg-indigo-800 transition-all block text-center">
                    Payer {{ order.totalHTDecimal|number_format(2, ',', ' ') }} &euro; via Stripe
                </a>
            </noscript>
            <div id="payment-element" class="mb-6"></div>
            <div id="payment-message" class="hidden flash-error mb-4">
                <p class="font-black text-sm" id="payment-message-text"></p>
            </div>
            <button type="button" id="payment-submit" class="w-full btn-brutal font-black uppercase text-xs sm:text-sm tracking-widest bg-indigo-600 text-white hover:bg-indigo-800 transition-all">
                Payer {{ order.totalHTDecimal|number_format(2, ',', ' ') }} &euro;
            </button>
            <p class="text-[10px] font-bold text-gray-400 mt-4 text-center">Paiement securise par Stripe</p>
        </div>
    </div>

    <a href="{{ path('app_event_detail', {orgaSlug: order.event.account.slug, id: order.event.id, eventSlug: order.event.slug}) }}" class="block text-center mt-6 text-sm font-bold text-gray-500 hover:text-gray-900 transition-colors">&larr; Retour a l'evenement</a>

</div>
{% endblock %}