{{-- Language Switcher --}}
<div class="lang-switcher" role="navigation" aria-label="Language switcher">
    @foreach(config('app.available_locales', ['en', 'ar']) as $locale)
        @if($locale !== app()->getLocale())
            <form method="POST" action="{{ route('locale.switch', $locale) }}" 
                  style="display:inline" onsubmit="this.querySelector('button').classList.add('gp-action-pending'); this.querySelector('button').disabled = true;">
                @csrf
                <button type="submit" 
                        class="lang-btn {{ $locale === 'ar' ? 'font-arabic' : '' }}"
                        title="Switch to {{ $locale === 'ar' ? 'العربية' : 'English' }}">
                    <i class="fas fa-spinner fa-spin lang-spinner" style="display: none;"></i>
                    <span class="lang-text">{{ $locale === 'ar' ? 'ع' : 'EN' }}</span>
                </button>
            </form>
        @else
            <span class="lang-btn lang-btn--active">
                {{ $locale === 'ar' ? 'ع' : 'EN' }}
            </span>
        @endif
    @endforeach
</div>

<style>
    .lang-switcher {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        background: rgba(0, 0, 0, 0.08);
        border-radius: 1.5rem;
        padding: 0.125rem;
    }
    
    .lang-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2rem;
        height: 1.75rem;
        padding: 0 0.5rem;
        border: none;
        border-radius: 1.5rem;
        background: transparent;
        color: var(--gp-text-muted, #64748b);
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
    }
    
    .lang-btn:hover {
        background: rgba(0, 0, 0, 0.08);
        color: var(--gp-primary, #162a42);
    }
    
    .lang-btn--active {
        background: var(--gp-primary, #162a42);
        color: #fff;
    }
    
    .font-arabic {
        font-family: 'Cairo', sans-serif;
    }

    /* Loading State */
    .lang-btn.gp-action-pending .lang-spinner {
        display: inline-block !important;
    }
    .lang-btn.gp-action-pending .lang-text {
        display: none;
    }
    .lang-btn:disabled {
        cursor: not-allowed;
        opacity: 0.7;
    }
</style>