Color picker

                // Kleurselectie met uitsluiting

document.addEventListener("DOMContentLoaded", function () {
    // Alleen colorpicker targetten
    const selectFields = document.querySelectorAll(".colorpicker");

    function updateDisabledOptions() {
        // Haal de geselecteerde waarden van alle color-select-fields
        const values = Array.from(selectFields).map(field => {
            const input = field.querySelector(".select-field-input");
            return input.value.toLowerCase();
        });

        selectFields.forEach((field, index) => {
            const otherValue = values[1 - index]; // waarde van het andere veld

            const buttons = field.querySelectorAll(".dropdown-item");
            buttons.forEach(button => {
                const colorText = button.textContent.trim().toLowerCase();
                if (colorText === otherValue) {
                    button.setAttribute("disabled", "disabled");
                } else {
                    button.removeAttribute("disabled");
                }
            });
        });
    }

    // Voeg click listeners alleen toe aan color-select-fields
    selectFields.forEach(field => {
        const input = field.querySelector(".select-field-input");
        const buttons = field.querySelectorAll(".dropdown-item");

        buttons.forEach(button => {
            button.addEventListener("click", function (e) {
                e.preventDefault(); // voorkom submit of page reload
                const color = button.textContent.trim().toLowerCase();
                input.value = color;

                // Update visuele weergave
                const selected = field.querySelector(".select-field-selected");

                // Maak een nieuwe swatch span met nested span erin
                const swatch = document.createElement("span");
                swatch.className = "colorswatch colorswatch-" + color;

                const label = document.createElement("span");
                label.textContent = color.charAt(0).toUpperCase() + color.slice(1);

                swatch.appendChild(label);
                selected.innerHTML = "";
                selected.appendChild(swatch);

                updateDisabledOptions(); // Update direct na het aanpassen van de DOM
            });
        });
    });

    // Initieel updaten bij laden van de pagina
    updateDisabledOptions();
});