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 parentElement = this.closest('.js-module');
  if (parentElement) {
    var moduleList = document.getElementById('module');

    // Remover o módulo do DOM
    parentElement.remove();

    // Reindexar os módulos restantes
    var modules = document.querySelectorAll('.js-module');

    modules.forEach(function (module, index) {
      // Atualizar os IDs e names dos campos de acordo com o novo índice
      var newIndex = index + 1;
      module.id = newIndex;

      // Atualizando os nomes dos campos para refletir o novo índice
      module.querySelectorAll('input, select').forEach(function (input) {
        var name = input.getAttribute('name');
        if (name) {
          // Atualizando os indices no nome dos campos
          name = name.replace(/\[\d+\]/, '[' + newIndex + ']');
          input.setAttribute('name', name);
        }
      });
    });
  }
}

function addModule() {
  var row = document.querySelectorAll('.js-module').length + 1;
  var html = '';
  var 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">';

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

  // Container interno com padding adicional
  html += '<div class="row x-small-space-xs top-padding-medium">';

  // Campo "Faixa de Valor"
  html += '<div class="col-xs-6 col-sm-2">';
  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>';

  // Campo "Tipo de Desconto"
  html += '<div class="col-md-width-md">';
  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 + '</option>';
  html += '<option value="0">' + window.textMonetary + '</option>';
  html += '</select>';
  html += '</label>';
  html += '</div>';

  // Campo "Valor de Desconto"
  html += '<div class="col-xs-6 col-sm-2">';
  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>';

  // Campo "Geo Zones"
  html += '<div class="col-md width-auto">';
  html += '<label class="field field-medium">';
  html += '<div class="cursor-pointer tooltip-region-rule" data-tooltip="Se houver uma configuração para todas as regiões e outras configurações para uma região específica, a prioridade de desconto/acréscimo será dada à região específica.">';
  html += '<span class="field-label">' + window.textGeoZones +
  ' <i class="icon-info fas fa-info-circle"></i></span>';
  html += '</div>';
  html += '<select class="field-entry" id="geo_zone_id' + row + '" name="descontofaixavalorpedido_module[' + row + '][geo_zone_id]">';
  html += '<option value="0">' + window.textAllZones + '</option>';
  window.geoZones.forEach(function (zone) {
    html += '<option value="' + zone.geo_zone_id + '">' + zone.name + '</option>';
  });
  html += '</select>';
  html += '</label>';
  html += '</div>';

  // Campo "Data de Expiração"
  html += '<div class="col-sm">';
  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-number2" type="number" id="periodo_dias_desconto_' + row + '" name="descontofaixavalorpedido_module[' + row + '][periodo_dias_desconto]" value="0" />';
  html += '</label>';
  html += '</div>';

  // Botão de Remoção
  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>';

  // Fecha o container interno e a div principal
  html += '</div>'; // Fecha a linha interna
  html += '</div>'; // Fecha o container principal

  moduleList.insertAdjacentHTML('afterbegin', html);

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

