@php
    $user = auth()->user();
    // Wyświetla Imię i Nazwisko, a jeśli ich brakuje (co teoretycznie nie powinno mieć miejsca przy obecnej walidacji), wyświetli login.
    $displayName = ($user->first_name && $user->last_name) ? $user->first_name . ' ' . $user->last_name : $user->login;
@endphp

<nav class="bg-slate-900 text-white p-4 shadow-md relative z-50">
    <div class="flex justify-between items-center">
        <div class="flex items-center gap-8">
            <div class="font-bold text-lg flex items-center gap-2">
                <span class="bg-red-500 text-white px-2 py-0.5 rounded text-sm uppercase">Global Admin</span>
            </div>
            
            <!-- Menu główne -->
            <div class="hidden md:flex gap-6 text-sm font-semibold">
                <a href="{{ route('admin.dashboard') }}" class="{{ request()->routeIs('admin.dashboard') ? 'text-white border-b-2 border-white pb-1' : 'text-slate-400 hover:text-white transition pb-1' }}">Dashboard</a>
                <a href="{{ route('admin.tenants.index') }}" class="{{ request()->routeIs('admin.tenants.*') ? 'text-white border-b-2 border-white pb-1' : 'text-slate-400 hover:text-white transition pb-1' }}">Klienci (Szkoły)</a>

                @if($user->role !== 'manager')
                    <a href="{{ route('admin.users.index') }}" class="{{ request()->routeIs('admin.users.*') ? 'text-white border-b-2 border-white pb-1' : 'text-slate-400 hover:text-white transition pb-1' }}">Użytkownicy</a>
                    <a href="{{ route('admin.settings.index') }}" class="{{ request()->routeIs('admin.settings.*') ? 'text-white border-b-2 border-white pb-1' : 'text-slate-400 hover:text-white transition pb-1' }}">Ustawienia</a>
                @endif
            </div>
        </div>
        
        <div class="flex items-center gap-4">
            <!-- Prawa strona: Informacje o użytkowniku i wylogowanie (Desktop) -->
            <div class="hidden md:flex items-center gap-4 border-l border-slate-700 pl-4">
                <div class="text-sm text-slate-300">
                    Witaj, <strong class="text-white">{{ $displayName }}</strong>
                </div>
                
                <button type="button" onclick="document.getElementById('change-password-modal').classList.remove('hidden')" class="text-xs bg-slate-800 hover:bg-slate-700 text-slate-300 px-3 py-1.5 rounded transition font-bold border border-slate-700">
                    Zmień hasło
                </button>

                <form action="{{ route('admin.logout') }}" method="POST" class="m-0">
                    @csrf
                    <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-1.5 rounded text-sm font-bold transition">Wyloguj się</button>
                </form>
            </div>

            <!-- Przycisk Hamburger (Smartfony) -->
            <button type="button" id="mobile-menu-btn" class="md:hidden text-slate-300 hover:text-white focus:outline-none p-1">
                <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
        </div>
    </div>

    <!-- Menu mobilne -->
    <div id="mobile-menu" class="hidden md:hidden mt-4 pb-2 border-t border-slate-700 pt-4">
        <div class="flex flex-col gap-4 text-base font-semibold px-2">
            <div class="text-sm text-slate-400 mb-2 border-b border-slate-800 pb-2">
                Zalogowano jako: <strong class="text-white">{{ $displayName }}</strong>
            </div>
            
            <a href="{{ route('admin.dashboard') }}" class="{{ request()->routeIs('admin.dashboard') ? 'text-white' : 'text-slate-400' }}">Dashboard</a>
            <a href="{{ route('admin.tenants.index') }}" class="{{ request()->routeIs('admin.tenants.*') ? 'text-white' : 'text-slate-400' }}">Klienci (Szkoły)</a>

            @if($user->role !== 'manager')
                <a href="{{ route('admin.users.index') }}" class="{{ request()->routeIs('admin.users.*') ? 'text-white' : 'text-slate-400' }}">Użytkownicy</a>
                <a href="{{ route('admin.settings.index') }}" class="{{ request()->routeIs('admin.settings.*') ? 'text-white' : 'text-slate-400' }}">Ustawienia</a>
            @endif
            
            <button type="button" onclick="document.getElementById('change-password-modal').classList.remove('hidden'); document.getElementById('mobile-menu').classList.add('hidden');" class="text-left text-blue-400 hover:text-blue-300 transition mt-2">Zmień hasło</button>
            
            <form action="{{ route('admin.logout') }}" method="POST" class="m-0 mt-2 border-t border-slate-700 pt-4">
                @csrf
                <button type="submit" class="w-full text-left text-red-400 hover:text-red-300 transition font-bold">Wyloguj się</button>
            </form>
        </div>
    </div>
</nav>

<!-- MODAL: Zmiana własnego hasła -->
<div id="change-password-modal" class="hidden fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-[100] p-4 text-slate-800">
    <div class="bg-white rounded-xl shadow-2xl max-w-sm w-full p-6">
        <h2 class="text-xl font-bold border-b pb-2 mb-4">Zmień swoje hasło</h2>
        <form method="POST" action="{{ route('admin.profile.password') }}">
            @csrf @method('PUT')
            
            <div class="mb-3">
                <label class="block text-xs font-bold mb-1">Obecne hasło</label>
                <input type="password" name="current_password" required class="w-full border p-2 rounded text-sm">
            </div>
            
            <div class="mb-3">
                <label class="block text-xs font-bold mb-1">Nowe hasło</label>
                <input type="password" name="password" required class="w-full border p-2 rounded text-sm">
                <p class="text-[10px] text-slate-500 mt-1">Min. 10 znaków, małe i duże litery, cyfra/znak spec.</p>
            </div>
            
            <div class="mb-5">
                <label class="block text-xs font-bold mb-1">Powtórz nowe hasło</label>
                <input type="password" name="password_confirmation" required class="w-full border p-2 rounded text-sm">
            </div>
            
            <div class="flex justify-end gap-3">
                <button type="button" onclick="document.getElementById('change-password-modal').classList.add('hidden')" class="px-4 py-2 bg-slate-200 rounded font-bold text-sm">Anuluj</button>
                <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 transition text-white rounded font-bold text-sm shadow-sm">Zmień hasło</button>
            </div>
        </form>
    </div>
</div>

<script>
    const mobileBtn = document.getElementById('mobile-menu-btn');
    if(mobileBtn) {
        mobileBtn.addEventListener('click', function() {
            document.getElementById('mobile-menu').classList.toggle('hidden');
        });
    }
</script>