{% extends "checkout/layout.html" %}

{% load currency_filters %}
{% load thumbnail %}
{% load i18n %}
{% load static %}
{% 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="thankyou_header">

    {% with logo=settings.ocyan_plugin_wagtail.OcyanSettings.logo %}
    <a class="navbar-brand" href="{% url 'wagtail_serve' '' %}">{% block brand_title %}<span class="logo">{% image logo max-200x200 class="img-fluid" %}</span> </a>{% endblock %}
    {% endwith %}
</div>
<div class="lead">
    <h2>{% trans "Thank you for your purchase" %}</h2>
</div>

<div class="row thankyou_row">
    <div class="col-md-6">
        <b>{% trans "Delivery address" %}</b>
        {% if order.shipping_address %}
        <address>
            {% for field in order.shipping_address.ordered_active_address_fields %}
            {{ field }}<br>
            {% endfor %}                    
            {{ order.shipping_address.phone_number }}
        </address>
        {% else %}
        <p>{% trans "No shipping address required." %}</p>
        {% endif %}
        <div>
            <b>{% trans "Shipping method" %}</b>
            <p>{{ order.shipping_method }}</p>
        </div>
    </div>
    <div class="col-md-6 text-right-desktop">
        <div class="thankyou_line">
        	<div>
            	<b>{% trans "Ordernumber" %}</b>
        	</div>
            <b>#{{ order.number }}</b>
        </div>
        <div class="thankyou_line">
            <div><b>{% trans "Order date" %}</b></div>
            {{ order.date_placed|date:"d F Y" }}
        </div>
        {% if order.shipping_address.notes %}
        <div class="thankyou_line">
            <div><b>{% trans "Instructions" %}</b></div>
            <p>{{ order.shipping_address.notes|safe }}</p>
        </div>
        {% endif %}
        {% if order.delivery_time %}
        <div class="thankyou_line">
            <div><b>{% trans "Delivery date" %}</b></div>
            {{ order.delivery_time|safe }}
        </div>
        {% endif %}
    </div>
</div>

{% block extra_top_content %}
{{block.super}}
{% endblock %}

{% block order_contents %}
<div class="row thankyou_row">
    <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> {% if option.display_value == True %} {% trans "Yes" %} {% elif option.display_value == False %} {% trans "No" %} {% else %}{{ option.display_value }}{% endif %}</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:order.currency }}</b>
                        </div>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% endblock order_contents %}
    <div class="col-12 thankyou_row">
        {% block payment_info %}
        <div class="checkout_block sticky">
            <div class="receipt_header">
                {% trans "Payment" %}
            </div>
            <div class="receipt_body">
                {% 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 %}
                    {% blocktrans with amount=source.amount_allocated|currency:source.currency type=translated_source %}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.ordered_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 thankyou_row">
    {% 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" %}. <a href="{% url 'customer:anon-order' order_number=order.number hash=order.verification_hash %}">{% trans "View order status" %}</a></p>
    </div>
    {% endif %}
</div>

{% block extra_footer_content %}
{{block.super}}
{% endblock %}


{% block order_actions %}
<div class="form-group">
    <div class="order_actions">
        <a onclick="window.print()" href="#" class="btn btn-primary">{% trans "Print this page" %}</a>
        <a href="{% url 'wagtail_serve' '' %}" class="btn btn-primary">{% trans "Continue shopping" %}</a>
    </div>
</div>
{% endblock order_actions %}
{% endblock content %}

{% block tracking %}
{% if send_analytics_event %}
{% include "oscar/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 %}