{% extends "default.html" %}

{% block title %}Billing{% endblock %}
{% block head %}{% endblock %}
{% block default_content %}

  <div class="card">
    <div class="card-body">
      <h1 class="h3 mb-5">Billing</h1>
      {% if sub.cancelled %}

        <p>
          You are on the <b>{{ sub.plan_name() }}</b> plan.
          <br />
          You have canceled your subscription and it will end on {{ sub.next_bill_date.strftime("%Y-%m-%d") }}
        </p>
        <p class="alert alert-info">
          If you change your mind you can subscribe again to SimpleLogin but
          please note that this will be a completely
          new subscription and
          your payment method will be charged <b>immediately</b>.
          <br />
          The period left in the current subscription isn't taken into account.
          <br />
          <a href="{{ url_for('dashboard.pricing') }}"
             class="btn btn-primary mt-2">Re-subscribe</a>
        </p>
      {% else %}
        <p>
          You are on the <b>{{ sub.plan_name() }}</b> plan. Thank you very much for supporting
          SimpleLogin. 🙌
          <br />
          The next billing cycle starts at {{ sub.next_bill_date.strftime("%Y-%m-%d") }}.
        </p>
        <div class="mt-3">
          Click here to update billing information on Paddle, our payment partner:
          <br />
          <a class="btn btn-outline-success mt-2" href="{{ sub.update_url }}">Update billing information</a>
        </div>
        <hr />
        <div class="mt-6">
          <h4>Change Plan</h4>
          You can change the plan at any moment.
          <br />
          Please note that the new billing cycle starts instantly
          i.e. you will be charged <b>immediately</b> the annual fee ($30) when switching from monthly plan or vice-versa
          <b>without pro rata computation </b>.
          <br />
          To change the plan you can also cancel the current one and subscribe a new one <b>by the end</b> of this plan.
          {% if sub.plan == PlanEnum.yearly %}

            <form method="post"
                  onsubmit="return confirm('This will change your current subscription plan, please confirm');">
              <input type="hidden" name="form-name" value="change-monthly">
              <button class="btn btn-outline-primary mt-2">Change to Monthly Plan</button>
            </form>
          {% else %}
            <form method="post"
                  onsubmit="return confirm('This will change your current subscription plan, please confirm');">
              <input type="hidden" name="form-name" value="change-yearly">
              <button class="btn btn-outline-primary mt-2">Change to Yearly Plan</button>
            </form>
          {% endif %}
        </div>
        <hr />
        <div>
          <h4>Cancel subscription</h4>
          Don't want to protect your inbox anymore?
          <br />
          <form method="post">
            <input type="hidden" name="form-name" value="cancel">
            <span class="cancel btn btn-outline-danger mt-2">
              Cancel subscription <i class="fe fe-alert-triangle text-danger"></i>
            </span>
          </form>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}
{% block script %}

  <script>
    $(".cancel").on("click", function (e) {
      let that = $(this);

      bootbox.confirm({
        message: "This operation is irreversible, please confirm.",
        buttons: {
          confirm: {
            label: 'Cancel subscription',
            className: 'btn-danger'
          },
          cancel: {
            label: 'Close',
            className: 'btn-outline-primary'
          }
        },
        callback: function (result) {
          if (result) {
            that.closest("form").submit();
          }
        }
      })
    });

  </script>
{% endblock %}