@php
    $user = Auth::guard('admin')->user() ?? Auth::user();
    $userName = $user->name ?? 'U';
    $firstChar = strtoupper(mb_substr(trim($userName), 0, 1, 'UTF-8'));
@endphp

@php
    if (Auth::guard('admin')->check()) {
        $authType = 'admin';
        $user = Auth::guard('admin')->user();
    } elseif (Auth::guard('vendor')->check()) {
        $authType = 'vendor';
        $user = Auth::guard('vendor')->user();
    } else {
        $authType = null;
        $user = null;
    }

@endphp


<div id="kt_app_header" class="app-header d-flex flex-column flex-stack">
    <!--begin::Header main-->
    <div class="d-flex flex-stack flex-grow-1">
        <div class="app-header-logo d-flex align-items-center ps-lg-12" id="kt_app_header_logo">
            <!--begin::Sidebar toggle-->
            <div id="kt_app_sidebar_toggle"
                class="app-sidebar-toggle btn btn-sm btn-icon bg-body btn-color-gray-500 btn-active-color-primary w-30px h-30px ms-n2 me-4 d-none d-lg-flex"
                data-kt-toggle="true" data-kt-toggle-state="active" data-kt-toggle-target="body"
                data-kt-toggle-name="app-sidebar-minimize">
                <i class="ki-outline ki-abstract-14 fs-3 mt-1"></i>
            </div>
            <!--end::Sidebar toggle-->
            <!--begin::Sidebar mobile toggle-->
            <div class="btn btn-icon btn-active-color-primary w-35px h-35px ms-3 me-2 d-flex d-lg-none"
                id="kt_app_sidebar_mobile_toggle">
                <i class="ki-outline ki-abstract-14 fs-2"></i>
            </div>
            <!--end::Sidebar mobile toggle-->
            <!--begin::Logo-->
            <a href="index.html" class="app-sidebar-logo">
                <img alt="Logo" src="{{ asset('placeholder_images/logo-light.svg') }}"
                    class="h-50px theme-light-show" />
                <img alt="Logo" src="{{ asset('placeholder_images/logo-light.svg') }}" class="h-25px theme-dark-show" />
            </a>
            <!--end::Logo-->
        </div>
        <!--begin::Navbar-->
        <div class="app-navbar flex-grow-1 justify-content-end" id="kt_app_header_navbar">
            <!--begin::Notifications-->

@if(Auth::guard('admin')->check())
    <div class="app-navbar-item">
        <livewire:admin-notifications-dropdown />
    </div>
@endif

@if(Auth::guard('vendor')->check())
    <div class="app-navbar-item">
        <livewire:vendor-notifications-dropdown />
    </div>
@endif
       
            <!--end::Notifications-->
            <!--begin::User menu-->
            <div class="app-navbar-item ms-2 ms-lg-6" id="kt_header_user_menu_toggle">
                <!--begin::Menu wrapper-->
                <div class="cursor-pointer symbol symbol-circle symbol-30px symbol-lg-45px"
                    data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-attach="parent"
                    data-kt-menu-placement="bottom-end">
                    <img src="assets/media/avatars/300-2.jpg" alt="user" />
                </div>
                <!--begin::User account menu-->
                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg menu-state-color fw-semibold py-4 fs-6 w-275px"
                    data-kt-menu="true">
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <div class="menu-content d-flex align-items-center px-3">
                            <!--begin::Avatar-->
                            <div class="symbol symbol-50px me-5">
                                <!--<img alt="Logo" src="assets/media/avatars/300-2.jpg" />-->
                            </div>
                            <!--end::Avatar-->
                            <!--begin::Username-->
                            <div class="d-flex flex-column">
                               
                                <a href="#" class="fw-semibold text-muted text-hover-primary fs-7">{{ $user->email }}</a>
                            </div>
                            <!--end::Username-->
                        </div>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu separator-->

@if($authType === 'admin')
   
@elseif($authType === 'vendor')
       
                     <div class="separator my-2"></div>
                    <!--end::Menu separator-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-5">
                        <a href="{{ route('vendor.my-profile.show') }}" class="menu-link px-5">My Profile</a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu separator-->
                    <div class="separator my-2"></div>


