$(document).on('turbolinks:load', function() {
  // Permite agregar más filas a los campos nested? && array?
  $('.add-group').click(function(e) {
    e.preventDefault();

    var _this = $(this);
    // Sube hasta la raíz del grupo
    var _groups = _this.parents('.field-groups');
    // 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();
    _group.find('[name*="[0]"]').each(function(i, input) {
      var _input = $(input);
      var _name  = _input.attr('name');
      _input.attr('name', _name.replace(/\[0\]/, `[${_date}]`));
      _input.val('');
    });

    // Regenera el evento del botón de borrado
    _group.find('.remove-group').click(function(e) {
      e.preventDefault();
      $(this).parents('.field-group').remove();
    });

    // 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);
  });

  // Este evento permite remover las filas que ya existen en un post
  // editado
  $('.remove-group').click(function(e) {
    e.preventDefault();
    $(this).parents('.field-group').remove();
  });
});