<script>
document.addEventListener("DOMContentLoaded", function(e) {
    const cardPrice = document.querySelector(".card__sale-price");
    const catalogPrices = document.querySelectorAll(".price__sale");
    const catalogSalePrices = document.querySelectorAll(".price__new");

    function formatCurrency(str, separator, currencySymbol) {
        var currency = str.replace(/\s/g, '');
        var number = currency.replace(currencySymbol, '');
        var result = number.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1' + separator);
        return `${result} ${currencySymbol}`;
    }

    function parseCurrency(str) {
        var currency = str.replace(/\s/g, '');
        var number = currency.replace(/[^0-9]/g, '');
        var currencySymbol = currency.replace(number, '');
        return {number: number, currency: currencySymbol};
    }

    function formatCurrencyObject(obj, separator = " ") {
        return formatCurrency(obj.number, separator, obj.currency);
    }

    function formatCardPrice(element) {
        element.innerText = formatCurrencyObject(
            parseCurrency(element.innerText)
        );
    }

    function formatCatalogPrices(pricesElements) {
        [...pricesElements].forEach(priceElement => {
            priceElement.innerText = formatCurrencyObject(
                parseCurrency(priceElement.innerText)
            );
        })
    }

    function formatAllPagePrices(cardPrice, catalogPrices, catalogSalePrices) {
        if(cardPrice) formatCardPrice(cardPrice);
        if(catalogPrices) formatCatalogPrices(catalogPrices);
        if(catalogSalePrices) formatCatalogPrices(catalogSalePrices);
    }

    formatAllPagePrices(cardPrice, catalogPrices, catalogSalePrices);
});
</script>