var phoneInput = document.querySelector('#cardProduct [type="tel"]');
var counter = document.querySelector('#cardProduct .product-counter__input');
var price = 0;
if (phoneInput) {
    phoneInput.addEventListener('input', phoneHandleInput);
}
$('#cardProduct').on('show.bs.modal', function (e) {
    var button = $(e.relatedTarget);
    price = button.data('price');
    $('#cardProduct .product-counter__value').data('price', price);
    var itemPrice = counter.parentElement.querySelector('.product-counter__value');
    itemPrice.innerHTML = `${price} ${itemPrice.dataset.currency}`;
    counter.querySelector('input').value = 1;
})
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) {
    var itemPrice = counter.parentElement.querySelector('.product-counter__value');
    itemPrice.innerHTML = `${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) {
        var value = e.target.value.replace(/\D/g, '');
        if (value == 0) {
            e.target.value = 1;
        }
        updateSummary();
    }

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

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

    function updateSummary() {
        var amount = counter.querySelector('input').value;
        if (amount >= 1) {
            var oldSum = Number(price);
            var newSum = String(oldSum * amount);
            itemPrice.innerHTML = `${newSum} ${itemPrice.dataset.currency}`;
        }
    }
}