var phoneInput = document.querySelector('#cardProduct [type="tel"]');
var counter = document.querySelector('#cardProduct .product-counter__input');
var price = 0;
$('#order-product').click(function (e){
    e.preventDefault();
    var message='Сума: ';
    message += $('#cardProduct .product-counter__value').text();
    message +='\nКод товара: ' + $('#product-code').val();
    message +='\nКількість: ' + counter.querySelector('input').value;
    console.log(message + phoneInput.value);
    var phone = '+38' + phoneInput.value;
    if(phone.length===17){
        $.ajax({
            type: "POST",
            url: '/site/feedback',
            data:
                {'Feedback': {
                        'phone': phone,
                        'message': message,
                        'topic': 'product',
                        'name': phone,
                        'returnUrl': '/'
                    }
                },
            success: function(data) {
                if (data.success) {
                    $('#cardProduct')
                        .modal('hide');
                    $('#success-modal')
                        .modal('show');
                } else {
                    alert(data.error)
                }
            },
            error: function() {
                alert('Achtung!');
            }
        });
        console.log('good')
    }
})
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;
    var sku = button.data('sku');
    $('#product-code').val(sku);
    $('#cardProduct .product-code').text('Код товара ' + sku);
})

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);
        counter.querySelector('input').value = value + 1;
        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}`;
        }
    }
}