// Client-side validation for Workshopwahl frontend form
// This script validates required fields and email format before submission

document.addEventListener('DOMContentLoaded', function () {
    var form = document.querySelector('.kc-workshopwahl-form');
    if (!form) return;

    form.addEventListener('submit', function (e) {
        var valid = true;
        var errorMessages = [];

        // Example: Validate required text fields
        var requiredFields = form.querySelectorAll('[required]');
        requiredFields.forEach(function (field) {
            if (!field.value.trim()) {
                valid = false;
                errorMessages.push(field.getAttribute('data-label') || field.name + ' ist erforderlich.');
                field.classList.add('kc-field-error');
            } else {
                field.classList.remove('kc-field-error');
            }
        });

        // Example: Validate email format
        var emailField = form.querySelector('input[type="email"]');
        if (emailField && emailField.value) {
            var emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
            if (!emailPattern.test(emailField.value)) {
                valid = false;
                errorMessages.push('Bitte eine gültige E-Mail-Adresse eingeben.');
                emailField.classList.add('kc-field-error');
            } else {
                emailField.classList.remove('kc-field-error');
            }
        }

        // Example: Validate max workshop selections (if relevant)
        var maxWorkshops = parseInt(form.getAttribute('data-max-workshops'), 10);
        if (maxWorkshops) {
            var checked = form.querySelectorAll('input[type="checkbox"][name^="workshop_"]:checked');
            if (checked.length > maxWorkshops) {
                valid = false;
                errorMessages.push('Es dürfen maximal ' + maxWorkshops + ' Workshops gewählt werden.');
            }
        }

        // Show error messages
        var errorBox = form.querySelector('.kc-form-errors');
        if (!errorBox) {
            errorBox = document.createElement('div');
            errorBox.className = 'kc-form-errors';
            form.prepend(errorBox);
        }
        errorBox.innerHTML = errorMessages.length ? '<ul><li>' + errorMessages.join('</li><li>') + '</li></ul>' : '';

        if (!valid) {
            e.preventDefault();
        }
    });
});