/**
 * Progressive enhancement for the two-step student registration form.
 *
 * When account-signup questions are configured the form renders two panels
 * (`[data-step="1"]` account details, `[data-step="2"]` the questions) inside a
 * single form marked `data-steps="1"`. This script hides step two behind a
 * "Next" button that only advances once step one passes native validation.
 * Without JS both panels stay visible and the single submit still works.
 */
(function () {
	'use strict';

	function enhance(form) {
		var step1 = form.querySelector('[data-step="1"]');
		var step2 = form.querySelector('[data-step="2"]');
		var next = form.querySelector('.us-reg-next');
		var back = form.querySelector('.us-reg-back');

		if (!step1 || !step2 || !next) {
			return;
		}

		function show(step) {
			step1.hidden = step !== 1;
			step2.hidden = step !== 2;
		}

		show(1);

		next.addEventListener('click', function () {
			var fields = step1.querySelectorAll('input, select, textarea');

			for (var i = 0; i < fields.length; i++) {
				if (!fields[i].checkValidity()) {
					fields[i].reportValidity();
					return;
				}
			}

			show(2);
		});

		if (back) {
			back.addEventListener('click', function () {
				show(1);
			});
		}
	}

	document.addEventListener('DOMContentLoaded', function () {
		var forms = document.querySelectorAll('.us-register-form form[data-steps="1"]');

		for (var i = 0; i < forms.length; i++) {
			enhance(forms[i]);
		}
	});
})();