@extends('backend/master')
<?php
use App\Models\Category;
use App\Models\Menumanage;
?>
@section('styles')
{!!HTML::style('backend/assets/css/theme-default/libs/jquery-ui/jquery-ui-theme.css')!!}
{!!HTML::style('backend/assets/css/theme-default/libs/nestable/nestable.css')!!}
@stop

@section('maincontent')
			<!-- BEGIN CONTENT-->
			<div id="content">

				<!-- BEGIN LIST SAMPLES -->
				<section>
					<div class="section-header">
						<ol class="breadcrumb">
							<li>Home</li>
							<li class="active">Reorder Categories</li> 
						</ol>
					</div>
					<div class="section-body">

						<!-- BEGIN INTRO -->
						<div class="row">
							<div class="col-lg-12">
								<h1 class="text-primary">Reorder Categories</h1>
							</div><!--end .col -->
							<div class="col-lg-8">

							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END INTRO -->

						<!-- BEGIN NESTABLE LISTS -->
						<div class="row">
							
							<div class="col-lg-3 col-md-4">
							<div class="card">
							<div class="card-body">
								<form id="categoryForm">
								@if(count($category)>0)
								@foreach($category as $cat)
									<div class="checkbox checkbox-inline checkbox-styled">
										<label>
											@if(in_array($cat->id,$activemenu))
											<input type="checkbox" class="catClass{!! $cat->id !!}" data-catId="{!! $cat->id !!}" data-catName="{!! $cat->CategoryName !!}" checked="checked"> {!! $cat->CategoryName !!}
											@else
											<input type="checkbox" class="catClass{!! $cat->id !!}" data-catId="{!! $cat->id !!}" data-catName="{!! $cat->CategoryName !!}"> {!! $cat->CategoryName !!}
											@endif
										</label>
									</div>
									<div class="clearfix"></div>
								@endforeach
									@else
									No category available.
									@endif
								</form>
							</div><!--end .col -->
							</div>
							</div>
							<div class="col-md-8">
								<div class="card">
									<div class="card-body">
										<div class="row">
											<div class="col-lg-12">
													<div class="dd nestable-list">
														<ol class="dd-list menuList">
															@if(count($menuOrder)>0)
															@foreach($menuOrder as $firstlevel)
															<li class="dd-item tile" data-id="{!! $firstlevel->categoryId !!}">
																<div class="dd-handle btn btn-default-light">{!! Category::catename($firstlevel->categoryId)!!}</div>
																@if(Menumanage::hasSubmenu($firstlevel->categoryId)>0)
																<ol class="dd-list">
																	@foreach(Menumanage::getSubmenu($firstlevel->categoryId) as $secondlevel)
																	<li class="dd-item tile" data-id="{!! $secondlevel->categoryId !!}">
																		<div class="dd-handle btn btn-default-light">{!! Category::catename($secondlevel->categoryId)!!}</div>

																		@if(Menumanage::hasSubmenu($secondlevel->categoryId)>0)
																		<ol class="dd-list">
																			@foreach(Menumanage::getSubmenu($secondlevel->categoryId) as $thirdlevel)
																			<li class="dd-item tile" data-id="{!! $thirdlevel->categoryId !!}">
																				<div class="dd-handle btn btn-default-light">{!! Category::catename($thirdlevel->categoryId)!!}</div>
																				</li>
																			@endforeach
																		</ol>
																		@else
																		</li>
																		@endif


																	@endforeach
																</ol>
																@else
																</li>
																@endif
															@endforeach
															@endif
														</ol>
													</div><!--end .dd.nestable-list -->
													<div class="section-header pull-right buttonDiv" style="display:none;">
														<a href="javascript:void(0)" class="btn saveMenu ink-reaction btn-block btn-primary">Save Menu</a>
													</div>
											</div><!--end .col -->
										</div><!--end .row -->
									</div><!--end .card-body -->
								</div><!--end .card -->
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END NESTABLE LISTS -->

					</div><!--end .section-body -->
				</section>
			</div><!--end #content-->
			<!-- END CONTENT -->

			<input type="hidden" id="nestable-output">

			@stop

@section('script')
{!!HTML::script('backend/assets/js/libs/nestable/jquery.nestable.js')!!}
{!!HTML::script('backend/assets/js/core/demo/DemoUILists.js')!!}
{!!HTML::script('backend/js/sarathi.js')!!}
<script type="text/javascript">
	$(document).ready(function(){
		var list=$('.menuList li').length;
		if(list==0){
			$('.buttonDiv').hide();
		}else{
			$('.buttonDiv').show();
		}

		$('.nestable-list').nestable({
        group: 1
    })
    .on('change', updateOutput);

    updateOutput($('.nestable-list').data('output', $('#nestable-output')));

	});	
</script>
@stop