@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;
		}
		.small-table.table td, .small-table.table th{
			padding: 4px;
		}
		li:hover > span > .btns{
			display: inline-block;
		}
		.function-btns{
		    padding: .25rem .5rem;
			font-size: 14px;
		}
		.function-btns .fa{
            font-size: 14px;
            height: 11px;
            margin: 0;
            padding: 0;
            margin-right: 0px;
        }
	</style>
@endsection
@section('content')
	<div class="card mb-3">
		<div class="card-header">
			<h3 class="root"><i class="fa fa-database"></i> {{ __('data.DATA') }}</h3>
		</div>
		<div class="card-body">
			@if(session()->has('success'))
			<div class="alert alert-success alert-dismissible fade show" role="alert">
				{{ session()->get('success') }}
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			@endif
			@if(session()->has('error'))
			<div class="alert alert-danger alert-dismissible fade show" role="alert">
				{{ session()->get('error') }}
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			@endif
			<div id="simpleTree2">
            </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',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>
	<div class="modal fade custom-modal" id="editcategory" 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.edit.category')->inlineForm()!!}
			  <div class="modal-body">
			  	<div class="row">
				{!!Form::hidden('parent_id',null)->attrs(['class' => 'parent_id'])!!}
				{!!Form::text('libelle', 'Libelle')->placeholder(__('data.Category name ...'))->attrs(['class' => 'col-md-8 libelle'])!!}
				{!!Form::submit('Save')->id('my-btn')->attrs(['class' => 'col-md-3'])!!}
			  	</div>
			  </div>
			{!!Form::close()!!}
		</div>
	  </div>
	</div>				
@endsection
@section('js')
<!-- Master Modal  -->
<div class="modal fade" id="masterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  	<div class="modal-dialog" style="max-width: 100%">
  		<div class="modal-content" style="background-color: transparent;border: 0;">
  		<div class="modal-body">
   			<div id="contenu" style="margin:0px;"></div>
  		</div>
  		</div>
  	</div>
</div>
<div class="modal fade" id="childModalZ2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  	<div class="modal-dialog" style="max-width: 50%">
  		<div class="modal-content" style="background-color: transparent;border: 0;">
  		<div class="modal-body">
   			<div class="contenu" style="margin:0px;"></div>
  		</div>
  		</div>
  	</div>
