@extends('layouts.app')

@section('content')
<div class="page-content row">
    <!-- Page header -->
    <div class="page-header">
        <div class="page-title">
            <h3> {{ $pageTitle }}
                <small>{{ $pageNote }}</small>
            </h3>
        </div>

        <ul class="breadcrumb">
            <li><a href="{{ URL::to('dashboard') }}"> Dashboard </a></li>
            <li class="active">{{ $pageTitle }}</li>
        </ul>

    </div>


    <div class="page-content-wrapper m-t">
        <div id="tree-container">
            <ul>
                @foreach($categories as $node)
                    {!!$helper->renderNode($node)!!}
                @endforeach
            </ul>
        </div>
        {!! Form::open(array('url'=>'categories/updateattr', 'class'=>'form-horizontal attrForm','parsley-validate'=>'','novalidate'=>' ', 'style'=>'display:none;')) !!}
            {!! Form::hidden('id','') !!}
            @foreach($attributes as $attribute)
                {!! $helper->eavQuentAttributeForm($attribute->type, $attribute->label, $attribute->name) !!}
            @endforeach
            <div class="col-md-6 col-md-offset-4">
                <button type="submit" name="submit" class="btn btn-primary btn-sm" ><i class="fa  fa-save "></i> {{ Lang::get('core.sb_save') }}</button>
            </div>
        {!! Form::close() !!}
