@extends('component.admin.layout')

@section('content')
	<main>
		<header class="flex-between">
			<h1>Total {{$Menus->count()}} menus</h1>


			<form name="member-search-form" class="search-form" method="get" action="/admin/menu">
				<input type='hidden' name='orderby' value="{{ request()->get('orderby') }}">
				<input type='hidden' name='desc' value="{{ request()->get('desc') }}">

				<div class="input-group">
					<input type="text" class="form-control" name="keyword" placeholder="{{ request()->keyword ? request()->keyword:'Menu Search' }}" autocomplete="off" value="{{ request()->keyword }}">
					<button type="submit" class="btn btn-secondary"><i class="bi bi-search"></i></button>
					<a class="btn btn-danger" href="/admin/menu/fix-tree"><i class="bi bi-list-ol"></i></a>
					<button id="toggle-menus" type="button" class="btn btn-primary"><i class="bi bi-toggle-on"></i></button>
				</div>

				
			</form>
		</header>

		<section>
			<table class="menu-tbl">
				<thead>
					<tr>
						{!! sortHead('Title', 'title') !!}
						{!! sortHead('ID', 'id') !!}
						{!! sortHead('Type/Class', 'type') !!}
						{!! sortHead('Permission', 'permission', 'text-center') !!}
						<th>Admin</th>
						<th>Level</th>
						<th>Group</th>
						<th>Options</th>
						<th>Description</th>
					</tr>
				</thead>
				<tbody>
					@foreach ($Menus as $menu)
						@php
							$_cls = Array();
							if (!request()->get('orderby') and $menu->depth>0) {
								if (!request()->get('keyword')) {
									$_cls[] = '_collapsed';
									$_depth = $menu->depth * 24 + 20;
									$depth = 'style="padding-left: '.$_depth.'px !important"';
								} else $depth = '';
							} else {
								$_cls[] = 'root';
								$depth = 'style="padding-left: 20px !important"';
							}

							if ($menu->hidden) $_cls[] = 'hidden';
							$cls = count($_cls)>0 ? ' class="'.implode(' ', $_cls).'"':'';

							if (!empty($menu->image)) {
								if (preg_match('/^s3\//', $menu->image))
									$menu_image = Storage::disk('s3')->url(str_replace('s3/', '', $menu->image));
								else
									$menu_image = Storage::disk('public')->url($menu->image);
								$bg = 'class="id has-bg" style="background-image: url('.$menu_image.')"';
							} elseif (Storage::disk('root')->exists('files/menu/'.$menu->id)) {
								$bg = 'class="id has-bg" style="background-image: url('.Storage::disk('root')->url('files/menu/'.$menu->id).')"';
							} else {
								$bg = 'class="id"';
							}
						@endphp
						<tr id="row-{{$menu->uid}}"{!!$cls!!} data-uid="{{ $menu->uid }}" data-family="{{ $menu->family }}" data-parent="{{ $menu->parent }}" data-left="{{ $menu->left }}" data-right="{{ $menu->right }}" data-depth="{{ $menu->depth }}">
							<td class="title" {!!$depth!!} nowrap>
								@if (!request()->get('orderby') and !request()->get('keyword'))
									@if ($menu->right - $menu->left > 1)
										@if ($menu->depth>=0) 
											<i class="menu-toggle bi bi-plus-square-dotted" id="toggle-{{ $menu->uid }}" data-uid="{{ $menu->uid }}"></i>
										@else
											<i class="menu-toggle bi bi-dash-square-dotted" id="toggle-{{ $menu->uid }}" data-uid="{{ $menu->uid }}"></i>
										@endif
									@else
										<i class="bi bi-square"></i>
									@endif
								@endif
								<a name="{{$menu->uid}}" href="/admin/menu/edit/{{ $menu->uid }}">{!! markKeyword($menu->title, request()->keyword) !!}</a>
							</td>

							<td {!!$bg!!}>
								<div class="db">{!! !empty($menu->namespace) ? markKeyword($menu->namespace, request()->keyword).'/<br>':'' !!}{!! markKeyword($menu->id, request()->keyword) !!}</div>
							</td>

							<td class="id">
								{!! markKeyword($menu->type, request()->keyword) !!}/<br>{!! markKeyword($menu->class, request()->keyword) !!}
							</td>

							<td class="text-center num">
								{{ $menu->permission }}
							</td>

							<td class="menu-admin">
								@php
									if (!empty($menu->admins)) {
										$names = Array();
										foreach($menu->admins as $admin) {
											$names[] = $admin->name;
										}

										echo implode(', ', $names);
									}
								@endphp
							</td>

							<td class="menu-access-level">
								@php
									if (!empty($menu->levels)) {
										$level = Array();
										foreach ($menu->levels as $l) {
											$level[] = $l->level_or_uid .'<sup>'. $l->permission .'</sup>';
										}
										echo implode(', ', $level);
									}
								@endphp
							</td>

							<td class="menu-access-group">
								@php
									if (!empty($menu->groups)) {
										$group = Array();
										foreach ($menu->groups as $grp) {
											$group[] = $grp->name .'<sup>'. $grp->permission .'</sup>';
										}
										echo implode(', ', $group);
									}
								@endphp
							</td>

							<td class="desc">
								@if (!empty($menu->options))
									<ul class="options"> 
										@foreach($menu->options as $k=>$v)
											<li><label>{{$k}}</label>{!! markKeyword($v, request()->keyword) !!}</li>
										@endforeach
									</ul>
								@endif
							</td>

							<td class="desc">
								<div class="description">{!! markKeyword($menu->description, request()->keyword) !!}</div>
							</td>
						</tr>
					@endforeach
				</tbody>
			</table>
		</section>
	</main>

	<script type="text/javascript">
		function _toggle(parent, collapse){
			$('.menu-tbl > tbody > tr').each(function(){
				var $obj = $(this);
				var uid = $obj.attr('data-uid');
				
				// action on children
				if (parent == $obj.attr('data-parent')) {
					if (collapse) {
						if ($obj.find('i').hasClass('bi-dash-square-dotted')) $obj.find('i').removeClass('bi-dash-square-dotted').addClass('bi-plus-square-dotted');
						$obj.addClass('_collapsed');
						_toggle(uid, collapse); // collapse children
					} else {
						$obj.removeClass('_collapsed');
					}
				}
			});
		}

		var parents = new Array;
		function _getParents(parent) {
			parents.push(parent);
			var prt = $('#row-'+parent).attr('data-parent');
			if (prt!=0) _getParents(prt);
		}

		$(document).ready(function(){
			@if (!empty(request()->anchor))
				$('#row-{{request()->anchor}}').addClass('selected');
				$("main").animate({ scrollTop: $('a[name="{{request()->anchor}}"]').offset().top - 100 }, 500);
			@endif

			$('td.title > .bi').each(function(){
				var $obj = $(this);
				$obj.click(function(){
					var uid = $obj.attr('data-uid');
					if ($obj.hasClass('bi-dash-square-dotted')) {
						$obj.removeClass('bi-dash-square-dotted').addClass('bi-plus-square-dotted');
						_toggle(uid, true);
					} else if ($obj.hasClass('bi-plus-square-dotted')) {
						$obj.removeClass('bi-plus-square-dotted').addClass('bi-dash-square-dotted');
						_toggle(uid, false);
					}
				});
			});

			$('#toggle-menus').on('click', function(e){
				e.preventDefault();
				if ($(this).find('i').hasClass('bi-toggle-on')) {
					$(this).find('i').removeClass('bi-toggle-on').addClass('bi-toggle-off');

					$('i.menu-toggle').each(function(){
						var $obj = $(this);
						var uid = $obj.attr('data-uid');
						if ($obj.hasClass('bi-plus-square-dotted')) {
							$obj.removeClass('bi-plus-square-dotted').addClass('bi-dash-square-dotted');
							_toggle(uid, false);
						}
					});
				} else {
					$(this).find('i').removeClass('bi-toggle-off').addClass('bi-toggle-on');

					$('i.menu-toggle').each(function(){
						var $obj = $(this);
						var uid = $obj.attr('data-uid');
						if ($obj.hasClass('bi-dash-square-dotted')) {
							$obj.removeClass('bi-dash-square-dotted').addClass('bi-plus-square-dotted');
							_toggle(uid, true);
						}
					});
				}
			});

			@if (request()->get('anchor'))
				$('#row-{{ request()->get('anchor') }}').addClass('selected');

				_getParents({{ request()->get('anchor') }});

				for (var i = 0; i < parents.length; i++) {
					$('#row-'+parents[i]).removeClass('_collapsed');
				}

				$("html, body").animate({ scrollTop: $('a[name="{{ request()->get('anchor') }}"]').offset().top - 100 }, 500);
			@endif

		});
	</script>
@endsection