[{$smarty.block.parent}]

[{assign var="sAcceptCookies" value=$oViewConf->getOxCookie('acceptCookies')}]

[{capture assign="dataLayerCheckout"}]
[{strip}]
const getActiveStep = function () {
	const classNameActive = $('.checkoutSteps .active');
	if (classNameActive) {
		const classNames = classNameActive.attr('class').split(' ');
		const steps = classNames.filter(classN => {
			switch (classN) {
				case 'step1': 
				case 'step2': 
				case 'step3': 
				case 'step4': 
				case 'step5': 
					return true;
				default: 
					return false;
			};
		});

		if (steps && steps.length >= 1) {
			const step = parseInt(steps[0].slice(-1));
			return step;
		}
	}
	return null;
};

	
const handlepaymentButtons = function() {
	$('#paypalExpressCheckoutBox').on('click', function(event) {
		return new Promise(resolve => {
			const step = getActiveStep();
			dataLayer.push({
				event: 'checkoutOption',
				ecommerce: {
					checkout_option: {
						actionField: {
							step,
							option: 'oxidpaypal',
						}
					}
				},
				eventCallBack: function() {
					resolve();
				},
				eventTimeout: 2000
			});	
		});
	});

	$('[id^=payWithAmazonButton]').on('click', function(event) {
		return new Promise(resolve => {
			const step = getActiveStep();
			dataLayer.push({
				event: 'checkoutOption',
				ecommerce: {
					checkout_option: {
						actionField: {
							step,
							option: 'bestitamazonpay',
						}
					}
				},
				eventCallBack: function() {
					resolve();
				},
				eventTimeout: 2000
			});	
		});
	});
};

const handlePaymentChange = function () {
	$('#payment input[type=radio').on('change', function(event) {
		const step = getActiveStep();
		dataLayer.push({
			event: 'checkoutOption',
			ecommerce: {
				checkout_option: {
					actionField: {
						step,
						option: event.target.value
					}
				}
			}
		});
	});
};

$(document).ready(function () {
	const step = getActiveStep();

	if (step) {
		const products = [];
		const actionField = {step};
    [{foreach key=basketindex from=$oxcmp_basket->getContents() item=basketitem name=basketContents}]
			[{assign var="oArticle" value=$basketitem->getArticle()}]
			[{assign var="oPrice" value=$basketitem->getPrice()}]
			[{assign var="oCategory" value=$oArticle->getCategory()}]

			products.push({	
				name: '[{$basketitem->getTitle()}]',
	      id: '[{$oArticle->oxarticles__oxartnum->value}]',
	      price: [{$oPrice->getPrice()}],
	      brand: [{if $oArticle->isSoloByAlko()}]'solobyAL-KO'[{else}]'AL-KO'[{/if}],
	      category: '[{if $oCategory}][{$oCategory->getTitle()}][{/if}]',
				dimension10: '[{if $oCategory}][{$oCategory->getIdWithoutShopId()}][{/if}]',
	      quantity: [{$basketitem->getAmount()}]
			});
	  [{/foreach}]

		if (step == 3) {
			handlePaymentChange();
			actionField.option = $('#payment input:checked').val();
		}

		if (step == 1 || step == 2) {
			handlepaymentButtons();
		}

		window.dataLayer = window.dataLayer || [];
		window.dataLayer.push({
		    event: 'checkout',
		    ecommerce: {
		      checkout: {
		        actionField,
		        products
		     }
		   }
		});
	}
});
[{/strip}]
[{/capture}]

[{if $sAcceptCookies == 1}]
[{oxscript add=$dataLayerCheckout}]
[{/if}]