{% sw_extends '@Storefront/storefront/page/checkout/_page.html.twig' %}

{% block base_body_classes %}vrpayment-payment is-act-confirmpage{% endblock %}

{% block page_checkout_main_content %}
    <div id="vrpaymentOrderCancel"></div>
    {% block page_checkout_pay %}
        {% block page_checkout_confirm_header %}
            <h1 class="confirm-main-header">
                {{ "vrpayment.payHeader"|trans|sw_sanitize }}
            </h1>
        {% endblock %}

		{# TODO: move this into a separate file #}
		{% block page_checkout_confirm_address %}
			<div class="row js-confirm-overview-addresses">
				{% block page_checkout_confirm_address_shipping %}
					{% if page.cart is defined %}
						{% set lineItems = page.cart.lineItems %}
					{% endif %}
					{% if page.order is defined %}
						{% set lineItems = page.order.lineItems %}
					{% endif %}
					{% if not page.isHideShippingAddress() %}
						<div class="col-sm-6 card-col confirm-shipping-address">
							<div class="card checkout-card">
								<div class="card-body">
									{% block page_checkout_confirm_address_shipping_title %}
										<div class="card-title">
											{{ "checkout.shippingAddressHeader"|trans|sw_sanitize }}
										</div>
									{% endblock %}

									{% block page_checkout_confirm_address_shipping_data %}
										<div class="confirm-address-shipping">
											{% sw_include '@Storefront/storefront/component/address/address.html.twig' with {
												'address': context.customer.defaultShippingAddress
											} %}
										</div>
									{% endblock %}

									{% block page_checkout_confirm_address_shipping_actions %}
										<div class="card-actions" >
											{% set addressEditorOptions = {
												changeShipping: true,
												addressId: context.customer.defaultShippingAddressId,
											} %}
										</div>
									{% endblock %}
								</div>
							</div>
						</div>
					{% endif %}
				{% endblock %}

				{% block page_checkout_confirm_address_billing %}
					<div class="col-sm-6 card-col confirm-billing-address">
						<div class="card checkout-card">
							<div class="card-body">
								{% block page_checkout_confirm_address_billing_title %}
									<div class="card-title">
										{{ "checkout.billingAddressHeader"|trans|sw_sanitize }}
									</div>
								{% endblock %}

								{% block page_checkout_confirm_address_billing_data %}
									<div class="confirm-address-billing">
										{% set shippingAddress = context.customer.activeShippingAddress %}
										{% set billingAddress = context.customer.activeBillingAddress %}
										{% if shippingAddress.id is defined and shippingAddress.id is same as(billingAddress.id) %}
											{% block page_checkout_confirm_address_billing_data_equal %}
												<p>
													{{ "checkout.addressEqualText"|trans|sw_sanitize }}
												</p>
											{% endblock %}
										{% else %}
											{% sw_include '@Storefront/storefront/component/address/address.html.twig' with {
												'address': context.customer.defaultBillingAddress
											} %}
										{% endif %}
									</div>
								{% endblock %}

								{% block page_checkout_confirm_address_billing_actions %}
									<div class="card-actions">
										{% set addressEditorOptions = {
											changeBilling: true,
											addressId: context.customer.defaultBillingAddressId,
										} %}
									</div>
								{% endblock %}
							</div>
						</div>
					</div>
				{% endblock %}
			</div>
		{% endblock %}

		{% block page_checkout_pay_order_form %}
			<div class="row finish-info">
				<div class="col-md-12">
					{% sw_include '@VRPaymentPayment/storefront/page/checkout/order/vrpayment_payment.html.twig' %}
				</div>
			</div>
		{% endblock %}

		{% block page_checkout_pay_product_table %}
			<div class="card checkout-product-table">
				<div class="card-body">
					{% block page_checkout_pay_table_header %}
						{% sw_include '@Storefront/storefront/component/checkout/cart-header.html.twig' %}
					{% endblock %}

					{% block page_checkout_pay_items %}
						{% for lineItem in page.order.nestedLineItems %}
							{% block page_checkout_pay_item %}
								{% sw_include '@Storefront/storefront/component/line-item/line-item.html.twig' %}
							{% endblock %}
						{% endfor %}
					{% endblock %}
				</div>
			</div>
		{% endblock %}
	{% endblock %}
{% endblock %}

{% block page_checkout_aside_actions %}
    <div class="checkout-aside-action">
        <form name="confirmOrderForm" id="confirmOrderForm">
			<input type="hidden" id="cartRecreateUrl" value="{{ page.extensions.vRPaymentData.cartRecreateUrl }}" />
			<input type="hidden" id="checkoutUrl" value="{{ page.extensions.vRPaymentData.checkoutUrl }}" />
			<button id="confirmFormSubmit"
					class="btn btn-primary btn-block btn-lg"
					form="confirmOrderForm"
					disabled
					type="submit">
				{{ "vrpayment.payButton"|trans|sw_sanitize }}
			</button>
        </form>
    </div>
{% endblock %}

{% block base_body_script %}
	{{ parent() }}
	{% if page.extensions.vRPaymentData %}
		{% if page.extensions.vRPaymentData.deviceJavascriptUrl %}
			<script src="{{ page.extensions.vRPaymentData.deviceJavascriptUrl }}" async="async"></script>
		{% endif %}
		{% if page.extensions.vRPaymentData.javascriptUrl %}
			<script src="{{ page.extensions.vRPaymentData.javascriptUrl }}"></script>
		{% endif %}
		<script type="text/javascript" src="{{ asset('bundles/vrpaymentpayment/storefront/js/app.js') }}"></script>
	{% endif %}
{% endblock %}
