@php
 use App\Helpers\LanguageHelper;

 $currentLanguage = LanguageHelper::getCurrentLanguage();
 $availableLanguages = LanguageHelper::getEnabledLanguages();
 $uiConfig = LanguageHelper::getUIConfig();
 $currentLangDetails = LanguageHelper::getLanguageDetails($currentLanguage);
@endphp

<div class="language-selector relative" x-data="{ open: false }" @click.away="open = false">
 <!-- Invisible Overlay when dropdown is open (to prevent header layout issues) -->
 <div
 x-show="open"
 x-transition:enter="transition ease-out duration-100"
 x-transition:enter-start="opacity-0"
 x-transition:enter-end="opacity-100"
 x-transition:leave="transition ease-in duration-100"
 x-transition:leave-start="opacity-100"
 x-transition:leave-end="opacity-0"
 class="fixed inset-0 z-40 bg-black bg-opacity-10"
 style="display: none;"
 @click="open = false">
 </div>

 <!-- Current Language Button -->
 <button
 @click="open = !open"
 class="language-selector-trigger relative z-50"
 :class="{ 'active': open }"
 aria-label="Select Language"
 >
 @if($uiConfig['show_flags'] ?? true)
 <span class="language-flag">{{ $currentLangDetails['flag'] ?? '🌐' }}</span>
 @endif

 @if($uiConfig['show_native_names'] ?? true)
 <span class="language-name">{{ $currentLangDetails['native_name'] ?? 'Language' }}</span>
 @endif

 <svg class="language-dropdown-arrow" :class="{ 'rotated': open }" fill="currentColor" 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>
 </button>

 <!-- Language Dropdown -->
 <div
 x-show="open"
 x-transition:enter="transition ease-out duration-200"
 x-transition:enter-start="opacity-0 scale-95 -translate-y-2"
 x-transition:enter-end="opacity-100 scale-100 translate-y-0"
 x-transition:leave="transition ease-in duration-150"
 x-transition:leave-start="opacity-100 scale-100 translate-y-0"
 x-transition:leave-end="opacity-0 scale-95 -translate-y-2"
 class="language-dropdown absolute z-50"
 style="display: none;"
 @click.stop
 >
 @foreach($availableLanguages as $code => $language)
 @if($code !== $currentLanguage)
 <a
 href="{{ route('language.switch', $code) }}"
 class="language-option"
 data-language="{{ $code }}"
 >
 @if($uiConfig['show_flags'] ?? true)
 <span class="language-flag">{{ $language['flag'] }}</span>
 @endif

 @if($uiConfig['show_native_names'] ?? true)
 <span class="language-name">{{ $language['native_name'] }}</span>
 @endif

 <span class="language-english-name">{{ $language['name'] }}</span>
 </a>
 @endif
 @endforeach
 </div>
</div>