@if(auth()->check() && auth()->user()->activeRoles()->count() > 0)
<div class="dropdown">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="roleSwitchDropdown" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="uil uil-user-check me-1"></i>
        {{ auth()->user()->getCurrentRoleDisplayName() }}
    </button>
    <ul class="dropdown-menu" aria-labelledby="roleSwitchDropdown">
        <li><h6 class="dropdown-header">Switch Role</h6></li>
        @foreach(auth()->user()->activeRoles as $role)
            <li>
                @if(auth()->user()->currentRole && auth()->user()->currentRole->id === $role->id)
                    <span class="dropdown-item active">
                        <i class="uil uil-check me-2"></i>{{ $role->display_name }}
                    </span>
                @else
                    <a class="dropdown-item role-switch-link" href="#" data-role-id="{{ $role->id }}">
                        <i class="uil uil-user me-2"></i>{{ $role->display_name }}
                    </a>
                @endif
            </li>
        @endforeach
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="{{ route('user.roles.index') }}">
            <i class="uil uil-setting me-2"></i>Manage Roles
        </a></li>
    </ul>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.role-switch-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            const roleId = this.dataset.roleId;
            
            // Show loading state
            this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Switching...';
            
            fetch('{{ route("user.roles.switch") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    role_id: roleId
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Redirect to the new role's dashboard if provided
                    if (data.redirect_url) {
                        window.location.href = data.redirect_url;
                    } else {
                        // Fallback to reload if no redirect URL provided
                        window.location.reload();
                    }
                } else {
                    alert(data.message || 'Failed to switch role');
                    // Reset link
                    this.innerHTML = '<i class="uil uil-user me-2"></i>' + this.textContent.replace('Switching...', '');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while switching roles');
                // Reset link
                this.innerHTML = '<i class="uil uil-user me-2"></i>' + this.textContent.replace('Switching...', '');
            });
        });
    });
});
</script>
@endif