crm_ecosplay/templates/order/payment.html.twig

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

{% block title %}Paiement - {{ advert.orderNumber.numOrder }} - Association E-Cosplay{% endblock %}

{% block body %}
<main class="max-w-3xl mx-auto px-4 py-10">
    <div class="glass p-8 mb-6">
        <div class="flex items-center justify-between mb-6">
            <div>
                <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400">Avis de paiement</p>
                <h1 class="text-2xl font-bold heading-page font-mono">{{ advert.orderNumber.numOrder }}</h1>
                <p class="text-xs text-gray-500 mt-1">Date : {{ advert.createdAt|date('d/m/Y') }}</p>
            </div>
            <div class="text-right">
                {% if advert.state == 'cancel' %}
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 font-bold uppercase text-xs">Annule</span>
                {% else %}
                    <span class="px-3 py-1 bg-yellow-100 text-yellow-800 font-bold uppercase text-xs">En attente de paiement</span>
                {% endif %}
            </div>
        </div>

        {% if customer %}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                <div class="glass p-4">
                    <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-2">Emetteur</p>
                    <p class="text-sm font-bold">Association E-Cosplay</p>
                    <p class="text-xs text-gray-500 mt-1">
                        42 rue de Saint-Quentin<br>
                        02800 Beautor, France<br>
                        SIREN 943121517
                    </p>
                </div>
                <div class="glass p-4">
                    <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-2">Client</p>
                    <p class="text-sm font-bold">{{ customer.fullName }}</p>
                    <p class="text-xs text-gray-500 mt-1">
                        {% if customer.raisonSociale %}{{ customer.raisonSociale }}<br>{% endif %}
                        {% if customer.address %}{{ customer.address }}<br>{% endif %}
                        {% if customer.zipCode or customer.city %}{{ customer.zipCode }} {{ customer.city }}<br>{% endif %}
                        {% if customer.email %}{{ customer.email }}{% endif %}
                    </p>
                </div>
            </div>
        {% endif %}

        <h2 class="text-sm font-bold uppercase tracking-wider mb-3">Detail des prestations</h2>
        <div class="glass overflow-hidden mb-6">
            <table class="w-full text-sm">
                <thead>
                    <tr class="glass-dark text-white">
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">#</th>
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Prestation</th>
                        <th class="px-4 py-3 text-right font-bold uppercase text-xs tracking-widest">Prix HT</th>
                    </tr>
                </thead>
                <tbody>
                    {% for line in advert.lines %}
                        <tr class="border-b border-white/20">
                            <td class="px-4 py-3 text-gray-400 text-xs">{{ loop.index }}</td>
                            <td class="px-4 py-3">
                                <div class="font-bold">{{ line.title }}</div>
                                {% if line.description %}
                                    <div class="text-xs text-gray-500 whitespace-pre-wrap mt-1">{{ line.description }}</div>
                                {% endif %}
                            </td>
                            <td class="px-4 py-3 text-right font-mono">{{ line.priceHt }} &euro;</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="flex justify-end mb-8">
            <div class="w-full max-w-xs glass p-4">
                <div class="flex justify-between text-xs text-gray-500 mb-1">
                    <span class="font-bold uppercase tracking-widest">Total HT</span>
                    <span class="font-mono">{{ advert.totalHt }} &euro;</span>
                </div>
                {% if tva_enabled %}
                    <div class="flex justify-between text-xs text-gray-500 mb-2">
                        <span class="font-bold uppercase tracking-widest">TVA 20%</span>
                        <span class="font-mono">{{ advert.totalTva }} &euro;</span>
                    </div>
                    <div class="flex justify-between text-base font-bold border-t border-white/30 pt-2">
                        <span class="uppercase tracking-widest">{% if tva_enabled %}Total TTC{% else %}Total{% endif %}</span>
                        <span class="font-mono">{{ tva_enabled ? advert.totalTtc : advert.totalHt }} &euro;</span>
                    </div>
                {% endif %}
            </div>
        </div>

        {% if advert.state != 'cancel' %}
            <div class="glass p-6">
                <h2 class="text-sm font-bold uppercase tracking-wider mb-4 text-center">Choisissez votre mode de paiement</h2>

                <div class="mb-6 p-5 glass" style="background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(250,191,4,0.08));">
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 bg-indigo-100 border-2 border-indigo-500 flex items-center justify-center shrink-0 mt-0.5">
                            <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div>
                            <p class="font-bold text-sm text-indigo-700">Payez en 3 ou 4 fois sans frais !</p>
                            <p class="text-xs text-gray-600 mt-1 leading-relaxed">
                                Etalez votre paiement en <strong>3 ou 4 fois</strong> via <strong>Klarna</strong> ou <strong>PayPal</strong>, directement depuis le bouton "Paiement en ligne".
                                Simple et rapide. Des frais peuvent s'appliquer selon le service choisi (Klarna ou PayPal).
                            </p>
                            <div class="mt-3 p-3 bg-red-50 border border-red-200">
                                <p class="text-xs text-red-700 font-bold leading-relaxed">
                                    Un credit vous engage et doit etre rembourse. Verifiez vos capacites de remboursement avant de vous engager.
                                </p>
                                <p class="text-[10px] text-red-500 mt-1">
                                    Article L.312-75 du Code de la consommation. Sous reserve d'acceptation par Klarna ou PayPal. Association E-Cosplay n'est pas responsable en cas de refus et ne sera pas informee du motif.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex flex-col gap-4">
                    {# Paiement en ligne (Stripe) #}
                    <button type="button" id="btn-stripe"
                       data-intent-url="{{ path('app_order_payment_stripe_intent', {numOrder: advert.orderNumber.numOrder}) }}"
                       data-success-url="{{ path('app_order_payment_stripe_success', {numOrder: advert.orderNumber.numOrder}) }}"
                       data-amount="{{ tva_enabled ? advert.totalTtc : advert.totalHt }}"
                       data-pk="{{ stripe_pk }}"
                       class="flex items-center gap-4 p-5 glass hover:bg-[#fabf04]/20 transition-all group w-full text-left">
                        <div class="w-12 h-12 bg-indigo-100 border-2 border-indigo-600 flex items-center justify-center shrink-0">
                            <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                        </div>
                        <div class="flex-1">
                            <p class="font-bold text-sm">Paiement en ligne</p>
                            <p class="text-xs text-gray-500 mt-0.5">Carte bancaire, PayPal, Apple Pay, Google Pay, Klarna, Revolut Pay et autres</p>
                        </div>
                        <div class="shrink-0">
                            <span class="px-3 py-1 bg-indigo-600 text-white font-bold uppercase text-[10px]group-hover:bg-[#fabf04] group-hover:text-gray-900 transition-all">Payer {{ tva_enabled ? advert.totalTtc : advert.totalHt }}&nbsp;&euro;</span>
                        </div>
                    </button>

                    {# Prelevement bancaire SEPA #}
                    <button type="button" id="btn-sepa"
                       data-intent-url="{{ path('app_order_payment_stripe_intent', {numOrder: advert.orderNumber.numOrder}) }}"
                       data-success-url="{{ path('app_order_payment_stripe_success', {numOrder: advert.orderNumber.numOrder}) }}"
                       data-amount="{{ tva_enabled ? advert.totalTtc : advert.totalHt }}"
                       data-pk="{{ stripe_pk }}"
                       data-method="sepa"
                       class="flex items-center gap-4 p-5 glass hover:bg-[#fabf04]/20 transition-all group w-full text-left">
                        <div class="w-12 h-12 bg-blue-100 border-2 border-blue-600 flex items-center justify-center shrink-0">
                            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/></svg>
                        </div>
                        <div class="flex-1">
                            <p class="font-bold text-sm">Prelevement bancaire</p>
                            <p class="text-xs text-gray-500 mt-0.5">Prelevement SEPA ou virement bancaire via Stripe. Delai de traitement : 2 a 7 jours ouvres.</p>
                        </div>
                        <div class="shrink-0">
                            <span class="px-3 py-1 bg-blue-600 text-white font-bold uppercase text-[10px]group-hover:bg-[#fabf04] group-hover:text-gray-900 transition-all">Prelever {{ tva_enabled ? advert.totalTtc : advert.totalHt }}&nbsp;&euro;</span>
                        </div>
                    </button>

                    {# Virement bancaire #}
                    <div class="p-5 glass">
                        <div class="flex items-center gap-4 mb-4">
                            <div class="w-12 h-12 bg-emerald-100 border-2 border-emerald-600 flex items-center justify-center shrink-0">
                                <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/></svg>
                            </div>
                            <div class="flex-1 text-left">
                                <p class="font-bold text-sm">Virement bancaire</p>
                                <p class="text-xs text-gray-500 mt-0.5">Effectuez un virement depuis votre banque en utilisant les coordonnees ci-dessous</p>
                            </div>
                        </div>
                        <div class="glass p-4 text-xs mb-4">
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <div>
                                    <span class="font-bold uppercase tracking-widest text-[10px] text-gray-400">Beneficiaire</span>
                                    <p class="font-bold mt-1">Association E-Cosplay</p>
                                </div>
                                <div>
                                    <span class="font-bold uppercase tracking-widest text-[10px] text-gray-400">Banque</span>
                                    <p class="font-bold mt-1">SumUp</p>
                                </div>
                                <div>
                                    <span class="font-bold uppercase tracking-widest text-[10px] text-gray-400">IBAN</span>
                                    <p class="font-mono font-bold mt-1">IE33 SUMU 9903 6512 8327 44</p>
                                </div>
                                <div>
                                    <span class="font-bold uppercase tracking-widest text-[10px] text-gray-400">BIC</span>
                                    <p class="font-mono font-bold mt-1">SUMUIE22</p>
                                </div>
                                <div class="sm:col-span-2">
                                    <span class="font-bold uppercase tracking-widest text-[10px] text-gray-400">Reference a indiquer</span>
                                    <p class="font-mono font-bold mt-1">{{ advert.orderNumber.numOrder }}</p>
                                </div>
                            </div>
                            <p class="text-[10px] text-gray-400 mt-3">Merci d'indiquer le numero de reference dans le libelle de votre virement pour faciliter le traitement.</p>
                        </div>
                        <form method="post" action="{{ path('app_order_payment_virement', {numOrder: advert.orderNumber.numOrder}) }}">
                            <button type="submit" class="w-full px-6 py-3 bg-emerald-600 text-white font-bold uppercase text-xs tracking-widest hover:bg-emerald-700 transition-all">
                                Choisir cette methode
                            </button>
                            <p class="text-[10px] text-gray-400 mt-2 text-center">Delai de traitement : 24h a 72h ouvrees apres reception du virement.</p>
                        </form>
                    </div>

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

    <p class="text-center text-[10px] text-gray-400 uppercase tracking-widest">
        Une question ? <a href="mailto:client@e-cosplay.fr" class="text-[#fabf04] hover:underline">client@e-cosplay.fr</a>
    </p>
    {# Modal Stripe Payment #}
    <div id="stripe-modal" class="hidden fixed inset-0 z-[100] flex items-center justify-center">
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="stripe-modal-overlay"></div>
        <div class="relative bg-white w-full max-w-lg mx-4 overflow-hidden shadow-2xl" style="">
            <div class="bg-gray-900 text-white px-6 py-4 flex items-center justify-between" >
                <div class="flex items-center gap-3">
                    <svg class="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                    <span class="text-sm font-bold uppercase tracking-widest">Paiement securise</span>
                </div>
                <button type="button" id="stripe-modal-close" class="text-white/60 hover:text-white text-xl leading-none">&times;</button>
            </div>
            <div class="p-6">
                <div id="stripe-payment-element" class="mb-4" style="min-height: 100px;"></div>
                <div id="stripe-errors" class="text-xs text-red-600 mb-3 hidden"></div>
                <button type="button" id="stripe-pay-btn" disabled
                        class="w-full px-6 py-4 bg-indigo-600 text-white font-bold uppercase text-xs tracking-widest hover:bg-indigo-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                        style="">
                    Payer {{ tva_enabled ? advert.totalTtc : advert.totalHt }} &euro;
                </button>
                <p class="text-[10px] text-gray-400 text-center mt-3">Paiement securise par Stripe. Vos donnees bancaires ne sont jamais stockees sur nos serveurs.</p>
            </div>
        </div>
    </div>
</main>
{% endblock %}

{% block head %}
    <script src="https://js.stripe.com/v3/" nonce="{{ csp_nonce('script') }}"></script>
{% endblock %}