<!-- Language Switcher Dropdown -->
<div x-data="{ open: false }" class="relative">
    @php
        $currentLocale = app()->getLocale();
        $currentLanguage = \App\Models\Language::where('code', $currentLocale)->where('is_active', true)->first();
        $availableLanguages = \App\Models\Language::where('is_active', true)->orderBy('sort_order')->orderBy('name')->get();
    @endphp

    <button @click="open = !open" class="flex items-center gap-2 px-3 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-all duration-200 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600">
        @php
            $flagMap = [
                'ro' => 'https://flagcdn.com/w40/ro.png',
                'en' => 'https://flagcdn.com/w40/gb.png',
            ];
            $currentCode = $currentLanguage ? $currentLanguage->code : 'ro';
            $flagUrl = $flagMap[$currentCode] ?? null;
        @endphp
        @if($flagUrl)
            <img src="{{ $flagUrl }}" alt="{{ $currentCode }}" class="w-6 h-4 object-cover rounded shadow-sm">
        @else
            <i class="fas fa-language text-lg"></i>
        @endif
        <span class="text-sm font-semibold uppercase">{{ $currentCode }}</span>
        <i class="fas fa-chevron-down text-xs transition-transform duration-200" :class="open ? 'rotate-180' : ''"></i>
    </button>

    <!-- Language Dropdown Menu -->
    <div x-show="open"
         @click.away="open = false"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-50"
         style="display: none;">

        <!-- Languages List -->
        <div class="py-2">
            @php
                $flagMap = [
                    'ro' => 'https://flagcdn.com/w40/ro.png',
                    'en' => 'https://flagcdn.com/w40/gb.png',
                ];
            @endphp
            @foreach($availableLanguages as $language)
                @php
                    $flagUrl = $flagMap[$language->code] ?? null;
                @endphp
                <a href="?lang={{ $language->code }}"
                   class="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors {{ $language->code === $currentLocale ? 'bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500' : '' }}">
                    @if($flagUrl)
                        <img src="{{ $flagUrl }}" alt="{{ $language->code }}" class="w-8 h-6 object-cover rounded shadow-sm">
                    @else
                        <i class="fas fa-flag text-gray-400"></i>
                    @endif
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ $language->name }}</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400 uppercase">{{ $language->code }}</div>
                    </div>
                    @if($language->code === $currentLocale)
                        <i class="fas fa-check-circle text-blue-600 dark:text-blue-400"></i>
                    @endif
                </a>
            @endforeach
        </div>

        @auth
            @if(Auth::user()->is_admin)
                <!-- Admin Link -->
                <div class="border-t border-gray-200 dark:border-gray-700 py-1">
                    <a href="{{ route('admin.settings.languages.index') }}" class="flex items-center px-4 py-2 text-sm text-blue-600 dark:text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-700">
                        <i class="fas fa-cog mr-2"></i>
                        Administrează Limbile
                    </a>
                </div>
            @endif
        @endauth
    </div>
</div>
