function fetchOpenTasks() {
    var projectId = $('#projectId').text().trim();

    $.ajax({
        url: '/open_tasks_for_project/' + projectId + '/',
        method: 'GET',
        success: function (data) {
            // console.log('Success:', data);
            $('#epicRelatedTasksContainer').html(data);
            console.log('Updated Container:', $('#epicRelatedTasksContainer').html());
        },
        error: function (error) {
            console.error('Error fetching open tasks:', error);
        }
    });
}

// To load to display open tasks by default
$(document).ready(function () {
    fetchOpenTasks();
});

// Click event handler for the "All Open Tasks" link
$('.openTasks').on('click', function () {
    // Remove the selectedEpic class from all epic titles
    $('.epicTitle').removeClass('selectedEpic');
    $('.openTasks').removeClass('selectedEpic');

    // Add the selectedEpic class to the "All Open Tasks" link
    $(this).addClass('selectedEpic');

    fetchOpenTasks();
});

// Click event handler for the epic titles
$('.epicTitle').on('click', function () {
    // Remove the selectedEpic class from all epic titles
    $('.epicTitle').removeClass('selectedEpic');
    $('.openTasks').removeClass('selectedEpic');

    var epicId = $(this).data('epic-id');

    $(this).addClass('selectedEpic');

    $.ajax({
        url: '/get_tasks/' + epicId + '/',
        method: 'GET',
        success: function (data) {
            // console.log('Success:', data);
            $('#epicRelatedTasksContainer').html(data);
            console.log('Updated Container:', $('#epicRelatedTasksContainer').html());
        },
        error: function (error) {
            console.error('Error fetching tasks:', error);
        }
    });
});