{% extends "djstripe/base.html" %}

{% block title %}Change Card{% endblock title %}

{% block content %}
<div class="row">
    <div class="col-xs-12">
        <ul class="breadcrumb">
          <li><a href="{% url 'djstripe:account' %}">Home</a></li>
          <li class="active">Change Card</li>
        </ul>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <h2>Current Card</h2>
        <p class="lead">
            {% if customer.default_source.brand and customer.default_source.last4 %}
                Current card on file is a <strong>{{ customer.default_source.brand }}</strong>
                ending in the digits <strong>{{ customer.default_source.last4 }}</strong>.
            {% else %}
                You do not currently have a card on file.
            {% endif %}
        </p>
        
        {% if stripe_error %}
            <div class="alert alert-error">{{ stripe_error }}</div>
        {% endif %}
        
            
        <form action="{% url 'djstripe:change_card' %}" method="POST" id="change-card-form">
        {% csrf_token %}
          <span class="payment-errors"></span>

          <div class="form-row">
            <label>
              <span>Card Number</span>
              <input type="text" size="20" pattern="\d*" autocomplete="off" data-stripe="number"/>
            </label>
          </div>

          <div class="form-row">
            <label>
              <span>CVC</span>
              <input type="text" size="4" pattern="\d*" data-stripe="cvc"/>
            </label>
          </div>

          <div class="form-row">
            <label>
              <span>Expiration (MM/YYYY)</span>
              <input type="text" size="2" pattern="\d*" autocomplete="off" data-stripe="exp-month"/>
            </label>
            <span> / </span>
            <input type="text" size="4" pattern="\d*" autocomplete="off" data-stripe="exp-year"/>
          </div>

          <button class="btn btn-primary change-card" type="submit">Change Card</button>
        </form>
    </div>
</div>
{% endblock content %}


{% block javascript %}
{{ block.super }}
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
  // This identifies your website in the createToken call below
  Stripe.setPublishableKey('{{ STRIPE_PUBLIC_KEY }}');
  jQuery(function($) {
    $('#change-card-form').submit(function(event) {
        var $form = $(this);

        // Disable the submit button to prevent repeated clicks
        $form.find('button').prop('disabled', true);

        Stripe.card.createToken($form, stripeResponseHandler);

        // Prevent the form from submitting with the default action
        return false;
    });

    var stripeResponseHandler = function(status, response) {
      var $form = $('#change-card-form');

      if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
        $form.find('button').prop('disabled', false);
      } else {
        // token contains id, last4, and card type
        var token = response.id;
        // Insert the token into the form so it gets submitted to the server
        $form.append($('<input type="hidden" name="stripe_token" />').val(token));
        // and submit
        $form.get(0).submit();
      }
    };
});
</script>

{% endblock javascript %}
