<div class="calculator">
    <h3 class="heading">Кальулятор прибыли</h3>
    <div class="calculator__form">
      <div class="calculator__form__field">
        <label for="product_price">Введите себестоимость продукта (MDL)</label>
        <input id="product_price" name="product_price" />
      </div>
      <div class="calculator__form__field">
        <label for="product_price_999">Введите заявленную стоимость продукта на 999 Market (MDL)</label>
        <input name="product_price_999" id="product_price_999" />
      </div>
    </div>
    <div class="calculator__form">
      <div class="calculator__form__field">
        <label for="product_category">Выберите категорию продукта</label>
        <select id="product_category" name="product_category">
          <option value="8">
            Транспорт
          </option>
          <option value="4">
            Телефоны и гаджеты
          </option>
          <option value="3">
            Компьютеры и оргтехника
          </option>
          <option value="8">
            Строительство и ремонт
          </option>
          <option value="11">
            Вещи, обувь и аксессуары
          </option>
          <option value="8">
            Мебель и интерьер
          </option>
          <option value="4">
            Аудио-Видео-Фото
          </option>
          <option value="12">
            Разное
          </option>
          <option value="10">
            Всё для торжества
          </option>
          
          <option value="5">
            Бытовая техника
          </option>
          <option value="10">
            Спорт, здоровье, красота
          </option>
          <option value="10">
            Туризм, отдых и развлечения
          </option>
          <option value="9">
            Бизнес
          </option>
          <option value="10">
            Всё для дома и офиса
          </option>
          <option value="11">
            Детский мир
          </option>
          <option value="9">
            Сельское хозяйство
          </option>
          <option value="11">
            Домашние животные и растения
          </option>
          <option value="6">
            Музыкальные интсрументы
          </option>
        </select>
      </div>
      <div class="calculator__form__field">
        <label for="product_payment_type">Выберите тип оплаты</label>
        <select id="product_payment_type" name="product_payment_type">
          <option value="2.4">Карта</option>
          <option value="0">Наличные</option>
        </select>
      </div>
    </div>
    <div class="calculator__count">
       <div class="calculator__count__field commission">
        <label for="market_comission">Комиссия 999 Market</label>
        <input id="market_comission" name="market_comission" disabled />
        <span class="valut">MDL</span>
      </div>
      <div class="calculator__count__field profit">
        <label for="sales_profit">Прибыль с продажи товара на 999 Market</label>
        <input id="sales_profit" name="sales_profit" disabled />
        <span class="valut">MDL</span>
      </div>
    </div>
  </div>

.calculator {
  max-width: 650px;
  margin: 0 auto;
}

.heading {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.calculator__form {
  display: flex;
  max-width: 650px;
  margin-top: 10px;
}

.calculator__form__field {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  flex-direction: column;
}

.calculator__form__field label {
  font-size: 16px;
  margin-bottom: 21px;
}

.calculator__form__field input:disabled {
  pointer-events: none;
  background-color: #c3c3c3;
  background-color: #c3c3c336;
  border: 1px solid #c3c3c336;
}

.calculator__form__field input {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: 13px 22px;
  width: 80%;
  height: 27px;
  background: #FFFFFF;
  border: 1px solid #BFBFBF;
  border-radius: 4px;
}

.calculator__form__field select {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: 19px 22px;
  width: 95%;
  height: 57px;
  background: #FFFFFF;
  border: 1px solid #BFBFBF;
  border-radius: 4px;
}

.calculator__count {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #c3c3c3;
}

.calculator__count span {
  position: absolute;
  top: 1.4px;
  right: 10px;
  font-weight: bold;
  color: grey;
}


.calculator__count__field.profit span {
  top: 28.4px;
  right: 15px;
}

.calculator__count__field {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.calculator__count__field.profit {
  padding: 24px 10px;
  height: 29px;
  align-items: center;
  background: #FBDD9B;
  border-radius: 8px;
}

.calculator__count__field.commission {
  margin-bottom: 25px;
  padding: 0 6px;
}

$(".calculator__form__field").on('change', () => {

  const productPrice = $('#product_price').val();
  const productClientPrice = $('#product_price_999').val();
  const productCategory = $('#product_category').val();
  const productPaymentType = $('#product_payment_type').val();

 if (productPrice && productClientPrice) {
   const profit = +productClientPrice - +productPrice;
   const categoryCommission = (productClientPrice * +productCategory) / 100;
   const paymentCommission = (productClientPrice * +productPaymentType) / 100;

   const finalValue = profit - categoryCommission - paymentCommission;
   const finalCommission = categoryCommission;
   
   $('#sales_profit').val(finalValue);
   $('#market_comission').val(finalCommission);
  }
});