intranet/web/intranet_repo/projects/_central/scripts/kalli.js

(function () {
    'use strict';

    var currentStep = 1;

    function byId(id) {
        return document.getElementById(id);
    }

    function selectedGroup(form) {
        return form.querySelector('input[name="group"]:checked');
    }

    function showAlert(message) {
        window.alert(message);
        return false;
    }

    function validateStepOne(form) {
        var selected = selectedGroup(form);
        if (!selected) {
            return showAlert('Bitte wählen Sie eine Terminart aus.');
        }

        if (selected.dataset.kalliCustom === '1' && !byId('kalliUserInput').value.trim()) {
            return showAlert('Bitte geben Sie einen Titel für den benutzerdefinierten Termin ein.');
        }

        return true;
    }

    function validateStepTwo() {
        var dateStart = byId('kalliDateS').value;
        var dateEnd = byId('kalliDateE').value;
        var timeStart = byId('kalliTimeS').value;
        var timeEnd = byId('kalliTimeE').value;

        if (!dateStart) {
            return showAlert('Bitte geben Sie ein Datum ein.');
        }
        if (dateEnd && dateEnd < dateStart) {
            return showAlert('Das Enddatum darf nicht vor dem Startdatum liegen.');
        }
        if (timeStart && timeEnd && (!dateEnd || dateEnd === dateStart) && timeEnd < timeStart) {
            return showAlert('Die Endzeit darf am selben Tag nicht vor der Startzeit liegen.');
        }

        return true;
    }

    function updateProgress(step) {
        document.querySelectorAll('.kalli-progress-step').forEach(function (element, index) {
            var elementStep = index + 1;
            element.classList.toggle('active', elementStep === step);
            element.classList.toggle('done', elementStep < step);
        });

        document.querySelectorAll('.kalli-progress-line').forEach(function (element, index) {
            element.classList.toggle('done', index < step - 1);
        });
    }

    function showHeader() {
        var rootStyle = getComputedStyle(document.documentElement);
        var headerHeight = parseFloat(rootStyle.getPropertyValue('--header-height')) || 64;
        var menu = byId('header_menue');
        var title = byId('header_title');

        if (menu) menu.style.top = '0';
        if (title) title.style.top = headerHeight + 'px';
    }

    function goToStep(step) {
        for (var index = 1; index <= 4; index++) {
            byId('kalliStep' + index).hidden = index !== step;
        }
        currentStep = step;
        updateProgress(step);
        window.scrollTo({ top: 0, behavior: 'smooth' });
        showHeader();
    }

    function formatDate(isoDate) {
        if (!isoDate) return '–';
        var parts = isoDate.split('-');
        return parts.length === 3 ? parts[2] + '.' + parts[1] + '.' + parts[0] : isoDate;
    }

    function showSummaryRow(rowId, valueId, value, displayValue) {
        var row = byId(rowId);
        row.hidden = !value;
        if (value) byId(valueId).textContent = displayValue;
    }

    function buildSummary(form) {
        var selected = selectedGroup(form);
        var groupLabel = selected ? selected.value : '–';

        if (selected && selected.dataset.kalliCustom === '1') {
            var customTitle = byId('kalliUserInput').value.trim();
            var visibility = selected.value === 'oeffentlich' ? 'Öffentlich' : 'Intern';
            groupLabel = customTitle ? customTitle + ' (' + visibility + ')' : groupLabel;
        }

        byId('sumGroup').textContent = groupLabel;
        byId('sumDateS').textContent = formatDate(byId('kalliDateS').value);
        showSummaryRow('sumDateERow', 'sumDateE', byId('kalliDateE').value, formatDate(byId('kalliDateE').value));
        showSummaryRow('sumTimeSRow', 'sumTimeS', byId('kalliTimeS').value, byId('kalliTimeS').value);
        showSummaryRow('sumTimeERow', 'sumTimeE', byId('kalliTimeE').value, byId('kalliTimeE').value);
        showSummaryRow('sumTextRow', 'sumText', byId('kalliFurtherText').value.trim(), byId('kalliFurtherText').value.trim());
        showSummaryRow('sumLocRow', 'sumLoc', byId('kalliLocation').value.trim(), byId('kalliLocation').value.trim());
        showSummaryRow('sumRespRow', 'sumResp', byId('kalliResponsibility').value.trim(), byId('kalliResponsibility').value.trim());
    }

    function validateForStep(form, nextStep) {
        if (nextStep === 2) return validateStepOne(form);
        if (nextStep === 3) return validateStepTwo();
        if (nextStep === 4) {
            if (!validateStepOne(form) || !validateStepTwo()) return false;
            buildSummary(form);
        }
        return true;
    }

    function initialise() {
        var form = byId('kalliForm');
        if (!form) return;

        form.querySelectorAll('[data-kalli-next]').forEach(function (button) {
            button.addEventListener('click', function () {
                var nextStep = Number(button.dataset.kalliNext);
                if (validateForStep(form, nextStep)) goToStep(nextStep);
            });
        });

        form.querySelectorAll('[data-kalli-prev]').forEach(function (button) {
            button.addEventListener('click', function () {
                goToStep(Number(button.dataset.kalliPrev));
            });
        });

        form.addEventListener('submit', function (event) {
            if (currentStep !== 4) {
                event.preventDefault();
                var nextStep = Math.min(currentStep + 1, 4);
                if (validateForStep(form, nextStep)) goToStep(nextStep);
                return;
            }

            if (!validateStepOne(form)) {
                event.preventDefault();
                goToStep(1);
                return;
            }
            if (!validateStepTwo()) {
                event.preventDefault();
                goToStep(2);
                return;
            }

            var submitButton = form.querySelector('button[type="submit"]');
            if (submitButton) submitButton.disabled = true;
        });

        updateProgress(1);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initialise);
    } else {
        initialise();
    }
}());