@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="{{ $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="w-100 py-2 px-5">
    <div class="rounded-pill bg-secondary-gray d-flex align-items-center px-3">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z"
                stroke="#2A2D37" stroke-opacity="0.6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M21 21.0004L16.65 16.6504" stroke="#2A2D37" stroke-opacity="0.6" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <input class="form-control bg-transparent border-0" placeholder="Search immatricule ou nom ..etc"
            type="text">
    </div>
</div>
<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
    <div class="rounded bg-danger w-100"></div>

    <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="#182F45"
                            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 bg-main-blue  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 bg-main-blue">{{ $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('fleet.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('client.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':