@extends('layouts.admin') 
@section('content-title')
	{{ __('data.DATA') }}
@endsection
@section('content-breadcrumbs')
	{{ Breadcrumbs::render('admin.data.main')}}
@endsection
@section('css')
	<link href="/assets/plugins/jstree/style.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		.btn-tree{
			border-radius: 50%;
			font-size: 10px;
			padding: 3px 5px;
		}
		.btns{
			display: none;
		}
		li:hover > span > .btns{
			display: inline-block;
		}
	</style>
@endsection
@section('content')
	<div class="card mb-3">
		<div class="card-header">
			<h3 class="root"><i class="fa fa-folder-open-o"></i> {{ __('data.DATA') }}</h3>
		</div>
			
		<div class="card-body">
											
			
			
			<p style="margin-bottom: 0rem;" ><u><b id="rootcat" style="cursor: pointer;" data-id="{{$mainCat->id}}">{{$mainCat->libelle}}</b></u></p>
			<div id="simpleTree">
                <ul>
                    @foreach($categories as $category)
		                <li id="{{$category->id}}" type="{{$category->type}}" entity_id="{{$category->entity_id}}" data-jstree='{"opened":true, "icon":"{{Helper::treeIcons($category->type)}}"}'>
		                    {{ $category->libelle }}
		                    @if(count($category->childs))
		                        @include('admin.directory.data.childs',['childs' => $category->childs])
		                    @endif
		                </li>
		            @endforeach
                </ul>
            </div>			
		</div>														
	</div><!-- end card-->	
	<div class="modal fade custom-modal" id="addcategory" tabindex="-1" role="dialog" aria-labelledby="addcategory" aria-hidden="true">
	  <div class="modal-dialog" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h5 class="modal-title" id="exampleModalLabel2">{{__('data.New Category')}}</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			  <span aria-hidden="true">&times;</span>
			</button>
		  </div>
			{!!Form::open()->locale('data')->post()->route('admin.data.new.category')->inlineForm()!!}
			  <div class="modal-body">
			  	<div class="row">
				{!!Form::hidden('parent_id',$mainCat->libelle??null)->attrs(['class' => 'parent_id'])!!}
				{!!Form::text('libelle', 'Libelle')->placeholder(__('data.Category name ...'))->attrs(['class' => 'col-md-8'])!!}
				{!!Form::submit('Save')->id('my-btn')->attrs(['class' => 'col-md-3'])!!}
			  	</div>
			  </div>
			{!!Form::close()!!}
		</div>
	  </div>
	</div>				
@endsection
@section('js')

	<script src="/assets/plugins/jstree/jstree.min.js"></script>
	<script type="text/javascript">
		$( document ).ready(function() {
		function customMenu(node)
		{
			var items = {
				"add": {
					"label": '<i class="fa fa-plus"></i> Ajouter',
					"submenu": {
						"addcategory": {
							"label": '<i class="fa fa-external-link"></i> Sous-categorie',
							"action": function () {
								$('#addcategory').modal("show")
								$('.parent_id').val($(node).attr('id'));
								// console.log($(node).attr('id'));
								// console.log($(node).attr('parent'));
								// console.log($(node).attr('li_attr'));
								// var li_attrs = $(node).attr('li_attr');
								// console.log(li_attrs.cc);
								// window.location.href = '{{route('admin.data.new.entity',['id'=>null])}}/'+$(node).attr('id');

							}
						},
						"addentity" : {
							"label": '<i class="fa fa-building"></i> Entité',
							"action": function (obj) {
								var parentID = $(node).attr('id');
								// var li_attrs = $(node).attr('li_attr');
								// if(li_attrs.type == 'entity')
								// 	parentID = li_attrs.entity_id;
								window.location.href = '{{route('admin.data.new.entity',['id'=>null])}}/'+parentID;
							}
						},
						"addfunctionary": {
							"label": '<i class="fa fa-user"></i> Personne',
							"action": function (obj) {
								var parentID = $(node).attr('id');
								var li_attrs = $(node).attr('li_attr');
								if(li_attrs.type == 'entity'){
									parentID = li_attrs.entity_id;
									window.location.href = '{{route('admin.data.new.person',['entity_id'=>null])}}/'+parentID;
								}
							}
						}
					}
				},
				"updatecategorie": {
					"label": '<i class="fa fa-pencil"></i> Modifier',
					"action": function (obj) {
						
					}
				},
				"deletecategory": {
					"label": '<i class="fa fa-trash" style="color:#9c1e1e"></i> <span style="color:#9c1e1e">Supprimer</span>',
					"action": function (obj) {
						
					}
				}
			}
			var li_attrs = $(node).attr('li_attr');
			switch (li_attrs.type) {
			    case "category":
			        delete items.add.submenu.addfunctionary;
			        break;
			    case "entity":
			        break;
			    case "person":
			        delete items.add;
			        break;
			}
			return items;
		}

		$("#simpleTree").jstree({
			"core" : {
				"multiple" : false,
				"animation" : 0
			},
            "plugins" : [ "themes", "html_data", "ui", "crrm", "contextmenu","hotkeys" ] ,
			"multiple": false,
			"multiple_selection": false,
            "contextmenu": {
                "items": customMenu
            }
        });
	    $('#rootcat').on("click", function () {
	    	$('#addcategory').modal("show")
			$('.parent_id').val($(this).data('id'));
	    });

		});
	</script>
@endsection