document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('addModuleButton').onclick = addModule;

  initRemoveModule();
  typeDiscount();
});

function typeDiscount() {
  var typeValue = document.querySelector('[id^=tipo_valor_]');
  typeValue.addEventListener('change', function() {
    var labeldiscount = document.querySelector('.js-label');
    var valueDiscount = document.querySelector('#valor_desconto_' + this.id.replace('tipo_valor_', ''));
    if (typeValue.value === '1') {
      valueDiscount.setAttribute('maxlength', 2);
      labeldiscount.textContent = 'Valor (%)';
    } else {
      valueDiscount.removeAttribute('maxlength');
      labeldiscount.textContent = 'Valor (R$)';
    }
  });
}

function initRemoveModule() {
  var controlRemoveModule = document.querySelectorAll('.js-remove-module');

  for (var i = 0; i < controlRemoveModule.length; i++) {
    controlRemoveModule[i].onclick = removeModule;
  }
}

function removeModule() {
  var id = this.parentNode.parentNode.parentNode.getAttribute('id');
  document.getElementById(id).remove();
}

function addModule() {
  var row = document.querySelectorAll('.js-module').length + 1,
    html = '',
    moduleList = document.getElementById('module');

  html =
    '<div id="' +
    row +
    '" class="content-box background-white padding-large bottom-margin-medium shadow-small adm-focus-within js-module">';
  html += '<div class="row x-small-space-xs">';

  html += '<div class="col-md">';
  html += '<label class="field field-medium">';
  html += '<span class="field-label">' + window.tittle + '</span>';
  html +=
    '<input class="field-entry" type="text" name="descontofaixavalorpedido_module[' + row + '][texto]" value=""/>';
  html += '</label>';
  html += '</div>';

  html += '<div class="col-md">';
  html += '<label class="field field-medium">';
  html += '<span class="field-label">' + window.textPriceRange + '</span>';
  html +=
    '<input class="field-entry mask-number" type="text" name="descontofaixavalorpedido_module[' +
    row +
    '][valor_perfil]" value="" />';
  html += '</label>';
  html += '</div>';

  html += '<div class="col-md-width-auto">';
  html += '<label class="field field-medium">';
  html += '<span class="field-label">' + window.textTypeDiscount + '</span>';
  html +=
    '<select class="field-entry" id="tipo_valor_' +
    row +
    '" name="descontofaixavalorpedido_module[' +
    row +
    '][tipo_valor]">';
  html += '<option value="1">' + window.textPercent;
  html += '</option>';
  html += '<option value="0">' + window.textMonetary;
  html += '</option>';
  html += '</select>';
  html += '</label>';
  html += '</div>';

  html += '<div class="col-md">';
  html += '<label class="field field-medium">';
  html += '<span class="field-label js-label">' + window.textValue + ' (%)</span>';
  html +=
    '<input class="field-entry mask-number" type="text" id="valor_desconto_' +
    row +
    '" name="descontofaixavalorpedido_module[' +
    row +
    '][valor_desconto]" value="" maxlength="2"/>';
  html += '</label>';
  html += '</div>';

  html += '<div class="col-md">';
  html += '<label class="field field-medium">';
  html += '<span class="field-label" data-tooltip="zero para não validar">' + window.textDateExpire + '</span>';
  html +=
    '<input class="field-entry mask-number" type="text" id="periodo_dias_desconto_' +
    row +
    '" name="descontofaixavalorpedido_module[' +
    row +
    '][periodo_dias_desconto]" value="" />';
  html += '</label>';
  html += '</div>';

  html += '<div class="col-xs-12 col-md-width-auto">';
  html += '<div class="padding-medium cursor-pointer top-margin-medium js-remove-module" data-tooltip="remover">';
  html += '<i class="fas fa-trash text-gray"></i>';
  html += '</div>';
  html += '</div>';

  html += '</div>';
  html += '</div>';

  moduleList.insertAdjacentHTML('afterbegin', html);

  initRemoveModule(document.getElementById(row));
  typeDiscount();
}
