{% extends '@EasyAdmin/default/layout.html.twig' %}

{% block header_container %}
    <div class="row p-t-b-10">
        <div class="col-12" style="padding-left: 40px;">
            <h3 class="font-weight-bold">
                📲 {% trans %}stripeConect.payment_processed{% endtrans %} (Bizum)
            </h3>
        </div>
    </div>
{% endblock %}

{% block wrapper %}
    <div class="card r-0 shadow my-3 text-center p-5">
        <div id="bm" style="height: 300px; max-width: 300px; margin: 0 auto;"></div>
        <div class="card-body">
            <h2 class="font-weight-bold text-success">¡Pago Completado con Éxito!</h2>
            <p class="text-muted mt-2">Hemos procesado tu pago de Bizum correctamente. Tu pedido #{{ order_id }} ha sido registrado y pagado.</p>
            <div class="mt-4">
                <a href="/admin/dashboard" class="btn btn-primary btn-lg rounded-pill px-5 shadow-sm">
                    Volver a Inicio
                </a>
            </div>
        </div>
    </div>
{% endblock %}

{% block body_javascript %}
    <script src="{{ asset('js/lottie.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            var animation = lottie.loadAnimation({
                container: document.getElementById('bm'),
                renderer: 'svg',
                loop: true,
                autoplay: true,
                path: '/img/anim_success_order.json'
            });
        });
    </script>
{% endblock %}