{% extends "oscar/checkout/thank_you.html" %}

{% load currency_filters %}
{% load thumbnail %}
{% load i18n %}
{% load staticfiles %}
{% load wagtailimages_tags %}

{% block checkout_header %}
{% endblock %}

{% block body_class %}thankyoupage{% endblock %}

{% block wrapper_class %}thankyou_wrapper{% endblock %}

{% block title %}
    {% blocktrans with number=order.number %}
        Order {{ number }}: confirmation
    {% endblocktrans %} | {{ block.super }}
{% endblock title %}

{% block checkout_nav %}
    {% include 'checkout/nav.html' with step=5 %}
{% endblock %}

{% block checkout_title %}
    {% blocktrans with number=order.number %}
        Order #{{ number }}: confirmation
    {% endblocktrans %}
{% endblock %}

{% block wrapper_header %}
<svg version="1.1" id="Layer_1" class="receipt_headersvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 737 25.06"  xml:space="preserve">
        <polygon class="st0" points="706.5,9.48 687.5,2.48 663.5,11.48 651.5,2.48 631.5,10.48 615.5,3.48 589.5,9.49 572.5,3.49 
    549.5,11.49 533.5,2.49 510.5,10.49 478.5,2.49 457.5,9.49 434.5,0.5 404.5,10.5 385.5,0.5 368.5,8.5 349.5,1.5 330.5,6.5 
    300.5,1.5 271.5,6.51 244.5,1.51 211.5,6.51 179.5,2.51 156.5,12.51 131.9,5.52 108.5,11.52 86.18,6.42 69.5,13.52 57.5,6.52 
    40.24,12.88 19.5,9.52 0.5,3.52 0.5,24.52 736.5,24.48 736.5,2.48 "/>
</svg>
{% endblock %}

