@extends("main1")

@section("content")
<style>
    ul.jqtree-tree .jqtree-element
    {
      cursor: pointer;
      position: relative;
      display: flex;
      border: 1px solid;
    }

</style>
    <div data-ng-app="LeadApp" class="row">
        <div>
            Rearrange Objects Childs
        </div>
        <div id="tree1"></div>
        <div>
            <button class="btn btn-primary" onClick="saveObjects()" tabindex="0">
                <i class="fa fa-save"></i> Save Order
            </button>
        </div>
    </div>

<link rel="stylesheet" href="{{asset('assets/jqtree/jqtree.css')}}"> 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js"></script>
<script src="{{asset('assets/jqtree/tree.jquery.js')}}"></script>    

    <script>
    var id = ;
    var userID = ;
    var ObjectID = ;
    var apiURL = '';
    var index = 0;
    var data = [
        {
            label: 'node1',
            children: [
                { label: 'child1' },
                { label: 'child2' }
            ]
        },
        {
            label: 'node2',
            children: [
                { label: 'child3' }
            ]
        }
    ];
    
    function ObjectOrder (data,objectArray){
        for (let item of data) {
            //objectArray.push(item.id);
            objectArray[index++] = item.id;
            if(item.children){
                ObjectOrder(item.children,objectArray);
            }
        }
        return;
    }
    function saveObjects(){
        var objectOrder = JSON.parse($('#tree1').tree('toJson')); 
        var objectData = new Array();       
        for(let i = 0; i < objectOrder.length; i++) {
            objectData[index++] = objectOrder[i].id;
            ObjectOrder(objectOrder[i].children,objectData);
        }
        $.ajax({
            type: "POST",
            url: "/saveObjectsOrder",
            data: {objects:objectData.toString()},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                /*if (response.d == true) {
                    console.log(response.data);
                }*/
                alert("hi");
            },
            failure: function (response) {
                console.log(response.data);
            }
        });

    }
    function makeData(data){
        var temp =new Object();
        temp.label = data['name'];
        temp.id = data['id'];
        if(data['children']){
            var childs = new Array();
            for(let i = 0; i < data['children'].length; i++) {
                childs.push(makeData(data['children'][i]));
            }
            temp.children = childs;
        }
        return temp;
    }
    $(document).ready(function() {
        $.getJSON(
            apiURL+'/get_object_hierarchy/'+id+'/'+userID+'/'+ObjectID,
            function(data1) {

                data1 = makeData(data1);
                var data2 = new Array();
                data2.push(data1);
                console.log('data',data2);
                $('#tree1').tree({
                    data: data2,
                    dragAndDrop: true,
                    autoOpen: true,
                    selectable: true
                });

                $("div.jqtree-element:odd").css({
                    "background-color":"#999999",
                    "color":"#fff"});
            }
        );
        
    });
</script>
@endsection