Eugeny Galkovskiy / kbenergy_new

  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}`;

          }
      }
  }