{{-- resources/views/layouts/navigation.blade.php --}}
@php
    use App\Services\NavigationService;
    $userRole = Auth::user()->role;
    $menuItems = NavigationService::getAvailableMenuForRole($userRole);
@endphp

<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
    <!-- Primary Navigation Menu -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <!-- Logo -->
                <div class="shrink-0 flex items-center">
                    <a href="{{ route('dashboard') }}">
                        <x-application-logo class="block h-9 w-auto fill-current text-gray-800" />
                    </a>
                    <div class="ml-3 hidden sm:block">
                        <div class="text-sm font-semibold text-gray-800">Digital Maturity</div>
                        <div class="text-xs text-gray-500">Assessment System</div>
                    </div>
                </div>

                <!-- Navigation Links -->
                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
                    @foreach($menuItems as $key => $menuItem)
                        <x-nav-link
                            :href="route($menuItem['route'])"
                            :active="$menuItem['is_active']"
                            class="inline-flex items-center">
                            <span class="mr-2">
                                {!! NavigationService::getIcon($menuItem['icon']) !!}
                            </span>
                            {{ $menuItem['label'] }}
                        </x-nav-link>
                    @endforeach
                </div>
            </div>

            <!-- Right Side: Role Badge + User Dropdown -->
            <div class="hidden sm:flex sm:items-center sm:ms-6 sm:space-x-4">
                <!-- Role Badge -->
                <span class="inline-flex px-3 py-1 text-xs font-semibold rounded-full
                    @if($userRole == 'admin') bg-blue-100 text-blue-800
                    @elseif($userRole == 'kepsek') bg-green-100 text-green-800
                    @elseif($userRole == 'guru') bg-yellow-100 text-yellow-800
                    @else bg-purple-100 text-purple-800 @endif">
                    {{ ucfirst($userRole) }}
                </span>

                <!-- Settings Dropdown -->
                <x-dropdown align="right" width="48">
                    <x-slot name="trigger">
                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
                            <div class="flex items-center">
                                <img class="h-8 w-8 rounded-full mr-2" src="{{ Auth::user()->getAvatarUrl() }}" alt="{{ Auth::user()->name }}">
                                <div class="text-left">
                                    <div class="font-medium text-gray-800">{{ Auth::user()->name }}</div>
                                    @if(Auth::user()->school)
                                        <div class="text-xs text-gray-500">{{ Str::limit(Auth::user()->school->name, 20) }}</div>
                                    @endif
                                </div>
                            </div>

                            <div class="ms-1">
                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </button>
                    </x-slot>

                    <x-slot name="content">
                        <!-- Profile Section -->
                        <div class="px-4 py-2 border-b border-gray-100">
                            <div class="text-sm font-medium text-gray-900">{{ Auth::user()->name }}</div>
                            <div class="text-sm text-gray-500">{{ Auth::user()->email }}</div>
                        </div>

                        <!-- Navigation Links -->
                        <x-dropdown-link :href="route('profile.edit')">
                            <div class="flex items-center">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                </svg>
                                {{ __('Profile') }}
                            </div>
                        </x-dropdown-link>

                        @if($userRole !== 'admin' && Auth::user()->school)
                            <x-dropdown-link href="#">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                                    </svg>
                                    {{ Auth::user()->school->name }}
                                </div>
                            </x-dropdown-link>
                        @endif

                        <!-- Quick Actions based on Role -->
                        @if($userRole == 'admin')
                            <x-dropdown-link :href="route('admin.schools.create')">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                    </svg>
                                    Add School
                                </div>
                            </x-dropdown-link>
                            <x-dropdown-link :href="route('admin.users.create')">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                                    </svg>
                                    Add User
                                </div>
                            </x-dropdown-link>
                        @endif

                        @if(in_array($userRole, ['guru', 'siswa', 'kepsek']))
                            <x-dropdown-link :href="route('assessment.index')">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 00-2 2"/>
                                    </svg>
                                    Take Assessment
                                </div>
                            </x-dropdown-link>
                        @endif

                        <!-- Logout -->
                        <div class="border-t border-gray-100 mt-1">
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <x-dropdown-link :href="route('logout')"
                                        onclick="event.preventDefault(); this.closest('form').submit();">
                                    <div class="flex items-center">
                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                                        </svg>
                                        {{ __('Log Out') }}
                                    </div>
                                </x-dropdown-link>
                            </form>
                        </div>
                    </x-slot>
                </x-dropdown>
            </div>

            <!-- Hamburger Menu for Mobile -->
            <div class="-me-2 flex items-center sm:hidden">
                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Responsive Navigation Menu -->
    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
            @foreach($menuItems as $key => $menuItem)
                <x-responsive-nav-link
                    :href="route($menuItem['route'])"
                    :active="$menuItem['is_active']"
                    class="flex items-center">
                    <span class="mr-3">
                        {!! NavigationService::getIcon($menuItem['icon']) !!}
                    </span>
                    {{ $menuItem['label'] }}
                </x-responsive-nav-link>
            @endforeach
        </div>

        <!-- Responsive Settings Options -->
        <div class="pt-4 pb-1 border-t border-gray-200">
            <!-- User Info -->
            <div class="px-4">
                <div class="flex items-center">
                    <img class="h-10 w-10 rounded-full mr-3" src="{{ Auth::user()->getAvatarUrl() }}" alt="{{ Auth::user()->name }}">
                    <div>
                        <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
                        <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
                        @if(Auth::user()->school)
                            <div class="text-xs text-gray-400">{{ Auth::user()->school->name }}</div>
                        @endif
                    </div>
                    <span class="ml-auto inline-flex px-2 py-1 text-xs font-semibold rounded-full
                        @if($userRole == 'admin') bg-blue-100 text-blue-800
                        @elseif($userRole == 'kepsek') bg-green-100 text-green-800
                        @elseif($userRole == 'guru') bg-yellow-100 text-yellow-800
                        @else bg-purple-100 text-purple-800 @endif">
                        {{ ucfirst($userRole) }}
                    </span>
                </div>
            </div>

            <!-- Mobile Menu Links -->
            <div class="mt-3 space-y-1">
                <x-responsive-nav-link :href="route('profile.edit')" class="flex items-center">
                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                    {{ __('Profile') }}
                </x-responsive-nav-link>

                @if($userRole == 'admin')
                    <x-responsive-nav-link :href="route('admin.schools.create')" class="flex items-center">
                        <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                        Add School
                    </x-responsive-nav-link>
                    <x-responsive-nav-link :href="route('admin.users.create')" class="flex items-center">
                        <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                        </svg>
                        Add User
                    </x-responsive-nav-link>
                @endif

                @if(in_array($userRole, ['guru', 'siswa', 'kepsek']))
                    <x-responsive-nav-link :href="route('assessment.index')" class="flex items-center">
                        <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 00-2 2"/>
                        </svg>
                        Take Assessment
                    </x-responsive-nav-link>
                @endif

                <!-- Authentication -->
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <x-responsive-nav-link :href="route('logout')"
                            onclick="event.preventDefault(); this.closest('form').submit();"
                            class="flex items-center">
                        <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                        </svg>
                        {{ __('Log Out') }}
                    </x-responsive-nav-link>
                </form>
            </div>
        </div>
    </div>
</nav>