function updateParent(notesArr) {
    let parent = document.getElementById('sortable-wrapper');
    parent.innerHTML = '';
    for (let elem of notesArr) {
        parent.appendChild(elem);
    }
}

function convertToArray() {
    var notes = document.getElementsByClassName("sortable");
    var notesArr = [];
    for (const node of notes) {
        notesArr.push(node);
    }
    return notesArr;
}

function sortByTitle() {
    var sort_by_title = function (a, b) {
        let x = a.getElementsByClassName('card-title')[0];
        let y = b.getElementsByClassName('card-title')[0];
        return x.innerHTML.toLowerCase().localeCompare(y.innerHTML.toLowerCase());
    };

    var notesArr = convertToArray();
    notesArr.sort(sort_by_title);
    updateParent(notesArr);
}

function sortByDate() {
    console.log('Sort Date');
    var sort_by_date = function (a, b) {
        a = a.getElementsByClassName('date')[0];
        b = b.getElementsByClassName('date')[0];
        if (a && b) {
            a = a.innerHTML.split(' ');
            let a_date = a[0].split('.');
            let a_time = a[1].split(':');
            b = b.innerHTML.split('\ ');
            let b_date = b[0].split('.');
            let b_time = b[1].split(':');
            let x = new Date(a_date[2], a_date[1], a_date[0], a_time[0], a_time[1]).getTime();
            let y = new Date(b_date[2], b_date[1], b_date[0], b_time[0], b_time[1]).getTime();
            if (x === y) {
                return 0;
            } else if (x > y) {
                return -1;
            } else {
                return 1;
            }
        } else {
            return 0;
        }

        // return x.innerHTML.toLowerCase().localeCompare(y.innerHTML.toLowerCase());
    };

    var notesArr = convertToArray();
    notesArr.sort(sort_by_date);
    updateParent(notesArr);
}