<section class="header__topbar header-topbar">
    <section class="Container_block__rapZf container header-topbar__container">
        <button class="CitySelector_block__hbPip">
            <img class="CitySelector_block__img___QkPL" height="16" src="/assets/images/themes/td/location-icon.svg" width="16">
            <p class="CitySelector_block__title__LV5pR city-selector__title">{{ __('Ashgabat') }}</p>
        </button>

        <div>
            <a href="https://apps.apple.com/tm/app/postshop/id1634851719">
                <img style="width: 8em;" src="/assets/images/appstore.png" alt="">
            </a>
            <a href="https://play.google.com/store/apps/details?id=tm.gov.turkmenpost.shop&hl=en&gl=US">
                <img style="width: 8em;" src="/assets/images/googleplay.png" alt="">
            </a>
        </div>


        <div class="header-topbar__contact header-contact cursor-pointer" style="background: linear-gradient(45deg, #084483, #3f96f080);">
            @if(auth()->check() && auth()->user()->hasRole(['vendor', 'admin']))
                <a href="/turkmenpostadmin" class="text-white">
                    {{ __('Go to panel') }}
                </a>
            @else
                <a href="{{ route('web.become-seller') }}" class="text-white">
                    {{ __('Sell on POSTSHOP') }}
                </a>
            @endif
        </div>
        <a href="{{ route('web.entrepreneurs.index') }}" class="text-white">
            <div class="header-contact cursor-pointer mr-5" style="background: #3f96f0;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: #ffffff;height:16px;width:16px;margin-right: 8px;">
                    <path d="M22 5c0-1.654-1.346-3-3-3H5C3.346 2 2 3.346 2 5v2.831c0 1.053.382 2.01 1 2.746V19c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-8.424c.618-.735 1-1.692 1-2.746V5zm-2 0v2.831c0 1.14-.849 2.112-1.891 2.167L18 10c-1.103 0-2-.897-2-2V4h3c.552 0 1 .449 1 1zM10 4h4v4c0 1.103-.897 2-2 2s-2-.897-2-2V4zM4 5c0-.551.448-1 1-1h3v4c0 1.103-.897 2-2 2l-.109-.003C4.849 9.943 4 8.971 4 7.831V5zm6 14v-3h4v3h-4zm6 0v-3c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v3H5v-7.131c.254.067.517.111.787.125A3.988 3.988 0 0 0 9 10.643c.733.832 1.807 1.357 3 1.357s2.267-.525 3-1.357a3.988 3.988 0 0 0 3.213 1.351c.271-.014.533-.058.787-.125V19h-3z"></path>
                </svg>

            
                {{ __('Sellers') }}
            </div>
        </a>
        <div class="header-topbar__contact header-contact ml-1">
            <img class="filter-white" src="/assets/images/themes/td/contact-icon.svg" width="16" height="16">

            <div class="header-contact__content">
                <a href="tel:+99365728952"><p class="text-white">{{ __('Call us') }}:<strong class="text-white" style="font-size:16px" itemprop="telephone">+993 (65) 72-89-52</strong></p></a>
            </div>
        </div>
        <details class="DropdownDetails LocalizationSelector_block__QNS8p header-topbar__localization">
            <summary>
                <div aria-haspopup="true" class="DropdownButton" role="button" tabindex="0">
                    {{ app()->getLocale() ?? 'TK' }}
                    <svg fill="none" stroke="" viewBox="0 0 16 16" width="16" height="16">
                        <path d="M4.85448 7.85355L7.64737 10.6464C7.84264 10.8417 8.15922 10.8417 8.35448 10.6464L11.1474 7.85355C11.4624 7.53857 11.2393 7 10.7938 7L5.20803 7C4.76258 7 4.5395 7.53857 4.85448 7.85355Z" fill="#404040"></path>
                    </svg>
                </div>
            </summary>
            <ul class="DropdownMenu" role="listbox">
                @foreach(config('app.locales') as $key => $value)
                    <li class="DropdownMenu__Item" role="option" @class(['active' => app()->getLocale() == $key])>
                        <a href="{{ route('web.locale.set', $key) }}"><span>{{ $key }}</span></a>
                    </li>
                @endforeach
            </ul>
        </details>
    </section>
</section>
{{-- <div class="header__border border-bottom"></div> --}}

<script>
    document.addEventListener('DOMContentLoaded', event => {
        let headerElement = document.getElementById('main-header')

        window.addEventListener('scroll', (event) => {
            if (window.pageYOffset > headerElement.offsetTop) {
                headerElement.style.position = 'fixed';
            } else {
                headerElement.style.position = 'sticky';
            }
        })
    });
