crm_ecosplay/templates/eflex/setup_payment.html.twig

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

{% block title %}Configuration prelevement SEPA - {{ eflex.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">Prelevement SEPA - E-Flex</h1>
                    <p class="text-xs text-white/60">{{ eflex.reference }}</p>
                </div>
            </div>
        </div>

        <div class="p-8">
            <p class="text-sm text-gray-600 mb-6">Renseignez votre IBAN pour activer les prelevements automatiques.</p>

            <div class="grid grid-cols-3 gap-3 mb-6">
                <div class="glass p-3 text-center">
                    <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Total</p>
                    <p class="text-lg font-bold mt-1">{{ eflex.totalAmount|number_format(2, ',', ' ') }} &euro;</p>
                </div>
                <div class="glass p-3 text-center">
                    <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Mensualite</p>
                    <p class="text-lg font-bold mt-1" style="color: #fabf04;">{{ eflex.monthlyAmount|number_format(2, ',', ' ') }} &euro;</p>
                </div>
                <div class="glass p-3 text-center">
                    <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Echeances</p>
                    <p class="text-lg font-bold mt-1">{{ eflex.nbLines }} mois</p>
                </div>
            </div>

            <form id="sepa-form">
                <div class="mb-4">
                    <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="{{ customer.raisonSociale ?: customer.fullName }}" class="input-glass w-full px-4 py-3 text-sm font-bold">
                </div>
                <div class="mb-4">
                    <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="{{ customer.email }}" class="input-glass w-full px-4 py-3 text-sm font-bold">
                </div>
                <div class="mb-4">
                    <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-4 mb-6 text-xs text-gray-500 leading-relaxed">
                    <p class="font-bold text-[9px] uppercase tracking-wider text-gray-400 mb-2">Mandat de prelevement SEPA</p>
                    <p>En fournissant vos informations de paiement et en confirmant ce mandat, vous autorisez (A) Association E-Cosplay et Stripe, notre prestataire de paiement, a envoyer des instructions a votre banque pour debiter votre compte et (B) votre banque a debiter votre compte conformement a ces instructions.</p>
                </div>

                <div id="form-error" class="mb-4 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 disabled:cursor-not-allowed">
                    <span id="btn-text">Autoriser le prelevement SEPA</span>
                    <span id="btn-loading" class="hidden">Traitement en cours...</span>
                </button>
            </form>

            <p class="text-center text-xs text-gray-400 mt-6">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_eflex_setup_payment_confirm', {id: eflex.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.reload(); }
                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 %}