<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">
    var arrFull = [];
    var arrs = [];

    function removeAllElements(array, elem) {
        var index = array.indexOf(elem);
        while (index > -1) {
            array.splice(index, 1);
            index = array.indexOf(elem);
        }
    }
    addressbook = {
        target : null,
        tree : null,
        selected : null,
        open : function(id){
            removeDataTable();
            $('#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");
            }

            var datleng = $(this.target)[0].getElementsByTagName("option").length;

            for (i = 0; i < datleng; i++)
            {
                var names = $(this.target)[0].getElementsByTagName("option")[i].text;
                var ids = $(this.target)[0].getElementsByTagName("option")[i].value;

                var obj = {
                    'id': ids,
                    'text': names
                };
                addressbook.add(obj);
            }
        },


        add : function(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);
                arrFull.push([node.id, node.text]);
            }
        },

        get : function(){
           //  var data = addressbook.selected.jstree()._model.data;
           //  $.each(data, function () {
           //     arrFull.push(this.id);
           //  });
           //
           //  arrs.push(arrFull[0]);
           //  arrFull.splice(0, arrFull.length);
           // console.log(arrs);

            // var dt = addressbook.selected.jstree()._model.data;
            // arrFull = [];
            //
            // for(var i in dt)
            // {
            //     arrFull.push(i);
            //     i = [];
            // }



            // arrs.push(arrFull[0]);
            // removeAllElements(arrFull, '#');
            // console.log(arrFull);


            return addressbook.selected.jstree()._model.data;
        },
        remove : function(){
            arrFull = [];
            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();

            for (var i = 0; i < arrFull.length; i++)
            {
                    addressbook.target.append("<option value='" + arrFull[i][0] + "' selected>" + arrFull[i][1] + "</option>");
            }

            $('#modal-addressbook').modal('hide');
            arrFull = [];
        }
    };

    window.onload = function(){
        $('#btn-search').click(function () {
            displayLoader();
            var name = $('#search-address').val().toLowerCase();
            $.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);
                        });
                    }
                    hideLoader();
                }

            })
        });


        $("#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 m-l-xl" name="search-address" id="search-address" placeholder="Ketik Kata Kunci..." autocomplete="off">
                                    <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" style="margin-bottom: 5px">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="addressbook.save()" style="margin-bottom: 5px">OK</button>
            </div>
        </div>
    </div>
      <div id="divLoading" class="divLoading" style="visibility:hidden">
          <img src="{{ asset('assets/font-awesome/load-spin.gif') }}">
      </div>
</div>