@inject('request', 'Illuminate\Http\Request')
<!-- Main Header -->

<div class="offcanvas offcanvas-end no-print" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel" style="overflow-y: scroll; height:100%;">
    <div class="offcanvas-header">
        <h5 id="offcanvasEndLabel" class="offcanvas-title">@yield('offcanvas-title')</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body my-auto mx-0 flex-grow-0">
        @yield('offcanvas-end')
        <button type="button" class="btn btn-outline-danger d-grid w-100" data-bs-dismiss="offcanvas">{{__('messages.cancel')}}</button>
    </div>
</div>
<nav
        class="no-print 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-4 me-xl-0 d-xl-none">
        <a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
            <i class="ri-menu-fill ri-22px"></i>
        </a>
    </div>

    <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
        <!-- Style Switcher -->
        <div class="navbar-nav align-items-center">
            <div class="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
                <a
                        class="nav-link btn btn-text-secondary rounded-pill btn-icon dropdown-toggle hide-arrow"
                        href="javascript:void(0);"
                        data-bs-toggle="dropdown">
                    <i class="ri-22px"></i>
                </a>
                <ul class="dropdown-menu dropdown-menu-start dropdown-styles">
                    <li>
                        <a class="dropdown-item" href="javascript:void(0);" data-theme="light">
                            <span class="align-middle"><i class="ri-sun-line ri-22px me-3"></i>Light</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:void(0);" data-theme="dark">
                            <span class="align-middle"><i class="ri-moon-clear-line ri-22px me-3"></i>Dark</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:void(0);" data-theme="system">
                            <span class="align-middle"><i class="ri-computer-line ri-22px me-3"></i>System</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- / Style Switcher-->
        <div class="language-switcher">
            @php
                $user_id = auth()->user()->id;
                $user = \App\User::find($user_id);
            @endphp

            @foreach(config('constants.langs') as $key => $val)
                <button class="lang-btn {{ $user->language == $key ? 'active' : '' }}"
                        data-lang="{{ $key }}">
                    <img src="{{ asset('flags/' . $key . '.png') }}" alt="{{ $val['full_name'] }}" class="flag-img">
                </button>
            @endforeach
        </div>


        <ul class="navbar-nav flex-row align-items-center ms-auto">
            <!-- 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">
                        <img src="{{asset('assets/img/avatars/1.png')}}" alt class="rounded-circle" />
                    </div>
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item" href="#">
                            <div class="d-flex">
                                <div class="flex-shrink-0 me-2">
                                    <div class="avatar avatar-online">
                                        <img src="{{asset('assets/img/avatars/1.png')}}" alt class="rounded-circle" />
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <span class="fw-medium d-block">{{ Auth::User()->first_name }} {{ Auth::User()->last_name }}</span>
                                    <small class="text-muted">{{ Auth::User()->surname }}  </small>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <div class="dropdown-divider"></div>
                    </li>
                    <li>
                        <a class="dropdown-item" href="{{route('user.getProfile')}}">
                            <i class="ri-user-3-line me-3"></i><span class="align-middle">{{__('user.change_password')}}</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">
                            <i class="ri-settings-4-line me-3"></i><span class="align-middle">ملفي الشخصي</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">
                        <span class="d-flex align-items-center align-middle">
                          <i class="flex-shrink-0 ri-file-text-line me-3"></i>
                          <span class="flex-grow-1 align-middle">الإشعارات</span>
                          <span class="flex-shrink-0 badge badge-center rounded-pill bg-danger">4</span>
                        </span>
                        </a>
                    </li>
                    <li>
                        <div class="dropdown-divider"></div>
                    </li>
                    <li>
                        <div class="d-grid px-4 pt-2 pb-1">
                            <a class="btn btn-sm btn-danger d-flex waves-effect waves-light" href="{{ action([\App\Http\Controllers\Auth\LoginController::class, 'logout']) }}">
                                <small class="align-middle">@lang('lang_v1.sign_out')</small>
                                <i class="ri-logout-box-r-line ms-2 ri-16px"></i>
                            </a>
                        </div>
                    </li>
                </ul>
            </li>
            <!--/ User -->
        </ul>
    </div>
</nav>