<header class="bg-blue-900 text-white shadow-lg">
    <div class="container mx-auto px-4 py-4">
        <div class="flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <h1 class="text-2xl font-bold">Call Center Polri</h1>
                <span class="text-sm text-blue-200">Sistem Nasional</span>
            </div>
            <div class="flex items-center space-x-4">
                @auth
                    <div class="flex items-center space-x-2">
                        <span class="text-sm">{{ auth()->user()->name }}</span>
                        <span class="px-2 py-1 text-xs rounded-full bg-blue-700">
                            {{ ucfirst(auth()->user()->role) }}
                        </span>
                    </div>
                    <form method="POST" action="{{ route('logout') }}" class="inline">
                        @csrf
                        <button type="submit" class="bg-red-600 px-4 py-2 rounded hover:bg-red-700">
                            Logout
                        </button>
                    </form>
                @else
                    <a href="{{ route('login') }}" class="bg-blue-600 px-4 py-2 rounded hover:bg-blue-700">
                        Login
                    </a>
                @endauth
            </div>
        </div>
    </div>
</header>

