<!--КОД ДЛЯ ФОРМИРОВАНИЯ СООБЩЕНИЯ О ЗАКАЗЕ В БЛОКЕ-->
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        function getProductSaveListFromStorage() {
            try {
                const savedData = localStorage.getItem('productSaveList');
                if (savedData) {
                    return JSON.parse(savedData);
                }
                return null;
            } catch (error) {
                console.error('Ошибка при чтении из localStorage:', error);
                return null;
            }
        }
        
        const savedProductList = getProductSaveListFromStorage();
        if (savedProductList) {
            createTextMessage(savedProductList);
        } else {
            console.log('Данные не найдены');
        }

        
        
        function createTextMessage(savedProductList) {
            function formatNumber(number) {
                return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
            }
            
            const messageBlocks = document.querySelectorAll('.uc-order-message');
            
            messageBlocks.forEach(block => {
                let html = block.innerHTML;
                
                // Замена name
                html = html.replace(/{{name_client}}/g, savedProductList.name || '');
                
                // Замена {{order_number}}
                html = html.replace(/{{order_number}}/g, savedProductList.order_num || '');
                
                // Замена {{amount}}
                const formattedAmount = formatNumber(savedProductList.prodAmountAll || 0);
                const amountWithCurrency = `${formattedAmount} ${savedProductList.prodCurrency || ''}`;
                html = html.replace(/{{amount}}/g, amountWithCurrency);
                
                // Замена {{order_details}}
                if (html.includes('{{order_details}}')) {
                    let orderDetailsHTML = '<div class="order_details">';
                    
                    if (savedProductList.products && Array.isArray(savedProductList.products)) {
                        savedProductList.products.forEach((product, index) => {
                            const formattedProdAmount = formatNumber(product.prodAmount || 0);
                            
                            orderDetailsHTML += `
                                <div class="product-wrapper-${index}">
                                    <div class="product-image" style="background-image: url('${product.prodImage || ''}');"></div>
                                    <div class="product-text">
                                        <div class="product-title"><a href="${product.prodUrl || ''}">${product.prodTitle || ''}</a></div>
                                        <div class="productOptions">${product.productOptions || ''}</div>
                                    </div>
                                    <div class="product-quant">${product.prodQuantity || 0}</div>
                                    <div class="product-amount">${formattedProdAmount} ${savedProductList.prodCurrency || ''}</div>
                                </div>
                            `;
                        });
                    }
                    
                    orderDetailsHTML += '</div>';
                    html = html.replace(/{{order_details}}/g, orderDetailsHTML);
                }
                block.innerHTML = html;
                
                block.classList.add('load-data');
            });
        }
        
    })();    
});    
</script>


<style>
.order_details>div {
    display: flex;
    gap: 30px;
    align-items: center;
}

.product-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.productOptions {
    font-size: 12px;
}

.product-text {
    flex-grow: 1;
    text-align: left;
}


.order_details {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid #bcbcbc;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #bcbcbc;
    margin-top: 15px;
    font-size: 16px;
}

#allrecords .product-title>a {
    color: #000;
    text-decoration: underline;
}
.uc-order-message .t174__descr {
    display: none;
}


.uc-order-message.load-data .t174__descr {
    display: block;
}



@media screen and (max-width:480px){
.order_details>div {
    display: flex;
    gap: 15px;
}
.product-image {
    width: 40px;
    height: 40px;
}
    
}


@media screen and (min-width:580px){
.product-text {
    display: flex;
    gap: 30px;
    align-items: center;
}

.order_details {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}    
}    
</style>