@extends('layouts.app')

@section('content')
<nav class="navbar navbar-expand-lg navbar-bg">
	<div class="navbar-brand">
		<a href="{{route('home')}}" class="text-light">{{setting('app.name')}}</a>
	</div>

	<div class="d-md-none ml-auto mt-2 mt-lg-0">
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
			<i class="material-icons text-light">supervisor_account</i>
		</button>
		<button class="navbar-toggler sidebar-mobile-main-toggle" type="button" id="menu-toggle">
			<i class="material-icons text-light">menu</i>
		</button>
	</div>

	<div class="collapse navbar-collapse" id="navbar-mobile">
		<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
			@if (Auth::user()->companies()->count() >= 2)
				<li class="nav-item dropdown mx-5">
					<a href="#" class="navbar-nav-link dropdown-toggle text-light" data-toggle="dropdown">
						<i class="material-icons md-22">supervisor_account</i> {{Auth::user()->company->name}}
					</a>
					<div class="dropdown-menu dropdown-menu-right">
						@foreach (Auth::user()->companies as $item)
							<a href="{{route('users.switch_company', $item->id)}}" class="dropdown-item">
								<i class="material-icons md-22">supervisor_account</i> {{$item->name}}
							</a>
						@endforeach
					</div>
				</li>
			@endif
			<li class="nav-item dropdown">
				<a href="#" class="navbar-nav-link dropdown-toggle text-light" data-toggle="dropdown">
					{{Auth::user()->email}}
				</a>
				<div class="dropdown-menu dropdown-menu-right">

					{{-- account --}}
					<a href="{{route('account.index')}}" class="dropdown-item">
						<i class="material-icons md-22">supervisor_account</i> {{__('Account Settings')}}
					</a>

					{{-- divider --}}
					<div class="dropdown-divider"></div>

					{{-- Logout --}}
					<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        <i class="material-icons">exit_to_app</i> {{ __('Logout') }}
                    </a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                        @csrf
                    </form>

				</div>
			</li>
		</ul>
	</div>
</nav>

<div class="d-flex" id="wrapper">
	<!-- Sidebar -->
	<div class="sidebar border-right" id="sidebar-wrapper">
		<div class="list-group list-group-flush">
			<a href="{{route('dashboard')}}" class="list-group-item list-group-item-action"><i class="material-icons">home</i> {{__('Dashboard')}}</a>

			@can('situations_access')
				<a href="{{route('situations.index')}}" class="list-group-item list-group-item-action"><i class="material-icons">apps</i> {{__('Situation')}}</a>
			@endcan

			{{-- @can('of_motifs_access')
				<a href="{{route('of_motifs.index')}}" class="list-group-item list-group-item-action"><i class="material-icons">apps</i> {{__('Motifes')}}</a>
			@endcan --}}

			<a href="#submenu1" class="list-group-item list-group-item-action pb-1" data-toggle="collapse">
				<i class="material-icons">apps</i>
				{{__('Settings')}}
				<i class="bi bi-chevron-down float-right" style="font-size: 10px;"></i>
			</a>
			<div class="collapse list-group-submenu" id="submenu1">
				
				@can('categories_access')
					<a href="{{route('categories.index')}}" data-parent="#submenu1" class="list-group-item list-group-item-action"><i class="material-icons">apps</i> {{__('Categories')}}</a>
				@endcan

				@can('companies_access')
					<a href="{{route('companies.index')}}" data-parent="#submenu1" class="list-group-item list-group-item-action"><i class="material-icons">apps</i> {{__('Companies')}}</a>
				@endcan

				@can('users_access')
					<a href="{{route('users.index')}}" data-parent="#submenu1" class="list-group-item list-group-item-action"><i class="material-icons">supervisor_account</i> {{__('Users')}}</a>
				@endcan

				@can('activitylog_access')
					<a href="{{route('activitylog.index')}}" data-parent="#submenu1" class="list-group-item list-group-item-action"><i class="material-icons">list</i> {{__('Activity Log')}}</a>
				@endcan
	
				@can('roles_access')
					<a href="{{route('roles.index')}}" data-parent="#submenu1" class="list-group-item list-group-item-action"><i class="material-icons">perm_data_setting</i> {{__('Roles')}}</a>
				@endcan
	
				@can('permissions_access')	
					<a href="{{route('permissions.index')}}" data-parent="#submenu1" class="list-group-item list-group-item-action"><i class="material-icons">lock_open</i> {{__('Permissions')}}</a>
				@endcan

				@role('admin')	
					<a href="{{route('settings.app')}}" data-parent="#submenu1" class="list-group-item list-group-item-action"><i class="material-icons">settings</i> {{__('Settings')}}</a>
				@endrole
			</div>

		</div>
	</div>
	<!-- /#sidebar-wrapper -->

	<!-- Page Content -->
	<div id="page-content-wrapper">
		@yield('sub_content')
	</div>
	<!-- /#page-content-wrapper -->
</div>


{{-- <script>
	/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
	var dropdown = document.getElementsByClassName("dropdown-btn");
	var i;
	
	for (i = 0; i < dropdown.length; i++) {
	  dropdown[i].addEventListener("click", function() {
		this.classList.toggle("active");
		var dropdownContent = this.nextElementSibling;
		if (dropdownContent.style.display === "flex") {
			dropdownContent.style.display = "none";
		} else {
			dropdownContent.style.display = "flex";
		}
	  });
	}
</script> --}}

<script>
	$(document).ready(function() {
		$('div[class="collapse list-group-submenu"] a[href*="'+window.location.href.split('/')[3]+'"]').parent().toggle();
		$('div a[href*="'+window.location.href.split('/')[3]+'"]:first').toggleClass('active', 1);
	});
</script>

@endsection