@if( !empty(config('sidebar.menu')[$ROLE]) )
	{{ 
		MENU::print(
			config('sidebar.menu')[$ROLE], 
			config('sidebar.const.SIDEBAR_CROP_ON'), 
			config('sidebar.const.SIDEBAR_SEARCH_ON')
		) 
	}}
@endif

@push('style')
<!-- SIDEBAR -->
<style>
.page-sidebar-menu .search-form {
    display: block !important;
}
</style>
<!-- END SIDEBAR -->
@endpush

@push('script')
<!-- SIDEBAR -->
<script>

var Sidebar = function () {

	// CONTEXT
	return {
		//  SECTION HANDLE INIT
		init: async function() {
			tries = 5;
			while(tries-- && !window.jQuery){
				console.log('Sidebar Init :Waiting for jquery');
				await Sidebar.sleep({{ config('sidebar.const.ONLOAD_INIT_DELAY') }});
			}
			if(window.jQuery){
				Sidebar.sidebarHandler();
			} else {
				console.error('Unable to init Sidebar');
			}
		},

		sidebarHandler: function () {
			if (!jQuery()) {
				console.error('Jquery not found');
				return false;
			}
			
			$("#extra_input").on("keyup click input", function (event) {
				if(event.key=='Enter'){
					match = $('#user_menu li.match');
					if(match.length==1) match.find('span').click();
					return;
				}
				
				var searched = Sidebar.lowercaseValue("#extra_input");
				
				if (searched.length > 0) {
					// CLEAR ALL MATCHES AND HIDE ALL
					var matches = Sidebar.restoreAllMenuAndShow(false).filter(function () {
						// FILTER IF THE ELEMENT TEXT CONTAIN THE SEARCHED TEXT
						return Sidebar.lowercaseText(this).indexOf(searched) != -1;
					}).addClass("match").show();

					// AVAILABLE SUBITEMS OF MATCH ITEMS
					matches.find('.sub-menu li').show();
					// EXPAND SUBMENUS FOR MATCHES
					Sidebar.submenuExpand(matches);
				} else {
					Sidebar.restoreAllMenuAndShow();
					Sidebar.submenuCollapse('#user_menu');
				}
			});

			// ADD KEY COMBO SHORTCUT TO SIDEBAR SEARCH
			$(document).keypress(function(e) { 
				var ctrl = {{ intval(config('sidebar.const.SHORTCUT_CTRL')) }} ? e.ctrlKey : e.shiftKey;
				if ( ctrl && ( e.key === ' ' ) ) {
					$('#extra_input').focus();
				}
			});

			// ENABLE SEARCH IF CORRECTLY LOADED
			$('#extra_input').attr('disabled', false);

			// SET ACTIVE IF INTERNAL SUBMENU IS ACTIVE
			$('#user_menu .active').parents('[has=submenu]').addClass('active');

			var highlight = function (string) {
				$("#user_menu li.match").each(function () {
					var text = $(this).text().trim().replace(/<span class="underline">/, '').replace(/<\/span>/, '');
					console.log(string, text, $(this).text().trim(), $(this).html());
					var matchStart = text.toLowerCase().indexOf("" + string.toLowerCase() + "");
					var matchEnd = matchStart + string.length - 1;
					var beforeMatch = text.slice(0, matchStart);
					var matchText = text.slice(matchStart, matchEnd + 1);
					var afterMatch = text.slice(matchEnd + 1);
					var new_text = beforeMatch + "<span class='underline'>" + matchText + "</span>" + afterMatch
					console.log(text, new_text);

					$(this).html($(this).html().replace(text, new_text));
				});
			}
		},
			
		getAllClasses: function (){
			var all_classes = [];

			var all_elements = document.querySelectorAll('*');

			for (var i = 0; i < all_elements.length; i++) {
				var classes = all_elements[i].className.toString().split(/\s+/);
				for (var j = 0; j < classes.length; j++) {
					var cls = classes[j];
					if (cls && all_classes.indexOf(cls) === -1)
						all_classes.push(cls);
				}
			}

			return all_classes;
		},

		restoreAllMenuAndShow : function (show){
			if(typeof show=='undefined') show = true;
			var restored_menu = $("#user_menu, #user_menu li").removeClass("match");
			return (show) ? restored_menu.show() : restored_menu.hide();
		},

		lowercaseValue : function (obj){
			return $(obj).val().toLowerCase() 
		},

		lowercaseText : function (obj){
			return $(obj).text().toLowerCase() 
		},

		submenuCollapse : function(obj){
			var targets = $(obj).find('.sub-menu');
			$(targets).each(function(){
				var item = $(this).parent();
				var is_open = item.hasClass('open');
				if(is_open){
					item.find('span').first().click();
				}
			})
		},

		submenuExpand : function(obj){
			var targets = $(obj).find('.sub-menu');
			$(targets).each(function(){
				var item = $(this).parent();
				var is_open = item.hasClass('open');
				if(is_open) return;
				item.find('span').first().click();
			})
		},


		sleep : function(ms) {
			return new Promise(resolve => setTimeout(resolve, ms));
		},

	}
}();

