(function () {
  function syncGroup(form, key) {
    var hidden = form.querySelector('[data-case-hidden="' + key + '"]');
    var inputs = form.querySelectorAll('input[data-case-filter="' + key + '"]');
    var values = [];

    inputs.forEach(function (input) {
      if (input.checked) {
        values.push(input.value);
      }
    });

    if (hidden) {
      hidden.value = values.join(',');
    }
  }

  function syncAll(form) {
    ['service', 'platform', 'industry'].forEach(function (key) {
      syncGroup(form, key);
    });
  }

  document.addEventListener('DOMContentLoaded', function () {
    var forms = document.querySelectorAll('[data-case-filter-form]');

    forms.forEach(function (form) {
      syncAll(form);

      form.querySelectorAll('[data-case-clear-group]').forEach(function (button) {
        button.addEventListener('click', function () {
          var key = button.getAttribute('data-case-clear-group');

          form.querySelectorAll('input[data-case-filter="' + key + '"]').forEach(function (input) {
            input.checked = false;
          });

          syncGroup(form, key);
        });
      });

      form.querySelectorAll('input[data-case-filter]').forEach(function (input) {
        input.addEventListener('change', function () {
          syncGroup(form, input.getAttribute('data-case-filter'));
        });
      });

      form.addEventListener('submit', function () {
        syncAll(form);

        form.querySelectorAll('input[data-case-filter]').forEach(function (input) {
          input.removeAttribute('name');
        });
      });
    });
  });
}());