<link rel="stylesheet" href="{{ asset('assets/frontend/css/app.css') }}">
<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    .navbar-profile-picture {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #ddd;
    }

    /* Add padding to body to prevent content from hiding behind fixed navbar */
    body {
        padding-top: 70px;
    }

    /* Style for dropdown toggle without underline */
    .dropdown-toggle:hover {
        text-decoration: none;
    }

    /* Ensure dropdown menu appears above other content */
    .dropdown-menu {
        z-index: 1030;
    }
</style>
<nav class="navbar navbar-expand-lg navbar-dark bgGrad text-white fixed-top">
    <div class="container-fluid">
        <div class="d-flex customPos">
            <div class="d-block d-md-none">
                <div class="btn btn-transparent" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="offcanvasScrolling">
                    <img src="{{asset("assets/frontend/images/list.svg")}}" alt="list">
                </div>
            </div>
            <a>
                <img src="{{ asset('assets/frontend/logos/logoWhite.png') }}" alt="logo" width="72px">
            </a>
            <a class="navbar-brand text-light ms-md-3 textLg">Faculty Documentation Portal</a>
        </div>
        @if (!Auth::guest())
        <ul class="navbar-nav me-md-5">
            <div class="d-flex align-items-center bgRightShade">
                <div class="dropdown ms-2">
                    <a class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
                       href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="{{ asset('assets/frontend/images/user.png') }}"
                             alt="profile"
                             class="navbar-profile-picture me-2">
                        <span>{{ Auth::user()->name }}</span>
                    </a>

                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                        <li>
                            <a class="dropdown-item" href="{{ route('faculty.profile.index') }}">
                                <i class="fa-solid fa-id-card me-2 text-primary"></i> Profile
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="dropdown-item text-danger">
                                    <i class="fa-solid fa-right-from-bracket me-2"></i> Logout
                                </button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
        </ul>
        @endif
        @yield('login')
    </div>
</nav>
