document.addEventListener('DOMContentLoaded', function () {
    const columns = document.querySelectorAll('.kanban-column');
    columns.forEach(column => {
        new Sortable(column, {
            group: 'kanban',
            animation: 150,
            onEnd: function (evt) {
                const item = evt.item;
                const newStatus = evt.to.dataset.status;
                const taskId = item.dataset.id;

                if (newStatus && taskId) {
                    fetch('update_task_status.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            task_id: taskId,
                            new_status: newStatus
                        }),
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (!data.success) {
                            console.error('Failed to update task status:', data.message);
                            // Optionally, move the item back to its original column
                            evt.from.appendChild(item);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        evt.from.appendChild(item);
                    });
                }
            }
        });
    });
});