{% extends "base.html" %}
{% block content %}
<h1 class="title">
    Welcome, {{ user.first_name }}!
</h1>

<div class="container">
    <div class="row">
        <div class="col">
        <div class="profile-info">
        <p>Plan: {{ user.plan }}</p>
        <p>Stripe ID: {{ user.stripeID }}</p>
        <p>Setup intent: {{ user.seti }}</p>
        <p>Mandate active: {{ user.mandateActive }}</p>
        <p>Subscription ID: {{ user.subscriptionID }}</p>
        <p>Last payment: {{ user.lastPayment }}</p>
        <p>Creation date: {{ user.creationDate }}</p>
        <p>Paid: {{ user.paid }}</p>
        </div>

        <div class="update-info">
                {% if user.seti %}
                    {% if user.plan == None %}
                        {% include 'checkout.html' %}
                        {% else %}
                            <form>
                            <button id="button" formaction="/portal">Customer portal</button>
                            </form>
                    {% endif %}
                {% else %}
                <button id="setup-button">Setup payment mandate</button>
                {% endif %}
        </div>

        </div>
    </div>
</div>

 <script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("pk_test_51HbqYzAKLUD9ELc0KSyiQ9YohsfiUCeBpAfpflAIg2Uu2RFecx3sfWYXzM1xDtI5XlQihqHMnaPKd45JzDuqXdGP00pYWvRvRe");
    var setupButton = document.getElementById('setup-button');
    setupButton.addEventListener("click", function () {
      fetch("/setup-bacs", {
        method: "POST",
      })
        .then(function (response) {
          return response.json();
        })
        .then(function (session) {
          return stripe.redirectToCheckout({ sessionId: session.id });
        })
        .then(function (result) {
          // If redirectToCheckout fails due to a browser or network
          // error, you should display the localized error message to your
          // customer using error.message.
          if (result.error) {
            alert(result.error.message);
          }
        })
        .catch(function (error) {
          console.error("Error:", error);
        });
    });
  </script>
{% endblock %}