Калькулятор

Размер
х
не более 720 мм х 510 мм
Тираж
шт.
Бумага
Плотность
гр/м2
Цветность
Ламинация
Скругление
Вырубка
Лак
Самовывоз
Доставка
Стоимость печати:
Формат:
A4 (297x210 мм)
Тираж:
1000 шт.
Бумага:
Мелованная матовая 115гр/м2
Цветность (CMYK):
4+0
Ламинация:
Нет
Вырубка:
Да
Скругление:
Нет
Лак:
Нет
Самовывоз
<div class="calcWrapper">
    <h2 class="calcTitle">Калькулятор</h2>
    <div class="calcContent">
      <div class="calc">
        <div class="calcParams">

          <!-- Размер -->
          <div class="calcParamRow">
            <div class="calcParam">
              <div class="calcParamTitle">Размер</div>
              <div class="calcParamValues">
                <div class="calcParamValue">
                  <select class="js-size-select">
                    <option value="B2">B2</option>
                    <option value="A2">A2</option>
                    <option value="A3">A3</option>
                    <option value="A4" selected="">A4</option>
                    <option value="A5">A5</option>
                    <option value="A6">A6</option>
                    <option value="A7">A7</option>
                    <option value="businessCards">Визитки</option>
                    <option value="custom">Свой размер</option>
                  </select>
                </div>
                <div class="calcParamValue custom-size js-custom-size" data-options="мм">
                  <input class="js-custom-size-width" type="text" disabled="">
                  <span>х</span>
                  <input class="js-custom-size-height" type="text" disabled="">
                  <div class="custom-size-error">не более 720 мм х 510 мм</div>
                </div>
              </div>
            </div>
          </div>
          <!-- /Размер -->

          <!-- Тираж -->
          <div class="calcParamRow">
            <div class="calcParam">
              <div class="calcParamTitle">Тираж</div>
              <div class="calcParamValue">
                <input class="js-edition" type="text">
                <span>шт.</span>
              </div>
            </div>
          </div>
          <!-- /Тираж -->

          <!-- Бумага -->
          <div class="calcParamRow fluid">
            <div class="calcParam">
              <div class="calcParamTitle">Бумага</div>
              <div class="calcParamValue">
                <select class="js-paper">
                  <option value="MELOVANNAYA_MATOVAYA" selected="">Мелованная матовая</option>
                  <option value="MELOVANNAYA_GLYANCEVAYA">Мелованная глянцевая</option>
                  <option value="OFSETNAYA_SNEGUROCHKA">Офсетная «Снегурочка»</option>
                  <option value="KARTON_MELOVANNIY_ODNOSTORONNIY">Картон мелованный (односторонний)</option>
                  <option value="KARTON_MELOVANNIY_DVUSTORONNIY">Картон мелованный (двусторонний)</option>
                  <option value="SAMOKLEYASHAYASYA_BUMAGA">Самоклеящаяся бумага</option>
                </select>
              </div>
            </div>
          </div>
          <!-- /Бумага -->

          <!-- Плотность и Цветность -->
          <div class="calcParamRow columns">
            <div class="calcParam">
              <div class="calcParamTitle">Плотность</div>
              <div class="calcParamValue">
                <select class="js-density">
                  <option value="80" disabled="">80</option>
                  <option value="100" disabled="">100</option>
                  <option value="115" selected="">115</option>
                  <option value="120">120</option>
                  <option value="130">130</option>
                  <option value="150">150</option>
                  <option value="170">170</option>
                  <option value="200">200</option>
                  <option value="250">250</option>
                  <option value="270">270</option>
                  <option value="300">300</option>
                </select>
                <span>гр/м2</span>
              </div>
            </div>
            <div class="calcParam">
              <div class="calcParamTitle">Цветность</div>
              <div class="calcParamValue">
                <select class="js-chromaticity">
                  <option value="1+0">1+0</option>
                  <option value="2+0">2+0</option>
                  <option value="3+0">3+0</option>
                  <option value="4+0" selected="">4+0</option>
                  <option value="4+1">4+1</option>
                  <option value="4+2">4+2</option>
                  <option value="4+3">4+3</option>
                  <option value="4+4">4+4</option>
                </select>
              </div>
            </div>
          </div>
          <!-- /Плотность и Цветность -->

          <!-- Ламинация -->
          <div class="calcParamRow fluid">
            <div class="calcParam">
              <div class="calcParamTitle">Ламинация</div>
              <div class="calcParamValue">
                <select class="js-lamination">
                  <option value="NO" selected="">Нет</option>
                  <option value="ONE_SIDE_20">Односторонняя 20 мкр</option>
                  <option value="ONE_SIDE_30">Односторонняя 30 мкр</option>
                  <option value="ONE_SIDE_60">Односторонняя 60 мкр</option>
                  <option value="ONE_SIDE_120">Односторонняя 120 мкр</option>
                  <option value="TWO_SIDES_20">Двусторонняя 20 мкр</option>
                  <option value="TWO_SIDES_30">Двусторонняя 30 мкр</option>
                  <option value="TWO_SIDES_60">Двусторонняя 60 мкр</option>
                  <option value="TWO_SIDES_120">Двусторонняя 120 мкр</option>
                </select>
              </div>
            </div>
          </div>
          <!-- /Ламинация -->

          <!-- Скругление, Вырубка, Лак -->
          <div class="calcParamRow columns three">
            <div class="calcParam">
              <div class="calcParamTitle">Скругление</div>
              <div class="calcParamValue">
                <select class="js-rounding">
                  <option value="NO" selected="">Нет</option>
                  <option value="YES">Да</option>
                </select>
              </div>
            </div>
            <div class="calcParam">
              <div class="calcParamTitle">Вырубка</div>
              <div class="calcParamValue">
                <select class="js-felling">
                  <option value="NO" selected="">Нет</option>
                  <option value="YES">Да</option>
                </select>
              </div>
            </div>
            <div class="calcParam">
              <div class="calcParamTitle">Лак</div>
              <div class="calcParamValue">
                <select class="js-varnish">
                  <option value="NO" selected="">Нет</option>
                  <option value="YES">Да</option>
                </select>
              </div>
            </div>
          </div>
          <!-- /Скругление, Вырубка, Лак -->

        </div>

        <div class="calcTabs js-calcTabs">
          <div class="calcTab active" data-type="pickup">Самовывоз</div>
          <div class="calcTab" data-type="courier">Доставка</div>
        </div>

        <button class="btn-action btn-action--pink js-calc-button">Рассчитать</button>

        <div class="calcResult">
          <div class="calcResultTitle">Стоимость печати:</div>
          <div class="calcResultValue js-calc-price hidden">
            <span class="total"><span class="js-calc-total">17311.50</span> руб</span>
            <span class="item">(<span class="js-calc-item">17.31</span> руб за шт)</span>
          </div>
        </div>

      </div>
      <div class="calcTotal">
        <div class="calcTotalParams">
          <div class="calcTotalParam">
            <div class="calcTotalParamTitle">Формат:</div>
            <div class="calcTotalParamValue js-result-size">A4 (297x210 мм)</div>
          </div>
          <div class="calcTotalParam">
            <div class="calcTotalParamTitle">Тираж:</div>
            <div class="calcTotalParamValue js-result-edition">1000 шт.</div>
          </div>
          <div class="calcTotalParam">
            <div class="calcTotalParamTitle">Бумага:</div>
            <div class="calcTotalParamValue js-result-paper">Мелованная матовая 115гр/м2</div>
          </div>
          <div class="calcTotalParam">
            <div class="calcTotalParamTitle">Цветность (CMYK):</div>
            <div class="calcTotalParamValue js-result-chromaticity">4+0</div>
          </div>
          <div class="calcTotalParam">
            <div class="calcTotalParamTitle">Ламинация:</div>
            <div class="calcTotalParamValue js-result-lamination">Нет</div>
          </div>
          <div class="calcTotalParam">
            <div class="calcTotalParamTitle">Вырубка:</div>
            <div class="calcTotalParamValue js-result-felling">Да</div>
          </div>
          <div class="calcTotalParam">
            <div class="calcTotalParamTitle">Скругление:</div>
            <div class="calcTotalParamValue js-result-rounding">Нет</div>
          </div>
          <div class="calcTotalParam">
            <div class="calcTotalParamTitle">Лак:</div>
            <div class="calcTotalParamValue js-result-varnish">Нет</div>
          </div>
          <div class="calcTotalParamPrice js-result-price hidden">
            <div class="calcTotalParam">
              <div class="calcTotalParamTitle">Сумма:</div>
              <div class="calcTotalParamValue bold js-result-price-total">17311.50 руб.</div>
            </div>
            <div class="calcTotalParam">
              <div class="calcTotalParamTitle">Цена за 1 шт:</div>
              <div class="calcTotalParamValue js-result-price-item">17.31 руб.</div>
            </div>
          </div>
          <div class="calcTotalParam">
            <div class="calcTotalParamTitle"></div>
            <div class="calcTotalParamValue italic js-result-delivery">Самовывоз</div>
          </div>
        </div>
        <form class="calcTotalSubmit js-result-form hidden">
          <!--<input type="hidden" name="format" tabindex="-1" value="A4">-->
          <!--<input type="hidden" name="tiraj" tabindex="-1" value="1000">-->
          <!--<input type="hidden" name="bumaga" tabindex="-1" value="Мелованная матовая">-->
          <!--<input type="hidden" name="cvetnost" tabindex="-1" value="4+0">-->
          <!--<input type="hidden" name="laminacia" tabindex="-1" value="Нет">-->
          <!--<input type="hidden" name="virubka" tabindex="-1" value="Да">-->
          <!--<input type="hidden" name="skruglenie" tabindex="-1" value="Нет">-->
          <!--<input type="hidden" name="lak" tabindex="-1" value="Нет">-->
          <!--<input type="hidden" name="dostavka" tabindex="-1" value="Самовывоз">-->
          <a class="btn-action btn-action--blue js-result-submit" href="#start">Заказать печать</a>
          <a class="btn-action btn-action--blue" href="#start">Заказать печать</a>
          
          
        </form>
      </div>
    </div>
  </div>
  
 <style>
