{% extends "checkout/checkout.html" %}
{% load i18n bootstrap4 static currency_filters %}

{% block title %}
    {% trans "Payment details" %} | {{ block.super }}
{% endblock %}

{% block checkout_nav %}
    {% include 'checkout/nav.html' with step=3 %}
    <div class="space-2"></div>
{% endblock %}
{% block checkout_title %}{% endblock %}
{% block order_contents %}{% endblock %}
{% block shipping_address %}{% endblock %}
{% block shipping_method %}{% endblock %}
{% block payment_method %}{% endblock %}
{% block shipping_address_preview %}{% endblock %}

{% block payment_details %}
    {% block payment_details_content %}

        <div class="col-lg-8 offset-lg-2 mt-5">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 mb-3">
                            <h1>{% trans 'Payment Details' %}</h1>
                        </div>
                        <div class="col-12 mb-1">
                            <h3>Select a card</h3>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-12">
                            <div id="cards"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 mb-3" id="">
                            <a href="#stripe-card-form-card" class="text-primary" data-toggle="collapse"
                               data-target="#stripe-card-form-card"
                               aria-expanded="false" aria-controls="stripe-card-form-card">Add a new card</a>
                        </div>
                        <div class="col-12 collapse" id="stripe-card-form-card">
                            <form action="" method="post" id="payment-form">
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <div class="form-row">
                                            <div class="form-control" id="card-element"></div>
                                            <div id="card-errors" role="alert"></div>
                                        </div>

                                    </div>
                                    <div class="col-12">
                                        <div class="row">
                                            <div class="col-6 text-left">
                                                <button class="btn btn-primary btn-hook">
                                                    Add Card
                                                </button>
                                            </div>
                                            <div class="col-6 text-right">
                                                <a class="text-primary" href="#" data-toggle="collapse"
                                                   data-target="#stripe-card-form-card"
                                                   aria-expanded="true"
                                                   aria-controls="stripe-card-form-card">Cancel</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    {% if account %}
                        <div class="row">
                            <div class="col-12 mt-4 mb-2">
                                <h3>Account Credit</h3>
                            </div>
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-6">
                                        <strong>Account Credit</strong>
                                    </div>
                                    <div class="col-3">
                                        {{ account.balance|currency:account.currency }}
                                    </div>
                                    <div class="col-3 text-right">
                                        <form method="post" action="">
                                            {% csrf_token %}
                                            <input type="hidden" value="account" name="method">
                                            <button type="submit" class="btn btn-primary btn-hook">
                                                Use <i class="fa fa-chevron-right"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <form id="selected-card" action="{% url 'checkout:preview' %}" method="post">
            <input type="hidden" name="card" value="">
            {% csrf_token %}
        </form>
    {% endblock payment_details_content %}
{% endblock payment_details %}

{% block extrascripts %}
    {{ block.super }}
    <script type="text/javascript">
        var addTokenURL = "{% url 'stripe_payment:add_token' %}";
        var getCardsURL = "{% url 'stripe_payment:get_cards' %}";
    </script>
    <script type="text/javascript" src="{% static 'js/stripe.js' %}"></script>
{% endblock %}