<div class="card shadow-sm border-0 vx-auth-card">
    <div class="card-body p-4 p-lg-5">
        <div class="d-flex align-items-center gap-2 mb-3">
            <span class="vx-auth-icon"><i class="bx bxs-credit-card"></i></span>
            <h2 class="h5 mb-0">Redirigiendo a Wompi</h2>
        </div>

        <p class="text-muted mb-2">Plan: <strong><?= e((string) ($plan_name ?? '')) ?></strong></p>
        <p class="text-muted mb-2">Referencia: <code><?= e((string) ($reference ?? '')) ?></code></p>
        <p class="text-muted mb-4">
            Acceso empresa: <code>/<?= e((string) ($access_slug ?? '')) ?></code>
            <small class="d-block text-muted">Alternativo: <code>/empresa/<?= e((string) ($access_slug ?? '')) ?></code></small>
        </p>

        <form id="wompiCheckoutForm" action="<?= e((string) ($checkout_url ?? 'https://checkout.wompi.co/p/')) ?>" method="GET">
            <?php foreach (($checkout_fields ?? []) as $field => $value): ?>
                <input type="hidden" name="<?= e((string) $field) ?>" value="<?= e((string) $value) ?>">
            <?php endforeach; ?>
            <button type="submit" class="btn btn-primary w-100">Continuar a pago</button>
        </form>

        <div class="text-center mt-3">
            <small class="text-muted">Si no redirige automáticamente, presiona “Continuar a pago”.</small>
        </div>
    </div>
</div>

<script>
window.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('wompiCheckoutForm');
    if (!form) {
        return;
    }
    window.setTimeout(function () {
        form.submit();
    }, 600);
});
</script>
