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

    $vlUser = $vlUser ?? null;
    $vlName = $vlUser->name ?? session('viki_location_user_name', 'Propriétaire');
    $vlEmail = $vlUser->email ?? session('viki_location_user_email');
    $vlPhotoPath = $vlUser->photo ?? session('viki_location_user_photo');
    $vlPhoto = $vlPhotoPath
        ? asset('storage/' . $vlPhotoPath)
        : 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; }

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

    <div class="headerleft" style="display:flex;align-items:center;gap:14px;">
        <div class="collups-show-icon">
            <img src="{{ asset('vendor/images/icons/10.svg') }}" alt="icon">
            <i class="fa-light fa-arrow-right"></i>
        </div>

        @unless(request()->routeIs('viki-location.dashboard'))
            <button type="button" onclick="history.back()" class="vl-header-back" title="Retour" aria-label="Retour">
                <span style="font-size:18px;line-height:1;">&larr;</span> {{ __('viki.back') }}
            </button>
        @endunless
    </div>

    <style>
        .vl-header-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border: none;
            border-radius: 10px;
            background: #111;
            color: #C3AD66;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: transform .15s ease, background .15s ease;
        }
        .vl-header-back:hover { background: #000; transform: translateX(-2px); }
    </style>

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

            <!-- LANGUE -->
            <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>

            <!-- UTILISATEUR -->
            <div class="single_action__haeader user_avatar__information openuptip" flow="down" tooltip="Profile">
                <div class="avatar">
                    <img src="{{ $vlPhoto }}" alt="user">
                </div>

                <div class="user_information_main_wrapper slide-down__click">
                    <div class="user_header">
                        <div class="main-avatar">
                            <img src="{{ $vlPhoto }}" alt="user">
                        </div>
                        <div class="user_naim-information">
                            <h3 class="title">{{ $vlName }}</h3>
                            <span class="desig">{{ $vlEmail }}</span>
                        </div>
                    </div>

                    <ul class="vl-user-menu" style="list-style:none;padding:12px 8px;margin:14px 0 0;border-top:1px solid #eee;">
                        <li><a href="{{ route('viki-location.profile') }}" class="menu-item"><i class="fa-light fa-user"></i> {{ __('viki.my_profile') }}</a></li>
                        <li><a href="{{ route('viki-location.password') }}" class="menu-item"><i class="fa-light fa-lock"></i> {{ __('viki.security') }}</a></li>
                        <li><a href="{{ route('viki-location.chat.index') }}" class="menu-item"><i class="fa-light fa-comments"></i> {{ __('viki.chat') }}</a></li>
                    </ul>

                    <style>
                        .vl-user-menu li { margin: 2px 0; }
                        .vl-user-menu .menu-item {
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            padding: 10px 14px;
                            border-radius: 10px;
                            color: #333;
                            transition: background .15s ease, color .15s ease;
                        }
                        .vl-user-menu .menu-item i { width: 18px; text-align: center; color: #C3AD66; }
                        .vl-user-menu .menu-item:hover { background: #faf6ea; color: #111; }
                    </style>

                    <div class="popup-footer-btn" style="margin-top:12px;">
                        <a href="#"
                           onclick="event.preventDefault(); document.getElementById('viki-location-logout-form-header').submit();"
                           class="geex-content__header__popup__footer__link">
                            {{ __('viki.logout') }}
                            <i class="fa-light fa-arrow-right"></i>
                        </a>
                        <form id="viki-location-logout-form-header" action="{{ route('viki-location.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>