<script>
t_onReady(function() {
    setTimeout(function() {
        t_onFuncLoad('tcart__init', function() {
            cartReady = true;
            initCartToggles();
            setTimeout(initStepForm, 150); 
        });
    }, 200);    
});

function initCartToggles() {
    var cartBlock = document.querySelector('.t706');
    if (!cartBlock) return;

    var formWrapper = cartBlock.querySelector('.t706__cartpage-form');
    var infoWrapper = cartBlock.querySelector('.t706__cartpage-info');

    if (formWrapper && !formWrapper.querySelector('.product-list-show')) {
        formWrapper.insertAdjacentHTML('afterbegin', 
            '<div class="product-list-show t-text">Посмотреть список товаров</div>'
        );
    }

    if (infoWrapper && !infoWrapper.querySelector('.form-element-show')) {
        infoWrapper.insertAdjacentHTML('afterbegin', 
            '<div class="form-element-show t-text">Продолжить оформление</div>'
        );
    }

    cartBlock.addEventListener('click', function(e) {
        if (e.target.closest('.product-list-show')) cartBlock.classList.add('product-show');
        if (e.target.closest('.form-element-show')) cartBlock.classList.remove('product-show');
    });
    

    var cartPage = cartBlock.querySelector('.t706__cartpage');
    if (cartPage && window.MutationObserver) {
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.attributeName === 'class') {
                    if (!cartPage.classList.contains('t706__cartpage_showed')) {
                        if (cartBlock.classList.contains('product-show')) {
                            cartBlock.classList.remove('product-show');
                        }
                    }
                }
            });
        });
        

        observer.observe(cartPage, { 
            attributes: true, 
            attributeFilter: ['class'] 
        });
    }
}




function validateStep(stepIndex, stepGroups) {
    var groups = stepGroups[stepIndex];

    if (typeof t_form_check_field === 'function') {
        try {
            var hasError = false;
            groups.forEach(function(group) {
                var fields = group.querySelectorAll('[data-tilda-req="1"]');
                for (var i = 0; i < fields.length; i++) {
                    var field = fields[i];
                    if (field.type === 'checkbox' && !field.checked) {
                        showError(field, group, 'req');
                        hasError = true;
                    } else if (field.type === 'radio') {
                        var name = field.name;
                        var anyChecked = group.querySelector('input[name="' + name + '"]:checked');
                        if (!anyChecked && field.getAttribute('data-tilda-req') === '1') {
                            showError(field, group, 'req');
                            hasError = true;
                        }
                    } else {
                        var result = t_form_check_field(field, true);
                        if (!result) hasError = true;
                    }
                }
            });
            if (hasError) {
                var firstErr = document.querySelector('.t-input-group .t-input-error[style*="display: block"]');
                if (firstErr) firstErr.closest('.t-input-group').scrollIntoView({ behavior: 'smooth', block: 'center' });
                return false;
            }
            return true;
        } catch (e) {
            console.warn('Tilda native validation failed, falling back to custom.', e);
        }
    }

    return validateStepCustom(stepIndex, stepGroups);
}

