@extends('layouts.admin')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('assets/styles/apps/crm/users-list.min.css')}}">
    {{--<link rel="stylesheet" type="text/css" href="{{asset('libs/nestable/jquery.nestable.css')}}"> <!-- original -->--}}
    {{--<link rel="stylesheet" type="text/css" href="{{asset('assets/styles/libs/nestable/nestable.min.css')}}"> <!-- customization -->--}}
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.css"> <!-- original -->
    <style>
        #nestable .dd-handle {
            cursor: move;
			height: 32px !important;
        }
        .dd{
            max-width: 100%;
        }
		#nestable .badge{
			padding: 5px 10px 4px 10px !important;
		}
        #nestable .action.fa{
            position: absolute;
            left: 30px;
            top: 10px;
        }
        .dd-item>button{
            height: 19px;
        }
		.dd-item .dd-handle.inactive{
			background-color: #b0a9a9;
		}
        #nestable .edit-item{
            position: absolute;
            top: 0;
            right: 50px;
            cursor: pointer;
        }
        #nestable .delete-item{
            position: absolute;
            top: 0;
            right: 70px;
            cursor: pointer;
        }
    </style>
@endsection

@section('content')

    <div class="ks-column ks-page">
        <div class="ks-page-header">
            <section class="ks-title">
                <h3>{{$pageTitle}}</h3>
            </section>
        </div>
        <div class="ks-page-content">
            <div class="ks-page-content-body">
                <div class="ks-body">

                    <div class="ks-user-list-view-header-block">
                        <h4 class="ks-user-list-view-header-block-name">
                            {{$menu->title}}
                        </h4>
                        <div class="ks-user-list-view-header-control">
                            <a class="addNew btn btn-success text-white" data-url="{{route('menu-items.create',['menu_id'=>$menu->id])}}">Add Item</a>
                            <a id="nestable-menu" class="btn btn-default">Expand / Collapse</a>
                        </div>
                    </div>

                    @if(\Auth::user()->can('browse-menuitem'))

                        <div class="container-fluid ks-rows-section padding-left-right-1-point-9">

							<div class="row">
                                <div class="col-md-12">

                                    <form method="POST">
                                        {{ csrf_field() }}
                                        <div class="dd" id="nestable">
                                            <ol class="dd-list">
                                                @each('admin.settings.menus.items-tree', $items, 'item')
                                            </ol>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>

                    @endif

					<br>

                </div>
            </div>
        </div>
    </div>
@stop