@endif


                    <!--end::Menu separator-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
                        data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
                        <a href="#" class="menu-link px-5">
                            <span class="menu-title position-relative">{{ __('Mode') }}
                                <span class="ms-5 position-absolute translate-middle-y top-50 end-0">
                                    <i class="ki-outline ki-night-day theme-light-show fs-2"></i>
                                    <i class="ki-outline ki-moon theme-dark-show fs-2"></i>
                                </span></span>
                        </a>
                        <!--begin::Menu-->
                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 fs-base w-150px"
                            data-kt-menu="true" data-kt-element="theme-mode-menu">
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a href="{{ route('dashboard.change-mode', 'light') }}" class="menu-link px-3 py-2"
                                    data-kt-element="mode" data-kt-value="light">
                                    <span class="menu-icon" data-kt-element="icon">
                                        <i class="ki-outline ki-night-day fs-2"></i>
                                    </span>
                                    <span class="menu-title">{{ __('Light') }}</span>
                                </a>
                            </div>
                            <!--end::Menu item-->
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="dark">
                                    <span class="menu-icon" data-kt-element="icon">
                                        <i class="ki-outline ki-moon fs-2"></i>
                                    </span>
                                    <span class="menu-title">{{ __('Dark') }}</span>
                                </a>
                            </div>
                            <!--end::Menu item-->
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="system">
                                    <span class="menu-icon" data-kt-element="icon">
                                        <i class="ki-outline ki-screen fs-2"></i>
                                    </span>
                                    <span class="menu-title">{{ __('System') }}</span>
                                </a>
                            </div>
                            <!--end::Menu item-->
                        </div>
                        <!--end::Menu-->
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
                        data-kt-menu-placement="right-end" data-kt-menu-offset="-15px, 0">
                        <a href="{{ route('dashboard.change-language', 'en') }}" class="menu-link px-5">
                            <span class="menu-title position-relative">
                                {{ __('Language') }}
                                @if (isArabic())
                                    <span
                                        class="fs-8 rounded bg-light px-3 py-2 position-absolute translate-middle-y top-50 end-0">
                                        {{ __('Arabic') }}
                                        <img class="w-15px h-15px rounded-1 ms-2"
                                            src="{{ asset('assets/media/flags/saudi-arabia.svg') }}" alt="" />
                                    </span>
                                @else
                                    <span
                                        class="fs-8 rounded bg-light px-3 py-2 position-absolute translate-middle-y top-50 end-0">
                                        {{ __('English') }}
                                        <img class="w-15px h-15px rounded-1 ms-2"
                                            src="{{ asset('assets/media/flags/united-states.svg') }}" alt="" />
                                    </span>
                                @endif
                            </span>
                        </a>
                        <!--begin::Menu sub-->
                        <div class="menu-sub menu-sub-dropdown w-175px py-4">
                            <!--begin::Menu item-->
                            <div class="menu-item px-3">
                                <a href="{{ route('dashboard.change-language', 'en') }}"
                                    class="menu-link d-flex px-5 @if (!isArabic()) active @endif">
                                    <span class="symbol symbol-20px me-4">
                                        <img class="rounded-1" src="{{ asset('assets/media/flags/united-states.svg') }}"
                                            alt="" />
                                    </span>
                                    {{ __('English') }}
                                </a>
                            </div>
                            <!--end::Menu item-->
                            <!--begin::Menu item-->
                            <div class="menu-item px-3">
                                <a href="{{ route('dashboard.change-language', 'ar') }}"
                                    class="menu-link d-flex px-5 @if (isArabic()) active @endif">
                                    <span class="symbol symbol-20px me-4">
                                        <img class="rounded-1" src="{{ asset('assets/media/flags/saudi-arabia.svg') }}"
                                            alt="" />
                                    </span>
                                    {{ __('Arabic') }}
                                </a>
                            </div>
                            <!--end::Menu item-->
                        </div>
                        <!--end::Menu sub-->
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->

 @if($authType === 'admin')

        <form class="logout-form" method="post" action="{{ route('admin.logout') }}">
@elseif($authType === 'vendor')

        <form class="logout-form" method="post" action="{{ route('vendor.logout') }}">
@endif

                                   
                    
                        @csrf
                    </form>
                    <div class="menu-item px-5">
                        <a href="javascript:" onclick="$('.logout-form').submit()"
                            class="menu-link px-5">{{ __('Logout') }}</a>
                    </div>
                    <!--end::Menu item-->
                </div>
                <!--end::User account menu-->
                <!--end::Menu wrapper-->
            </div>
            <!--end::User menu-->
            <!--begin::Action-->
            <div class="app-navbar-item ms-2 ms-lg-6 me-lg-6">
                {{-- <!--begin::Link-->
                <a href="authentication/layouts/corporate/sign-in.html"
                    class="btn btn-icon btn-custom btn-color-gray-600 btn-active-color-primary w-35px h-35px w-md-40px h-md-40px">
                    <i class="ki-outline ki-exit-right fs-1"></i>
                </a>
                <!--end::Link--> --}}
            </div>
            <!--end::Action-->
            <!--begin::Header menu toggle-->
            <div class="app-navbar-item ms-2 ms-lg-6 ms-n2 me-3 d-flex d-lg-none">
                <div class="btn btn-icon btn-custom btn-color-gray-600 btn-active-color-primary w-35px h-35px w-md-40px h-md-40px"
                    id="kt_app_aside_mobile_toggle">
                    <i class="ki-outline ki-burger-menu-2 fs-2"></i>
                </div>
            </div>
            <!--end::Header menu toggle-->
        </div>
        <!--end::Navbar-->
    </div>
    <!--end::Header main-->
    <!--begin::Separator-->

    <!--end::Separator-->
</div>