</div>
<div class="modal fade" id="newperson" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  	<div class="modal-dialog" style="max-width: 50%">
  		<div class="modal-content" style="background-color: transparent;border: 0;">
  		<div class="modal-body">
   			<div class="contenu" style="margin:0px;">
   				<div class="card">
					<div class="card-header">
						<h3><i class="fa fa-user"></i> 
							{{ __('data.Edit Functionary') }}
						</h3>
					</div>
					<div class="card-body">
						{!!Form::open()->post()->multipart()!!}
						<input type="hidden" name="entity_id">
						<div class="form-group row">
							<div class="col-md-3"></div>
							<div class="col-md-1">
								<label for="functionary ">{{__('data.Person')}}</label>
							</div>
							<select class="form-control select2 col-md-4" id="functionary" name="functionary_id"> 
								<option value="new">{{__('data.New Functionary')}}</option>
							
							</select>
						</div>
						<div class="form-group row">
							<div class="col-md-3"></div>
							<div class="col-md-1">
								<label for="function" class="required-label">{{__('data.Function')}}</label>
							</div>
							<select class="form-control select2 col-md-4" id="function" name="function_id" required> 
								<option value="">{{__('data.Choose')}}</option>
							</select>
							<span class="required-label"></span>
						</div>
						<div class="form-group row">
							<div class="col-md-6 row">
								<label class="col-md-2 required-label">{!!(__('data.sexe'))!!} :</label>
								<div class="col-md-2">
								{!!Form::radio('sexe', __('data.Men'),'h', true)!!}
								</div>
								<div class="col-md-2">
								{!!Form::radio('sexe',(__('data.Woman')), 'f')!!}
								</div>
							</div>
							<div class="col-md-6">
								<input id="file_img" type="file" name="personal_image_url" onchange="previewFile()">
								<img src="" id="img" height="50"  alt="Image preview...">
							</div>
						</div>
						<div class="form-group row">
							<div class="col">
							{!!Form::text('nom',(__('data.last name').'<span class="required-label"></span>'))->placeholder(__('data.last name'))->attrs(['required'=>''])!!}
							</div>
							<div class="col">
							{!!Form::text('prenom', (__('data.first name').'<span class="required-label"></span>'))->placeholder(__('data.first name'))->attrs(['required'=>''])!!}
							</div>
						</div>
						<div class="form-group row">
							<div class="col">
							{!!Form::text('mail',(__('data.Email')))->placeholder(__('data.Email'))!!}
							</div>
							<div class="col">
							{!!Form::text('gsm', (__('data.GSM')))->placeholder(__('data.GSM'))!!}
							</div>
						</div>
						<div class="row">
							<div class="col">
							{!!Form::text('date_naissance',__('data.birth date'))->placeholder(__('data.birth date'))!!}
					 		</div>
					 		<div class="col">
							{!!Form::text('lieu_naissance',(__('data.place of birth')))->placeholder(__('data.place of birth'))!!}
							</div>
						</div>
						{!!Form::textarea('biographie',(__('data.biography')))->placeholder(__('data.biography'))!!}
						{!!Form::text('ap',(__('data.ap')))->placeholder(__('data.ap'))!!}
						<div class="row">
							<div class="col">
								<div class="slidecontainer">
								 <input type="range" min="1" max="6" name="risk" value="risk" class="slider" id="myRange">
								 <p>{{(__('data.value'))}}: <span id="demo"></span></p>
								 <script>
								var slider = document.getElementById("myRange");
								var output = document.getElementById("demo");
								output.innerHTML = slider.value;
								slider.oninput = function() {
								output.innerHTML = this.value;
								}
								</script>
								</div>
							</div>
							<div class="col">
							{!!Form::checkbox('fep', 'fep', true)!!}
							</div>
							<div class="col">
							{!!Form::checkbox('mep', 'mep', true)!!}
							</div>
							<div class="col">
							{!!Form::checkbox('epimg', 'epimg', true)!!}
							</div>
							<div class="col">
							</div>
							<div class="col">
							</div>
						</div>
						{!!Form::submit('save')->id('my-btn')!!}
						{!!Form::close()!!}
					</div>
				</div>
   			</div>
  		</div>
  		</div>
  	</div>
