{% extends 'base.html' %}

{% block meta_title %}
    {{ order.printable_name }}
{% endblock %}


{% block breadcrumbs %}
{% endblock %}

{% block search %}
{% endblock %}


{% block content %}
    <div class="container" style="padding: 50px 0;">
        <div class="row">
            <div class="col-md-6">
                <div style="display: flex;gap: 10px;padding-bottom: 200px">
                    <div>
                        <i class="fa fa-check-circle" style="font-size: 60px;color: #3a945b"></i>
                    </div>
                    <div>
                        <b>Щиро дякуємо за замовлення!</b> <br />
                        Ваше замовлення <b>#{{ order.id }}</b> від {{ order.created|date:'d E Y' }}
                        успішно прийняте.<br />
                        Наш менеджер зв'яжеться з Вами в робочий час.<br />
                        Дякуємо, що Ви з нами.
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                {% if order.is_paynow_form_visible and checkout_form %}
                    <form action="{{ checkout_form.action }}" method="{{ checkout_form.method }}" target="_blank">
                        {{ checkout_form }}
                        <button type="submit" class="btn btn-success btn-lg pull-left">
                            <i class="fa fa-credit-card"></i>
                            Оплатити замовлення ({{ order.printable_total }})
                        </button>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}


{% block js %}
    {{ block.super }}

    {{ serialized_products|json_script:"items-data" }}

    <script>
        (function ($) {
            $(window).trigger('checkout.purchase', [
                {
                    order_id: "{{ order.pk }}",
                    order_total: {{ order.total|floatformat:"2u" }},
                    products: JSON.parse(document.getElementById('items-data').textContent),
                }
            ]);
        })(jQuery);
    </script>
{% endblock %}