var phoneInput = document.querySelector('#cardProduct [type="tel"]');
var counter = document.querySelector('#cardProduct .product-counter__input');

if (phoneInput) {
    phoneInput.addEventListener('input', phoneHandleInput);
}
$('#cardProduct').on('show.bs.modal', function (e) {
    var button = $(e.relatedTarget)
    console.log(button.data('boo'));
})

if (counter) {
    counterFunc(counter);
}

function phoneHandleInput(e) {
    e.target.value = phoneMasks(e.target.value);
}

function phoneMasks(phone) {
    return phone.replace(/\D/g, '')
        .replace(/^(\d)/, '($1')
        .replace(/^(\(\d{3})(\d)/, '$1) $2')
        .replace(/(\d{3})(\d{1,7})/, '$1-$2')
        .replace(/(-\d{2})(\d{1,7})/, '$1-$2')
        .replace(/(-\d{2})\d+?$/, '$1');
}

function counterFunc(counter) {
    let itemPrice = counter.parentElement.querySelector('.product-counter__value');
    itemPrice.innerHTML = `${itemPrice.dataset.price} ${itemPrice.dataset.currency}`;

    counter.querySelector('input').value = 1;
    counter.addEventListener('input', counterHandleInput);
    counter.addEventListener('change', counterHandleChange);
    counter.querySelector('.product-counter__increment').addEventListener('click', increment);
    counter.querySelector('.product-counter__decrement').addEventListener('click', decrement);

    function counterHandleInput(e) {
        e.target.value = e.target.value.replace(/\D/g, '');
        updateSummary();
    }

    function counterHandleChange(e) {
        const value = e.target.value.replace(/\D/g, '');
        if (value == 0) {
            e.target.value = 1;
        }
        updateSummary();
    }

    function increment(e) {
        e.preventDefault();
        const value = Number(counter.querySelector('input').value);
        counter.querySelector('input').value = value + 1;
        updateSummary();
    }

    function decrement(e) {
        e.preventDefault();
        const value = Number(counter.querySelector('input').value);
        if (value > 1) {
            counter.querySelector('input').value = value - 1;
            updateSummary();
        }
    }

    function updateSummary() {
        const amount = counter.querySelector('input').value;
        if (amount >= 1) {
            const oldSum = Number(itemPrice.dataset.price) * 10;
            const newSum = String(oldSum * amount);
            itemPrice.innerHTML = `${newSum.slice(0, -2)}.${newSum.slice(-2)} ${itemPrice.dataset.currency}`;
        }
    }
}