</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/jstree.min.js"></script>
<script>
$(document).ready(function () {
$(function() {

// Stores the array of objects containing node ids, names, and boundaries
var treeData = [];

// Used to temporarily store references to a new node.
// Doing so allows us to update the node with an id once we have
// looped through all other nodes and determined an appropirate id.
var createdNode = null;
var createdNodeData = null;
var highestId = 0;

// Primary recursive function for determining and saving boundaries
var getBoundaries = function(jstreeData, node, left, givenParentId, depth) {

    // Storage so that we don't have to check our id twice
    var id = null;

    // jsTree's topmost node will enter this function
    // We don't want to track it, so this lets us exclude it
    var isActiveNode = !!(node.li_attr && node.li_attr.hasOwnProperty('data-id'));

    if (isActiveNode) {

        // We'll need this later when checking children
        id = node.li_attr['data-id'];

        treeData.push({
            'id': id,
            'name': node.text,
            'lft': left,
            // children_d is a deep list of children. In other words, it not
            // only contains children, but children of children, children of
            // those children, and so on. As such we can determine right away
            // just how many boundaries are below us, and calculate accordingly.
            'rgt': left + (node.children_d.length * 2) + 1,
            // If this is a topmost node, it will not have a parent.
            // In this case, use our own id.
            'parent_id': givenParentId !== null ? givenParentId : null,
            'depth': depth,
        });

        // We'll want to know the highest current id if we're creating a new node
        highestId = Math.max(highestId, parseInt(node.li_attr['data-id']));

        // A brand new node will not yet have a data-id, so it
        // will fail the above isActiveNode check. However, we
        // will have saved a reference to it as createdNode.
    } else if (node === createdNode) {

        // We can create our object for a new node right away, as objects
        // in JavaScript are passed by reference. Thus, both createdNodeData
        // and treeData[<index>] will reference the same object in memory.
        createdNodeData = {
            'id': null,
            'name': node.text,
            'lft': left,
            'rgt': left + (node.children_d.length * 2) + 1,
            'parent_id': givenParentId,
            'depth': depth,
        }
        treeData.push(createdNodeData);

        // Flag our new node as active so we calculate boundaries correctly.
        isActiveNode = true;
    }

    // We still need to track boundaries from chidren as we need
    // it to be able to determine the left boundary of each child.
    var childBoundaries = 0;
    var children = node.children;
    var childrenCount = children.length;

    for (var i = 0; i < childrenCount; i++) {
        // getBoundaries will return the number of boundaries
        // each child contains (including its own if applicable).
        childBoundaries += getBoundaries(
                jstreeData,
                jstreeData[children[i]],
                // The left side of the next child can be calculated
                // as it's parent's left, plus the boundaries
                // contained in all children before it, plus one.
                left + childBoundaries + 1,
                id,
                depth + 1
        );
    }

    if (isActiveNode) {
        // If this node is active, be sure to count our own boundaries as well.
        childBoundaries += 2;
    }

    // Return the total number of boundaries this node contains.
    return childBoundaries;
};

// Recalculates treeData any time there is a change to its structure.
var updateTreeData = function (data) {

    // If we've created a new node, save a reference to it for use later.
    if (data.node && data.node.li_attr && !data.node.li_attr.hasOwnProperty('data-id')) {
        createdNode = data.node;
    }

    // Clear out our old data.
    highestId = 0;
    treeData = [];

    // data.instance should always represent the current state of jstree.
    var jstreeData = data.instance._model.data;

    // Search for the top most node. jstree identifies
    // this internally by setting its id to '#'.
    for (var node in jstreeData) {
        if (jstreeData.hasOwnProperty(node) && jstreeData[node].id === '#') {
            getBoundaries(jstreeData, jstreeData[node], 0, null, -1);

            // No need to finish the for loop if we've found the node we want.
            break;
        }
    }

    // If we've created a new node, getBoundaries will have saved a reference
    // to its information. Because JavaScript objects are passed by reference,
    // we can manipulate their data from these easy-to-access variables
    // instead of needing to relocate them on the parent object.
    if (createdNodeData) {

        // Be sure to cast our new id as a string for consistency.
        var newId = '' + (highestId + 1);
        createdNodeData.id = newId;
        createdNode.li_attr['data-id'] = newId;

        // Release our references now that we no longer need them.
        createdNode = null;
        createdNodeData = null;
    }

    // While updateTreeData does return treeData for convience,
    // it can also just as easilly be referenced by the treeData
    // variable itself, as the variable exists on a higher scope.
    return treeData;
};

// Initialize our tree by adding handlers for relevant jsTree events,
// then finally call jstree on the element itself to get things going.
/*$(document).on("dnd_stop.vakata", function(e, data) {
    console.log(data);
});*/
    function getModel(parent,id){
        $('form.attrForm').show();
        if(parent === '#'){
            $('form.attrForm').hide();
        }
        $.ajax({
            type: "POST",
            data: {id:id},
            url: '/categories/findmodel',
            success:function(datad){
                console.log(datad);
                $.each(datad,function(i,obj){
                    $('form.attrForm').find('.form-control.'+i).val(obj);
                });
            },
            error:function(jqXHR, textStatus, errorThrown){
                console.log({error:1, jqXHR:jqXHR,textStatus:textStatus,errorThrown:errorThrown});
            }
        });
        $('form.attrForm').find('input[name="id"]').val(id);
    }
$('#tree-container')
        .on("create_node.jstree", function(e, data) {
            updateTreeData(data);
            ajaxRequest(JSON.stringify(treeData));
        })
        .on("rename_node.jstree", function(e, data) {
            updateTreeData(data);
            ajaxRequest(JSON.stringify(treeData));
            setTimeout(function(){
                getModel(data.node.parent,data.node.li_attr["data-id"]);
            }, 500);
        })
        .on("move_node.jstree", function(e, data) {
            updateTreeData(data);
            ajaxRequest(JSON.stringify(treeData));
        })
        .on("delete_node.jstree", function(e, data) {
            updateTreeData(data);
            ajaxRequest(JSON.stringify(treeData));
        })
        .on("activate_node.jstree", function(e,data){
            getModel(data.node.parent,data.node.li_attr["data-id"]);
            /*$('form.attrForm').show();
            console.log(data);
            var thisCategory = data.node.li_attr["data-id"];
            if(data.node.parent === '#'){
                $('form.attrForm').hide();
            }
            $.ajax({
                type: "POST",
                data: {id:thisCategory},
                url: '/categories/findmodel',
                success:function(datad){
                    $.each(datad,function(i,obj){
                        $('form.attrForm').find('.form-control.'+i).val(obj);
                    });
                },
                error:function(jqXHR, textStatus, errorThrown){
                    console.log({error:1, jqXHR:jqXHR,textStatus:textStatus,errorThrown:errorThrown});
                }
            });
            $('form.attrForm').find('input[name="id"]').val(thisCategory);*/
        })
        .jstree({
            "core" : {
                "check_callback" : true, // enable all modifications
            },
            "plugins" : [
                "contextmenu",
                "dnd",
                "state",
                "wholerow",
                "types"
            ],
            "contextmenu": {
                "items": function ($node) {
                    var tree = $('#tree-container').jstree(true);
                    return {
                        "Rename": {
                            "label": "Rename",
                            "action": function (obj) {
                                tree.edit($node);
                            }
                        },
                        "Create": {
                            "label": "Create",
                            "action": function (obj) {
                                $node = tree.create_node($node);
                                tree.edit($node);
                            }
                        },
                        "Delete": {
                            "label": "Delete",
                            "action": function (obj) {
                                $node = tree.delete_node($node);
                                tree.edit($node);
                            }
                        }
                    };
                }
            },
            "types" : {
                "#" : {
                    "max_children" : 1
                }
            },
        });

});
function ajaxRequest(data){
$.ajax({
    type: "POST",
    data: {cat:data},
    url: '/categories/update',
    success:function(datad){
        console.log(datad);
    },
    error:function(jqXHR, textStatus, errorThrown){
        console.log({error:1, jqXHR:jqXHR,textStatus:textStatus,errorThrown:errorThrown});
    }
});
};
$('.do-quick-search').click(function () {
$('#SximoTable').attr('action', '{{ URL::to("categories/multisearch")}}');
$('#SximoTable').submit();
});

});
</script>		
@stop