<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <!-- /shop/confirmation route -->
    <template id="website_sale.confirmation">
        <t t-set="oe_structure">
            <!-- This is the drag-and-drop area for website building blocs at the end of each
                 checkout page. This is append at the of the page in `checkout_layout`. The
                 templates created in the database to store blocs are hooked using XPath on the
                 `oe_struture` element ID. Therefore, we can't use dynamic IDs (like with
                 t-att-id) and each template needs to define a div element. -->
            <div class="oe_structure" id="oe_structure_website_sale_confirmation_3"/>
        </t>
        <t t-call="website_sale.checkout_layout"
            show_wizard_checkout="False"
            show_mobile_cart_summary="False"
            show_navigation_button="False"
            show_footer="True"
            additional_title.translate="Shop - Confirmed"
            hide_promotions="True"
            oe_structure="oe_structure">

            <t t-set="tx_sudo" t-value="order.get_portal_last_transaction()"/>
            <div
                t-if="tx_sudo.state in ['pending', 'done'] or not order.amount_total"
                class="d-flex justify-content-between align-items-center"
            >
                <h3>Thank you for your order.</h3>
                <div t-if="not order.invoice_count">
                    <a
                        title="Download"
                        role="button"
                        class="d-none d-md-inline-block btn btn-light ms-auto"
                        href="/shop/print"
                        target="_blank"
                        aria-label="Download"
                    >
                        <i class="fa fa-download me-2"/>Download
                    </a>
                </div>
                <div t-else="">
                    <div class="dropdown d-none d-md-inline-block ms-auto">
                        <button
                            class="btn btn-light dropdown-toggle"
                            type="button"
                            id="downloadDropdown"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                            aria-label="Download"
                        >
                            <i class="fa fa-download me-2"/>Download
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="downloadDropdown">
                            <li>
                                <a
                                    class="dropdown-item"
                                    href="/shop/print"
                                    target="_blank"
                                    title="Download Sale Order"
                                    aria-label="Download Sale Order"
                                >
                                    <i class="fa fa-cart-arrow-down me-2"/>Order
                                </a>
                            </li>
                            <li>
                                <a
                                    class="dropdown-item"
                                    href="/shop/print/invoice"
                                    target="_blank"
                                    title="Download Invoice"
                                    aria-label="Download Invoice"
                                >
                                    <i class="fa fa-file-text-o me-2"/>Invoice
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="order_name" class="mb-4">
                <h5>
                    <span>Order</span>
                    <span t-field="order.name"/>
                </h5>
            </div>
            <t t-if="signup_url">
                <p class="alert alert-info mt-3" role="status">
                    <a role="button" t-att-href="signup_url" class="btn btn-primary o_translate_inline">Sign Up</a>
                    <span class="align-middle">to follow your order.</span>
                </p>
            </t>
            <div class="oe_structure clearfix mt-3" id="oe_structure_website_sale_confirmation_1"/>
            <t t-call="website_sale.payment_confirmation_status"/>
            <div class="mt-3">
                <t t-call="website_sale.address_on_checkout"/>
            </div>
            <div class="oe_structure mt-3" id="oe_structure_website_sale_confirmation_2"/>
            <input t-if='website.plausible_shared_key' type='hidden' class='js_plausible_push' data-event-name='Shop' t-attf-data-event-params='{"CTA": "Order Confirmed", "amount": "#{"%3s-%3s" % (max(0, round(website_sale_order.amount_total/100)*100 - 50), round(website_sale_order.amount_total/100)*100 + 50)}"}' />
            <div class="d-lg-none">
                <t t-call="website_sale.cart_summary_content"/>
                <t t-call="website_sale.total" _cart_total_classes.f="border-top pt-2"/>
            </div>
        </t>
    </template>

    <!-- Called in `website_sale.confirmation`. -->
    <template id="website_sale.payment_confirmation_status">
        <div
            name="order_confirmation"
            class="mt-3"
            t-att-data-order-id="order.id"
            t-att-data-order-tracking-info="json.dumps(order_tracking_info)"
        >
            <t t-set="tx_sudo" t-value="order.get_portal_last_transaction()"/>
            <div
                t-if="tx_sudo"
                t-attf-class="alert px-3 pb-0 pt-3 #{
                    (tx_sudo.state == 'pending' and 'alert-info') or
                    (tx_sudo.state == 'done' and order.amount_total == tx_sudo.amount and 'alert-success') or
                    (tx_sudo.state == 'done' and order.amount_total != tx_sudo.amount and 'alert-warning') or
                    (tx_sudo.state == 'authorized' and 'alert-success') or
                    'alert-danger'}"
                role="alert"
            >
                <a
                    title="Edit"
                    class="btn btn-sm btn-link text-dark float-end"
                    role="button"
                    groups="base.group_system"
                    target="_blank"
                    aria-label="Edit"
                    t-attf-href="/odoo/action-payment.action_payment_provider/{{tx_sudo.provider_id.id}}"
                >
                    <i class="fa fa-pencil"/>
                </a>
                <div>
                    <t t-if="tx_sudo.state == 'pending'">
                        <t t-out="tx_sudo.provider_id.sudo().pending_msg"/>
                    </t>
                    <t t-if="tx_sudo.state == 'done'">
                        <span t-if='tx_sudo.provider_id.sudo().done_msg' t-out="tx_sudo.provider_id.sudo().done_msg"/>
                    </t>
                    <t t-if="tx_sudo.state == 'done' and order.amount_total != tx_sudo.amount">
                        <span>Unfortunately your order can not be confirmed as the amount of your payment does not match the amount of your cart.
                        Please contact the responsible of the shop for more information.</span>
                    </t>
                    <t t-if="tx_sudo.state == 'cancel'">
                        <t t-out="tx_sudo.provider_id.sudo().cancel_msg"/>
                    </t>
                    <t t-if="tx_sudo.state == 'authorized'">
                        <t t-if="tx_sudo.provider_id.sudo().auth_msg" t-out="tx_sudo.provider_id.sudo().auth_msg"/>
                        <span t-else="">Your payment has been authorized.</span>
                    </t>
                    <t t-if="tx_sudo.state == 'error'">
                        <span t-out="tx_sudo.state_message"/>
                    </t>
                </div>
                <t t-if="tx_sudo.provider_code == 'custom'">
                    <div id="order_reference" t-if="order.reference" class="mt-2">
                        <b>Communication: </b><span t-out='order.reference'/>
                    </div>
                    <div t-if="tx_sudo.provider_id.sudo().qr_code">
                        <t t-set="qr_code" t-value="tx_sudo.company_id.partner_id.bank_ids[:1].build_qr_code_base64(order.amount_total,tx_sudo.reference, None, tx_sudo.currency_id, tx_sudo.partner_id)"/>
                        <div class="mt-2" t-if="qr_code">
                            <h3>Or scan me with your banking app.</h3>
                            <img class="border border-dark rounded" t-att-src="qr_code"/>
                        </div>
                    </div>
                </t>
            </div>
        </div>
    </template>

</odoo>
