@php
    use Illuminate\Support\Facades\Auth;

    $role = Auth::user()->role ?? null;
    $currentRoute = Route::currentRouteName();
    $navbarHexColor = '#003366'; // Custom navbar color
    $avatarUrl = asset('images/avatar-human.png'); // Avatar path
@endphp

<nav class="navbar navbar-expand-lg navbar-dark shadow-sm px-4"
    style="background-color: {{ $navbarHexColor }}; height: 70px;">
    <div class="container-fluid">
        <!-- Logo -->
        <a class="navbar-brand d-flex align-items-center" href="{{ url('/') }}">
            <img src="{{ asset('images/real-logo.png') }}" alt="Logo" height="36">
        </a>

        <!-- Mobile toggle -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
            aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Nav items -->
        <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
            <ul class="navbar-nav d-flex flex-row align-items-center gap-3 mb-0">

                {{-- Public Menu --}}
                <li class="nav-item">
                    <a class="nav-link text-white {{ request()->is('/') ? 'active fw-bold' : '' }}"
                        href="{{ url('/') }}">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white {{ request()->is('about') ? 'active fw-bold' : '' }}"
                        href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white {{ request()->is('contact') ? 'active fw-bold' : '' }}"
                        href="#">Contact Us</a>
                </li>

                {{-- Role-Specific Dashboards --}}
                @auth
                    @if ($role === 'admin')
                        <li class="nav-item">
                            <a class="nav-link text-white {{ request()->is('admin/dashboard') ? 'active fw-bold' : '' }}"
                                href="{{ route('admin.dashboard') }}">Admin Dashboard</a>
                        </li>
                    @elseif ($role === 'agent')
                        <li class="nav-item">
                            <a class="nav-link text-white {{ request()->is('agent/dashboard') ? 'active fw-bold' : '' }}"
                                href="{{ route('agent.dashboard') }}">Agent Dashboard</a>
                        </li>
                    @elseif ($role === 'client')
                        <li class="nav-item">
                            <a class="nav-link text-white {{ request()->is('client/dashboard') ? 'active fw-bold' : '' }}"
                                href="{{ route('client.dashboard') }}">Client Dashboard</a>
                        </li>
                    @endif

                    <!-- Avatar Dropdown -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle p-0" href="#" id="userDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <img src="{{ $avatarUrl }}" class="rounded-circle" width="40" height="40"
                                alt="Avatar">
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li>
                                <a class="dropdown-item" href="{{ route('profile.edit') }}">
                                    <i data-feather="user" class="me-50"></i> Profile
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#"
                                    onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                    <i data-feather="log-out" class="me-50"></i> Logout
                                </a>
                                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                    @csrf
                                </form>
                            </li>
                        </ul>
                    </li>
                @endauth
            </ul>
        </div>
    </div>
</nav>

<!-- Feather Icons Init (if not already included) -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    });
</script>