</script>
<header aria-label="Header content" id="main-header" class="d-none lg:d-inherit td_header__content --sticky header-middle">
    <section class="Container_block__rapZf container header-middle__container --desktop">
        <a aria-label="Header logo" class="header-middle__logo --desktop logo" href="/">
            <div class="logo__image">
                <img src="/logo.png" class="" alt="POSTSHOP">
            </div>
            <span class="logo__label"></span>
        </a>
        <a class="header-middle__catalog --accent" href="#" onclick="Event.fire('showCategoriesDropdownEvent')">
            <svg fill="none" stroke="" viewBox="0 0 24 24" width="24" height="24">
                <path clip-rule="evenodd" d="M4.5 7C4.5 6.44772 4.94772 6 5.5 6C6.05228 6 6.5 6.44772 6.5 7C6.5 7.55228 6.05228 8 5.5 8C4.94771 8 4.5 7.55228 4.5 7ZM4.5 12C4.5 11.4477 4.94772 11 5.5 11C6.05228 11 6.5 11.4477 6.5 12C6.5 12.5523 6.05228 13 5.5 13C4.94772 13 4.5 12.5523 4.5 12ZM4.5 17C4.5 16.4477 4.94772 16 5.5 16C6.05228 16 6.5 16.4477 6.5 17C6.5 17.5523 6.05228 18 5.5 18C4.94771 18 4.5 17.5523 4.5 17ZM9 6C8.44772 6 8 6.44772 8 7C8 7.55228 8.44772 8 9 8H19C19.5523 8 20 7.55228 20 7C20 6.44772 19.5523 6 19 6H9ZM9 11C8.44772 11 8 11.4477 8 12C8 12.5523 8.44772 13 9 13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H9ZM9 16C8.44772 16 8 16.4477 8 17C8 17.5523 8.44772 18 9 18H19C19.5523 18 20 17.5523 20 17C20 16.4477 19.5523 16 19 16H9Z" fill="#404040" fill-rule="evenodd"></path>
            </svg>
            <span class="header-middle__catalog-title text-white">{{ __('Categories') }}</span>
        </a>
        <div aria-label="Header search bar" class="header-middle__searchbar --homepage">
            <div class="SearchBar_block__qnl8W">
                <form action="/search" class="mb-0">
                    <div class="rees46-search-box --auto --block">
                        <div class="FieldNext__Wrapper FieldNext__Wrapper_v1 FieldNext__Wrapper_L d-block">
                            <input 
                                type="text" 
                                placeholder="{{ __('Search') }}"
                                autocomplete="off" 
                                data-js-popup-button="navigation"
                                class="FieldNext FieldNext_KeepLabel FieldNext_Size-L rees46-instant-search rees46-instant-search-rendered js-popup-button" 
                            >
                        </div>
                        <button class="SearchBar_block__icon__rpheX" tabindex="0" type="submit">
                            <img alt="Search" height="24" src="/assets/images/themes/td/search-icon.svg" width="24">
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="header-middle__links-wrapper">
            <a class="IconLink_block__vCE7B js-popup-button" role="button" tabindex="-1" href="#" 
                @guest 
                    data-js-popup-button="account" 
                @else
                    data-js-popup-button="wishlist" data-js-sticky-replace-element="wishlist"
                @endguest>
                <div class="IconLink_block__img-wrapper__W9I3v">
                    <img alt="Wishlist" class="IconLink_block__img__IlcfL" height="24" src="/assets/images/themes/td/wishlist-icon.svg" width="25">

                    @auth
                        <data class="IconLink_block__data__hud6c favourites-icon-count">{{ cache('user_favorites_likes_count') }}</data>
                    @endauth
                </div>
                <span class="IconLink_block__caption__iJ76n">{{ __('Wish list') }}</span>
            </a>

            <a class="IconLink_block__vCE7B header-middle__link --cart js-popup-button" role="button" tabindex="-1" href="/cart" 
                @guest 
                    data-js-popup-button="account" 
                @else
                    data-js-popup-button="cart" data-js-sticky-replace-element="cart"
                @endguest
                >
                <div class="IconLink_block__img-wrapper__W9I3v">
                    <img alt="Cart" class="IconLink_block__img__IlcfL" height="24" src="/assets/images/themes/td/cart-icon.svg" width="25">
                    @auth
                        <data class="IconLink_block__data__hud6c top-header-cart-icons">0</data>
                    @endauth
                </div>
                <span class="IconLink_block__caption__iJ76n">{{ __('MY BAG') }}</span>
            </a>

            <a class="header-middle__link --account js-popup-button" href="{{ route('web.profile.orders.index') }}"
                @guest 
                    data-js-popup-button="account" 
                @endguest
            >
                <span class="account">
                    <img class="account__image" height="24" src="/assets/images/orders.svg" width="24" alt="orders">
                </span>
                <span class="caption">{{ __('Orders') }}</span>
            </a>

            <a class="header-middle__link --account js-popup-button" href="{{ route('web.profile.index') }}"
                @guest 
                    data-js-popup-button="account" 
                @endguest
            >
                <span class="account">
                    <img class="account__image" height="24" src="/assets/images/themes/td/my-account-icon.svg" width="24" alt="account">
                </span>
                <span class="caption">{{ __('Account') }}</span>
            </a>
        </div>
    </section>
</header>
<div class="header__border border-bottom pt-5"></div>
