{% extends "checkout/layout.html" %}
{% load currency_filters %}
{% load thumbnail %}
{% load i18n %}
{% load purchase_info_tags %}
{% load staticfiles %}
{% load checkout_tags %}
{% load mathfilters %}

{% block title %}
    {% trans "Checkout" %} | {{ block.super }}
{% endblock %}

{% block checkout_nav %}
    {% include 'checkout/nav.html' %}
{% endblock %}

{% block content %}

    {% if error %}
        <div class="alert alert-danger">
            {{ error }}
        </div>
    {% endif %}
    <div class="row mt-5">
        <div class="col-lg-8">
            {% block order_contents %}
                <div class="card shadow-sm">
                    <div class="card-body">
                        {% block order_contents_actions %}
                            <a href="{% url 'basket:summary' %}" class="badge badge-primary">
                                {% trans "Edit order contents" %}
                            </a>
                        {% endblock %}

                        <h2 class="mb-4">{% trans "Order Summary" %}</h2>
                        <div class="basket-title">
                            <div class="row">
                                <p class="col-sm-8 h4">{% trans "Item" %}</p>
                                <p class="col-sm-2 h4 align-center text-center">{% trans "Qty" %}</p>
                                <p class="col-sm-2 h4 align-right text-center">{% trans "Price" %}</p>
                            </div>
                        </div>
                        {% for line in basket.all_lines %}
                            {% purchase_info_for_line request line as session %}
                            <div class="basket-items">
                                <div class="row">
                                    <div class="col-sm-8">
                                        <a class="clearfix"
                                           href="{{ product.get_absolute_url }}">{{ line.product.get_title }}</a>
                                        {% for item in line.product.attribute_values.all %}
                                            {% if item.attribute.use_for_variations %}
                                                <small class="d-block">
                                                    <strong>{{ item.attribute }}: </strong>{{ item.value }}
                                                </small>
                                            {% endif %}
                                        {% endfor %}
                                        {% for attribute in line.attributes.all %}
                                            <small class="d-block">
                                                {% if attribute.option.code == 'subscription-interval' %}
                                                    {% if line.product.subscription == True %}
                                                        <strong>Next shipping & billing date: </strong>
                                                        {% next_shipping_day attribute.value %}
                                                    {% endif %}
                                                {% elif attribute.option.code == 'surprise' %}
                                                    {% if line.product.subscription == True %}
                                                        <strong>{{ attribute.option.name }}: </strong>
                                                        {% if attribute.value %}Yes{% else %}No{% endif %}
                                                    {% endif %}
                                                {% else %}
                                                    <strong>{{ attribute.option.name }}: </strong>{{ attribute.value }}
                                                {% endif %}
                                            </small>
                                        {% endfor %}
                                        {# <span class="availability {{ session.availability.code }}">{{ session.availability.message }}</span> #}
                                    </div>
                                    <div class="col-sm-2 col-6 align-center text-center">
                                        <small class="d-sm-none strong">x</small>
                                        {{ line.quantity }}
                                    </div>
                                    <div class="col-sm-2 col-6 align-right text-center">
                                        <p class="price_color">
                                            {% if not show_tax_separately and line.is_tax_known %}
                                                {{ line.line_price_incl_tax|currency:basket.currency }}
                                            {% else %}
                                                {{ line.line_price_excl_tax|currency:basket.currency }}
                                            {% endif %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="space-1"></div>
                        {% endfor %}
                        <div class="row">
                            <div class="col-sm-12">
                                <hr>
                            </div>
                            <div class="col-sm-6 offset-sm-6">
                                {% include 'basket/partials/basket_totals.html' %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endblock order_contents %}
        </div>
        <div class="col-lg-4">
            {# You will almost certainly want to override this block to provide a payment summary #}
            {% block payment_method %}
                <div class="card shadow-sm mb-3">
                    <div class="card-body">
                        <h2>{% trans "Payment Details" %}</h2>
                        {% if stripe_card %}
                            <div class="row">
                                <div class="col-12">
                                    <a href="{% url 'checkout:payment-details' %}" class="badge badge-primary">
                                        {% trans "Change" %}
                                    </a>
                                </div>
                                <div class="col-8">
                                    <div class="clearfix">
                                        <strong>Card: </strong> {{ stripe_card.brand }} - **** ****
                                        **** {{ stripe_card.last_digits }}
                                    </div>
                                    <div class="clearfix">
                                        <strong>Expiry: </strong>{{ stripe_card.expiry }}
                                    </div>
                                </div>
                                <div class="col-4 text-right">
                                    {% if account and account.balance < total_amount.incl_tax %}
                                        {{ total_amount.incl_tax|sub:account.balance|currency:basket.currency }}
                                    {% elif account and account.balance > total_amount.incl_tax %}

                                    {% else %}
                                        {{ total_amount.incl_tax|currency:basket.currency }}
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                        {% if account %}
                            <div class="row mt-3">
                                <div class="col-8">
                                    <strong>Account Credit</strong>
                                </div>
                                <div class="col-4 text-right">
                                    {% if stripe_card %}
                                        {{ account.balance|currency:basket.currency }}
                                    {% else %}
                                        {{ total_amount.incl_tax|currency:basket.currency }}
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endblock payment_method %}
            {% block shipping_address_preview %}
                <div class="card shadow-sm mb-3">
                    <div class="card-body">
                        <h2>{% trans "Shipping Details" %}</h2>
                        {% if shipping_address %}
                            <div class="row">
                                <div class="col-12">
                                    {% block shipping_address_actions %}
                                        <a href="{% url 'checkout:shipping-address' %}" class="badge badge-primary">
                                            {% trans "Change" %}
                                        </a>
                                    {% endblock %}
                                </div>
                                <div class="col-12">
                                    <address>
                                        {% for field in shipping_address.active_address_fields %}
                                            {{ field }}<br/>
                                        {% endfor %}
                                    </address>
                                </div>

                                {% if shipping_address.phone_number %}
                                    <div class="col-12">
                                        {% trans "Phone" %}: {{ shipping_address.phone_number }}
                                        {% if guest_email %}
                                            <br/>{% trans "Email" %}: {{ guest_email }}
                                        {% endif %}
                                    </div>
                                {% endif %}

                                {% if shipping_address.notes %}
                                    <div class="col-12">
                                        <strong class="clearfix">{% trans "Instructions" %}</strong>
                                        <p>{{ shipping_address.notes|linebreaks }}</p>
                                    </div>
                                {% endif %}
                                {% if shipping_method %}
                                    {% block shipping_method_actions %}
                                        <div class="col-12">
                                            <div class="space-1"></div>
                                            <a href="{% url 'checkout:shipping-method' %}"
                                               class="badge badge-primary">
                                                {% trans "Change" %}
                                            </a>
                                        </div>
                                    {% endblock %}
                                    <div class="col-12">
                                        <strong class="clearfix">{{ shipping_method.name }}</strong>
                                        {% if shipping_method.description %}
                                            - {{ shipping_method.description|safe }}
                                        {% endif %}
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endblock shipping_address_preview %}

            {% block place_order %}
            {% endblock place_order %}
        </div>
    </div>

    {% block shipping_address %}
    {% endblock shipping_address %}

    {% block shipping_method %}
    {% endblock shipping_method %}

    {% block payment_details %}
    {% endblock payment_details %}

    <div class="space-2"></div>

{% endblock content %}