@php
    use Illuminate\Support\Facades\Auth;
    use App\Models\UsefulLink;

    $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 mb-0" style="gap: 24px;">

                {{-- 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="{{ url('/about') }}">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white {{ request()->is('contact') ? 'active fw-bold' : '' }}"
                        href="{{ url('/contact') }}">Contact Us</a>
                </li>

                {{-- Useful Links - Role-Based --}}
                @auth
                    @php $usefulLinks = UsefulLink::all(); @endphp
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle text-white" href="#" id="usefulLinksDropdown"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            Useful Links
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="usefulLinksDropdown"
                            style="background-color: #ffffff; min-width: 220px; max-height: 150px; overflow-y: auto; font-size: 14px;">
                            @foreach ($usefulLinks as $link)
                                <li>
                                    <a class="dropdown-item" href="{{ $link->url }}" target="_blank"
                                        style="white-space: normal; padding: 6px 12px; color: #003366;">
                                        {{ $link->title }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </li>
                @endauth

                {{-- 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" style="margin-left: 16px;">
                        <a class="nav-link dropdown-toggle d-flex align-items-center 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 shadow" aria-labelledby="userDropdown">
                            <li>
                                <a class="dropdown-item d-flex align-items-center text-dark"
                                    href="{{ route('profile.edit') }}">
                                    <i data-feather="user" class="me-50 text-dark"></i> Profile
                                </a>
                            </li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li>
                                <a class="dropdown-item d-flex align-items-center text-dark" href="#"
                                    onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                    <i data-feather="log-out" class="me-50 text-dark"></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 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    });
</script>