<!-- Country selector visible on screens > 768px wide (md breakpoint) -->
<div class="dropdown d-none d-md-block nav">
    <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{{ __('locale.' . session('locale')) }}">
        <div class="ratio ratio-1x1" style="width: 20px">
            <img src="/img/flags/{{ session('locale') === 'en' ? 'en-us' : 'id' }}.png" alt="{{ __('locale.' . session('locale')) }}">
        </div>
    </a>
    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
        <li>
            <a class="dropdown-item {{ session('locale') === 'en' ? 'active' : '' }}" href="#" onclick="switchLanguage('en')">
                <img src="/img/flags/en-us.png" class="flex-shrink-0 me-2" width="20" alt="United States">
                {{ __('languages.en') }}
            </a>
        </li>
    
        <li>
            <a class="dropdown-item {{ session('locale') === 'id' ? 'active' : '' }}" href="#" onclick="switchLanguage('id')">
                <img src="/img/flags/id.png" class="flex-shrink-0 me-2" width="20" alt="Indonesia">
                {{ __('languages.id') }}
            </a>
        </li>
     
    </ul>
</div>

<script>
function switchLanguage(locale) {
    // Store language in session via AJAX
    fetch('/locale/switch', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            locale: locale
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Reload page to reflect changes
            window.location.reload();
        }
    })
    .catch(error => console.error('Error switching language:', error));
}
</script>