</div>
<!-- /Modal -->
<script src="/assets/plugins/jquery.cookie.js"></script>
<script src="/assets/plugins/jstree/jstree.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="/assets/plugins/select2/js/select2.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="fas fa-external-link-alt"></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);
							}
						},
						"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',['parent_id'=>null, 'rootCat'=>null])}}/'+parentID+'/{{$rootCat}}';
							}
						},
						"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, 'rootCat'=>null])}}/'+parentID+'/{{$rootCat}}';
								}
							}
						}
					}
				},
				"updatecategorie": {
					"label": '<i class="far fa-edit"></i> Modifier',
					"action": function (obj) {
						var parentID = $(node).attr('id');
						var li_attrs = $(node).attr('li_attr');
						switch (li_attrs.type) {
						    case "category":
								$('#editcategory').modal("show")
								$('.parent_id').val($(node).attr('id'));
								$('#editcategory .libelle').val($(node).attr('text').trim());
						        break;
						    case "entity":
						  		var categoryID = $(node).attr('id');
								entity_id = li_attrs.entity_id;
								$.ajax({
									url: '{{route('admin.data.edit.entity.ajax',['entity_id'=>null])}}/'+entity_id,
									dataType: "html",
									success: function (data) {
										$('#childModalZ2 .contenu').html(data);
										$('#childModalZ2').modal('show');
										$('.select3').select2({
					            			tags: true,
					        			});
									}
								});
								// parentID = li_attrs.entity_id;
								// window.location.href = '{{route('admin.data.edit.entity',['entity_id'=>null, 'category_id'=>null, 'rootCat'=>null])}}/'+parentID+'/'+categoryID+'/{{$rootCat}}';
						        break;
						    case "person":
						    	var entity_id = li_attrs.entity_id;
								var person_id = li_attrs.person_id;
								var node_text = $(node).text();
								console.log(node_text);
								console.log(node.text());
								console.log($("#simpleTree2").jstree("get_selected").text());
								$('#newperson').modal('show');
		//------------------------------------------------------------------------
								$('#functionary').select2("trigger", "select", {data: {id:person_id, text:node_text}});
								$('#entity_id').val(entity_id);
		//------------------------------------------------------------------------
						  //       parentID = li_attrs.entity_id;
						  //       personID = li_attrs.person_id;
								// window.location.href = '{{route('admin.data.edit.person',['entity_id'=>null, 'person_id'=>null, 'rootCat'=>null])}}/'+parentID+'/'+personID+'/{{$rootCat}}';
						        break;
						}
					}
				},
				"view": {
					"label": '<i class="fa fa-eye" ></i> Voir',
					"action": function (obj) {
						var parentID = $(node).attr('id');
						var li_attrs = $(node).attr('li_attr');
						switch (li_attrs.type) {
						    case "entity":
						    	entity_id = li_attrs.entity_id;
						    	// window.open("{{route('admin.data.get.entity',['entity_id'=>null])}}/"+entity_id, "popupWindow", "width=1400,height=600,scrollbars=yes");
								$.ajax({
									url: "{{route('admin.data.get.entity',['entity_id'=>null])}}/"+entity_id,
									dataType: "html",
									success: function (data) {
										$('#contenu').html(data);
										$('#masterModal').modal('show');
									}
								});
						        break;
						    case "person":
						        personID = li_attrs.person_id;
						        entityID = li_attrs.entity_id;
								window.open("{{route('admin.data.get.person',['peron_id'=>null, 'entity_id'=>null])}}/"+personID+'/'+entityID, "popupWindow2", "width=700,height=530,scrollbars=yes");
						        break;
						}
					}
				},
				"deletecategory": {
					"label": '<i class="fa fa-trash" style="color:#9c1e1e"></i> <span style="color:#9c1e1e">Supprimer</span>',
					"action": function (obj) {
						var parentID = $(node).attr('id');
						var li_attrs = $(node).attr('li_attr');
						switch (li_attrs.type) {
						    case "category":
						    	if (confirm("{{__('data.Do you really want to delete this category')}}")) {
									// window.location.href = '{{route('admin.data.destroy.category',['category_id'=>null])}}/'+parentID;
									$.ajax({
										url: '{{route('admin.data.destroy.category',['category_id'=>null])}}/'+parentID,
									  	dataType: "json",
										success: function (data) {
											if (data.type=='success') {
												idParent = $(node).attr('parent');
												console.log(idParent);
												$('#simpleTree2').jstree(true).refresh_node(idParent);
											}
											swal("", data.msg, data.type);
										}
									});
						    	}
						        break;
						    case "entity":
								if (confirm("{{__('data.Do you really want to delete this entity')}}")){
									// window.location.href = '{{route('admin.data.destroy.category',['category_id'=>null])}}/'+parentID;
									$.ajax({
										url: '{{route('admin.data.destroy.category',['category_id'=>null])}}/'+parentID,
									  	dataType: "json",
										success: function (data) {
											if (data.type=='success') {
												idParent = $(node).attr('parent');
												console.log(idParent);
												$('#simpleTree2').jstree(true).refresh_node(idParent);
											}
											swal("", data.msg, data.type);
										}
									});
								}
						        break;
						    case "person":
						    	if (confirm("{{__('data.Do you really want to detach this person')}}")){
							        parentID = li_attrs.entity_id;
							        personID = li_attrs.person_id;
									window.location.href = '{{route('admin.data.detach.person',['entity_id'=>null, 'person_id'=>null])}}/'+parentID+'/'+personID;
								}
					        break;
						}
					}
				},
			}
			var li_attrs = $(node).attr('li_attr');
			switch (li_attrs.type) {
			    case "category":
			        delete items.add.submenu.addfunctionary;
			        delete items.view;
			        break;
			    case "entity":
			        break;
			    case "person":
			        delete items.add;
			        items.deletecategory.label = '<i class="fa fa-unlink" style="color:#9c1e1e"></i> <span style="color:#9c1e1e">Détacher</span>';
			        break;
			}
			return items;
		}

        $('#simpleTree2').jstree({
		  'core' : {
		    "dblclick_toggle" : false,
		    'data' : {
		      'url' : '{{route('admin.data.tree', ['root_id'=>$rootCat])}}',
		      'data' : function (node) {
		        return { 
		        		'id' : node.id,
		        		@if(isset($letityid))
		        		'letityid' : {{$letityid}}
		        		@endif
		    		};
		      }
		    }
		  	},"cookies" : { 
	            "cookie_options" : {
	                "path": "C:"
	            } 
          	},
		  	"plugins" : [ "themes", "html_data", "ui", "crrm", "contextmenu","hotkeys", "cookies" ],
			"multiple": false,
			"multiple_selection": false,
            "contextmenu": {
                "items": customMenu
            }
		}).on("select_node.jstree", function (e, data) { 
			var evt =  window.event || event;
            var button = evt.which || evt.button;
            if( button != 1 && ( typeof button != "undefined")) return false; 
            return data.instance.toggle_node(data.node);
		});
	    


	    $('#rootcat').on("click", function () {
	    	$('#addcategory').modal("show")
			$('.parent_id').val($(this).data('id'));
	    });
	    $('.modal, table').on("click", 'a.entity-edit', function () {
	    	entity_id = $(this).data('id');
			$.ajax({
				url: '{{route('admin.data.edit.entity.ajax',['entity_id'=>null])}}/'+entity_id,
				dataType: "html",
				success: function (data) {
					$('#childModalZ2 .contenu').html(data);
					$('#childModalZ2').modal('show');
					$('.select3').select2({
            			tags: true,
        			});
				}
			});
		});
	    $('#childModalZ2').on("click", '#entity-save', function () {
			var dataForm = $("#entityForm").serialize();
			var idParent = $("#entity_id_ajax").val();
			$.ajax({
				url: '{{route('admin.data.entity.update.ajax')}}',
			  	type: "POST",
			  	data: dataForm,
			  	dataType: "json",
				success: function (data) {
					if (data.type=='success') {
						$('#childModalZ2').modal('hide');
						$('#masterModal').modal('hide');
						// dtable.ajax.reload( null, false );
						$('#simpleTree2').jstree(true).refresh_node(idParent);
					}
					swal("", data.msg, data.type);
				}
			});
			return false;
		});
		// -----------------------------------------------------------------
		$("#functionary").select2({
	      	minimumInputLength: 3,
	      	ajax: {
	          	url: "{{ route('admin.data.persons.ajax') }}",
	          	dataType: 'json',
	          	type: "POST",
	          	data: function (params) {
	              	return {
	                  	q: $.trim(params.term)
	              	};
	          	},
	          	processResults: function (data) {
	              	return {
	                  	results: data
	              	};
	          	},
	          	cache: true
  			}
    	});
		$("#function").select2({
	      	minimumInputLength: 3,
	      	ajax: {
	          	url: "{{ route('admin.data.functions.ajax') }}",
	          	dataType: 'json',
	          	type: "POST",
	          	data: function (params) {
	              	return {
	                  	q: $.trim(params.term)
	              	};
	          	},
	          	processResults: function (data) {
	              	return {
	                  	results: data
	              	};
	          	},
	          	cache: true
  			}
    	});
		$('input[name="date_naissance"]').daterangepicker({
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            singleDatePicker: true,
    		showDropdowns: true,
            autoUpdateInput: false,
            // minDate: moment(),
            locale: {
                cancelLabel: 'Clear',
                format: 'DD/M/Y hh:mm A',
                daysOfWeek: [
                    '{{ __("daysOfWeek.Su")}}',
                    '{{ __("daysOfWeek.Mo")}}',
                    '{{ __("daysOfWeek.Tu")}}',
                    '{{ __("daysOfWeek.We")}}', 
                    '{{ __("daysOfWeek.Th")}}', 
                    '{{ __("daysOfWeek.Fr")}}',
                    '{{ __("daysOfWeek.Sa")}}'],
                monthNames: [
                    '{{ __("months.January")}}',
                    '{{ __("months.February")}}',
                    '{{ __("months.March")}}',
                    '{{ __("months.April")}}',
                    '{{ __("months.May")}}',
                    '{{ __("months.June")}}',
                    '{{ __("months.July")}}',
                    '{{ __("months.August")}}',
                    '{{ __("months.September")}}',
                    '{{ __("months.October")}}',
                    '{{ __("months.November")}}',
                    '{{ __("months.December")}}'],
            },
        }, function(start, end) {
            $('input[name="date_naissance"]').val(start.format('YYYY/MM/DD'));
        });
	    $('#functionary').on('change', function () {
	    	var functionary = $('#functionary').val();
	    	var entity_id = $('#entity_id').val();
	    	if (functionary!== "new")
	    	$.ajax({
			  type: "POST",
			  url: '{{route("admin.data.functionary")}}',
			  data: { functionaryID: functionary, entity_id:entity_id},
			  success: function (data) {
			  	// $('#function').val(data.functionid).trigger('change');
			  	$('#function').select2("trigger", "select", {data: {id:data.functionid, text:data.functionLibelle}});
			  	if (data.sexe=="h")
		    		$('#sexe-h').attr('checked', 'checked');
			  	else
		    		$('#sexe-f').attr('checked', 'checked');
		    	if (data.img_perso_url) {
		    		$('#img').attr('src', '/uploads/uploads/thumbs/'+data.img_perso_url);
		    	}else{
		    		$('#img').attr('src', '/uploads/functionaries/avatar.jpg');
		    	}
		    	$('#nom').val(data.nom);
		    	$('#prenom').val(data.prenom);
		    	$('#mail').val(data.mail);
		    	$('#gsm').val(data.gsm);
		    	$('#date_naissance').val(data.date_naissance);
		    	$('#lieu_naissance').val(data.lieu_naissance);
		    	$('#biographie').val(data.biographie);
		    	$('#ap').val(data.ap);
		    	$('#myRange').val(data.risk);
		    	$('#demo').text(data.risk);
		    	if (data.fep)
		    		$('#fep').attr('checked', true);
		    	if (data.mep)
		    		$('#mep').attr('checked', true);
		    	if (data.epimg)
		    		$('#epimg').attr('checked', true);
			  },
			  dataType: "json"
			});
	    	else{
	    		$('#sex-h').attr('checked', 'checked');
		    	$('#img').attr('src', '/uploads/functionaries/avatar.jpg');
		    	$('#nom').val("");
		    	$('#prenom').val("");
		    	$('#mail').val("");
		    	$('#gsm').val("");
		    	$('#date_naissance').val("");
		    	$('#lieu_naissance').val("");
		    	$('#biographie').val("");
		    	$('#ap').val("");
		    	$('#myRange').val(0);
	    		$('#fep').attr('checked', false);
	    		$('#mep').attr('checked', false);
	    		$('#epimg').attr('checked', false);
	    	}
	    });
	});
</script>
@endsection