<div class="card">
	<div class="card-header">
		<h3 class="card-title">
			<i class="fas fa-sort"></i>
			Gestion du menu
		</h3>
	</div>
	<div class="card-body">
		<div id="tree1" data-url="{{ route('Shop.Categories.getTree') }}"></div>
	</div>
</div>

@include('load.form.tree')

@push('js')
	<script>
		var position = '';
		var target_node = '';

		$(function() {

		    var $tree = $('#tree1').tree({
			  	dragAndDrop: true,
			  	onDragStop: handleMove,
			  	autoOpen: 0
			});


			$tree.on('tree.move', function(e) {
			    // e.preventDefault();

			    position = e.move_info.position;
			    target_node = e.move_info.target_node;

			    function getNewParentNode() {
			        if (position == 'inside') {
			            return target_node;
			        }
			        else {
			            // before or after
			            return target_node.parent;
			        }
			    }

			    var parent_node = getNewParentNode();
			    console.log("Parent node", parent_node);
			});

		});

		function handleMove(node, e) {
    		console.log(node);
    		node_id = node.id;
    		console.log(node_id);
    		console.log(position);
    		console.log(target_node);
    		target_node_id = target_node.id;

    		$.ajax({
  				method: "POST",
  				url: "{{ route('Admin.Shop.Categories.moveTree') }}",
  				data: { node_id: node.id, type: position, target_id: target_node.id }
			});
    		// console.log(e);
    		// console.log($('#tree1').tree('getTree'));
		}

	</script>
@endpush

