{% extends 'base.html' %}

{% load treereplace %}
{% load widget_tweaks %}

{% block content %}

<h4 class="" style="background-color: rgb(255, 255, 255)">Datasets not linked to {{investigation.name}}</h4>

<div class="container">
    <form action="datasets" method="post">
        {% csrf_token %}
        {% if structure == "list" %}
        <table id="table" data-page-length='25' class="table table-striped table-bordered ">
            <thead>
                <tr>
                    <th>Dataset Name</th>
                </tr>
            </thead>
            <tbody>

                {% for obj in form %}
                {% for data in obj %}
                <tr>
                    <td><i class="fa fa-database ic-w mr-1 image"></i>{{ data }}</td>
                </tr>

                {% empty %}
                <tr>
                    <td colspan="4">All datasets already linked</td>
                </tr>
                {% endfor %}
                {% endfor %}

            </tbody>
        </table>
        <button type="button" onclick="select_all()">Select All</button>
        <button type="button" onclick="deselect_all()">Deselect All</button>
        <br>

        {% elif structure == "tree" %}
        {% if data_type == "investigation" %}
        <div class="tree">
            <ul style="list-style-type: none;">
                {% for item in unlinked_objects %}
                <li>
                    <div class="row">
                        <div class="col-sm-6">
                            <h5><input type="radio" name="dataset_name" value="{{item.id}}" required=""
                                    id="id_dataset_name_1"> <a data-toggle="collapse" href="#{{item.name|cut:" " }}"
                                    aria-expanded="false"> <i class="fa fa-archive"></i>&nbsp;{{item.name}}</a>
                            </h5>
                        </div>
                    </div>
                </li>
                {% endfor %}
            </ul>

        </div>
        {% else %}
        {% if data_type == "dataset" %}
        <div id="jstree"></div>
        {% else %}
        <div id="jstree2"></div>
        {% endif %}
        <input type="hidden" name="dataset_name" id="dataset_name" value="" />

        {% endif %}
        {% endif %}
        <br>
        <button type="button" class="btn btn-secondary" onClick="window.history.go(-1);"> Back </button>
        <input type="submit" class="btn btn-primary" value="Link Dataset">
    </form>
    </br>
</div>

<script>
    function select_all() {
        $('input[type=checkbox]').prop('checked', true);
    }

    function deselect_all() {
        $('input[type=checkbox]').prop('checked', false);
    }
</script>

<script>
    $('#jstree').jstree({
        "checkbox": {
            "three_state": false
        },
        "core": {
            "check_callback": true,
            "data": {{ json_tree|treereplace|safe }},
            multiple: true,
        },
        "plugins": ["html_data", "themes", "ui", "checkbox"]
        
    });

    $('#jstree').on("select_node.jstree deselect_node.jstree", function (e, data) {
        console.log("----f1-----")
        var selectedData = new Array();
        var selectedIndexes;
        selectedIndexes = $("#jstree").jstree("get_checked", true);
        console.log(selectedIndexes)
        
        jQuery.each(selectedIndexes, function (index, value) {
            console.log(index)
            console.log(value)
            console.log(selectedIndexes[index])
            console.log(selectedIndexes[index].id)
            selectedIndexes[index].id = selectedIndexes[index].id.replace(new RegExp("/", "g"), 'x2F');
            console.log(value)
            console.log(selectedIndexes[index])
            if (selectedIndexes[index].parent !== "#") {
                console.log("test")
                selectedData.push(selectedIndexes[index].id.replace(new RegExp(
                    "x2F", "g"), '/'));
            }
        });
        console.log(selectedIndexes)
        console.log(document.getElementById('dataset_name').value)
        document.getElementById('dataset_name').value = JSON.stringify(selectedData);
        console.log(selectedData)
        console.log(document.getElementById('dataset_name').value)
        console.log("-------------")
    });

    $('#jstree').on("select_node.jstree", function (e, data) {
        console.log("----f2-----")
        console.log(jstree)
        var lastNode = data.node.id;
        console.log(lastNode)
        var lastNode = lastNode.replace(new RegExp("/", "g"), 'x2F');
        console.log(lastNode)
        $('#' + lastNode).addClass("jstree-loading").attr('aria-busy', true);
        console.log('/tool/' + {{tool | safe}} + '/dataset/' + lastNode)
        var lastNode = lastNode.replace(new RegExp("x2F", "g"), '/');
        $.ajax({
            url: '/tool/' + {{tool | safe}} + '/dataset/' + lastNode,
            type: 'GET',
            success: function (data) {
                console.log("ajax")
                console.log(data)
                var myObj = $.parseJSON(data);
                myObj.forEach(function (ele) {
                    console.log("ele")
                    console.log(ele)
                    ele.id = ele.id.replace(new RegExp("/", "g"), 'x2F');
                    ele.parent = ele.parent.replace(new RegExp("/", "g"), 'x2F');
                    console.log(ele)
                    if ($('#jstree').jstree(true)
                        .get_node(ele)
                    ) {} else {
                        $('#jstree').jstree()
                            .create_node(
                                lastNode,
                                ele,
                                "last"
                            );
                        // alert(lastNode)
                    }
                
                $('#jstree').jstree().open_node(lastNode);
                });
            }
        });
                // open node
                console.log("-_______________________------------__________________---------------____________________---------------------_")
                console.log(lastNode)
                var lastNode = lastNode.replace(new RegExp("/", "g"), 'x2F');
                
                // unset loading ....
                $('#' + lastNode).removeClass("jstree-loading").attr(
                    'aria-busy', false);
            
        
        console.log("-------------")
    });

    // $('#jstree').jstree("get_checked",null,true).click(function(){
    //       alert("ok")
    //         var result = $('#jstree').jstree('get_selected'); 
    //         document.getElementById('dataset_name').value = result;
    //       });
</script>
<script>
    $('#jstree2').jstree({
        "checkbox": {
            "three_state": false
        },
        "core": {
            "check_callback": true,
            "data": {{ json_tree|treereplace|safe }},
            multiple: true,
        },
        "plugins": ["html_data", "themes", "ui", "checkbox"]
    });

    $('#jstree2').on("select_node.jstree", function (e, data) {
        var lastNode = data.node.id;
        var result = lastNode.replace(new RegExp("x2F", "g"), '/');
        document.getElementById('dataset_name').value += result;
        $('#' + lastNode).addClass("jstree-loading").attr('aria-busy', true);
        $.ajax({
            url: '/tool/' + {{tool | safe}} + '/assay/' + lastNode,
            type: 'GET',
            success: function (data) {
                // alert(data)
                var myObj = $.parseJSON(data);
                myObj.forEach(function (ele) {
                    if ($('#jstree2').jstree(true).get_node(ele)) {} else {
                        $('#jstree2').jstree().create_node(lastNode, ele, "last");
                        // alert(lastNode)
                    }
                });
                // open node
                $('#jstree2').jstree().open_node(lastNode);
                // unset loading ....
                $('#' + lastNode).removeClass("jstree-loading").attr('aria-busy', false);
            }
        });
    });
</script>

{% endblock %}