@php
    $profilePhoto = session('major_account_photo')
        ? asset('storage/' . session('major_account_photo'))
        : asset('grands-comptes/images/default-avatar.png');

    $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';
@endphp

<header class="header-one">

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

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

        .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-header-profile {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-left: 30px;
        }

        .gc-header-company {
            background: #083A5E;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            padding: 5px 10px;
            border-radius: 6px;
        }

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

        .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;
        }

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

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

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

            .gc-header-company {
                font-size: 11px;
                padding: 5px 8px;
            }
        }

        .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">

            <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'] ?? 'Langue' }}"
                    >
                    <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>

            <div class="gc-header-profile">
                <div class="avatar">
                    <img src="{{ $profilePhoto }}" alt="Photo de profil">
                </div>

                <div class="gc-header-company">
                    {{ session('major_account_company') }}
                    ({{ session('major_account_type') === 'vendeur'
                        ? __('messages.grands_comptes_vendor_label')
                        : __('messages.grands_comptes_buyer_label') }})
                </div>
            </div>

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

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const languageButton = document.querySelector('.gc-language-current');
        const languageDropdown = document.querySelector('.language-area');

        if (!languageButton || !languageDropdown) {
            return;
        }

        languageButton.addEventListener('click', function (event) {
            event.preventDefault();
            event.stopPropagation();

            languageDropdown.classList.toggle('active');
            languageDropdown.style.display =
                languageDropdown.style.display === 'block' ? 'none' : 'block';
        });

        document.addEventListener('click', function () {
            languageDropdown.classList.remove('active');
            languageDropdown.style.display = 'none';
        });
    });
</script>