@php
    $navUser     = Auth::user();
    $navParts    = preg_split('/\s+/', trim($navUser->name)) ?: [];
    $navInitials = mb_strtoupper(
        mb_substr($navParts[0] ?? '', 0, 1)
        . (count($navParts) > 1 ? mb_substr(end($navParts), 0, 1) : '')
    );
@endphp
<nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
     id="layout-navbar">
    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
        <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
            <i class="ti tabler-menu-2 ti-md"></i>
        </a>
    </div>


    <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 -->
            @auth
                <livewire:notifications.notification-bell />
            @endauth
            <!--/ Notifications -->

            <!-- Language switcher (staff & customer) — Vuexy dropdown-language design, wired to /locale -->
            @php($navCurrentLang = currentLanguage())
            @if ($navCurrentLang)
                <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
                    <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                        <i class="ti tabler-language ti-md"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        @foreach (\App\Models\Language::orderBy('id')->get() as $navLanguage)
                            <li>
                                <a class="dropdown-item {{ $navCurrentLang->language_code === $navLanguage->language_code ? 'active' : '' }}"
                                   href="{{ url('locale/' . $navLanguage->language_code) }}">
                                    <span>{{ __('nationality.' . $navLanguage->language) }}</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </li>
            @endif
            <!--/ Language switcher -->

            <!-- User -->
            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                <a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
                    <div class="avatar avatar-online">
                        <span class="avatar-initial rounded-circle bg-primary text-white fw-bold">{{ $navInitials }}</span>
                    </div>
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item mt-0" href="{{ route('dashboard') }}">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-2">
                                    <div class="avatar avatar-online">
                                        <span class="avatar-initial rounded-circle bg-primary text-white fw-bold">{{ $navInitials }}</span>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <p class="font-bold mb-0">{{Auth::user()->name}} </p>
                                    <small class="text-muted">{{auth()->user()->getRoleNames()->first();}} </small>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <div class="dropdown-divider my-1 mx-n2"></div>
                    </li>
                    <li>
                        <a class="dropdown-item" href="{{route('profile')}}">
                            <i class="ti tabler-user me-3 ti-md"></i><span class="align-middle">{{__('My profile')}}</span>
                        </a>
                    </li>
                    {{-- Ticket creation shortcuts: each one shown by its own permission, so granting
                         it to another role needs no change here. --}}
                    @can('create_sales_ticket')
                        <li>
                            <a class="dropdown-item" href="{{route('sale-tickets.create')}}">
                                <i class="ti tabler-ticket me-3 ti-md"></i><span
                                    class="align-middle">{{__('Create sale tickets')}}</span>
                            </a>
                        </li>
                    @endcan
                    @can('create_purchase_ticket')
                        <li>
                            <a class="dropdown-item" href="{{route('purchase-tickets.create')}}">
                                <i class="ti tabler-ticket me-3 ti-md"></i><span
                                    class="align-middle">{{__('Create purchase tickets')}}</span>
                            </a>
                        </li>
                    @endcan
                    <li>
                        <a class="dropdown-item" href="{{route('home.index')}}">
                            <i class="ti tabler-home me-3 ti-md"></i><span class="align-middle">{{ __('Home') }}</span>
                        </a>
                    </li>
                    <li>
                        <div class="d-grid px-2 pt-2 pb-1">
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <x-responsive-nav-link :href="route('logout')"
                                                       class="btn btn-sm btn-danger d-flex text-white"
                                                       onclick="event.preventDefault();
                                                    this.closest('form').submit();">
                                    <small class="align-middle">
                                        {{ __('Log Out') }}</small>
                                    <i class="ti tabler-logout ms-2 ti-14px"></i>
                                </x-responsive-nav-link>
                            </form>
                        </div>
                    </li>
                </ul>
            </li>
            <!--/ User -->
        </ul>
    </div>

</nav>