<!-- Location selector for sidebar -->
<div class="dropdown nav">
    <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="animate-target location-name-sidebar">{{ $selected->display_name ?? '-'}}</span>
    </a>
    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
        @foreach ($locations as $loc)
            <li>
                <a class="dropdown-item" href="#" 
                   onclick="selectLocationSidebar({{ $loc->id }}, '{{ $loc->display_name }}')">
                    {{ $loc->display_name }}
                </a>
            </li>
        @endforeach
    </ul>
</div>



<script>
function selectLocationSidebar(locationId, locationName) {
    // Store location in session via AJAX
    fetch('/location/select', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            location_id: locationId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update the displayed location
            document.querySelector('.location-name-sidebar').textContent = locationName;
            // Reload page to reflect changes
            window.location.reload();
        }
    })
    .catch(error => console.error('Error selecting location:', error));
}
</script>