@extends('admin.layout.default')

@section('title', trans('admin.service.title').': '.trans('admin.nested.title'))

@section('styles')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.css" integrity="sha512-yOW3WV01iPnrQrlHYlpnfVooIAQl/hujmnCmiM3+u8F/6cCgA3BdFjqQfu8XaOtPilD/yYBJR3Io4PO8QUQKWA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<link rel="stylesheet" href="{{ asset('css/libs/nestable2/custom.css') }}" />
@endsection

@section('body')
	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header">
					<i class="fa fa-indent"></i>
					<span>{{ trans('admin.service.title') }}: {{ trans('admin.nested.card.title') }}</span>
					<small class="d-inline-block">({{ trans('admin.nested.card.desc') }})</small>
				</div>
				<div class="card-block">
					<div class="nested-list">
						<div id="nestable-menu" class="form-group btn-group-sm">
							<button type="button" data-action="expand-all" class="btn btn-outline-success rounded-pill">↳ {{ trans('admin.nested.actions.expand_all') }}</button>
							<button type="button" data-action="collapse-all" class="btn btn-outline-danger rounded-pill">↱ {{ trans('admin.nested.actions.collapse_all') }}</button>
						</div>
						<div class="dd" id="nestable"></div>
					</div>
					<div class="form-group mt-5">
						@can('admin.service-category.index')
							<a href="{{ route('admin/service-categories/index') }}" class="btn btn-outline-secondary text-primary mx-2 mt-2">
								<i class="fa fa-chevron-left text-primary mr-1"></i>
								{{ trans('admin.nested.actions.back_categories') }}
							</a>
						@endcan
						@can('admin.service-category.create')
							<a href="{{ route('admin/service-categories/create')  }}" class="btn btn-primary mx-2 mt-2">
								<i class="fa fa-plus mr-1"></i>
								{{ trans('admin.nested.actions.add_new_category') }}
							</a>
						@endcan
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('bottom-scripts')
	<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js" integrity="sha512-7bS2beHr26eBtIOb/82sgllyFc1qMsDcOOkGK3NLrZ34yTbZX8uJi5sE0NNDYFNflwx1TtnDKkEq+k2DCGfb5w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script>
		var json = @json($data);
		window["json"] = json; // required for module
		var route = [];
		window["route"] = route; // required for module
		route.post = "{{ route('admin/service-categories-nested/update') }}";
		var trans = [];
		window["trans"] = trans; // required for module
		trans.mainCategory = "{{ trans('admin.nested.card.main_category') }}";
	</script>
	<script type="module" src="{{ asset('js/libs/nestable2/custom.js') }}"></script>
@endsection