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

{% block title %}Paiement CinetPay | CARTECADEAU{% endblock %}

{% block body %}
<section class="container admin-shell">
    <div class="catalog-headline">
        <p class="kicker">Paiement</p>
        <h1>Paiement <span class="accent">CinetPay Seamless</span></h1>
        <p>La fenetre de paiement va s'ouvrir. Si elle est bloquee, cliquez sur le bouton ci-dessous.</p>
    </div>

    <article class="card" style="max-width: 620px;">
        <p class="meta">Reference commande: <strong>{{ transactionId }}</strong></p>
        <button type="button" id="open-seamless" class="btn">Ouvrir le paiement</button>
        <p id="seamless-status" class="meta" style="margin-top:12px;"></p>
    </article>
</section>

<script src="https://unpkg.com/cinetpay-seamless/dist/cinetpay-seamless.umd.cjs"></script>
<script>
(function () {
    const paymentToken = {{ paymentToken|json_encode|raw }};
    const returnUrl = {{ path('app_cinetpay_return', {transaction_id: transactionId})|json_encode|raw }};
    const statusEl = document.getElementById('seamless-status');
    const openBtn = document.getElementById('open-seamless');

    function goBack() {
        window.location.href = returnUrl;
    }

    function setStatus(message) {
        if (statusEl) {
            statusEl.textContent = message;
        }
    }

    function openSeamless() {
        if (!window.CinetPaySeamless || typeof window.CinetPaySeamless.open !== 'function') {
            setStatus('Impossible de charger la popup Seamless. Redirection en cours...');
            goBack();
            return;
        }

        window.CinetPaySeamless.open({
            paymentToken: paymentToken,
            onReady: function () {
                setStatus('Passerelle chargee. Vous pouvez payer.');
            },
            onPaymentSuccess: function () {
                setStatus('Paiement accepte. Verification en cours...');
                goBack();
            },
            onPaymentFailed: function () {
                setStatus('Paiement refuse. Retour au compte...');
                goBack();
            },
            onPaymentPending: function () {
                setStatus('Paiement en attente. Verification en cours...');
            },
            onClose: function () {
                goBack();
            },
            onError: function () {
                setStatus('Une erreur est survenue. Retour au compte...');
                goBack();
            }
        });
    }

    if (openBtn) {
        openBtn.addEventListener('click', openSeamless);
    }

    openSeamless();
})();
</script>
{% endblock %}