function validateStepCustom(stepIndex, stepGroups) {
    var groups = stepGroups[stepIndex];
    var isValid = true;
    var firstErrorGroup = null;

    document.querySelectorAll('.t-input-error').forEach(function(el) { el.textContent = ''; el.style.display = 'none'; });
    document.querySelectorAll('.t-input.js-tilda-rule, .t-checkbox, .t-radio').forEach(function(el) {
        el.classList.remove('t-input_error');
        if (el.style) el.style.borderColor = '';
    });

    groups.forEach(function(group) {
        var inputs = group.querySelectorAll('input[data-tilda-req="1"]:not([type="checkbox"]):not([type="radio"]), select[data-tilda-req="1"], textarea[data-tilda-req="1"]');
        inputs.forEach(function(input) {
            var rule = input.getAttribute('data-tilda-rule');
            var value = input.value.trim();
            var errorType = null;

            if (rule === 'phone') {
                var visiblePhone = input.closest('.t-input-block')?.querySelector('.t-input-phonemask');
                var hiddenPhone = input.closest('.t-input-block')?.querySelector('.js-phonemask-result');
                if (visiblePhone && visiblePhone.value.trim()) {
                    if (visiblePhone.value.replace(/\D/g, '').length < 10) errorType = 'phone';
                } else if (hiddenPhone && hiddenPhone.value.trim()) {
                    if (hiddenPhone.value.replace(/\D/g, '').length < 10) errorType = 'phone';
                } else {
                    errorType = 'req';
                    input = visiblePhone || input;
                }
            } else if (!value) {
                errorType = 'req';
            } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
                errorType = 'email';
            } else if (rule === 'name' && !/^[а-яА-ЯёЁa-zA-Z\s\-']+$/u.test(value)) {
                errorType = 'name';
            }

            if (errorType) {
                showError(input, group, errorType);
                if (!firstErrorGroup) firstErrorGroup = group;
                isValid = false;
            }
        });

        group.querySelectorAll('input[type="checkbox"][data-tilda-req="1"]').forEach(function(cb) {
            if (!cb.checked) {
                showError(cb, group, 'req');
                if (!firstErrorGroup) firstErrorGroup = group;
                isValid = false;
            }
        });

        var radioGroups = {};
        group.querySelectorAll('input[type="radio"][data-tilda-req="1"]').forEach(function(radio) {
            var name = radio.name;
            if (!radioGroups[name]) radioGroups[name] = [];
            radioGroups[name].push(radio);
        });
        Object.keys(radioGroups).forEach(function(groupName) {
            var radios = radioGroups[groupName];
            if (!radios.some(function(r) { return r.checked; })) {
                showError(radios[0], group, 'req');
                if (!firstErrorGroup) firstErrorGroup = group;
                isValid = false;
            }
        });
    });

    if (!isValid && firstErrorGroup) {
        firstErrorGroup.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    return isValid;
}

function showError(input, group, errorType) {
    if (input.classList) input.classList.add('t-input_error');
    if (input.style) input.style.borderColor = '#e34b4b';
    var errorBox = group.querySelector('.t-input-error');
    if (errorBox) {
        var formBox = group.closest('.t-form__inputsbox');
        var template = formBox ? formBox.querySelector('.js-rule-error-' + errorType) : null;
        var texts = {
            'req': 'Обязательное поле',
            'email': 'Введите корректный email',
            'phone': 'Введите корректный телефон',
            'name': 'Введите корректное имя'
        };
        errorBox.textContent = template ? template.textContent : (texts[errorType] || 'Error');
        errorBox.style.display = 'block';
    }
}

function initStepForm() {

    // НАСТРОЙКА ОТОБРАЖЕНИЯ БЛОКА ИТОГОВ:
    // true  = итоги идут отдельным последним шагом
    // false = итоги идут вместе с предыдущим шагом
    var totalLastStep = false; 

    var formContainer = document.querySelector('.t706 form .t-form__inputsbox');
    if (!formContainer) return;
    
    var submitBtn = formContainer.querySelector('.t-submit');
    var submitContainer = formContainer.querySelector('.t-form__submit');
    
    var paymentGroup = formContainer.querySelector('.t-input-group_pm');
    var newTotalsGroup = document.createElement('div');
    newTotalsGroup.className = 't-input-group t-step-totals';
    
    if (paymentGroup && paymentGroup.parentNode) {
        paymentGroup.parentNode.insertBefore(newTotalsGroup, paymentGroup.nextSibling);
    } else {
        formContainer.appendChild(newTotalsGroup);
    }
    
    var originalTotals = document.querySelector('.t706 .t706__cartpage-totals');
    if (originalTotals) {
        var clonedTotals = originalTotals.cloneNode(true);
        clonedTotals.classList.add('t-totals-clone');
        clonedTotals.removeAttribute('id');
        var elementsWithIds = clonedTotals.querySelectorAll('[id]');
        for(var i = 0; i < elementsWithIds.length; i++) elementsWithIds[i].removeAttribute('id');
        newTotalsGroup.appendChild(clonedTotals);
    }
    
    var stepAnchors = formContainer.querySelectorAll('.t-input-group_tx a[href="#step"]');
    var markerParents = [];
    for (var i = 0; i < stepAnchors.length; i++) {
        var parent = stepAnchors[i].closest('.t-input-group_tx');
        if (parent && !parent.hasAttribute('data-step-divider')) {
            parent.setAttribute('data-step-divider', 'true');
            markerParents.push(parent);
        }
    }

    var allGroups = formContainer.querySelectorAll('.t-input-group');
    var stepGroups = [];
    var currentGroup = [];
    
    for (var j = 0; j < allGroups.length; j++) {
        var group = allGroups[j];
        if (group === newTotalsGroup) continue;
        
        if (group.hasAttribute('data-step-divider')) {
            if (currentGroup.length > 0) stepGroups.push(currentGroup);
            currentGroup = [];
        } else {
            currentGroup.push(group);
        }
    }
    if (currentGroup.length > 0) stepGroups.push(currentGroup);
    
    if (totalLastStep) {
        stepGroups.push([newTotalsGroup]);
    } else {
        if (stepGroups.length > 0) {
            stepGroups[stepGroups.length - 1].push(newTotalsGroup);
        } else {
            stepGroups.push([newTotalsGroup]);
        }
    }

    
    var totalSteps = stepGroups.length;
    
    stepGroups.forEach(function(group, stepIndex) {
        group.forEach(function(el) {
            el.setAttribute('data-step', stepIndex);
            el.classList.add('t-step-hidden');
            if (stepIndex === 0) {
                el.classList.remove('t-step-hidden');
                el.classList.add('t-step-visible');
            }
        });
    });
    
    for (var k = 0; k < markerParents.length; k++) {
        if (markerParents[k].parentNode) markerParents[k].parentNode.removeChild(markerParents[k]);
    }
    
    var navButtons = document.createElement('div');
    navButtons.className = 't-step-nav';
    navButtons.innerHTML = 
        '<button type="button" class="t-btn t-step-back">Назад</button>' +
        '<button type="button" class="t-btn t-step-next">Вперёд</button>';
    
    if (submitContainer && submitBtn) {
        submitContainer.insertBefore(navButtons, submitBtn);
    } else if (submitContainer) {
        submitContainer.appendChild(navButtons);
    }
    
    var backBtn = navButtons.querySelector('.t-step-back');
    var nextBtn = navButtons.querySelector('.t-step-next');
    
    if (backBtn) backBtn.classList.add('t-step-hidden-btn');
    if (nextBtn) nextBtn.classList.remove('t-step-hidden-btn');
    if (submitBtn) {
        submitBtn.classList.add('t-step-hidden-btn');
        submitBtn.setAttribute('type', 'button');
        submitBtn.setAttribute('disabled', 'disabled');
    }
    
    var progressBar = document.createElement('div');
    progressBar.className = 't-step-progress';
    progressBar.innerHTML = '<div class="t-step-progress-dots"></div><div class="t-step-progress-text t-text"></div>';
    formContainer.parentNode.insertBefore(progressBar, formContainer);
    
    var dotsContainer = progressBar.querySelector('.t-step-progress-dots');
    var progressLabel = progressBar.querySelector('.t-step-progress-text');
    
    stepGroups.forEach(function(_, idx) {
        var dot = document.createElement('div');
        dot.className = 't-step-progress-dot' + (idx === 0 ? ' active' : '');
        dot.setAttribute('data-dot', idx);
        dotsContainer.appendChild(dot);
    });
    
    var currentStep = -1; 
    
    function showStep(step) {
        if (step === currentStep) return;
        
        stepGroups.forEach(function(group) {
            group.forEach(function(el) {
                el.classList.remove('t-step-visible');
                el.classList.add('t-step-hidden');
                el.style.display = 'none';
            });
        });
        
        var targetGroup = stepGroups[step];
        if (targetGroup) {
            targetGroup.forEach(function(el) {
                el.classList.remove('t-step-hidden');
                el.style.display = '';
                el.classList.add('t-step-animate-in');
                requestAnimationFrame(function() {
                    el.classList.remove('t-step-animate-in');
                    el.classList.add('t-step-visible');
                });
            });
        }
        
        if (backBtn) backBtn.classList.toggle('t-step-hidden-btn', step === 0);
        if (nextBtn) nextBtn.classList.toggle('t-step-hidden-btn', step === totalSteps - 1);
        if (submitBtn) submitBtn.classList.toggle('t-step-hidden-btn', step !== totalSteps - 1);
        
        if (submitBtn) {
            if (step === totalSteps - 1) {
                submitBtn.removeAttribute('disabled');
                submitBtn.setAttribute('type', 'submit');
            } else {
                submitBtn.setAttribute('disabled', 'disabled');
                submitBtn.setAttribute('type', 'button');
            }
        }
        
        var progressDots = dotsContainer.querySelectorAll('.t-step-progress-dot');
        for(var i = 0; i < progressDots.length; i++) {
            progressDots[i].classList.toggle('active', i === step);
        }
        progressLabel.textContent = 'Шаг ' + (step + 1) + ' из ' + totalSteps;
        
        currentStep = step;

        setTimeout(function() {
            var cartPage = document.querySelector('.t706__cartpage.t706__cartpage_showed');

            if (cartPage) {
                cartPage.scrollTo({ top: 0, behavior: 'smooth' });
            }
        }, 100); 
    }

    if (backBtn) backBtn.addEventListener('click', function(e) { e.preventDefault(); if(currentStep > 0) showStep(currentStep - 1); });
    if (nextBtn) nextBtn.addEventListener('click', function(e) { e.preventDefault(); if(!validateStep(currentStep, stepGroups)) return; if(currentStep < totalSteps - 1) showStep(currentStep + 1); });
    
    showStep(0);
}
</script>

<style>
.t706 .t-form__submit .t-step-hidden-btn {
	display: none !important;
}

.t706 .t-form__submit {
	display: flex;
	gap: 12px;
	align-items: stretch;
	margin-top: 20px;
	height: 47px;
}

div#customdelivery {
    margin-top: 20px;
}