@section('javascript')
    {{--<script src="{{asset('libs/nestable/jquery.nestable.js')}}"></script>--}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js"></script>
    <script>
		$(document).ready(function() {
			var updateOutput = function(e)
			{
				var list = e.length ? e : $(e.target);
				var output = list.data('output');
				if (window.JSON) {
					// output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
					var data = window.JSON.stringify(list.nestable('serialize'));

					console.log(data);
					// console.log($(this).nestable('serialize'));
					// var data = $(this).nestable('toArray');
					var token = $('input[name=_token]').val();
					// data.push({'_method':'PATCH'});
					// data = JSON.stringify(data);
					// console.log(data);
					$.ajax({
						type: 'post',
						url: '{{route('menus.reorder',['id'=>$menu->id])}}',
						method: 'post',
						// dataType: "json",
						data: {data: data},
						headers: {
							"X-CSRF-TOKEN": token,
							"Cache-Control": "no-cache"
						},
						error: function(error){
							if (!$.isEmptyObject(error.responseJSON)) {
								printErrorMsg(error.responseJSON.errors);
							}
						},
						success: function (data) {
							if (!$.isEmptyObject(data.error)) printErrorMsg(data.error);

							$.notify({
								title: 'Updated!',
								message: 'The list has been updated successfully'
							},{
								type: 'success-active'
							});
						}
					});

				} else {
					output.val('JSON browser support required for this demo.');
				}
			};

			// activate Nestable for list 1
			$('#nestable').nestable({
				group: 1,
				maxDepth: 10,
				handleClass: 'dd-handle'
			})
				.on('change', updateOutput);

			// output initial serialised data
			updateOutput($('#nestable').data('output', $('#nestable-output')));

			var expand = false;
			$('#nestable-menu').on('click', function(e) {
				if(expand){
					expand=false;
					$('#nestable').nestable('expandAll');
				}else{
					expand=true;
					$('#nestable').nestable('collapseAll');
				}
			});

		});

		//store record with files
		function storeMenuItem(){
			$('#modalForm button[type="submit"]').prop('disabled', true); //disable submit button
			var form = $('form#modalForm')[0];
			var formData = new FormData(form);
			event.preventDefault();
			var token = $('input[name=_token]').val();
			$.ajax({
				type: 'post',
				url: $('#modalForm').prop('action'),
				method: 'post',
				data: formData,
				contentType: false,
				processData: false,
				headers: {
					"X-CSRF-TOKEN": token,
					"Cache-Control": "no-cache"
				},
				error: function(error){
					if (!$.isEmptyObject(error.responseJSON)) {
						printErrorMsg(error.responseJSON.errors);
					}
				},
				success: function (data) {
					$('button[type="submit"]').prop('disabled', false); //enable submit button

					if ($.isEmptyObject(data.error)) {
						document.getElementById("modalForm").reset();
						$('#addEditModal').modal('hide');

                        // $('#nestable').nestable('add', {
                        // 	"id": data.id,
                        //     "title": data.title,
                        //     "content": '<span data-icon class="fa ' + data.icon + '">&nbsp;</span> ' + data.title + '&nbsp; <span class="text-muted">'+data.url+'</span>',
                        //     "sorting": data.sorting,
                        //     "url": data.url,
                        // });
						$('.dd#nestable').html(data);

						$.notify({
							title: 'Added!',
							message: 'The list has been added successfully'
						},{
							type: 'success-active'
						});
					} else {
						printErrorMsg(data.error);
					}
				}
			});
		}

		//update record with files
		function updateMenuItem(){
			$('#modalForm button[type="submit"]').prop('disabled', true); //disable submit button
			var form = $('form#modalForm')[0];
			var formData = new FormData(form);
			var token = $('input[name=_token]').val();
			$.ajax({
				url: $('#modalForm').prop('action'),
				type: 'post',
				method: 'post',
				data: formData,
				contentType: false,
				processData: false,
				headers: {
					"X-CSRF-TOKEN": token,
					"Cache-Control": "no-cache"
				},
				error: function(error){
					if (!$.isEmptyObject(error.responseJSON)) {
						printErrorMsg(error.responseJSON.errors);
					}
				},
				success: function (data) {
					$('#modalForm button[type="submit"]').prop('disabled', false); //enable submit button

					if (!$.isEmptyObject(data.error)) {
						printErrorMsg(data.error);
					} else {
						document.getElementById("modalForm").reset();
						$('#addEditModal').modal('hide');

						// console.log(data);
						// $('.dd').nestable('replace', {
						// 	"id": data.id,
						// 	"title": data.title,
						// 	"content": '<span data-icon class="fa ' + data.icon + '">&nbsp;</span> ' + data.title,
						// 	"sorting": data.sorting,
						// 	"url": data.url,
						// });

						$.notify({
							title: 'Updated!',
							message: 'The list has been updated successfully'
						},{
							type: 'success-active'
						});

						$('.dd#nestable').html(data);
						// window.location.reload();
					}
				}
			});
		}

		//delete record
		$('body').on( 'click', '.deleteMenuItem', function () {
			let csrf_token = $('meta[name="csrf-token"]').attr('content');
			let url = $(this).data('href');
			swal({
				title: "Are you sure you want to delete this record?",
				icon: "warning",
				buttons: true,
				dangerMode: true,
			})
				.then(function (willDelete) {
					if (willDelete!=null) {
						$.ajax({
							type: 'post',
							url: url,
							method: 'delete',
							data: '',
							headers: {
								"X-CSRF-TOKEN": csrf_token,
								"Cache-Control": "no-cache"
							},
							error: function(error) {
								if (!$.isEmptyObject(error.responseJSON)) {
									printErrorMsg(error.responseJSON);
								}
							},
							success: function(){

								swal("Poof! Your record has been deleted!", {
									icon: "success",
								});

								$.notify({
									title: 'Deleted!',
									message: 'The record has been deleted successfully'
								},{
									type: 'danger-active'
								});

								window.location.reload();
							}
						});
					} else {

						al("Your record is safe!");
					}
				});
		});

    </script>
@stop