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

{% block head_custom_stylesheets %}
	{{ parent() }}
	{% include "/admin/dashboard/buyer/dashboard_css.html.twig" %}
{% endblock %}

{% block wrapper_wrapper %}
<div class="ecommerce-wrapper d-flex flex-column" style="min-height: 100vh; background-color: #f4f6f9;">
	<!-- Navbar (simplificada) -->
	<nav class="navbar navbar-expand-lg navbar-dark navbar-ecommerce sticky-top">
		<div class="container-fluid px-4">
			<a class="navbar-brand font-weight-bold d-flex align-items-center" href="/admin/dashboard?menuIndex=0&submenuIndex=-1">
				<img src="{{ asset('img/logo-header.png') }}" alt="Logo" class="mr-2" style="height: 35px; object-fit: contain;" onerror="this.src='{{ asset('img/iconos-piola-generico.png') }}';">
			</a>
		</div>
	</nav>

	<div class="flex-grow-1 d-flex align-items-center justify-content-center p-4">
		<div class="card shadow-lg rounded-lg border-0 text-center" style="max-width: 550px; width: 100%;">
			<div id="bm" style="height: 250px; margin-top: 30px;"></div>
			<div class="card-body px-5 pb-5">
				<h2 class="font-weight-bold mb-3" style="color: #002f5b;">{{ 'stripeConect.buyer_success_title'|trans }}</h2>
				<p class="text-muted mb-4" style="font-size: 1.1rem; line-height: 1.6;">
					{{ 'stripeConect.buyer_success_desc'|trans }}
				</p>
				<a href="/admin/dashboard?menuIndex=0&submenuIndex=-1" class="btn btn-primary btn-block btn-lg rounded-pill mt-2" style="background-color: #002f5b; border-color: #002f5b; font-size: 1.1rem; color: white !important;">
					<i class="icon-arrow_back mr-2"></i> {{ 'ecomerceBuyer.go_to_catalog'|trans|default('Volver al Catálogo') }}
				</a>
			</div>
		</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 %}