.calcWrapper {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000;
  padding: 30px 48px;
  box-sizing: border-box;
}

.calcWrapper * {
  box-sizing: border-box;
}

.calcWrapper select,
.calcWrapper input {
  font-size: 14px;
  min-height: 28px;
  border-radius: 2px;
  border: 1px solid #D4D4D4;
  outline: none;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000;
}
.calcWrapper select {
  min-width: 70px;
  padding: 0 3px;
}
.calcWrapper input {
  min-width: 58px;
  padding: 0 6px;
  max-width: 160px;
}
.calcWrapper input:disabled {
  background-color: #fff;
}

select option:disabled {
  color: rgb(215, 211, 211);
}

.calcTitle {
  font-size: 18px;
  font-weight: 700;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000;
  text-align: left;
}

.calcContent {
  margin-top: 25px;
  max-width: 780px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.calc {
  padding-right: 20px;
}

.calcParams {
  width: 100%;
  padding-bottom: 20px;
}

/* calc params */
/* classes for calcParamRow:
.columns - для случаев, если внутри calcParamRow находятся 2 или 3 calcParam
.three - для тех случаев, когда внутри calcParamRow находится строго 3 calcParam (использовать вместе с .columns)
.fluid - когда внутри 1 calcParam и нужно растянуть его на всю ширину
*/
.calcParamRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 270px;
  max-width: 270px;
}