.product-list-show {
    text-align: right;
}



.t-step-nav {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-grow: 1;
}
button.t-step-next {
    max-width: 50%;
}

div#addresses-wrapper {
    margin: 10px 0;
}

#customdelivery .searchbox-info {
    margin: 0px 0 5px;
}

.t-step-nav .t-btn {
	flex: 1;
	padding: 14px 16px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	border: 1px solid #000;
	background: #fff;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	outline: none;
	user-select: none;
}

.t-step-nav .t-btn:hover {
	background: #f5f5f5;
}

.t-step-nav .t-btn:active {
	transform: translateY(0);
}

.t706 .t-form__inputsbox .t-input-group {
	transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
}

.t706 .t-form__inputsbox .t-input-group.t-step-hidden {
	display: none !important;
	opacity: 0 !important;
}

.t706 .t-form__inputsbox .t-input-group.t-step-animate-in {
	opacity: 0;
	transform: translateY(18px);
}

.t706 .t-form__inputsbox .t-input-group.t-step-visible {
	opacity: 1;
	transform: translateY(0);
}

.t706__cartpage-form .t-input-group {
    margin-bottom: 10px;
}

.t706 .t-form .t-input, .t706 .t-form .t-select {
    height: 48px;
}

.t-step-progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 5px;
	font-family: inherit;
}

