@php
    $languages = [];
    $currentLang = null;
    if (Schema::hasTable('languages')) {
        $languages = collect((new App\Repositories\LanguageRepository())->getAll());
        $currentLangCode = session('app_locale', 'en');
        $currentLang = $languages->where('name', $currentLangCode)->first();
    }

@endphp

<header>
    <div class="container-fluids">
        <div id="tp-header-sticky" class="tp-ride-header-area relative z-1 " data-bg-color="#fff">
            <div class="row align-items-center ">
                <div class="col-xl-2 col-lg-1 col-md-1 col-4">
                    <div class="tp-header-left" style="width: 40px">
                        <div class="tp-header-menu-icon">
                            <a id="sidebar__active" href="javascript:void(0)">
                                <svg class="svg-icon" width="24" height="25" viewBox="0 0 24 25" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M2.25 6.5C2.25 6.086 2.586 5.75 3 5.75H21C21.414 5.75 21.75 6.086 21.75 6.5C21.75 6.914 21.414 7.25 21 7.25H3C2.586 7.25 2.25 6.914 2.25 6.5ZM21 11.75H3C2.586 11.75 2.25 12.086 2.25 12.5C2.25 12.914 2.586 13.25 3 13.25H21C21.414 13.25 21.75 12.914 21.75 12.5C21.75 12.086 21.414 11.75 21 11.75ZM21 17.75H3C2.586 17.75 2.25 18.086 2.25 18.5C2.25 18.914 2.586 19.25 3 19.25H21C21.414 19.25 21.75 18.914 21.75 18.5C21.75 18.086 21.414 17.75 21 17.75Z"
                                        fill="#17181D" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-10 col-lg-11 col-md-11 col-8">
                    <div class="tp-header-right d-flex align-items-center justify-content-end">
                        <div class="tp-header-switch">
                            <a href="#" id="darkModeToggle">
                                <!-- Light Mode Icon -->
                                <img class="tp-header-switch-icon sun-icon"
                                    src="{{ asset('assets/img/icon/switch-icon.png') }}" alt="">

                                <span class="tp-header-icon-title">{{ __('Light') }}</span>
                                <!-- Dark Mode Icon -->
                                <img class="tp-header-switch-icon moon-icon"
                                    src="{{ asset('assets/img/icon/switch-icon-02.png') }}" alt="">

                            </a>
                        </div>
                        <div class="tp-header-notification-wrapper">
                            <div class="tp-header-notification d-none d-md-block">
                                <a href="javascript:void(0)">
                                    <!-- SVG ICON (unchanged) -->
                                    <svg class="svg-icon" style="display: inline-block" width="19" height="19"
                                        viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.4"
                                            d="M15.7932 13.766C15.779 13.7488 14.3712 11.9615 14.3712 9.875V7.24625C14.3712 4.5605 12.1857 2.375 9.49997 2.375C6.81422 2.375 4.62872 4.5605 4.62872 7.24625V9.875C4.62872 11.9607 3.22173 13.748 3.20673 13.766C3.11673 13.8785 3.09948 14.033 3.16173 14.1627C3.22398 14.2925 3.35522 14.375 3.49922 14.375H15.4992C15.6432 14.375 15.7745 14.2925 15.8367 14.1627C15.9005 14.0322 15.8825 13.8785 15.7932 13.766Z"
                                            fill="#17181D" />
                                        <path
                                            d="M2.75081 7.0625C2.73206 7.0625 2.7133 7.06175 2.6938 7.0595C2.3848 7.02875 2.15906 6.75275 2.19056 6.44375C2.34206 4.9265 2.95557 3.52026 3.96357 2.37726C4.16832 2.14401 4.52456 2.1215 4.75781 2.32775C4.99106 2.53325 5.01282 2.88875 4.80732 3.122C3.95607 4.0865 3.43781 5.27375 3.30956 6.5555C3.28106 6.84576 3.03581 7.0625 2.75081 7.0625Z"
                                            fill="#17181D" />
                                        <path
                                            d="M16.2492 7.0625C15.9642 7.0625 15.719 6.84575 15.6905 6.55625C15.5622 5.2745 15.0447 4.08725 14.1927 3.12275C13.9872 2.8895 14.0097 2.534 14.2422 2.3285C14.4755 2.12225 14.831 2.1455 15.0365 2.378C16.0445 3.52025 16.658 4.9265 16.8095 6.4445C16.841 6.7535 16.6152 7.0295 16.3062 7.06025C16.2867 7.06175 16.268 7.0625 16.2492 7.0625Z"
                                            fill="#17181D" />
                                        <path
                                            d="M11.123 15.3133C11.0563 15.197 10.9325 15.125 10.7975 15.125H8.20252C8.06827 15.125 7.94452 15.197 7.87702 15.3133C7.80952 15.4295 7.81104 15.5735 7.87854 15.689C8.22054 16.2747 8.82653 16.625 9.50003 16.625C10.1735 16.625 10.7795 16.2747 11.1215 15.689C11.189 15.5735 11.1898 15.4295 11.123 15.3133Z"
                                            fill="#17181D" />
                                    </svg>

                                    <span class="tp-header-icon-title">
                                        {{ __('Notification') }}
                                    </span>

                                    <cite id="notification-count">
                                        {{ auth()->user()->unreadNotifications->count() }}
                                    </cite>
                                </a>
                            </div>


                            <div class="tp-notification-dropdown absolute bg-white rounded-md shadow-lg p-2">
                                <div class="tp-notification-scroll" style="max-height: 320px; overflow-y: auto;">
                                    @forelse(auth()->user()->unreadNotifications as $notification)
                                        <div class="d-flex align-items-center justify-content-between py-1 px-2 border gap-3 my-2 rounded">

                                            <div class="tp-notification-main">
                                                <div class="text-sm font-weight-bold text-dark d-flex justify-content-between">
                                                    <div><strong>{{ $notification->data['type'] ?? 'Notification' }}</strong></div>
                                                    <div>
                                                        <span style="font-size: 12px">{{$notification->created_at->diffForHumans()}}</span>
                                                    </div>

                                                </div>

                                                <div class="tp-notification-message text-sm text-gray-600 overflow-hidden">
                                                    {{ $notification->data['message'] ?? '-' }}
                                                </div>

                                            </div>

                                            <div class="border px-1 rounded">
                                                @if($notification->data['type'] == 'Complaint')
                                                <a href="{{ route('request.show', $notification->data['id']) }}"
                                                    class="tp-notification-view">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                                @else

                                                <a href="{{ route('sos.show', $notification->data['id']) }}"
                                                    class="tp-notification-view">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                                @endif
                                            </div>

                                        </div>
                                    @empty
                                        <div class="tp-notification-empty text-sm">
                                            No notifications
                                        </div>
                                    @endforelse
                                </div>


                            </div>
                        </div>

                        {{-- <div class="tp-header-notification mr-2 d-none d-md-block">
                            <a href="#">
                                <svg class="svg-icon" style="display: inline-block" width="19" height="19"
                                    viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.4"
                                        d="M15.7932 13.766C15.779 13.7488 14.3712 11.9615 14.3712 9.875V7.24625C14.3712 4.5605 12.1857 2.375 9.49997 2.375C6.81422 2.375 4.62872 4.5605 4.62872 7.24625V9.875C4.62872 11.9607 3.22173 13.748 3.20673 13.766C3.11673 13.8785 3.09948 14.033 3.16173 14.1627C3.22398 14.2925 3.35522 14.375 3.49922 14.375H15.4992C15.6432 14.375 15.7745 14.2925 15.8367 14.1627C15.9005 14.0322 15.8825 13.8785 15.7932 13.766Z"
                                        fill="#17181D" />
                                    <path
                                        d="M2.75081 7.0625C2.73206 7.0625 2.7133 7.06175 2.6938 7.0595C2.3848 7.02875 2.15906 6.75275 2.19056 6.44375C2.34206 4.9265 2.95557 3.52026 3.96357 2.37726C4.16832 2.14401 4.52456 2.1215 4.75781 2.32775C4.99106 2.53325 5.01282 2.88875 4.80732 3.122C3.95607 4.0865 3.43781 5.27375 3.30956 6.5555C3.28106 6.84576 3.03581 7.0625 2.75081 7.0625Z"
                                        fill="#17181D" />
                                    <path
                                        d="M16.2492 7.0625C15.9642 7.0625 15.719 6.84575 15.6905 6.55625C15.5622 5.2745 15.0447 4.08725 14.1927 3.12275C13.9872 2.8895 14.0097 2.534 14.2422 2.3285C14.4755 2.12225 14.831 2.1455 15.0365 2.378C16.0445 3.52025 16.658 4.9265 16.8095 6.4445C16.841 6.7535 16.6152 7.0295 16.3062 7.06025C16.2867 7.06175 16.268 7.0625 16.2492 7.0625Z"
                                        fill="#17181D" />
                                    <path
                                        d="M11.123 15.3133C11.0563 15.197 10.9325 15.125 10.7975 15.125H8.20252C8.06827 15.125 7.94452 15.197 7.87702 15.3133C7.80952 15.4295 7.81104 15.5735 7.87854 15.689C8.22054 16.2747 8.82653 16.625 9.50003 16.625C10.1735 16.625 10.7795 16.2747 11.1215 15.689C11.189 15.5735 11.1898 15.4295 11.123 15.3133Z"
                                        fill="#17181D" />
                                </svg>

                                <span class="tp-header-icon-title">
                                    {{ __('Notification') }}
                                </span>

                                <cite id="notification-count">
                                    {{ auth()->user()->unreadNotifications->count() }}
                                </cite>

                            </a>
                        </div> --}}

                        <div class="tp-header-lang relative d-none d-md-block">
                            <a href="#">
                                <img class="svg-icon" style="display: inline-block; width: 22px; height: 20px"
                                    src="{{ asset($currentLang->languagePicture) }}" alt="">
                                <span class="tp-header-icon-title">
                                    {{ __($currentLang->title) }}
                                    <i class="fa fa-angle-down"></i>
                                </span>
                            </a>

                            @if ($languages->count() > 1)
                                <div class="tp-header-more-lang absolute">
                                @foreach ($languages as $language)
                                    @if ($language->id !== $currentLang->id)
                                        <a href="{{ route('management.change.language', $language->name) }}">
                                            <img style="width: 22px;height:20px"
                                                src="{{ asset($language->languagePicture) }}" alt="">
                                            {{ __($language->title) }}
                                        </a>
                                    @endif
                                @endforeach
                            </div>
                            @endif
                        </div>
                        <div class="tp-header-author d-flex align-items-center relative">
                            <div class="tp-header-author-content mr-2 rtl:ml-2 rtl:mr-0 text-end">
                                <a href="#" class="tp-header-author-name">
                                    {{ Auth::user()->name }}<br>
                                </a>
                                <span>
                                    {{ Auth::user()->getRoleNames()[0] }}
                                </span>
                            </div>
                            <div class="tp-header-author-thumb">
                                <a href="#">
                                    <img src="{{ Auth::user()->profilePicture }}" class="rounded-pill" alt=""
                                        style="width:3rem; height:3rem">

                                </a>
                            </div>
                            <div class="tp-header-author-thumb-more absolute">
                                <a href="{{ route('profile.edit') }}"><i
                                        class="fa fa-user"></i>{{ __('Profile') }}</a>

                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <a type="submit" class="w-full text-left text-sm text-gray-700 hover:bg-gray-100"
                                        onclick="event.preventDefault(); this.closest('form').submit();">
                                        <i class="fa fa-sign-out"></i>{{ __('Logout') }}
                                    </a>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>