{% extends 'default.html' %}

{% set active_page = "dashboard" %}

{% block title %}
  Pricing
{% endblock %}

{% block head %}
  <style type="text/css">
    /**
   * The CSS shown here will not be introduced in the Quickstart guide, but shows
   * how you can use CSS to style your Element's container.
   */
    .StripeElement {
      box-sizing: border-box;

      height: 40px;

      padding: 10px 12px;

      border: 1px solid transparent;
      border-radius: 4px;
      background-color: white;

      box-shadow: 0 1px 3px 0 #e6ebf1;
      -webkit-transition: box-shadow 150ms ease;
      transition: box-shadow 150ms ease;
    }

    .StripeElement--focus {
      box-shadow: 0 1px 3px 0 #cfd7df;
    }

    .StripeElement--invalid {
      border-color: #fa755a;
    }

    .StripeElement--webkit-autofill {
      background-color: #fefde5 !important;
    }
  </style>
{% endblock %}

{% block default_content %}
  <script src="https://js.stripe.com/v3/"></script>

  <div class="row">
    <div class="col-sm-6 col-lg-6">
      <div class="card">
        <div class="card-body text-center">
          <div class="card-category">Premium</div>
          <div class="display-4 my-6">$10/year</div>
          <div class="display-5 my-6">or</div>
          <div class="display-4 my-6">$1/month</div>
          <ul class="list-unstyled leading-loose">
            <li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i> Privacy protected</li>
            <li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i> Infinite Login</li>
            <li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i> Infinite Emails</li>
            <li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
              Support us and our application partners
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-lg-6">
      <div class="display-6">
        The payment is processed by <a href="https://stripe.com" target="_blank">Stripe</a>. <br>
        Your card number is never stored on our server.
      </div>

      <hr>

      <form method="post" id="payment-form">
        <div class="form-group">
          <label for="card-element" class="form-label">
            Credit or debit card
          </label>
          <div id="card-element">
            <!-- A Stripe Element will be inserted here. -->
          </div>

          <!-- Used to display form errors. -->
          <div id="card-errors" role="alert" class="text-danger"></div>
        </div>

        <div class="form-group">
          <div class="form-label">Plan</div>
          <div class="custom-controls-stacked">
            <label class="custom-control custom-radio custom-control-inline">
              <input type="radio" class="custom-control-input" name="plan" value="yearly" checked>
              <span class="custom-control-label">Yearly</span>
            </label>
            <label class="custom-control custom-radio custom-control-inline">
              <input type="radio" class="custom-control-input" name="plan" value="monthly">
              <span class="custom-control-label">Monthly</span>
            </label>
          </div>
        </div>

        <button type="submit" class="btn btn-success">Upgrade</button>
      </form>
    </div>
  </div>

  <script>
    // Create a Stripe client.
    var stripe = Stripe('{{ stripe_api }}');

    // Create an instance of Elements.
    var elements = stripe.elements();

    // Custom styling can be passed to options when creating an Element.
    // (Note that this demo uses a wider set of styles than the guide below.)
    var style = {
      base: {
        color: '#32325d',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4'
        }
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
      }
    };

    // Create an instance of the card Element.
    // the postal code is asked on Safari but not on other browsers ...
    // Disable it explicitly
    var card = elements.create('card', {hidePostalCode: true, style: style});

    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');

    // Handle real-time validation errors from the card Element.
    card.addEventListener('change', function (event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });

    // Handle form submission.
    var form = document.getElementById('payment-form');
    form.addEventListener('submit', function (event) {
      event.preventDefault();

      stripe.createToken(card).then(function (result) {
        if (result.error) {
          // Inform the user if there was an error.
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
        } else {
          // Send the token to your server.
          stripeTokenHandler(result.token);
        }
      });
    });

    // Submit the form with the token ID.
    function stripeTokenHandler(token) {
      // Insert the token ID into the form so it gets submitted to the server
      var form = document.getElementById('payment-form');
      var hiddenInput = document.createElement('input');
      hiddenInput.setAttribute('type', 'hidden');
      hiddenInput.setAttribute('name', 'stripeToken');
      hiddenInput.setAttribute('value', token.id);
      form.appendChild(hiddenInput);

      // Submit the form
      form.submit();
    }
  </script>
{% endblock %}