.t-step-progress-dots {
	display: flex;
	gap: 6px;
	justify-content: center;
	width: 100%;
}

.t-step-progress-dot {
    width: 10px;
    height: 2px;
    background: #ddd;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-grow: 1;
}

.t-step-progress-dot.active {
	background: #000;
}

.t-step-progress-text {
	font-size: 13px;
	color: #777;
	font-weight: 500;
	letter-spacing: 0.2px;
}

.t-step-totals {
	margin-top: 10px !important;
	padding: 8px 0 16px !important;
	border-top: 1px solid #f0f0f0 !important;
}

.t706__cartpage-totals.t-totals-clone {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.product-list-show, .form-element-show {
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #000;
	padding: 8px 0 6px;
	transition: all 0.2s ease;
	user-select: none;
	display: flex;
    justify-content: flex-end;
    gap: 10px;
	
}

.product-list-show:hover, .form-element-show:hover {
	color: #444;
	border-bottom-color: rgba(0,0,0,0.6);
	transform: : translateX(4px);
}
.form-element-show:hover {
	transform: : translateX(-4px);
}


.form-element-show {
	margin-bottom: 10px;
	justify-content: flex-start;
}

.t-input.t-input_error {
	border-color: #e34b4b !important;
	box-shadow: 0 0 0 3px rgba(227, 75, 75, 0.1) !important;
}

.t-input-error {
	color: #e34b4b !important;
	font-size: 12px !important;
	margin-top: 4px !important;
	display: block !important;
}


.product-list-show:after,
.form-element-show:before
{
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(https://static.tildacdn.com/tild6635-3735-4539-a663-333632646464/arrow-right_1.svg);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.form-element-show:before
{
    background-image: url(https://static.tildacdn.com/tild3034-6264-4735-b837-303433303430/arrow-left_1.svg);
}

.t706 .t-submit {
    max-width: 50%;
}

.t706__auth {
    padding: 5px 20px;
}

.t706 .t-input-group.t-input-group_dl {
    position: relative;
    z-index: 10;
}

.t706__cartpage-form:has(.js-send-form-success) .product-list-show {
    display: none;
}

.t706 .js-send-form-success .t-step-progress{
    display: none;
}



.t706__cartpage-form .t706__cartpage-totals {
    text-align: left;
}

.t706__cartpage-form .t706__cartpage-prodamount {
    text-align: left;
}

.t706__cartpage-form .t706__cartwin-totalamount-wrap {
    text-align: left;
}

.t706__cartpage-form .delivery-full-address {
    text-align: left;
}



@media screen and (min-width:960px){


    .t706__cartpage-content {
        transform: translateX(25%);
        transition: all 0.5s ease-in-out;
        margin-top: 20px;
    }
    
    .product-show .t706__cartpage-content {
        transform: translateX(-25%);
    }
    
    .t706__cartpage {
        overflow-x: hidden;
    }
    
    .t706__cartpage-totals:after {
        box-shadow: none;
    }
    
    .t706__cartpage-info {
        opacity: 0;
        filter: blur(3px);
        pointer-events: none;
        transition: all 0.5s ease-in-out;
    }  
    
    .product-show .t706__cartpage-info {
        opacity: 1;
        filter: blur(0px);
        pointer-events: auto;
    } 
    
    .t706__cartpage-form{
        opacity: 1;
        filter: blur(0px);
        transition: all 0.5s ease-in-out;
    }
    
    .product-show .t706__cartpage-form{
        opacity: 0;
        filter: blur(3px);
        pointer-events: none;
    }

}


@media screen and (max-width:960px){
    
.t706__cartpage.t706__cartpage_showed {
    overflow-x: hidden;
}
    
.t706__cartpage-content:has(.t706__cartpage-open-form-wrap[style="display: none;"]) {
    transform: translateX(-25%);
    position: relative;
    left: 50%;
    flex-direction: row;
    max-width: none;
    min-width: fit-content;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
}
.t706__cartpage-content:has(.t706__cartpage-open-form-wrap[style="display: none;"]) .t706__cartpage-info {
    opacity: 0;
    filter: blur(3px);
    pointer-events: none;
}
.t706__cartpage-totals {
    padding: 12px 0 30px;
}

.t706__cartpage-form.t-col {
    min-width: 640px;
    order: 0;
}

.t706__cartpage-info.t-col {
    min-width: 640px;
}

.t706__cartpage-content.t-container:after , 
.t706__cartpage-content.t-container:before {
    display: none;
}

.product-show .t706__cartpage-content {
    transform: translateX(-75%) !important;
    left: 50% !important;

}


.t706__cartpage-content:has(.t706__cartpage-form[style="display: none;"]) {
    left: 0%;
    transform: translateX(0%);
    flex-direction: column;
    max-width: max-content;
}


.t706__cartpage-content:has(.t706__cartpage-open-form-wrap[style="display: block;"]) .form-element-show {
    display: none;
}




.t706__cartpage-form-wrapper .t706__cartpage-totals {       
    border: none;
}

.t706__cartpage-form-wrapper  .delivery-full-address{
    text-align:left;
}


.product-show .t706__cartpage-info {
        opacity: 1 !important;
        filter: blur(0px) !important;
        pointer-events: auto !important;
}

.product-show .t706__cartpage-form.t-col{
    opacity: 0 !important;
    filter: blur(3px);
        pointer-events: none;
}
}


@media screen and (max-width: 680px) {
    .t706__cartpage-form.t-col {
        min-width: 100vw;
        transition: none !important;
    }
    .t706__cartpage-info.t-col {
        min-width: 100vw;
    }
    
    .t706 .t-form__submit {
        position: sticky;
        bottom: 0;
        background-color: #fff;
        padding-top: 5px;
    }
        
}



@media (max-width: 640px) {
	.t-step-nav {
		/*flex-direction: column;*/
	}

	.t-step-nav .t-btn {
		width: 100%;
	}
	
	
	
	
}
</style>