@php use App\Models\Cart\Cart; @endphp
@php use App\Helpers\UserHelper; @endphp
@php use App\Helpers\SubDomainHelper; @endphp
@php use Mcamara\LaravelLocalization\Facades\LaravelLocalization; @endphp
@php /** @var Cart $cart */  @endphp

<header class="header" id="header">

    <category-list
            :in18="{{ TransHelper::in18('shop-home') }}"
            :root_categories="{{ json_encode($rootCategories) }}"
            :is-mobile="true"
    ></category-list>

    <div class="header__top">
        <div class="container-lg">
            <div class="header__top-wrapper">
                <div class="dropdown dropdown--mobile">
                    <button class="dropdown-toggle"
                            type="button"
                            data-bs-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                    >{{ trans('shop-header.information') }}
                    </button>

                    <ul class="dropdown-menu dropdown-menu--lang dropdown-menu-end">
                        <li>
                            <a class="dropdown-menu__link" href="{{ trans('shop-header.phone_link') }}"
                               title="{{ trans('shop-header.phone_label') }}">
                                {{ trans('shop-header.phone_label') }}
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-menu__link" href="{{ trans('shop-header.email_link') }}"
                               title="{{ trans('shop-header.email_label') }}">
                                {{ trans('shop-header.email_label') }}
                            </a>
                        </li>
                        <li>
                            <span class="dropdown-menu__link">{{ trans('shop-header.address_label') }}</span>
                        </li>
                    </ul>
                </div>

                <ul class="header__top-nav hide-md">
                    <li class="header__top-nav-item">
                        <a class="header__top-nav-link" href="{{ trans('shop-header.phone_link') }}"
                           title="{{ trans('shop-header.phone_label') }}">
                            <img class="header__top-nav-icon" src="{{ asset('shop/images/header-tel.svg') }}"
                                 alt="{{ trans('shop-header.phone_label') }}">
                            <span>{{ trans('shop-header.phone_label') }}</span>
                        </a>
                    </li>
                    <li class="header__top-nav-item">
                        <a class="header__top-nav-link" href="{{ trans('shop-header.email_link') }}"
                           title="{{ trans('shop-header.email_label') }}">
                            <img class="header__top-nav-icon" src="{{ asset('shop/images/header-email.svg') }}"
                                 alt="{{ trans('shop-header.email_label') }}">
                            <span>{{ trans('shop-header.email_label') }}</span>
                        </a>
                    </li>
                    <li class="header__top-nav-item">
                        <a class="header__top-nav-link" href="{{ trans('shop-header.address_link') }}"
                           title="{{ trans('shop-header.address_label') }}" target="_blank">
                            <img class="header__top-nav-icon" src="{{ asset('shop/images/header-location.svg') }}"
                                 alt="{{ trans('shop-header.address_label') }}">
                            <span>{{ trans('shop-header.address_label') }}</span>
                        </a>
                    </li>
                </ul>

                <ul class="lang-mobile">
                    @foreach($supportedLocales as $iso => $locale)
                        <li class="lang-mobile__item">
                            <a href="{{ $locale['link'] }}" title="{{ $locale['name'] }}">
                                <img class="img flags" height="20px" width="20px"
                                     src="{{ asset('shop/images/flags/' . $iso . '.svg') }}"
                                     alt="{{ $locale['code'] }}">
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div><!-- /.header__top -->


    <div class="container-lg">
        <div class="header__center">
            <div class="header__center-left">
                <a class="header__logo"
                   href="{{ LaravelLocalization::localizeUrl('/') }}"
                   title="{{ config('app.name') }}">
                    <img class="img max-h-[51px]" src="{{ asset('shop/images/logo.svg') }}"
                         alt="{{ trans('shop-header.logo_alt') }}">
                </a>
            </div>

            <div class="flex items-center lg:gap-[12px] header__center-middle">

                @if(!SubDomainHelper::isB2BSubDomain(request()))
                    <div class="lg:min-w-[150px]">
                        <country-selector
                                ref="countrySelector"
                                :login-url="'{{ route('login') }}'"
                                :in18="{{ TransHelper::in18('shop-header') }}"
                                :initial-code="'{{ $currentCountry }}'"
                                :signed-in="{{ auth()->check() ? 'true' : 'false' }}"
                        ></country-selector>
                    </div>
                @endif

                <form class="search max-h-[44px]" action="{{ route('search.index') }}" method="get" id="headerSearch">
                    <input id="autocomplete-search"
                           class="form-control form-control--search max-h-[44px]"
                           type="text"
                           name="query"
                           placeholder="{{ trans('shop-header.search_among') }}"
                           value="{{ request()->get('query', '') }}">
                    <button class="my-auto search__btn" type="submit">
                        <img src="{{ asset('shop/images/search-icon.svg') }}" alt="Search">
                    </button>
                    <div id="autocomplete-result"></div>
                </form>
            </div>

            <div class="header__center-right">
                <ul class="header__actions header__actions--mobile">
                    <li class="header__actions-item">
                        <button class="header__btn-toggle" type="button" id="navToggle">
                            <img class="img" src="{{ asset('shop/images/burger-icon.svg') }}"
                                 alt="{{ trans('shop-header.menu_toggle_alt') }}">
                        </button>
                    </li>
                </ul>

                <div class="header__logo header__logo--mobile">
                    <a href="{{ url('/') }}" title="{{ config('app.name') }}">
                        <img class="img" src="{{ asset('shop/images/logo.svg') }}"
                             alt="{{ trans('shop-header.logo_alt') }}">
                    </a>
                </div>

                <ul class="header__actions">
                    <li class="header__actions-item">
                        <a class="header__actions-link" href="{{ route('page.wishlist') }}"
                           title="{{ trans('shop-header.wishlist') }}">
                            <svg class="header__actions-icon" aria-label="{{ trans('shop-header.wishlist') }}">
                                <use href="#wishlist-icon"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="header__actions-item">
                        <header-compare-products
                                :link="'{{ route('page.compare') }}'"
                                :title="'{{ trans('shop-header.compare') }}'"
                        ></header-compare-products>
                    </li>
                    <li class="header__actions-item">
                        <a class="header__actions-link" href="{{ route('cart') }}"
                           title="{{ trans('shop-header.shopping_cart') }}">
                            <svg class="header__actions-icon" aria-label="{{ trans('shop-header.shopping_cart') }}">
                                <use href="#cart-icon"></use>
                            </svg>
                            <span class="header__actions-link-label" id="cart-items-count">
                                {{ $cart && is_countable($cart->cartItems) ? count($cart->cartItems) : 0 }}
                            </span>
                        </a>
                    </li>

                    <header-profile-dropdown
                            :signed-in="{{ auth()->check() ? 'true' : 'false' }}"
                            :in18="{{ TransHelper::in18('shop-header') }}"
                            :initial-code="'{{ $currentCountry }}'"
                            profile-text="{{ trans('shop-header.profile') }}"
                            profile-title="{{ trans('shop-header.profile') }}"
                            profile-route="{{ route('profile') }}"
                            change-password-route="{{ route('profile') }}"
                            login-route="{{ route('login') }}"
                            logout-route="{{ route('logout') }}"
                            edit-profile-name="{{ trans('shop-header.edit_profile') }}"
                            change-password-name="{{ trans('shop-header.change_password') }}"
                            logout-name="{{ trans('shop-header.logout') }}"
                            @change-address="$refs.countrySelector.open()"
                    >
                        <template v-slot:csrf>
                            @csrf
                        </template>
                    </header-profile-dropdown>
                </ul>
            </div>
        </div><!-- /.header__top -->
    </div><!-- /.container -->

    <div class="header__bottom">
        <div class="container-lg">
            <nav class="nav" id="nav">
                <ul class="nav__list">
                    {{--@include('shop::layout.components.category-navigation', compact('categoryTree'))--}}
                    @foreach($navigationCategoryLinks as $navigationCategoryLink)
                        <category-menu-item
                                :category="{{ json_encode($navigationCategoryLink) }}"
                                icon="{{ asset('shop/images/cat-icon.svg') }}"
                                :show-more-link="'{{ trans('shop-header.show_more') }}'"
                        >
                        </category-menu-item>
                    @endforeach
                </ul>

                <ul class="nav__list hide-md">
                    @if(!SubDomainHelper::isB2BSubDomain(request()))
                        <li class="nav__item nav__item--flag">
                            <a class="nav__link" href="{{ route('search.discount') }}"
                               style="background-color: red; border-radius: 5px; padding: 5px 15px; font-weight: 700; font-size: 16px; margin-right: 15px;"
                               title="{{trans('shop-header.promotions')}}">
                                {{ trans('shop-header.promotions') }}
                            </a>
                        </li>
                    @endif
                    @foreach($supportedLocales as $iso => $locale)
                        <li class="nav__item nav__item--flag">
                            <a class="nav__link" href="{{ $locale['link'] }}" title="{{ $locale['name'] }}">
                                <img class="img flags" height="20px" width="20px"
                                     src="{{ asset('shop/images/flags/' . $iso . '.svg') }}"
                                     alt="{{ $locale['code'] }}">
                            </a>
                        </li>
                    @endforeach
                </ul>

            </nav>
        </div><!-- /.container -->
    </div><!-- /.header__bottom -->
</header>