.calcParamRow + .calcParamRow {
  margin-top: 20px;
}

.calcParamRow input,
.calcParamRow select {
  min-width: 95px;
  max-width: 95px;
}

.calcParamRow.three input,
.calcParamRow.three select,
.calcParamRow.three .calcParam {
  min-width: 70px;
  max-width: 70px;
}

.calcParamRow.fluid input,
.calcParamRow.fluid select {
  min-width: 1px;
  width: 100%;
  max-width: 100%;
}

.calcParamRow.columns .calcParam {
  width: auto;
}

.calcParam {
  width: 100%;
}

.calcParam span {
  font-size: 13px;
  padding: 0 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000;
}

.calcParamTitle {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000;
  text-align: left;
}

.calcParamValues {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calcParamValue {
  display: flex;
  align-items: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000;
  position: relative;
}

.calcParamValue + .calcParamValue input {
  min-width: 58px;
  max-width: 58px;
}

.calcParamValue::after {
  content: attr(data-options);
  font-size: 13px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000;
  position: absolute;
  top: 5px;
  right: -28px;
}

.custom-size {
  position: relative;
}
.custom-size-error {
  display: none;
  position: absolute;
  bottom: -20px;
  left: 0;
  color: #FF3131;
  font-size: 11px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.custom-size.has-error .custom-size-error {
  display: block;
}
/* /calc params */

/* buttons */
.calcWrapper a.btn-action,
.calcWrapper button.btn-action {
  width: 100%;
  min-width: 210px;
  min-height: 45px;
  padding: 6px 12px;
  font-weight: 500;
  font-size: 16px;
  color: #fff !important;
  text-align: center;
  border-radius: 4px;
  border: 0;
  outline: none;
  cursor: pointer;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s ease;
}

.calcWrapper .btn-action:hover {
  color: #fff !important;
  transition: all .3s ease;
}

.calcWrapper .btn-action:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.calcWrapper .btn-action--pink {
  background-color: #DC307E;
}
.calcWrapper .btn-action--pink:hover {
  background-color: #801545;
}

.calcWrapper .btn-action--blue {
  background-color: #287FDB;
}
.calcWrapper .btn-action--blue:hover {
  background-color: #144e8d;
}
/* /buttons */

.calcTabs {
  height: 40px;
  max-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.calcTabs .calcTab {
  font-size: 14px;
  font-weight: 500;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  width: 50%;
  height: 100%;
  background-color: #E7F2FF;
  cursor: pointer;
}
.calcTabs .calcTab.active {
  background-color: #287FDB;
  color: #fff;
}
.calcTabs .calcTab:first-child {
  border-radius: 4px 0 0 4px;
}
.calcTabs .calcTab:last-child {
  border-radius: 0 4px 4px 0;
}

.calcResult {
  margin-top: 20px;
  text-align: left;
}
.calcResultTitle {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000;
}
.calcResultValue .total {
  font-size: 16px;
  font-weight: 500;
}
.calcResultValue .item {
  color: #747474;
}

/* calcTotal */
.calcTotal {
  padding: 25px 30px;
  width: 100%;
  max-width: 330px;
  min-height: 300px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  background-color: #fff;
  box-sizing: border-box;
}
.calcTotal .btn-action {
  width: 100%;
}
.calcTotalSubmit {
  margin-top: 30px;
}
.calcTotalParam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.calcTotalParam:first-child {
  margin-top: 0;
}
.calcTotalParamTitle {
  font-size: 14px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000;
  display: flex;
  align-self: flex-start;
}
.calcTotalParamValue {
  font-size: 14px;
  color: #000;
  font-weight: 500;
  text-align: right;
  max-width: 160px;
}
.calcTotalParamValue.bold {
  font-weight: 700;
}
.calcTotalParamValue.italic {
  font-style: italic;
}
.calcTotalParamPrice {
  margin: 10px 0;
}
/* /calcTotal */

a.btn-action.btn-action--blue.js-result-submit {
    display: none;
}

.hidden {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .calcWrapper {
    padding: 20px 15px;
  }
  .calcContent {
    flex-direction: column;
  }
  .calc {
    padding-right: 0;
    max-width: 260px;
  }
  .calcTotal {
    margin-top: 30px;
    padding: 20px 15px;
  }
}
  </style>  
  
  
  <script>
    // constants
var DELIVERY_PICKUP = {
  name: 'pickup',
  title: 'Самовывоз',
};
var DELIVERY_COURIER = {
  name: 'courier',
  title: 'Доставка',
};

var MAX_CUSTOM_WIDTH = 720;
var MAX_CUSTOM_HEIGHT = 510;
var MAX_SQUARE = 715 * 505;
var SIZE_EXTRA = 4;

// резка
var CUTTING = 0.2;

// форма для вырубки
var FELLING_FORM_PRICE = 6500;

// удар (за лист)
var HIT_ONE_LIST_PRICE = 2;

// покрытие лаком (за лист)
var VARNISH_ONE_LIST_PRICE = 20;

// скругление углов (за изделие)
var ROUNDING_ONE_LIST_PRICE = 0.5;

// размер
var SIZE = {
  B2: { title: 'B2', width: 716, height: 506 },
  A2: { title: 'A2', width: 594, height: 420 },
  A3: { title: 'A3', width: 420, height: 297 },
  A4: { title: 'A4', width: 297, height: 210 },
  A5: { title: 'A5', width: 210, height: 148 },
  A6: { title: 'A6', width: 148, height: 105 },
  A7: { title: 'A7', width: 105, height: 74 },
  businessCards: { title: 'Визитки', width: 90, height: 50 },
  custom: { title: 'Свой размер', width: 0, height: 0 },
};

// стоимость цветности
var CHROMATICITY = {
  ['1+0']: {
    price: 50,
    title: '1+0',
    run: 0.8,
    setting: 900,
    forms: 517,
  },
  ['2+0']: {
    price: 100,
    title: '2+0',
    run: 0.8,
    setting: 1700,
    forms: 1021,
  },
  ['3+0']: {
    price: 150,
    title: '3+0',
    run: 0.8,
    setting: 2100,
    forms: 1700,
  },
  ['4+0']: {
    price: 250,
    title: '4+0',
    run: 1.07,
    setting: 2500,
    forms: 1800,
  },
  ['4+1']: {
    price: 300,
    title: '4+1',
    run: 1.21,
    setting: 3500,
    forms: 3000,
  },
  ['4+2']: {
    price: 350,
    title: '4+2',
    run: 1.21,
    setting: 4200,
    forms: 4000,
  },
  ['4+3']: {
    price: 400,
    title: '4+3',
    run: 1.21,
    setting: 4200,
    forms: 4000,
  },
  ['4+4']: {
    price: 450,
    title: '4+4',
    run: 1.21,
    setting: 5000,
    forms: 4000,
  },
};

var NO = 'NO';
var YES = 'YES';

var CHOICE = {
  [NO]: 'Нет',
  [YES]: 'Да',
};

// варианты бумаги
var MELOVANNAYA_MATOVAYA = 'MELOVANNAYA_MATOVAYA';
var MELOVANNAYA_GLYANCEVAYA = 'MELOVANNAYA_GLYANCEVAYA';
var OFSETNAYA_SNEGUROCHKA = 'OFSETNAYA_SNEGUROCHKA';
var KARTON_MELOVANNIY_ODNOSTORONNIY = 'KARTON_MELOVANNIY_ODNOSTORONNIY';
var KARTON_MELOVANNIY_DVUSTORONNIY = 'KARTON_MELOVANNIY_DVUSTORONNIY';
var SAMOKLEYASHAYASYA_BUMAGA = 'SAMOKLEYASHAYASYA_BUMAGA';

// стоимость бумаги
var PAPER = {
  [MELOVANNAYA_MATOVAYA]: {
    ['115']: 11.2,
    ['120']: 12.66,
    ['130']: 12.66,
    ['150']: 14.61,
    ['170']: 16.56,
    ['200']: 27.57,
    ['250']: 34.46,
    ['270']: 41.36,
    ['300']: 41.36,
  },
  [MELOVANNAYA_GLYANCEVAYA]: {
    ['115']: 10.87,
    ['120']: 12.41,
    ['130']: 12.41,
    ['150']: 14.17,
    ['170']: 16.23,
    ['200']: 27.57,
    ['250']: 34.46,
    ['300']: 41.36,
  },
  [OFSETNAYA_SNEGUROCHKA]: {
    ['80']: 6.74,
    ['100']: 8.08,
    ['120']: 9.69,
  },
  [KARTON_MELOVANNIY_ODNOSTORONNIY]: {
    ['250']: 32.97,
    ['270']: 31.74,
    ['300']: 36.45,
  },
  [KARTON_MELOVANNIY_DVUSTORONNIY]: {
    ['250']: 31.82,
    ['270']: 34.37,
    ['300']: 37.07,
  },
  [SAMOKLEYASHAYASYA_BUMAGA]: {
    ['170']: 32,
  },
};

// названия бумаги
var PAPER_TITLE = {
  [MELOVANNAYA_MATOVAYA]: 'Мелованная матовая',
  [MELOVANNAYA_GLYANCEVAYA]: 'Мелованная глянцевая',
  [OFSETNAYA_SNEGUROCHKA]: 'Офсетная «Снегурочка»',
  [KARTON_MELOVANNIY_ODNOSTORONNIY]: 'Картон мелованный (односторонний)',
  [KARTON_MELOVANNIY_DVUSTORONNIY]: 'Картон мелованный (двусторонний)',
  [SAMOKLEYASHAYASYA_BUMAGA]: 'Самоклеящаяся бумага',
};

// варианты ламинации
var ONE_SIDE_20 = 'ONE_SIDE_20';
var ONE_SIDE_30 = 'ONE_SIDE_30';
var ONE_SIDE_60 = 'ONE_SIDE_60';
var ONE_SIDE_120 = 'ONE_SIDE_120';
var TWO_SIDES_20 = 'TWO_SIDES_20';
var TWO_SIDES_30 = 'TWO_SIDES_30';
var TWO_SIDES_60 = 'TWO_SIDES_60';
var TWO_SIDES_120 = 'TWO_SIDES_120';

// стоимость ламинации
var LAMINATION = {
  [ONE_SIDE_20]: 10,
  [ONE_SIDE_30]: 15,
  [ONE_SIDE_60]: 25,
  [ONE_SIDE_120]: 40,
  [TWO_SIDES_20]: 20,
  [TWO_SIDES_30]: 30,
  [TWO_SIDES_60]: 50,
  [TWO_SIDES_120]: 80,
  [NO]: 0,
};

// названия ламинации
var LAMINATION_TITLE = {
  [ONE_SIDE_20]: 'Односторонняя 20 мкр',
  [ONE_SIDE_30]: 'Односторонняя 30 мкр',
  [ONE_SIDE_60]: 'Односторонняя 60 мкр',
  [ONE_SIDE_120]: 'Односторонняя 120 мкр',
  [TWO_SIDES_20]: 'Двусторонняя 20 мкр',
  [TWO_SIDES_30]: 'Двусторонняя 30 мкр',
  [TWO_SIDES_60]: 'Двусторонняя 60 мкр',
  [TWO_SIDES_120]: 'Двусторонняя 120 мкр',
  [NO]: 'Нет',
};

// parameters
var options = {
  size: null, // размер
  edition: 1000, // тираж
  paper: null, // бумага
  density: null, // плотность
  chromaticity: null, // цветность
  lamination: null, // ламинация
  rounding: null, // скругление
  felling: null, // вырубка
  varnish: null, // лак
  delivery: DELIVERY_PICKUP, // доставка
  lists: null, // листов B2
  availableDensity: [], // доступные варианты плотности
  oneListPrice: null, // стоимость одного B2 листа
  paperTitle: null, // название бумаги
  laminationTitle: null, // название ламинации
  price: null, // рассчитанная стоимость
};

// DOM
var sizeSelect = document.querySelector('.js-size-select');
var customSize = document.querySelector('.js-custom-size');
var customWidthInput = document.querySelector('.js-custom-size-width');
var customHeightInput = document.querySelector('.js-custom-size-height');

var editionInput = document.querySelector('.js-edition');
var chromaticitySelect = document.querySelector('.js-chromaticity');
var paperSelect = document.querySelector('.js-paper');
var densitySelect = document.querySelector('.js-density');
var fellingSelect = document.querySelector('.js-felling');
var varnishSelect = document.querySelector('.js-varnish');
var laminationSelect = document.querySelector('.js-lamination');
var roundingSelect = document.querySelector('.js-rounding');

var calcTabs = document.querySelectorAll('.js-calcTabs .calcTab');

var calcButton = document.querySelector('.js-calc-button');

var calcPriceNode = document.querySelector('.js-calc-price');
var totalPriceNode = document.querySelector('.js-calc-total');
var ItemPriceNode = document.querySelector('.js-calc-item');

// окно результата
var resultSizeNode = document.querySelector('.js-result-size');
var resultEditionNode = document.querySelector('.js-result-edition');
var resultPaperNode = document.querySelector('.js-result-paper');
var resultChromaticityNode = document.querySelector('.js-result-chromaticity');
var resultLaminationNode = document.querySelector('.js-result-lamination');
var resultFellingNode = document.querySelector('.js-result-felling');
var resultRoundingNode = document.querySelector('.js-result-rounding');
var resultVarnishNode = document.querySelector('.js-result-varnish');
var resultPriceNode = document.querySelector('.js-result-price');
var resultPriceTotalNode = document.querySelector('.js-result-price-total');
var resultPriceItemNode = document.querySelector('.js-result-price-item');
var resultDeliveryNode = document.querySelector('.js-result-delivery');
var resultForm = document.querySelector('.js-result-form');
var resultSubmit = document.querySelector('.js-result-submit');

// hidden form fields
var hiddenFormat = document.querySelector('[name="format"]');
var hiddenTiraj = document.querySelector('[name="tiraj"]');
var hiddenBumaga = document.querySelector('[name="bumaga"]');
var hiddenCvetnost = document.querySelector('[name="cvetnost"]');
var hiddenLaminacia = document.querySelector('[name="laminacia"]');
var hiddenVirubka = document.querySelector('[name="virubka"]');
var hiddenSkruglenie = document.querySelector('[name="skruglenie"]');
var hiddenLak = document.querySelector('[name="lak"]');
var hiddenDostavka = document.querySelector('[name="dostavka"]');

// functions
function initSize() {
  options.size = SIZE[sizeSelect.value];
  if (options.size === SIZE.custom) {
    customWidthInput.disabled = false;
    customHeightInput.disabled = false;
  } else {
    customWidthInput.disabled = true;
    customHeightInput.disabled = true;
  }
  customWidthInput.value = options.size.width;
  customHeightInput.value = options.size.height;

  sizeSelect.addEventListener('change', function (e) {
    options.size = SIZE[e.target.value];
    if (options.size === SIZE.custom) {
      customWidthInput.disabled = false;
      customHeightInput.disabled = false;
    } else {
      customWidthInput.disabled = true;
      customHeightInput.disabled = true;
    }
    customWidthInput.value = options.size.width;
    customHeightInput.value = options.size.height;

    calc(customWidthInput.value, customHeightInput.value);
  });

  // custom width input
  customWidthInput.addEventListener('input', function (e) {
    if (isCustomSizeExceeded(e.target.value, customHeightInput.value)) {
      customSize.classList.add('has-error');
      calcButton.disabled = true;
    } else {
      customSize.classList.remove('has-error');
      calcButton.disabled = false;
    }

    calc(customWidthInput.value, customHeightInput.value);
  });

  // custom height input
  customHeightInput.addEventListener('input', function (e) {
    if (isCustomSizeExceeded(customWidthInput.value, e.target.value)) {
      customSize.classList.add('has-error');
    } else {
      customSize.classList.remove('has-error');
    }

    calc(customWidthInput.value, customHeightInput.value);
  });
}

function initEdition() {
  editionInput.value = options.edition;
  editionInput.addEventListener('input', function(e) {
    options.edition = parseInt(e.target.value, 10);
    calc(customWidthInput.value, customHeightInput.value);
  });
}

function initChromaticity() {
  options.chromaticity = CHROMATICITY[chromaticitySelect.value];
  chromaticitySelect.addEventListener('change', function(e) {
    options.chromaticity = CHROMATICITY[e.target.value];
    calc(customWidthInput.value, customHeightInput.value);
  });
}

function initPaper() {
  options.density = null;
  options.paper = PAPER[paperSelect.value];
  options.paperTitle = PAPER_TITLE[paperSelect.value];
  paperSelect.addEventListener('change', function(e) {
    options.paper = PAPER[e.target.value];
    options.paperTitle = PAPER_TITLE[e.target.value];
    setAvailableDensityOptions();
    updateDensity();
    options.density = options.availableDensity[0] || null;
    calc(customWidthInput.value, customHeightInput.value);
  });
}

function initDensity() {
  setAvailableDensityOptions();
  options.density = parseInt(densitySelect.value, 10);
  densitySelect.addEventListener('change', function(e) {
    options.density = e.target.value;
    calc(customWidthInput.value, customHeightInput.value);
  });
}

function initFelling() {
  options.felling = fellingSelect.value;
  fellingSelect.addEventListener('change', function(e) {
    options.felling = e.target.value;
    calc(customWidthInput.value, customHeightInput.value);
  });
}

function initVarnish() {
  options.varnish = varnishSelect.value;
  varnishSelect.addEventListener('change', function(e) {
    options.varnish = e.target.value;
    calc(customWidthInput.value, customHeightInput.value);
  });
}

function initLamination() {
  options.lamination = LAMINATION[laminationSelect.value];
  options.laminationTitle = LAMINATION_TITLE[laminationSelect.value];
  laminationSelect.addEventListener('change', function(e) {
    options.lamination = LAMINATION[e.target.value];
    options.laminationTitle = LAMINATION_TITLE[e.target.value];
    calc(customWidthInput.value, customHeightInput.value);
  });
}

function initRounding() {
  options.rounding = roundingSelect.value;
  roundingSelect.addEventListener('change', function(e) {
    options.rounding = e.target.value;
    calc(customWidthInput.value, customHeightInput.value);
  });
}

function initDelivery() {
  calcTabs.forEach(function(tab) { tab.addEventListener('click', handleTabClick) });
}

function initActions() {
  calcButton.addEventListener('click', handleCalculateClick);
  resultSubmit.addEventListener('click', handleSubmitForm);
}

document.addEventListener('DOMContentLoaded', function() {
  initSize();
  initEdition();
  initChromaticity();
  initPaper();
  initDensity();
  initFelling();
  initVarnish();
  initLamination();
  initRounding();
  initDelivery();
  initActions();

  calc(customWidthInput.value, customHeightInput.value);
});

function isCustomSizeExceeded(width, height) {
  return width > MAX_CUSTOM_WIDTH || height > MAX_CUSTOM_HEIGHT;
}

function handleTabClick(e) {
  if (e.target) {
    e.target.classList.add('active');
    var anotherTabs = getSiblings(e.target);
    anotherTabs.forEach(function(tab) { tab.classList.remove('active') });

    if (e.target.dataset && e.target.dataset.type) {
      updateDelivery(e.target.dataset.type);
    }

    resultDeliveryNode.innerHTML = options.delivery.title;
  }
}

function updateDelivery(type) {
  options.delivery = type === DELIVERY_PICKUP.name
    ? DELIVERY_PICKUP
    : DELIVERY_COURIER;
}

function updateDensity() {
  options.density = options.availableDensity[0] || null;
  densitySelect.value = options.density || null;
}

function calc(width, height) {
  var _width = parseInt(width, 10);
  var _height = parseInt(height, 10);
  options.size.width = _width;
  options.size.height = _height;
  var square = (_width + SIZE_EXTRA) * (_height + SIZE_EXTRA);
  var products = Math.floor(MAX_SQUARE / square);
  options.lists = Math.ceil(options.edition / products) + options.chromaticity.price;
  options.oneListPrice = options.paper[options.density];
  var fellingPrice = options.felling === YES
    ? FELLING_FORM_PRICE + (options.lists * HIT_ONE_LIST_PRICE)
    : 0;
  var varnishPrice = options.varnish === YES
    ? options.lists * VARNISH_ONE_LIST_PRICE
    : 0;
  var roundingPrice = options.rounding === YES
    ? options.edition * ROUNDING_ONE_LIST_PRICE
    : 0;
  options.price =
    (options.oneListPrice * options.lists) +
    (CUTTING * options.lists) +
    fellingPrice +
    varnishPrice +
    (options.lamination * options.lists) +
    roundingPrice +
    (options.chromaticity.run * options.lists) +
    options.chromaticity.setting +
    options.chromaticity.forms;
  updateUI();
  updateHiddenFields();
  console.log(options);
}

function updateUI() {
  calcPriceNode.classList.add('hidden');
  resultPriceNode.classList.add('hidden');
  resultForm.classList.add('hidden');

  totalPriceNode.innerHTML = options.price?.toFixed(2);
  ItemPriceNode.innerHTML = (options.price / options.edition).toFixed(2);

  resultSizeNode.innerHTML = options.size.title + ' (' + options.size.width + 'x' + options.size.height + ' мм)';
  resultEditionNode.innerHTML = options.edition + ' шт.';
  resultPaperNode.innerHTML = options.paperTitle + ' ' + options.density + 'гр/м2';
  resultChromaticityNode.innerHTML = options.chromaticity.title;
  resultLaminationNode.innerHTML = options.laminationTitle;
  resultFellingNode.innerHTML = CHOICE[options.felling];
  resultRoundingNode.innerHTML = CHOICE[options.rounding];
  resultVarnishNode.innerHTML = CHOICE[options.varnish];
  resultPriceTotalNode.innerHTML = options.price?.toFixed(2) + ' руб.';
  resultPriceItemNode.innerHTML = (options.price / options.edition).toFixed(2) + ' руб.';
  resultDeliveryNode.innerHTML = options.delivery.title;
}

function updateHiddenFields() {
  hiddenFormat.value = options.size.title;
  hiddenTiraj.value = options.edition;
  hiddenBumaga.value = options.paperTitle;
  hiddenCvetnost.value = options.chromaticity.title;
  hiddenLaminacia.value = options.laminationTitle;
  hiddenVirubka.value = CHOICE[options.felling];
  hiddenSkruglenie.value = CHOICE[options.rounding];
  hiddenLak.value = CHOICE[options.varnish];
  hiddenDostavka.value = options.delivery.title;

  console.log('hiddenFormat', hiddenFormat.value);
  console.log('hiddenTiraj', hiddenTiraj.value);
  console.log('hiddenBumaga', hiddenBumaga.value);
  console.log('hiddenCvetnost', hiddenCvetnost.value);
  console.log('hiddenLaminacia', hiddenLaminacia.value);
  console.log('hiddenVirubka', hiddenVirubka.value);
  console.log('hiddenSkruglenie', hiddenSkruglenie.value);
  console.log('hiddenLak', hiddenLak.value);
  console.log('hiddenDostavka', hiddenDostavka.value);
}

function handleCalculateClick(e) {
  e.preventDefault();
  calcPriceNode.classList.remove('hidden');
  resultPriceNode.classList.remove('hidden');
  resultForm.classList.remove('hidden');
}

function handleSubmitForm(e) {
  e.preventDefault();
  resultForm.submit();
  console.log('click submit form');
}

function getChildren(n, skipMe) {
  var r = [];
  for ( ; n; n = n.nextSibling ) 
     if ( n.nodeType == 1 && n != skipMe)
        r.push( n );        
  return r;
};

function getSiblings(n) {
  return getChildren(n.parentNode.firstChild, n);
}

function setAvailableDensityOptions() {
  // clear all available density list
  options.availableDensity = [];
  // get all options available
  Array.prototype.map.call(densitySelect.options, function(option) {
    option.disabled = false;
  });
  // get available options depends on selected paper
  Array.prototype.map.call(densitySelect.options, function(option) {
    if (options.paper[option.value]) {
      options.availableDensity.push(parseInt(option.value, 10));
    }
    if (!options.paper[option.value]) {
      option.disabled = true;
    }
  });
}
  </script>