Untitled

document.addEventListener('DOMContentLoaded', function() {
        fetch('/upload/getColumnHeaders')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    var buttonContainerX = document.getElementById('button-container-x');
                    var buttonContainerY = document.getElementById('button-container-y');

                    buttonContainerX.innerHTML = '<h2>For X</h2>';  // Clear existing buttons and add heading
                    buttonContainerY.innerHTML = '<h2>For Y</h2>';  // Clear existing buttons and add heading

                    var columnHeaders = data.columnHeaders;

                    function handleToggle(selectedButton, counterpartContainer) {
                        selectedButton.classList.toggle('selected');

                        const isSelected = selectedButton.classList.contains('selected');
                        const counterpartButtons = Array.from(counterpartContainer.getElementsByTagName('button'));

                        counterpartButtons.forEach(btn => {
                            if (btn.textContent === selectedButton.textContent) {
                                btn.disabled = isSelected;
                            }
                        });
                    }

                    columnHeaders.forEach((header, index) => {
                        // Create button for X
                        var button1 = document.createElement('button');
                        button1.textContent = header;
                        button1.setAttribute('id', 'button1-' + (index + 1));
                        button1.classList.add('toggle-button');

                        button1.addEventListener('click', function() {
                            const selectedXButtons = document.querySelectorAll('#button-container-x .selected');
                            if (selectedXButtons.length >= 1 && !this.classList.contains('selected')) return;
                            handleToggle(this, buttonContainerY);
                        });

                        buttonContainerX.appendChild(button1);

                        // Create button for Y
                        var button2 = document.createElement('button');
                        button2.textContent = header;
                        button2.setAttribute('id', 'button2-' + (index + 1));
                        button2.classList.add('toggle-button');

                        button2.addEventListener('click', function() {
                            const selectedYButtons = document.querySelectorAll('#button-container-y .selected');
                            if (selectedYButtons.length >= 1 && !this.classList.contains('selected')) return;
                            handleToggle(this, buttonContainerX);
                        });

                        buttonContainerY.appendChild(button2);
                    });
                } else {
                    console.error('Sütun başlıkları alınamadı:', data.message);
                }
            })
            .catch(error => {
                console.error('Hata:', error);
            });

        var submitButton = document.getElementById('submit-button');
        submitButton.addEventListener('click', function() {
            window.location.href = '/howtouse';
        });
    });