(function () {
	const doc = document;
	if (!doc) {
		return;
	}

	doc.addEventListener('DOMContentLoaded', function () {
		const cards = Array.prototype.slice.call(doc.querySelectorAll('[data-foodord-layout-card]'));
		const inputs = Array.prototype.slice.call(doc.querySelectorAll('input[name="foodord_product_card_layout"]'));

		function setActive(layout) {
			cards.forEach(function (card) {
				card.classList.toggle('is-active', card.getAttribute('data-foodord-layout-card') === layout);
			});
		}

		cards.forEach(function (card) {
			card.addEventListener('click', function (event) {
				const target = event.target;
				if (target && target.closest('label')) {
					return;
				}
				const input = card.querySelector('input[name="foodord_product_card_layout"]');
				if (!input) {
					return;
				}
				input.checked = true;
				setActive(input.value);
			});
		});

		inputs.forEach(function (input) {
			input.addEventListener('change', function () {
				if (input.checked) {
					setActive(input.value);
				}
			});
		});

		const checked = doc.querySelector('input[name="foodord_product_card_layout"]:checked');
		if (checked) {
			setActive(checked.value);
		}
	});
})();
