{% extends "base.html" %}
{% block content %}
  <h1 class="title">Billing/Plan Management</h1>
  <div class="container">
    <div class="row">
      <div class="col-xs-10 col-md-4 col-lg-4">

        <div class="panel panel-default">
          <div class="panel-heading">
            Products
          </div>
          <div class="panel-body">
            <ul class="list-group">
              <li class="list-group-item">
                <span class="badge">{{ user.first_name }}</span>
                First name
              </li>
              <li class="list-group-item">
                <span class="badge">{{ user.last_name }}</span>
                Last name
              </li>
              <li class="list-group-item">
                {% for plan in user.plans.all %}
                  <span class="badge">{{ plan.name }}</span>
                {% endfor %}
                Plans
              </li>
              <li class="list-group-item">
                <span class="badge">{{ user.paid }}</span>
                Paid
              </li>
              <li class="list-group-item">
                <span class="badge">{{ user.last_payment }}</span>
                Last payment
              </li>
            </ul>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading">
            Available plans
          </div>
          <div class="panel-body">
            {% include "partials/product-list.html" %}
          </div>
        </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 %}