document.getElementById("selection").addEventListener("change", function (e) {
    var feature1 = document.getElementById("feature1").value
    var feature2 = document.getElementById("feature2").value
    var label = document.getElementById("label").value
    var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
    $("#stats_container").remove()
    $('#loader_stats').show()   
    $.ajax({
        method: 'POST',
        url: '',
        headers: { 'X-CSRFToken': csrftoken, },
        data: { 'action': "stat", 'feature1': feature1, 'feature2': feature2, 'label': label },
        success: function (ret) {
            $('#loader_stats').hide()  
            var ret = JSON.parse(ret)
            var fig = ret["fig"]
            var iDiv = document.createElement('div');
            iDiv.id = 'stats_container';
            iDiv.insertAdjacentHTML('beforeend', fig);
            $("#stats_div").append(iDiv);

        },
        error: function (ret) {
        }
    });
});

document.getElementById("selection_cached").addEventListener("change", function (e) {

    var feature1 = document.getElementById("feature1_cached").value
    var feature2 = document.getElementById("feature2_cached").value
    var label = document.getElementById("label_cached").value
    var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
    $("#stats_container_cached").html("")
    $('#loader_stats_cached').show()
    $.ajax({
        method: 'POST',
        url: '',
        headers: { 'X-CSRFToken': csrftoken, },
        data: { 'action': "stat", 'feature1': feature1, 'feature2': feature2, 'label': label },
        success: function (ret) {
            $('#loader_stats_cached').hide()  
            var ret = JSON.parse(ret)
            var fig = ret["fig"]
            var iDiv = document.createElement('div');
            iDiv.id = 'stats_container_cached';
            iDiv.insertAdjacentHTML('beforeend', fig);
            $("#stats_container_cached").html(fig)
            // $("#stats_container_cached").append(iDiv);
            
        },
        error: function (ret) {
        }
    });
});

// document.getElementById("ts_selection").addEventListener("change", function (e) {
//     var ts_example_id = document.getElementById("ts_example").value
//     var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();

//     $("#ts_container").remove()
//     $("#loader").show()
//     $("#ts_example").hide()
//     $.ajax({
//         method: 'POST',
//         url: '',
//         headers: { 'X-CSRFToken': csrftoken, },
//         data: { 'action': "stat", 'feature1': ts_example_id },
//         success: function (ret) {

//             $("#ts_example").show()

//             $("#loader").hide()
//             var ret = JSON.parse(ret)
//             var fig = ret["fig"]

//             var ts = create_div("ts_container", "col-md d-flex justify-content-center")
//             ts.insertAdjacentHTML('beforeend', fig);
//             $("#ts_stats").append(ts);

//         },
//         error: function (ret) {
//         }
//     });

// });