<script>
(function() {
const CONFIG = {
form: 'form__main',
imageInput: 'model',
targetImage: 'product_img',
calcName: 'total',
bgImg: 't-bgimg',
hiddenImg: 't-calc__hidden__prod_img',
parent: 't-rec'
};
window.addEventListener('load', function() {
const forms = document.querySelectorAll(`.${CONFIG.form}`);
forms.forEach(function(form) {
const modelInputs = form.querySelectorAll(`input[name="${CONFIG.imageInput}"]`);
modelInputs.forEach(function(input) {
input.addEventListener('change', function(e) {
if (input._isDispatching) return;
if (this.checked) {
const bgImg = this.nextElementSibling;
if (bgImg && bgImg.classList.contains(CONFIG.bgImg)) {
const em = bgImg.getAttribute('data-original');
if (!em) return;
const hiddenWrapper = form.querySelector(`.t-input-group_fr[data-field-name="${CONFIG.calcName}"]`);
if (hiddenWrapper) {
const hiddenInput = hiddenWrapper.querySelector(`input.${CONFIG.hiddenImg}`);
if (hiddenInput) hiddenInput.value = em;
}
input._isDispatching = true;
input.dispatchEvent(new Event('change', { bubbles: true }));
input._isDispatching = false;
const block = form.closest(`.${CONFIG.parent}`);
if (block) {
const imgElem = block.querySelector(`div.${CONFIG.targetImage} .tn-atom`);
if (imgElem) {
imgElem.style.backgroundImage = 'url(' + em + ')';
imgElem.setAttribute('data-original', em);
imgElem.setAttribute('data-img-zoom-url', em);
}
}
}
}
});
});
});
});
})();
</script>