{% block content %}
    <div class="d-block mx-auto text-center mb-3">
        {% with logo=settings.ocyan_plugin_wagtail.OcyanSettings.logo %}
        <a class="navbar-brand" href="{{ homepage_url }}">{% block brand_title %}<span class="logo">{% image logo max-200x200 class="img-fluid" %}</span> </a>{% endblock %}
        {% endwith %}
    </div>
    <div class="lead mb-5">
        <h2>{% trans "Thank you for your purchase" %}</h2>
    </div>

    <div class="row">
        <div class="col-md-6">
            <b>{% trans "Delivery address" %}</b>
            {% if order.shipping_address %}
                <address>
                    {{order.shipping_address.name}} <br>
                    {{order.shipping_address.line1}}
                    {{order.shipping_address.line2}}<br>
                    {{order.shipping_address.line4}}
                    {{order.shipping_address.postcode}}<br>
                    {{order.shipping_address.country}}<br>
                    {{order.shipping_address.phone_number}}
                </address>
            {% else %}
                <p>{% trans "No shipping address required." %}</p>
            {% endif %}
            <div>
                <b class="d-block">{% trans "Shipping method" %}</b>
                <p>{{ order.shipping_method }}</p>
            </div>
        </div>
        <div class="col-md-6 text-right-desktop">
            <div class="mb-4">
                <b class="d-block">{% trans "Ordernumber" %}</b>
                <b class="d-block">#{{ order.number }}</b>
            </div>
            <div class="mb-4">
                <b class="d-block">{% trans "Order date" %}</b>
                {{ order.date_placed|date:"d F Y" }}
            </div>
            <div>
                {% if order.shipping_address.notes %}
                    <b class="d-block">{% trans "Instructions" %}</b>
                    <p>{{ order.shipping_address.notes|safe }}</p>
                {% endif %}
            </div>
            
        </div>
    </div>

    {% block order_contents %}
    <div class="row my-3">
        <div class="col-sm-12">
            <div class="checkout_block">
                <div class="receipt_header">
                    {% trans "Order contents" %}
                </div>
                <ul class="nav flex-column flex-nowrap">
                    {% for line in order.lines.all %}
                    <li class="nav-item product-line {% if forloop.last %}no-border{% endif %} no-border my-2">
                        <div class="row align-items-center">
                            <div class="col-md-2">
                                <div class="image_container">
                                    {% with image=line.product.primary_image %}
                                        {% thumbnail image.original "100x100" upscale=False as thumb %}
                                        <a href="{{ line.product.get_absolute_url }}"><img class="thumbnail" src="{{ thumb.url }}" alt="{{ line.product.get_title }}"></a>
                                        {% endthumbnail %}
                                    {% endwith %}
                                </div>
                            </div>
                            <div class="col-md-7">
                                <strong class="d-block"><a href="{{ line.product.get_absolute_url }}">{{ line.title }}</a></strong>
                                <div class="text-muted">{{ line.product.description|safe|truncatewords_html:25 }}</div>
                                <div class="product_options text-muted {% if line.attributes.all %}py-1{% endif %}">
                                    {% for option in line.attributes.all %}
                                        <small class="d-block"><b class="pr-1">{{ option.option }}:</b> {{ option.display_value }}</small>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="col-md-3 text-right">
                                <span class="text-muted d-block"><small>{% trans 'Quantity' %}: {{ line.quantity }}</small> </span>
                                <b class="d-block mt-1">{{ line.line_price_incl_tax|currency:request.basket.currency }}</b>
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

    {% endblock order_contents %}

        <div class="col-sm-12">
            {% block payment_info %}
                <div class="checkout_block sticky">
                    <div class="receipt_header">
                        {% trans "Payment" %}
                    </div>
                    <div class="my-4">
                        {% for source in order.sources.all %}
                            <p>
                            {% trans source.source_type.name as translated_source %}
                            {% if source.reference %}
                                {% blocktrans with amount=source.amount_allocated|currency:source.currency type=translated_source reference=source.reference %}
                                    Allocation of {{ amount }} from type {{ type }} (reference: {{ reference }})
                                {% endblocktrans %}
                            {% else %}
                            {% trans source.source_type.name as translated_source %}
                                {% blocktrans with amount=source.amount_allocated|currency:source.currency type=source.source_type.name %}
                                    Allocation of {{ amount }} from type {{ type }}
                                {% endblocktrans %}
                            {% endif %}
                            </p>
                        {% empty %}
                            <p>
                            {% trans "No payment was required for this order." %}
                            </p>
                        {% endfor %}

                        {% if order.billing_address %}
                            <h4>{% trans "Billing address" %}</h4>
                            <address>
                                {% for field in order.billing_address.active_address_fields %}
                                    {{ field }}<br/>
                                {% endfor %}
                            </address>
                        {% endif %}
                    </div>
                    {% block basket_totals %}
                        <div class="receipt_header">
                        </div>
                            {% include 'order/partials/basket_totals.html' %}
                    {% endblock basket_totals %}

                    {% block vat_regulation %}
                        {{block.super}}
                    {% endblock %}
                </div>
                {% endblock %}
            </div>
        </div>
        <div class="row my-3">
            {% if not order.user %}
                <div class="col-sm-12">
                    <div class="sub-header">
                        <h2>{% trans "Tracking your order" %}</h2>
                    </div>
                    <p>{% trans "You can track the status of your order" %}</p>
                    <a class="btn btn-primary" href="{% url 'customer:anon-order' order_number=order.number hash=order.verification_hash %}">{% trans "View order status" %}</a>.
                </div>
            {% endif %}
        </div>


    {% block order_actions %}
        <div class="form-group">
            <div class="row">
                <div class="col-sm-4">
                    <p><a onclick="window.print()" href="#" class="btn btn-primary btn-block btn-lg">{% trans "Print this page" %}</a></p>
                </div>
                <div class="col-sm-4 col-sm-offset-4">
                    <p><a href="{{ homepage_url }}" class="btn btn-primary btn-block btn-lg">{% trans "Continue shopping" %}</a></p>
                </div>
            </div>
        </div>
    {% endblock order_actions %}
{% endblock content %}

{% block tracking %}
    {% if send_analytics_event %}
        {% include "partials/google_analytics_transaction.html" %}
    {% endif %}
{% endblock %}


{% block footer %}
    <svg version="1.1" id="Layer_1" class="receipt_footer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 736.17 51.14"  xml:space="preserve">
        <polygon class="st0" points="30.5,15.5 49.5,22.5 73.5,13.5 85.5,22.5 105.5,14.5 121.5,21.5 147.5,15.5 164.5,21.5 187.5,13.5 
    203.5,22.5 226.5,14.5 258.5,22.5 279.5,15.5 302.5,24.5 332.5,14.5 351.5,24.5 368.5,16.5 387.5,23.5 406.5,18.5 436.5,23.5 
    465.5,18.5 492.5,23.5 525.5,18.5 557.5,22.5 580.5,12.5 605.1,19.5 628.5,13.5 650.82,18.6 667.5,11.5 679.5,18.5 696.76,12.14 
    717.5,15.5 736.5,21.5 736.5,0.5 0.5,0.5 0.5,22.5 "/>
    </svg>
{% endblock %}