crm_ecosplay/templates/contrat/setup_payment.html.twig

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

{% block title %}Configuration paiement - {{ contrat.reference }} - Association E-Cosplay{% endblock %}

{% block body %}
<div class="min-h-screen flex items-center justify-center p-4" style="background: linear-gradient(135deg, #f5f5f0 0%, #e8e8e0 100%);">
    <div class="glass-heavy w-full max-w-2xl overflow-hidden">
        <div class="glass-dark text-white px-8 py-6">
            <div class="flex items-center gap-3">
                <img src="/logo.jpg" alt="E-Cosplay" class="h-10 w-auto">
                <div>
                    <h1 class="text-lg font-bold uppercase tracking-widest">Configuration du paiement</h1>
                    <p class="text-xs text-white/60">{{ contrat.reference }}</p>
                </div>
            </div>
        </div>

        <div class="p-8">
            <p class="text-sm text-gray-600 mb-6">Choisissez votre mode de paiement pour activer vos services.</p>

            {# Resume #}
            <div class="glass p-4 mb-6 text-center">
                <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Montant mensuel</p>
                <p class="text-3xl font-bold mt-1" style="color: #fabf04;">{{ totalHt|number_format(2, ',', ' ') }} &euro; <span class="text-sm text-gray-500">HT / mois</span></p>
            </div>

            {# Choix methode #}
            <h2 class="text-sm font-bold uppercase tracking-wider mb-4">Comment souhaitez-vous payer ?</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                {# Carte bancaire #}
                <div class="glass p-5 text-center hover:bg-white/80 transition-all">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" 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>
                    <p class="text-xs font-bold uppercase tracking-wider mb-2">Carte bancaire</p>
                    <p class="text-[10px] text-gray-500 mb-3">Payez votre premier mois immediatement par carte bancaire via Stripe.</p>
                    {% if cbCheckoutUrl %}
                        <a href="{{ cbCheckoutUrl }}"
                           class="inline-block px-4 py-2 bg-purple-600 text-white font-bold uppercase text-[10px] tracking-wider hover:bg-purple-700 transition-all">
                            Payer {{ totalHt|number_format(2, ',', ' ') }} &euro; par CB
                        </a>
                    {% endif %}
                </div>

                {# SEPA #}
                <div class="glass p-5 text-center hover:bg-white/80 transition-all" style="border: 2px solid #fabf04;">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2" style="color: #fabf04;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    <p class="text-xs font-bold uppercase tracking-wider mb-2">Prelevement SEPA</p>
                    <span class="inline-block px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider mb-2" style="background: #fabf04; color: #111;">Recommande</span>
                    <p class="text-[10px] text-gray-500 mb-3">Renseignez votre IBAN une seule fois. Les prelevements seront automatiques chaque mois.</p>
                </div>
            </div>

            {# Formulaire SEPA #}
            <div class="glass p-5 mb-6">
                <h3 class="text-sm font-bold uppercase tracking-wider mb-3">Configurer le prelevement SEPA</h3>
                <form id="sepa-form">
                    <div class="mb-3">
                        <label for="account-name" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Titulaire du compte</label>
                        <input type="text" id="account-name" required value="{{ contrat.raisonSociale }}" class="input-glass w-full px-4 py-3 text-sm font-bold">
                    </div>
                    <div class="mb-3">
                        <label for="account-email" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Email</label>
                        <input type="email" id="account-email" required value="{{ contrat.email }}" class="input-glass w-full px-4 py-3 text-sm font-bold">
                    </div>
                    <div class="mb-3">
                        <label class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">IBAN</label>
                        <div id="iban-element" class="input-glass w-full px-4 py-3"></div>
                        <div id="iban-errors" class="text-red-500 text-xs mt-1 hidden"></div>
                    </div>

                    <div class="glass p-3 mb-4 text-xs text-gray-500 leading-relaxed">
                        <p class="font-bold text-[9px] uppercase tracking-wider text-gray-400 mb-1">Mandat SEPA</p>
                        <p>En fournissant vos informations de paiement, vous autorisez Association E-Cosplay et Stripe a debiter votre compte conformement aux instructions.</p>
                    </div>

                    <div id="form-error" class="mb-3 p-3 bg-red-500/20 text-red-700 font-bold text-xs hidden"></div>

                    <button type="submit" id="submit-btn" class="w-full btn-gold px-4 py-3 font-bold uppercase text-xs tracking-wider text-gray-900 disabled:opacity-50">
                        <span id="btn-text">Autoriser le prelevement SEPA</span>
                        <span id="btn-loading" class="hidden">Traitement en cours...</span>
                    </button>
                </form>
            </div>

            <p class="text-center text-xs text-gray-400">Pour toute question : <a href="mailto:client@e-cosplay.fr" class="font-bold" style="color: #fabf04;">client@e-cosplay.fr</a></p>
        </div>
    </div>
</div>

<script src="https://js.stripe.com/v3/" nonce="{{ csp_nonce('script') }}"></script>
<script nonce="{{ csp_nonce('script') }}">
(function() {
    var stripe = Stripe('{{ stripePk }}');
    var elements = stripe.elements();
    var style = { base: { color: '#111827', fontSize: '14px', fontFamily: 'Arial, sans-serif', '::placeholder': { color: '#9ca3af' } }, invalid: { color: '#dc2626' } };
    var iban = elements.create('iban', { style: style, supportedCountries: ['SEPA'] });
    iban.mount('#iban-element');

    var errorEl = document.getElementById('iban-errors');
    iban.on('change', function(event) {
        if (event.error) { errorEl.textContent = event.error.message; errorEl.classList.remove('hidden'); }
        else { errorEl.classList.add('hidden'); }
    });

    var form = document.getElementById('sepa-form');
    var submitBtn = document.getElementById('submit-btn');
    var btnText = document.getElementById('btn-text');
    var btnLoading = document.getElementById('btn-loading');
    var formError = document.getElementById('form-error');

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        submitBtn.disabled = true;
        btnText.classList.add('hidden');
        btnLoading.classList.remove('hidden');
        formError.classList.add('hidden');

        stripe.confirmSepaDebitSetup('{{ clientSecret }}', {
            payment_method: { sepa_debit: iban, billing_details: { name: document.getElementById('account-name').value, email: document.getElementById('account-email').value } }
        }).then(function(result) {
            if (result.error) {
                formError.textContent = result.error.message; formError.classList.remove('hidden');
                submitBtn.disabled = false; btnText.classList.remove('hidden'); btnLoading.classList.add('hidden');
                return;
            }
            fetch('{{ path('app_contrat_setup_payment_confirm', {id: contrat.id}) }}', {
                method: 'POST', headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ payment_method: result.setupIntent.payment_method })
            }).then(function(res) { return res.json(); }).then(function(data) {
                if (data.status === 'ok') { window.location.href = '{{ path('app_contrat_payment_success', {id: contrat.id}) }}'; }
                else { formError.textContent = data.error || 'Erreur.'; formError.classList.remove('hidden'); submitBtn.disabled = false; btnText.classList.remove('hidden'); btnLoading.classList.add('hidden'); }
            }).catch(function() { formError.textContent = 'Erreur de connexion.'; formError.classList.remove('hidden'); submitBtn.disabled = false; btnText.classList.remove('hidden'); btnLoading.classList.add('hidden'); });
        });
    });
})();
</script>
{% endblock %}