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

{% block stylesheets %}
<style>
  .payment-success {
    height: 100vh;
  }
</style>
{% endblock %}
{% block title %} Paiement reussi {% endblock %}
{% block body %}
<div class="payment-success d-flex flex-column align-items-center justify-content-center">
  <span class="fa fa-check-circle" style="font-size:48px; color:green"></span>
  <h1 class="text-secondary">Votre paiement a été effectué avec succès!</h1>
  <p>Vous venez de souscrire à l'offre premium.</p>
  <div class="mt-5 d-flex flex-row align-items-start justify-content-center">
    <a type="button" class="btn btn-primary mr-3" href="{{ path('app_home') }}">Retourner à l'accueil</a>

  
   {# <!-- Portal button -->
    
    <form class="flex-row" action="{{ path('app_portal_session') }}" method="post">
      <input type="hidden" id="session-id" name="session_id" value="" />
      <button type="submit" id="checkout-and-portal-button" class="btn btn-secondary">Gérer votre abonnement</button>
    </form>

    <!-- Portal button -->
    #}

  
    
  </div>
</div>

<script>
    // In production, this should check CSRF, and not pass the session ID.
    // The customer ID for the portal should be pulled from the
    // authenticated user on the server.
    document.addEventListener('DOMContentLoaded', async () => {
      let searchParams = new URLSearchParams(window.location.search);
      if (searchParams.has('session_id')) {
        const session_id = searchParams.get('session_id');
        document.getElementById('session-id').setAttribute('value', session_id);
      }
    });

</script>

{% endblock %}