@php
$containerNav = $containerNav ?? 'container-fluid';
$navbarDetached = ($navbarDetached ?? '');
$first_letter = null;
$first_letter = strtoupper(substr(Auth::user()->name, 0, 1))
@endphp

<!-- Navbar -->
@if(isset($navbarDetached) && $navbarDetached == 'navbar-detached')
<nav class="layout-navbar {{$containerNav}} navbar navbar-expand-xl {{$navbarDetached}} align-items-center bg-navbar-theme" id="layout-navbar">
    @endif
    @if(isset($navbarDetached) && $navbarDetached == '')
    <nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
        <div class="{{$containerNav}}">
            @endif

            <!--  Brand demo (display only for navbar-full and hide on below xl) -->
            @if(isset($navbarFull))
            <div class="navbar-brand app-brand demo d-none d-xl-flex py-0 me-4">
                <a href="{{url('/')}}" class="app-brand-link gap-2">
                    <span class="app-brand-logo demo">
                        @include('client/_partials.macros',["width"=>25,"withbg"=>'#696cff'])
                    </span>
                </a>
            </div>
            @endif

            <!-- ! Not required for layout-without-menu -->
            @if(!isset($navbarHideToggle))
            <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0{{ isset($menuHorizontal) ? ' d-xl-none ' : '' }} {{ isset($contentNavbar) ?' d-xl-none ' : '' }}">
                <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                    <i class="bx bx-menu bx-sm"></i>
                </a>
            </div>
            @endif

            <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">

                <ul class="navbar-nav flex-row align-items-center ms-auto">

                    <!-- Notifications -->
                    <li class="nav-item navbar-dropdown dropdown-user dropdown mt-2">

                        <a class="nav-link dropdown-toggle hide-arrow" @if(Auth::user()->unreadNotifications->count() > 0) onclick="readNotifications()" @endif href="javascript:void(0);" data-bs-toggle="dropdown">
                            <div class="avatar mt-1">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="26">
                                    <path fill="#696cff" d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z" />
                                </svg>
                                @if(Auth::user()->unreadNotifications->count() > 0)
                                    <div class="nbr-notification" id="notificationNumber">{{ Auth::user()->unreadNotifications->count() }}</div>
                                @endif
                            </div>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end overflow-auto w-300 h-max-500">
                            @foreach ( Auth::user()->notifications as $index => $notification)
                                <li>
                                    <a class="dropdown-item" @if (array_key_exists('conveying_id', $notification->data)) href="{{ route('client.conveying.show', $notification->data['conveying_id']) }}" @endif>
                                        <span class="align-middle text-wrap">{{ $notification->data['description_fr'] }}</span>
                                    </a>
                                </li>
                                @if ($index + 1 < Auth::user()->notifications->count())
                                    <li>
                                        <div class="dropdown-divider"></div>
                                    </li>
                                @endif
                            @endforeach
                            <input type="number" id="notifications-state" value="1" hidden>
                        </ul>
                    </li>
                    <!--/ Notifications -->

                    <!-- User -->
                    <li class="nav-item navbar-dropdown dropdown-user dropdown">

                        <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                            <div class="avatar avatar-online">
                                <p class="profile-image fc-toolbar-title">{{ $first_letter }}</p>
                            </div>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                                <a class="dropdown-item" href="javascript:void(0);">
                                    <div class="d-flex">
                                        <div class="flex-shrink-0 me-3">
                                            <div class="avatar avatar-online">
                                                <p class="profile-image">{{ $first_letter }}</p>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1">
                                            <span class="fw-semibold d-block pt-2">{{ Auth::user()->name }}</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <div class="dropdown-divider"></div>
                            </li>
                            {{-- <li>
                                <a class="dropdown-item" href="{{ route('client.profile') }}">
                                    <i class="bx bx-user me-2"></i>
                                    <span class="align-middle">{{ __('menu.account') }}</span>
                                </a>
                            </li> --}}
                            <li>
                                <div class="dropdown-divider"></div>
                            </li>
                            <li>
                                <form action="{{ route('admin.logout') }}" method="POST">
                                    @csrf
                                    <button class="btn dropdown-item">
                                        <i class='bx bx-power-off me-2'></i>
                                        <span class="align-middle">{{ __('menu.log_out') }}</span>
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </li>
                    <!--/ User -->
                </ul>
            </div>

            @if(!isset($navbarDetached))
        </div>
        @endif
    </nav>
    <!-- / Navbar -->

    <script>
        function readNotifications() {
            document.getElementById('notificationNumber').setAttribute('hidden', true);
            var url = '{{ route('client.notifications.read')  }}';
            var data = { 'notifications_ids' :