@php
    $locales = [
        'fr' => ['name' => 'Français', 'flag' => 'fr'],
        'en' => ['name' => 'English', 'flag' => 'us'],
        'es' => ['name' => 'Español', 'flag' => 'es'],
        'it' => ['name' => 'Italiano', 'flag' => 'it'],
        'pt' => ['name' => 'Português', 'flag' => 'pt'],
        'de' => ['name' => 'Deutsch', 'flag' => 'de'],
    ];

    $currentLocale = app()->getLocale();
    $currentFlag = $locales[$currentLocale]['flag'] ?? 'fr';

    $userPhoto = Auth::user()->photo
        ? asset('storage/' . Auth::user()->photo)
        : asset('vendor/images/avatar/user-2.svg');
@endphp

<header class="header-one">

    <style>
        .avatar {
            width: 42px;
            height: 39px;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .main-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .avatar img,
        .main-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            transition: 0.3s;
        }

        .avatar:hover img {
            transform: scale(1.05);
        }

        .gc-language-current {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            text-decoration: none;
        }

        .gc-language-current img {
            width: 24px;
            height: 18px;
            border-radius: 3px;
            object-fit: cover;
        }

        .gc-language-current i {
            font-size: 12px;
            color: #083A5E;
        }

        .select-language-area img {
            border-radius: 3px;
            object-fit: cover;
        }

        .single_action__haeader.language .user_information_main_wrapper.language-area {
            display: none;
            z-index: 9999;
        }

        @media (max-width: 768px) {
            .avatar {
                width: 36px;
                height: 36px;
            }

            .main-avatar {
                width: 50px;
                height: 50px;
            }
        }

        .action-interactive-area__header .single_action__haeader{
            border: none;
        }

        .action-interactive-area__header .single_action__haeader:hover {
            background: transparent;
        }
    </style>

    <div class="headerleft">
        <div class="collups-show-icon">
            <img src="{{ asset('vendor/images/icons/10.svg') }}" alt="icon">
            <i class="fa-light fa-arrow-right"></i>
        </div>
    </div>

    <div class="header-right">
        <div class="action-interactive-area__header">

            <!-- LANGUAGE -->
            <div class="single_action__haeader language user_avatar__information openuptip"
                 flow="down"
                 tooltip="Language">

                <a href="javascript:void(0);" class="gc-language-current">
                    <img
                        src="https://flagcdn.com/{{ $currentFlag }}.svg"
                        alt="{{ $locales[$currentLocale]['name'] ?? 'Language' }}"
                    >
                    <i class="fa-light fa-chevron-down"></i>
                </a>

                <div class="user_information_main_wrapper slide-down__click language-area">
                    <ul class="select-language-area">
                        @foreach($locales as $code => $locale)
                            <li>
                                <a href="{{ route('lang.switch', $code) }}" class="menu-item">
                                    <span>
                                        <img
                                            src="https://flagcdn.com/{{ $locale['flag'] }}.svg"
                                            width="30"
                                            height="20"
                                            alt="{{ $locale['name'] }}"
                                        >
                                        {{ $locale['name'] }}
                                    </span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <!-- USER -->
            <div class="single_action__haeader user_avatar__information openuptip" flow="down" tooltip="Profile">

                <div class="avatar">
                    <img src="{{ $userPhoto }}" alt="user">
                </div>

                <div class="user_information_main_wrapper slide-down__click">
                    <div class="user_header">

                        <div class="main-avatar">
                            <img src="{{ $userPhoto }}" alt="user">
                        </div>

                        <div class="user_naim-information">
                            <h3 class="title">{{ Auth::user()->name }}</h3>
                            <span class="desig">{{ Auth::user()->company }}</span>
                        </div>
                    </div>

                    <div class="popup-footer-btn" style="margin-top:15px;">
                        <a href="{{ route('logout') }}"
                           onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                           class="geex-content__header__popup__footer__link">
                            {{ __('messages.logout') }}
                            <i class="fa-light fa-arrow-right"></i>
                        </a>

                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:none;">
                            @csrf
                        </form>
                    </div>
                </div>

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

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const languageButton = document.querySelector('.gc-language-current');

            if (!languageButton) {
                return;
            }

            languageButton.addEventListener('click', function (e) {

                e.preventDefault();
                e.stopPropagation();

                const menu = document.querySelector(
                    '.single_action__haeader.language .user_information_main_wrapper.language-area'
                );

                if (!menu) {
                    return;
                }

                menu.style.display =
                    menu.style.display === 'block'
                        ? 'none'
                        : 'block';
            });

            document.addEventListener('click', function () {
                const menu = document.querySelector(
                    '.single_action__haeader.language .user_information_main_wrapper.language-area'
                );

                if (menu) {
                    menu.style.display = 'none';
                }
            });

            const languageArea = document.querySelector('.language-area');

            if (languageArea) {
                languageArea.addEventListener('click', function (e) {
                    e.stopPropagation();
                });
            }

        });
    </script>
</header>