</script>
@endpush


@push('ready')
<script>
	jQuery(document).ready(function() {
		Sidebar.init();
	});
</script>
@endpush


@php
abstract class MENU{
	private static $page;

	/**
	 * PRINT THE CORRESPNDING MENTU FOR THE USER
	 */
	public static function print($items, $crop=true, $search=true){
		// UPDATE CURRENT PAGE TO THIS
		self::$page = request()->route()->getName();
		
		echo 
		'<div class="page-sidebar-wrapper">
		<div class="page-sidebar navbar-collapse collapse">
		<ul class="page-sidebar-menu">';
		if($crop) echo
			'<li class="sidebar-toggler-wrapper">
				<div class="sidebar-toggler" onclick="$(\'#search_container\').toggle()"></div>
				<div class="clearfix"></div>
			</li>';
		if($search) echo
			'<li id="search_container" class="sidebar-search-wrapper">
				<div class="search-form">
					<div class="input-icon right">
					<i class="icon-magnifier"></i>
						<input disabled id="extra_input" type="text" autocomplete="off" class="form-control" name="query" placeholder="Search...">
					</div>
				</div>
			</li>';
		echo
		'</ul>';
		echo
		'<!-- BEGIN SIDEBAR MENU -->
		<ul id="user_menu" class="page-sidebar-menu">';
		echo self::printMenu($items);
		echo
		'</ul>
		<!-- END SIDEBAR MENU -->
		</div>
		</div>';
	}

	/**
	 * MENU PRINT FUNCTION
	 */
	 public static function printMenu($items, $submenu=false){
		$menu = '';
		for ($i=0; $i<count($items); $i++) { 
			$menu .= self::printItem($items[$i], $submenu, $i);
		}
		return $menu;
	}

	/**
	 * PRINT ITEM
	 */
	 public static function printItem($item, $submenu=true){

		$label = $submenu ? $item[0] : "<span class='title'>{$item[0]}</span>";
		$link = isset($item[1]) ? $item[1] : 'javascript:;';
		$icon = isset($item[2]) ? "<i class='{$item[2]}'></i>":'';
		$active = ($link==self::$page) ? 'class="active"' : '';
		# BASE CASE
		if(is_string($link)){
			$link_tag = Route::has($link) ? route($link) : $link;
			return 
			"<li $active>
				<a href='$link_tag'>
					$icon
					$label
				</a>
			</li>";
		}
		if(is_array($link)){
			return 
			"<li $active has='submenu'>
				<a href='javascript:;'>
					$icon
					$label
					<span class='arrow'></span>
				</a>
				<ul class='sub-menu'>"
				. self::printMenu($link, true) .
				'</ul>
			</li>';
		}
	}

	# GIVE A FLAT ARRAY WITH THE LINK PAGES
	public static function flatMenu($menu, &$pages){

		foreach($menu as $link){
			$label = $link[0];
			$target = $link[1];

			if(is_string($target)){
				$pages[$label] =  $target;
			} 
			if(is_array($target)) self::flatMenu($target, $pages);
		}

		return $pages;
	}

	# FIND A KEYWORD PATH
	public static function findPath($menu, $needle, &$path=[], &$found=false){
		
		// FOREACH ELEMENT IN LINEAR MENU
		foreach($menu as $link){
			
			// SET BOARD
			$label = $link[0];
			$target = $link[1];

			if($label===$needle){
				$path[] .= $label;
				$found = true;
			}

			// STOP CHECKING IN LINEAR ARRAY
			if($found) break;

			// CHECK DEEPER
			if(is_array($target)){
				self::findPath($target, $needle, $path, $found);
				if($found){
					// UPDATE PATH
					$path[] .= $label;
				}
			}
		}

		return array_reverse($path);
	}

}
@endphp