<link href="{{ asset('/assets/js/plugins/jstree/themes/default/style.min.css') }}" rel="stylesheet">
<link href="{{ asset('/assets/js/plugins/jstree/themes/default-dark/style.min.css') }}" rel="stylesheet">
<script src="{{ asset('/assets/js/plugins/jstree/jstree.min.js') }}" async></script>
<script type="text/javascript">
    addressbook = {
        target : null,
        tree : null,
        selected : null,
        open : function(id){
            removeDataTable();
            // console.log($('.txt-addressbook')[2].getElementsByTagName("option")[0].text);

            var dataLen = $('.txt-addressbook')[2].getElementsByTagName("option").length;
            for (i = 0; i < dataLen ; i++)
            {
                    var text =  $('.txt-addressbook')[2].options[i].text;
                    var idnode  = $('.txt-addressbook')[2].options[i].value;
            }

            console.log($('.btn-addressbook'));
            // console.log($('.btn-addressbook')[0].parentNode.querySelector('#addressbook-selected').);


            $('#modal-addressbook').modal('show');
            /**************************************** Init ****************************************/
            addressbook.target = $("#" + id);
            addressbook.tree = $('#tree-addressbook');
            addressbook.selected = $('#addressbook-selected');

            /**************************************** Tree Structure ****************************************/

            addressbook.tree
                .on('changed.jstree', function (e, data) {
                    var node = data.node;
                    if(!node.children.length){
                        addressbook.add({id : node.id, text : node.text});
                    }
                })
                .jstree({core : {data : {url: "/addressbook/childnode",
                            'data' : function (node) {
                                return { 'id' : node.id };
                            }

                        }}
                });


            /**************************************** Tree Selected ****************************************/

            var dataSelected = [];
            addressbook.selected.jstree({'core' : {'data' : 'dataSelected', 'check_callback' : true},
                "plugins" : [ "dnd","contextmenu"]});

            var select = addressbook.get();
            for(var i in select){
                $('#addressbook-selected').jstree().delete_node([select[i]]);
                $('#addressbook-selected').jstree("refresh");
            }
        },


        add : function(node){
            console.log(node);
            var selected = addressbook.get();
            var doit = true;
            for(var i in selected){if(selected[i].id === node.id){doit = false}}
            if(doit){addressbook.selected.jstree('create_node', '#', node, 'last')}
        },

        get : function(){
            return addressbook.selected.jstree()._model.data;
        },

        remove : function(){
            var select = addressbook.get();
            for(var i in select){
                $('#addressbook-selected').jstree().delete_node([select[i]]);
                $('#addressbook-selected').jstree("refresh");
            }
        },

        save : function(){
            addressbook.target.children().remove();
            var selected = addressbook.get();

            for(var i in selected){
                if(selected[i].id !== "#"){
                    addressbook.target.append("<option value='" + selected[i].id + "' selected>" + selected[i].text + "</option>");
                }
            }

            $('#modal-addressbook').modal('hide');
        }
    };


    // var node = {
    //  "id": "7",
    //  "name": "GM/Muhammad Irfan"
    // };
    window.onload = function(){
        $('#btn-search').click(function () {
            // displayLoader();
            var name = $('#search-address').val();
            $.ajax({
                type: "GET",
                url: "/addressbook/GetData",
                data: {
                    'data': name
                },
                success: function (response) {

                    $('#table-search tbody').empty();
                    var tb = document.getElementById('table-search').getElementsByTagName('tbody')[0];
                    var arr = tb.getElementsByTagName("tr");

                    for(i = 0; i<response['mess'].length; i++)
                    {
                        $('#table-search tbody').append(`<tr id="${response['idOrg'][i]}" class="selected"><td>${response['mess'][i]}</td></tr>`);
                        arr[i].addEventListener('click', function () {
                            // console.log($(this).attr('id'));
                            // console.log(this.getElementsByTagName("td")[0].innerHTML);
                            addNode($(this).attr('id'), this.getElementsByTagName("td")[0].innerHTML);
                        });


                    }
                }

            })
        });



        $("#search-address").on('keydown', function (e) {
            if(e.keyCode == 8){
                $('#table-search tbody').empty();
            }
        })
    };

    function addNode(id, name) {
        var node = {
            'id': id,
            'text': name
        };
        addressbook.add(node)
    }


    function removeDataTable() {
        $('#search-address').val("");
        $('#table-search tbody').empty();
        $("#JSTreeRes").text("Find Employee...");
    }

    // function displayLoader() {
    //  $('#divLoading').css("visibility", "visible");
    // }
    //
    // function hideLoader() {
    //  $('#divLoading').css("visibility", "hidden");
    // }
</script>

<div id="modal-addressbook" class="modal fade addressbook" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content modal-addressbook">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Addressbook</h4>
            </div>
            <div class="modal-body">
                <div class="tabs-container" style="width: 400px;">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a class="nav-link active" data-toggle="tab" href="#addressbook-tab-1">Organization Structure</a></li>
                        <li><a class="nav-link" data-toggle="tab" href="#addressbook-tab-2">Employee</a></li>
                    </ul>
                    <div class="tab-content" >
                        <div role="tabpanel" id="addressbook-tab-1" class="tab-pane active" >
                            <div class="panel-body addressbook-content">
                                <div id="tree-addressbook"></div>
                            </div>
                        </div>
                        <div role="tabpanel" id="addressbook-tab-2" class="tab-pane">
                            <div class="panel-body addressbook-content">
                                <div class="form-inline">
                                    <label>Cari User</label>
                                    <input type="text" class="form-control" name="search-address" id="search-address" placeholder="Search..">
                                    <button class="btn btn-primary glyphicon glyphicon-search" id="btn-search" type="button"></button>
                                </div>
                                <table class="table table-hover" id="table-search">
                                    <thead>
                                    <tr>
                                        <th>Name</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbodyid">
                                    <tr>
                                        <td id="JSTreeRes"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="addressbook-selected" style="width: 350px;">
                    <h4>Selected</h4>
                    <div id="addressbook-selected"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="addressbook.remove()">Hapus</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="addressbook.save()">OK</button>
            </div>
        </div>
    </div>
    {#  <div id="divLoading" class="divLoading" style="visibility:hidden">#}
    {#      <img src="{{ asset('assets/font-awesome/load-spin.gif') }}">#}
    {#  </div>#}
</div>