$(document).on('turbolinks:load', function() {
  var removeGroup = function(e) {
    e.preventDefault();
    var group = $(this).data('group')
    $(this).parents('.field-group.'+group).remove();
  }

  var addGroup = function(e) {
  // Permite agregar más filas a los campos nested? && array?
    e.preventDefault();

    var _this = $(this);
    // Obtener el nombre del grupo para poder delimitar el campo de
    // acción
    var _own_group = _this.data('group')
    // Sube hasta la raíz del grupo
    var _groups = _this.parents('.field-groups.'+_own_group);
    // En este elemento se van a agregar los nuevos
    var _extra  = _groups.children('.extra-groups');
    // El grupo a clonar es el primero, siempre con id 0
    var _group_orig = _groups
      .children('.field-group')
      .first();

    // Deshabilita select2
    _group_orig.find('select.select2').select2('destroy');
    // Luego clona el grupo agregándole la clase 'extra' para poder
    // mostrar el botón de borrado y lo agrega al final del grupo extra
    var _group = _group_orig
      .clone()
      .addClass('extra')
      .appendTo(_extra);

    // Encuentra todos los elementos con '[0]' en el nombre y les pone
    // un ID generado a partir del tiempo Unix.  De esta forma se crea
    // un grupo que va a terminar en el mismo Hash de valores.
    var _date = (new Date).getTime();
    // Filtramos por el grupo para ser mas especificas
    _group.find('[name*="['+_own_group+'][0]"]').each(function(i, input) {
      var _input = $(input);
      var _name  = _input.attr('name');
      var _regex = new RegExp('\\['+_own_group+'\\]\\[0\\]');
      _input.attr('name', _name.replace(_regex, '['+_own_group+']['+_date+']'));
      if (['checkbox','radio'].includes(_input.attr('type'))) {
        _input.prop('checked', false);
      } else {
        _input.val('');
      }
    });

    // Eliminar los campos extra
    _group.find('.extra-groups').children().remove();

    // Regenera el evento del botón de borrado
    _group.find('.remove-group').click(removeGroup);
    // Agregar el evento a los sub-botones
    _group.find('.add-group').click(addGroup);

    // Regenera los select2
    var _select2 = _group.find('.select2');
    var _select2_opts = { theme: 'bootstrap', width: '' }
    _select2.select2(_select2_opts);
    _group_orig.find('.select2').select2(_select2_opts);
  };

  $('.add-group').click(addGroup);

  // Este evento permite remover las filas que ya existen en un post
  // editado
  $('.remove-group').click(removeGroup);
});