@extends('layout.index', [
	'title' => __('shop.shelves.title'),
	'subtitle' => __('shop.shelves.list'),
	'breadcrumb' => [__('shop.shelves.title')]
])

@section('content')
	<div class="row">
		<div class="col-8">
			@component('components.card')
				@include('components.datatable', [
					'route' => route('Admin.Shop.Categories.index'),
					'model' => 'categories',
					'callback' => 'handleCategory();'
				])
			@endcomponent
		</div>
		<div class="col-4">
			@include('Admin.Shop.Categories.partials.tree')
		</div>
	</div>
@endsection

@include('load.form.select2')
@include('load.form.toggle')

@push('js')
	<script>
		function handleCategory() {
			initToggle("{{ route('Admin.Shop.Categories.toggleVisible') }}", '.visible');
			initToggle("{{ route('Admin.Shop.Categories.toggleHomepage') }}", '.homepage');
			$('#tree1').tree('reload');
		}

		$(document).ready(function () {
			initSelect2();
		});
	</script>
@endpush