{% extends 'base.html' %}

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

{% block content %}

<h4 class="display-titre" style="background-color: rgb(255, 255, 255)">Select a {% for value in data_type_map %}{{value}}{% if not forloop.last %} or {% endif %}{% endfor %}</h4>

<form action={{function}} method="post">
    {% csrf_token %}
    {% if unlinked_objects|length < 1 %}
    No {{data_type}} available for the mapping of this type of content
    <br>
    <button type="button" class="btn btn-secondary" onClick="window.history.go(-1);"> Back </button>
    {% else %}
    <div class="container">
        {% if structure == "list" %}

        <table id="table" data-page-length='25' class="table table-striped table-bordered ">
            <thead class="thead-dark">
                <tr>
                    <th></th>
                    <th>{{data_type|capfirst}} name</th>
                    <th>Object type</th>
                    <th>Tool name</th>
                </tr>
            </thead>
            <tbody>
                {% for item in unlinked_objects  %}
                <tr>
                    <td><input type="radio" name="object_name" value="{{item.id}}" required="" id="id_object_name_1">
                    </td>
                    <td><i class=""></i>{{item.name}}</td>
                    <td>{{item.inner_type}}</td>
                    <td>{{tool_name}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>


        {% 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="object_name" value="{{item.id}}" required=""
                                    id="id_object_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="object_name" id="object_name" value="" />

        {% endif %}
        {% endif %}

    </div>

    <br>
    <br>

                <script>
                    $(document).ready(function () {
                        console.log(localStorage);
                        //If shown.bs.collapse add the unique id to local storage
                        $(".collapse").on("shown.bs.collapse", function () {
                            localStorage.setItem("coll_" + this.id, true);
                        });
                        //If hidden.bs.collaspe remove the unique id from local storage
                        $(".collapse").on("hidden.bs.collapse", function () {
                            localStorage.removeItem("coll_" + this.id);
                        });
                        //If the key exists and is set to true, show the collapsed, otherwise hide
                        $(".collapse").each(function () {
                            if (localStorage.getItem("coll_" + this.id) == "true") {
                                $(this).collapse("show");
                            } else {
                                $(this).collapse("hide");
                            }
                        });
                    });
                </script>
                <button type="button" class="btn btn-secondary" onClick="window.history.go(-1);"> Back </button>
            
                <input type="submit" class="btn btn-primary" value="Next">
            {% endif %}
        
        </form>
        
        <script>
            $('#jstree').jstree({
                "checkbox": {
                    "three_state": false
                },
                "core": {
                    "check_callback": true,
                    "data": {{json_tree|treereplace|safe}},
                    multiple: false,
                },
                "plugins": ["html_data", "themes", "ui", "checkbox"]
            });
        
            $('#jstree').on("select_node.jstree deselect_node.jstree", function (e, data) {
                var selectedData = new Array();
                var selectedIndexes;
                var selected_valid = "";
                selectedIndexes = $("#jstree").jstree("get_checked", true);
                jQuery.each(selectedIndexes, function (index, value) {
                    if (selectedIndexes[index].parent !== "#") {
                        selected_valid = selectedIndexes[index].id.replace(new RegExp("x2F", "g"), '/');
                    }
                });
                document.getElementById('object_name').value = selected_valid;
                //alert(selected_valid)
            });
        
            $('#jstree').on("select_node.jstree", function (e, data) {
                var lastNode = data.node.id;
                var lastNode = lastNode.replace(new RegExp("/", "g"), 'x2F');
                $('#' + lastNode).addClass("jstree-loading").attr('aria-busy', true);
                var lastNode = lastNode.replace(new RegExp("x2F", "g"), '/');
                console.log(lastNode)
                $.ajax({
                    url: '/tool/' + {{tool | safe}} + '/dataset/' + lastNode,
                    type: 'GET',
                    success: function (data) {
                        // alert(data)
                        var myObj = $.parseJSON(data);
                        myObj.forEach(function (ele) {
                            ele.id = ele.id.replace(new RegExp("/", "g"), 'x2F');
                            if ($('#jstree').jstree(true).get_node(ele)) {} else {
                                $('#jstree').jstree().create_node(lastNode, ele, "last");
                            }
                            // open node
                            console.log(lastNode)
                            $('#jstree').jstree().open_node(lastNode);
                        });

                    }
                });
                
                var lastNode = lastNode.replace(new RegExp("/", "g"), 'x2F');
                // unset loading ....
                $('#' + lastNode).removeClass("jstree-loading").attr('aria-busy', false);
            });

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

            $('#jstree2').on("select_node.jstree deselect_node.jstree", function (e, data) {
                var selectedData = new Array();
                var selectedIndexes;
                selectedIndexes = $("#jstree2").jstree("get_checked", true);
                
                jQuery.each(selectedIndexes, function (index, value) {
                    selectedIndexes[index].id = selectedIndexes[index].id.replace(new RegExp("/", "g"), 'x2F');
                    if (selectedIndexes[index].parent !== "#") {
                        selectedData.push(selectedIndexes[index].id.replace(new RegExp(
                            "/", "g"), 'x2F'));
                    }
                });
                {% comment %} console.log(document.getElementById('object_name').value) {% endcomment %}
                document.getElementById('object_name').value = JSON.stringify(selectedData);
            });
        
            $('#jstree2').on("select_node.jstree", function (e, data) {
                var lastNode = data.node.id;
                var result = lastNode.replace(new RegExp("x2F", "g"), '/');
                document.getElementById('object_name').value = result;
                var lastNode = lastNode.replace(new RegExp("/", "g"), 'x2F');
                $('#' + lastNode).addClass("jstree-loading").attr('aria-busy', true);
                var lastNode = lastNode.replace(new RegExp("x2F", "g"), '/');
                
                $.ajax({
                    url: '/tool/' + {{tool | safe}} + '/assay/' + lastNode,
                    type: 'GET',
                    success: function (data) {
                        // alert(data)
                        var myObj = $.parseJSON(data);
                        myObj.forEach(function (ele) {
                            console.log(ele)
                            ele.id = ele.id.replace(new RegExp("/", "g"), 'x2F');
                            if ($('#jstree2').jstree(true).get_node(ele)) {} else {
                                $('#jstree2').jstree().create_node(lastNode, ele, "last");
                                
                            }
                        $('#jstree2').jstree().open_node(lastNode);
                        });
                    }
                });
                        // open node
                        console.log(lastNode)
                        var lastNode = lastNode.replace(new RegExp("/", "g"), 'x2F');
                        // unset loading ....
                        $('#' + lastNode).removeClass("jstree-loading").attr('aria-busy', false);
            });
        </script>

<br>

{% endblock %}