document.addEventListener('DOMContentLoaded', function() {
  var info = JSON.parse(document.querySelector('[data-info]').getAttribute('data-info'));
  var fidelityContainer = document.getElementById('fidelity');

  if (window.errorCeo) {
    document.querySelector('.js-error-ceo').addEventListener('click', function() {
      document.querySelector('.js-error-ceo-message').classList.toggle('hidden');
    });
  }

  document.getElementById('addFidelity').onclick = addFidelity;

  initRemoveFidelity();

  function initRemoveFidelity() {
    var removeControl = document.querySelectorAll('.js-remove-fidelity');
    for (var i = 0; i < removeControl.length; i++) {
      removeControl[i].onclick = removeFidelity;
    }
  }

  function removeFidelity() {
    var parent = window.closestElement.call(this, 'js-fidelity');
    if (parent) {
      parent.parentNode.removeChild(parent);
    }
  }

  function addFidelity() {
    var id = document.querySelectorAll('.js-fidelity').length,
      html = '';

    html +=
      '<div id="' +
      id +
      '" class="background-white shadow-small adm-focus-within padding-large bottom-margin-small js-fidelity">';
    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.entryPosition + '</span>';
    html +=
      '<input type="hidden" name="fidelity_module[' + id + '][layout_id]" value="' + window.fidelityLayoutId + '">';
    html += '<select class="field-entry" name="fidelity_module[' + id + '][position]">';
    for (var key in info.positions) {
      html += '<option value="' + key + '">' + info.positions[key] + '</option>';
    }
    html += '</select>';
    html += '</label>';
    html += '</div>';

    html += '<div class="col-md">';
    html += '<label class="field field-medium">';
    html += '<span class="field-label">' + window.entryStatus + '</span>';
    html += '<select class="field-entry" name="fidelity_module[' + id + '][status]">';
    for (key in info.status) {
      html += '<option value="' + key + '">' + info.status[key] + '</option>';
    }
    html += '</select>';
    html += '</label>';
    html += '</div>';

    html += '<div class="col-md-width-auto">';
    html += '<label class="field field-medium" style="width:64px;">';
    html += '<span class="field-label">' + window.entrySortOrder + '</span>';
    html += '<input class="field-entry" type="text" name="fidelity_module[' + id + '][sort_order]" 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-fidelity" data-tooltip="Remover">';
    html += '<i class="fas fa-trash text-gray"></i>';
    html += '</div>';
    html += '</div>';

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

    fidelityContainer.insertAdjacentHTML('afterbegin', html);
    initRemoveFidelity(document.getElementById(id));
  }
});
