@php
	$seg1 = request()->segment(1);
	$seg2 = request()->segment(2);
@endphp
<aside class="sidebar-transition sidebar-left-toggle w-72 bg-white border-r border-slate-200 flex flex-col relative z-40" id="main-sidebar">
	<!-- Logo Section -->
	<div class="box-logo p-6 flex items-center justify-between">
		<div class="flex items-center gap-3">
			<div class="w-10 h-10 flex items-center justify-center bg-primary/10 rounded-lg text-primary">
				<span class="material-symbols-outlined">directions_car</span>
			</div>
			<h1 class="logo-text font-black text-2xl tracking-tight text-primary">Dimatour</h1>
		</div>
		<button class="p-1 hover:bg-slate-100 rounded-md transition-colors" id="sidebar-toggle">
			<span class="material-symbols-outlined text-slate-500">menu_open</span>
		</button>
		<button class="lg:hidden p-2 hover:bg-slate-100 rounded-lg transition-colors" id="mobile-sidebar-close">
			<span class="material-symbols-outlined text-slate-500">close</span>
		</button>
	</div>
	<!-- Navigation Menu -->
	<nav class="flex-1 px-4 space-y-2 overflow-y-auto no-scrollbar">
	@foreach(__('sidebar') as $sidebar)
		@php
			$permission = false;
			dd($sidebar['permission'][0], Gate::check('modules', $sidebar['permission'][0]));
			if(isset($sidebar['permission'][0]) && Gate::check('modules', $sidebar['permission'][0])){
				$permission = true;
			}
			if(isset($sidebar['permission'][1]) && Gate::check('modules', $sidebar['permission'][1])){
				$permission = true;
			}
		@endphp
		@if($permission)
			@if(isset($sidebar['depth']) && $sidebar['depth'] > 1)
				@php 
					$class = (!empty($seg1) && $sidebar['name'] == $seg1) ? 'bg-primary text-white shadow-lg shadow-primary/20' : 'text-slate-600 hover:bg-primary/10';
					$open = (!empty($seg1) && $sidebar['name'] == $seg1) ? 'open' : '';
				@endphp
				<button class="w-full flex items-center justify-between px-4 py-3 rounded-xl {{$class}}  transition-all group" data-purpose="nav-item-parent" onclick="toggleSubmenu('submenu-{{$sidebar['name']}}', this)">
					<div class="flex items-center gap-4">
						{!! $sidebar['icon'] !!}
						<span class="menu-text font-medium text-sm">{{$sidebar['title']}}</span>
					</div>
					<span class="material-symbols-outlined text-slate-400 text-lg chevron-icon">expand_more</span>
				</button>
				@if(isset($sidebar['child']) && count($sidebar['child']) > 0)
				<div class="submenu space-y-1 ml-4 border-l-2 border-slate-100 {{$open}}" id="submenu-{{$sidebar['name']}}">
				@foreach($sidebar['child'] as $child)
					@php
						$classChild = (!empty($seg2) && $child['name'] == $seg2) ? 'bg-primary/10 text-primary' : '';
					@endphp
					<a class="flex items-center gap-4 px-4 py-2.5 rounded-lg {{$classChild}} text-slate-500 hover:text-primary hover:bg-primary/10 transition-all group/sub" href="{{isset($child['route']) ? route($child['route']) : '#'}}">
						<span class="menu-text font-semibold text-xs">{{$child['title']}}</span>
					</a>
				@endforeach
				</div>
				@endif
			@else
				@if(!empty($seg1) && $sidebar['name'] == $seg1)
					<a class="flex items-center gap-4 px-4 py-3 rounded-xl bg-primary text-white shadow-lg shadow-primary/20 transition-all group relative" data-purpose="nav-item" href="{{isset($sidebar['route']) ? route($sidebar['route']) : '#'}}">
						{!! $sidebar['icon'] !!}
						<span class="menu-text font-semibold text-sm">{{$sidebar['title']}}</span>
					</a>
				@else
					<a class="flex items-center gap-4 px-4 py-3 rounded-xl text-slate-600 hover:bg-primary/10 transition-all group" data-purpose="nav-item" href="{{isset($sidebar['route']) ? route($sidebar['route']) : '#'}}">
						{!! $sidebar['icon'] !!}
						<span class="menu-text font-semibold text-sm">{{$sidebar['title']}}</span>
					</a>
				@endif
			@endif
		@endif
	@endforeach
	</nav>
	<!-- Profile Section -->
	<div class="profile-section p-4 border-t border-slate-100 hidden lg:block">
		<div class="flex items-center justify-between group/profile">
			<div class="flex items-center gap-3 p-2 hover:bg-slate-50 rounded-xl cursor-pointer transition-colors">
				<div class="w-10 h-10 rounded-full bg-slate-200 overflow-hidden border-2 border-white shadow-sm flex-shrink-0">
				<img alt="{{$userGlobal->fullname ?? ''}}" class="w-full h-full object-cover" src="{{asset($userGlobal->image ?? 'images/avatar-4.jpg')}}"/>
				</div>
				<div class="menu-text flex-1 min-w-0">
					<p class="text-xs font-bold text-slate-800 truncate uppercase">{{$userGlobal->fullname ?? ''}}</p>
				</div>
			</div>
			<a class="menu-text p-2 text-slate-400 hover:text-red-500 transition-colors" href="{{route('logout')}}" title="Đăng xuất">
				<span class="material-symbols-outlined">logout</span>
			</a>
		</div>
	</div>
</aside>
<!-- END: Sidebar -->