@extends('admin.master')

@section('content')

    <section id="widget-grid" class="">
		<div class="row">
			<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<div class="jarviswidget jarviswidget-color-darken" id="wid-id-list" data-widget-editbutton="true" data-widget-colorbutton="false" data-widget-deletebutton="false">
					<header>
						<span class="widget-icon"><i class="fa fa-table"></i></span>
						<h2>Update Navigation List Order</h2>
					</header>

					<div>
						<div class="widget-body">

							<div id="nestable-menu">
								<a href="javascript:window.history.back();" class="btn btn-labeled btn-default">
									<span class="btn-label"><i class="fa fa-fw fa-chevron-left"></i></span>Back
								</a>

								<button type="button" class="btn btn-labeled btn-default text-primary" data-action="expand-all">
									<span class="btn-label"><i class="fa fa-fw fa-plus-circle"></i></span>Expand All
								</button>
								<button type="button" class="btn btn-labeled btn-default text-primary" data-action="collapse-all">
									<span class="btn-label"><i class="fa fa-fw fa-minus-circle txt-color-red"></i></span>Collapse All
								</button>
							</div>

							<div class="row">
								<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
									<div class="dd" id="dd-navigation">
										{{ $itemsHtml }}
									</div>
								</div>
                            </div>

						</div>
					</div>
				</div>
			</article>
		</div>
	</section>

	<script src="js/plugins/jquery-nestable/jquery.nestable.min.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">
	    $(function() {
	        $('#dd-navigation').nestable({
				group: 1,
				maxDepth: 3
			}).on('change', updateList);

			$('#nestable-menu').on('click', function(e) {
				var target = $(e.target), action = target.data('action');
				if (action === 'expand-all') {
					$('.dd').nestable('expandAll');
				}
				if (action === 'collapse-all') {
					$('.dd').nestable('collapseAll');
				}
			});

			function updateList(e) {
			    var list   = e.length ? e : $(e.target);
				var nestableString = window.JSON.stringify(list.nestable('serialize'));

				var obj = {'list': nestableString};
				$.ajax({
					type: "POST",
					url: APP_URL + "admin/settings/admin/navigation/order",
					data: obj,
					error: function (request, status, error) {
						smallErrorBox();
					},
					success: function(data) {
						if(data && data == 'success')
						{
							smallBox('Successfully', 'The Navigation Order has been updated');
						}
						else
						{
							smallErrorBox();
						}
					}
				});
			}
	    })
	</script>
@stop