crm_ecosplay/templates/echeancier/setup_payment.html.twig

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

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

        <div class="p-8">
            <p class="text-sm text-gray-600 mb-6">
                Pour finaliser la mise en place de votre echeancier, veuillez renseigner votre IBAN ci-dessous.
                Les prelevements seront effectues automatiquement aux dates prevues.
            </p>

            {# Resume #}
            <div class="grid grid-cols-2 md: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 a payer</p>
                    <p class="text-lg font-bold mt-1">{{ echeancier.totalWithMajoration|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;">{{ echeancier.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">{{ echeancier.nbLines }} mois</p>
                </div>
            </div>

            {# Informations du mandat #}
            <div class="glass p-4 mb-6">
                <h2 class="text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-2">Informations du mandat SEPA</h2>
                <div class="grid grid-cols-2 gap-2 text-xs">
                    <p class="text-gray-500"><strong>Crediteur :</strong> Association E-Cosplay</p>
                    <p class="text-gray-500"><strong>Reference :</strong> {{ echeancier.reference }}</p>
                    <p class="text-gray-500"><strong>Montant/echeance :</strong> {{ echeancier.monthlyAmount|number_format(2, ',', ' ') }} &euro;</p>
                    <p class="text-gray-500"><strong>Nombre d'echeances :</strong> {{ echeancier.nbLines }}</p>
                    <p class="text-gray-500"><strong>1ere echeance :</strong> {{ echeancier.lines|first ? echeancier.lines|first.scheduledAt|date('d/m/Y') : '—' }}</p>
                    <p class="text-gray-500"><strong>Derniere echeance :</strong> {{ echeancier.lines|last ? echeancier.lines|last.scheduledAt|date('d/m/Y') : '—' }}</p>
                </div>
            </div>

            {# Formulaire IBAN #}
            <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>

                {# Mandat SEPA #}
                <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>
                    <p class="mt-2">Vous beneficiez d'un droit a remboursement par votre banque selon les conditions decrites dans la convention que vous avez conclue avec elle. Toute demande de remboursement doit etre presentee dans les 8 semaines suivant la date de debit de votre compte.</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:contact@e-cosplay.fr" class="font-bold" style="color: #fabf04;">contact@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');

        var name = document.getElementById('account-name').value;
        var email = document.getElementById('account-email').value;

        stripe.confirmSepaDebitSetup('{{ clientSecret }}', {
            payment_method: {
                sepa_debit: iban,
                billing_details: { name: name, email: email }
            }
        }).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;
            }

            // Envoyer le payment_method au serveur
            fetch('{{ path('app_echeancier_setup_payment_confirm', {id: echeancier.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 lors de la configuration.';
                    formError.classList.remove('hidden');
                    submitBtn.disabled = false;
                    btnText.classList.remove('hidden');
                    btnLoading.classList.add('hidden');
                }
            }).catch(function() {
                formError.textContent = 'Erreur de connexion. Veuillez reessayer.';
                formError.classList.remove('hidden');
                submitBtn.disabled = false;
                btnText.classList.remove('hidden');
                btnLoading.classList.add('hidden');
            });
        });
    });
})();
</script>
{% endblock %}