<?php
    $term = request()->input('term');
    $image_search = request()->input('image-search');

    if (! is_null($term)) {
        $serachQuery = 'term='.request()->input('term');
    }
    $cart = cart()->getCart();
?>
<my-mobile-nav></my-mobile-nav>
@push('scripts')
    @auth('customer')
<script type="text/x-template" id="profile-btn-template">
    <div class="login logged-true logged" @click.prevent="toggleProfileDropdown">
        <button type="button" class="nav-link">
            <div class="icon-wrapper">
                <img src="{{ bagisto_asset('icons/user_profile.svg') }}" alt="user" />
            </div>
            <span class="profile-name">{{__('shop::app.customer.account.profile.index.title')}}</span>
        </button>
    </div>
</script>
<script>
    Vue.component('profile-btn', {
        template: '#profile-btn-template',
        methods: {
            toggleProfileDropdown() {
                let obj = document.querySelector('.profile-dropdown')
                obj.classList.toggle('shown')
            }
        }
    })
</script>
@endauth
<script type="text/x-template" id="my-mobile-nav-template">
    <nav class="nav-block container">
        <div class="burger-mobile" @click.capture="closeMobileMenu($event)">
            <div class="burger-mobile-inner">
                <ul class="burger-list">
                    <!---------------------------------TODO MOBILE CATEGORIES---------------------------------------------->
                    <li>
                        <div class="burger-item-title active">
                            <span class="burger-item-name">{{__('shop::app.header.categories')}}</span>
                            <div class="arrow black">
                                <img src="{{ bagisto_asset('icons/burger-arrow-black.svg') }}" alt="burger arrow black" />
                            </div>
                            <div class="arrow white">
                                <img src="{{ bagisto_asset('icons/burger-arrow-white.svg') }}" alt="burger arrow white">
                            </div>
                        </div>
                        <div class="burger-dropdown">
                            <ul class="burger-list-inner">
                                <!-- Loop root categories -->
                                <li v-for="(category, indexRoot) in categories">
                                    <div class="burger-item-title-inner">
                                        <a :href="'/' + category.url_path" class="burger-item-name">@{{ category.name }}</a>
                                        <div class="arrow black" @click.capture="toggleRootCategories(indexRoot)">
                                            <img src="{{ bagisto_asset('icons/burger-arrow-black.svg') }}" alt="">
                                        </div>
                                    </div>
                                    <div class="burger-dropdown-inner">
                                        <ul class="burger-list-inner-inner">
                                            <!-- Loop child categories -->
                                            <li v-for="(child_category, indexChild) in category.children">
                                                <div
                                                    class="burger-item-title-inner-inner biti"
                                                    :id="'item-title-root-' + indexRoot + '-child-' + indexChild"
                                                >
                                                    <a :href="'/' + child_category.url_path" class="burger-item-name child-category">@{{ child_category.name }}</a>
                                                    <div class="arrow black" @click.capture="toggleChildCategories(indexRoot, indexChild)">
                                                        <img src="{{ bagisto_asset('icons/burger-arrow-black.svg') }}" alt="">
                                                    </div>
                                                </div>
                                                <div
                                                    class="burger-dropdown-inner3"
                                                    :id="'item-drop-root-' + indexRoot + '-child-' + indexChild"
                                                >
                                                    <ul class="burger-list-inner-inner">
                                                        <!-- Loop grandchild categories -->
                                                        <li v-for="grand_child_category in child_category.children">
                                                            <a :href="'/' + grand_child_category.url_path">@{{grand_child_category.name}}</a>
                                                        </li>
                                                        <!-- Loop grandchild categories end -->
                                                    </ul>
                                                </div>
                                            </li>
                                            <!-- Loop child categories end -->
                                        </ul>
                                    </div>
                                </li>
                                <!-- Loop root categories end -->
                            </ul>
                        </div>
                    </li>
                    <!----------------------------------------------------------------------------------------------------->
                    <li class="burger-item-title-inactive">
                        <a href="{{route('shop.cms.page',['slug' => 'hyzmatlar-merkezi'])}}" class="burger-item-name">{{__('shop::app.header.service')}}</a>
                    </li>
                    <li class="burger-item-title-inactive">
                        <a href="{{route('shop.cms.page',['slug' => 'eltip-berme-hyzmaty-barada'])}}" class="burger-item-name">{{__('shop::app.header.shipment')}}</a>
                    </li>
                    <li class="burger-item-title-inactive">
                        <a href="{{route('shop.cms.page',['slug' => 'harydy-gaytarmak-we-calyshmak'])}}" class="burger-item-name">{{__('shop::app.header.refund')}}</a>
                    </li>
                    <li class="burger-item-title-inactive">
                        <a href="{{route('shop.cms.page',['slug' => 'komek'])}}" class="burger-item-name">{{__('shop::app.header.help')}}</a>
                    </li>
                    @guest('customer')
                    <li>
                        <div class="burger-item-title-inactive" @click.prevent="loginModal">
                            <span class="burger-item-name" >
                                <span>{{__('shop::app.header.sign-in')}}</span>
                                <div class="enter">
                                    <img src="{{ bagisto_asset('icons/enter.svg') }}" alt="enter">
                                </div>
                            </span>
                        </div>
                    </li>
                    @endguest
                    @auth('customer')
                    <li>
                        <div class="burger-item-title">
                            <div class="burger-item-name lang">
                                <span>{{__('shop::app.customer.account.profile.index.title')}}</span>
                                <div class="burger-lang">
                                    <img src="{{ bagisto_asset('icons/user_profile.svg') }}" alt="Flag_of_Russia">
                                </div>
                            </div>
                            <div class="arrow black">
                                <img src="{{ bagisto_asset('icons/burger-arrow-black.svg') }}" alt="burger arrow black">
                            </div>
                            <div class="arrow white">
                                <img src="{{ bagisto_asset('icons/burger-arrow-white.svg') }}" alt="burger arrow white">
                            </div>
                        </div>
                        @include('shop::customers.account.partials.sidemenu-mobile')

                    </li>
                    @endauth

                </ul>
            </div>

        </div>
        <div class="nav-inner no-mobile">
            <div class="logo-wrapper">
                <a href="{{ route('shop.home.index') }}">
                    @if ($logo = core()->getCurrentChannel()->logo_url)
                        <img class="logo" src="{{ $logo }}" alt="ElektronikaTM" />
                    @else
                        <img src="{{ bagisto_asset('icons/Logo.svg') }}" alt="ElektronikaTM Logo" />
                    @endif
                </a>
            </div>
            <div class="search-bar">
                <form role="search" action="{{ route('shop.search.index') }}" method="GET">
                    <input  required
                            name="term"
                            type="search"
                            value="{{ ! $image_search ? $term : '' }}"
                            class="search-field"
                            id="search-bar"
                            placeholder="{{ __('shop::app.header.search-text') }}"/>
                    <button type="submit" class="search-button">
                        <div class="button-content">
                            <img src="{{ bagisto_asset('icons/search.svg') }}" alt="Search" />
                        </div>
                    </button>
                </form>
            </div>
            <div class="nav-buttons">

                @guest('customer')
                    <div class="login logged-false logged">
                        <a href="#" class="nav-link">
                            <div class="icon-wrapper">
                                <img src="{{ bagisto_asset('icons/signin.svg') }}" alt="login" />
                            </div>
                            <span>{{__('shop::app.header.sign-in')}}</span>
                        </a>
                    </div>

                @endguest

                @auth('customer')
                    <profile-btn></profile-btn>

                    @include('shop::customers.account.partials.sidemenu')
                    <div class="favorite">
                        <a href="{{ route('customer.wishlist.index') }}" class="nav-link">
                            <div class="icon-wrapper">
                                <img src="{{ bagisto_asset('icons/favorites.svg') }}" alt="favorite" />
                            </div>
                            <span>{{__('shop::app.header.wishlist')}}</span>
                        </a>
                    </div>
                @endauth

                @include('shop::checkout.cart.mini-cart')

            </div>
        </div>
        <div class="nav-inner-mobile no-desktop">
            <div class="nav-inner-top">
                @auth('customer')
                <a href="{{route('customer.wishlist.index')}}" class="nav-link">
                    <div class="icon-wrapper">
                        <img src="{{ bagisto_asset('icons/favorites.svg') }}" alt="favorite" />
                    </div>

                </a>
                @endauth

                <div class="logo-wrapper-mobile">
                    <a href="{{ route('shop.home.index') }}">
                        @if ($logo = core()->getCurrentChannel()->logo_url)
                            <img src="{{ $logo }}" alt="ElektronikaTM" />
                        @else
                            <img src="{{ bagisto_asset('icons/Logo.svg') }}" alt="ElektronikaTM Logo" />
                        @endif
                    </a>
                </div>

                {{-- Language and cart block start --}}
                <div class="nav-top-right">
                  {{-- Language dropdown start --}}
                  <div clas="nav-inner-top-lang lang-active" id="language-dropdown">
                    <div class="burger-item-title lang-dropdown-title">
                        <div class="burger-item-name lang">
                            {{-- <span>{{ core()->getCurrentLocale()->name }}</span> --}}
                            <div class="burger-lang">
                                <img src="{{ core()->getCurrentLocale()->image_url }}" alt="">
                            </div>
                        </div>
                        <div class="arrow black">
                            <img src="{{ bagisto_asset('icons/burger-arrow-black.svg') }}" alt="burger arrow black">
                        </div>
                        <div class="arrow white">
                            <img src="{{ bagisto_asset('icons/burger-arrow-white.svg') }}" alt="burger arrow white">
                        </div>
                    </div>

                    {{-- <div class="burger-dropdown active" id="language-dropdown-content">
                        <ul class="burger-list-inner-inner lang-list" onchange="window.location.href = this.value">
                            @foreach (core()->getCurrentChannel()->locales as $locale)
                                <li>
                                    <a
                                        @if (isset($serachQuery))
                                            href="?{{ $serachQuery }}&locale={{ $locale->code }}" class="burger-item-name lang lang-second"
                                        @else
                                            href="?locale={{ $locale->code }}" class="burger-item-name lang lang-second"
                                        @endif
                                    >
                                        <div class="burger-lang">
                                            <img src="{{ $locale->image_url }}" alt="">
                                        </div>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div> --}}

                    <div class="language-dropdown" id="language-dropdown-content" onchange="window.location.href = this.value">
                          @foreach (core()->getCurrentChannel()->locales as $locale)
                                  <a
                                  class="@if(core()->getCurrentLocale()->code == $locale->code) active-lang @endif burger-item-name lang lang-second"
                                      @if (isset($serachQuery))
                                          href="?{{ $serachQuery }}&locale={{ $locale->code }}"
                                      @else
                                          href="?locale={{ $locale->code }}"
                                      @endif
                                  >
                                      <div class="burger-lang">
                                          <img src="{{ $locale->image_url }}" alt="">
                                      </div>
                                  </a>
                          @endforeach
                    </div>
                  </div>
                  {{-- Language dropdown end --}}


                  <a href="{{ route('shop.checkout.cart.index') }}" class="nav-link">
                      <div class="icon-wrapper">
                          <img src="{{ bagisto_asset('icons/cart.svg') }}" alt="cart" />
                          <span class="cart-quantity">@if(isset($cart)){{ $cart->items->count() }}@endif</span>
                      </div>
                  </a>
                </div>
                {{-- Language and cart block end --}}

            </div>
            <div class="nav-inner-bottom">
                <div class="burger" @click.capture="getCategories" style="position:relative;">
                    <div class="burger-lines">
                        <span class="line line-1"></span>
                        <span class="line line-2"></span>
                        <span class="line line-3"></span>
                    </div>

                    <!-- Spinner -->
                    <div v-if="loading" class="lds-ring"><div></div><div></div><div></div><div></div></div>
                    <!-- Spinner end -->
                </div>
                <div class="search-bar">
                    <form role="search" action="{{ route('shop.search.index') }}" method="GET">
                        <input
                            required
                            name="term"
                            type="search"
                            value="{{ ! $image_search ? $term : '' }}"
                            class="search-field"
                            id="search-bar2"
                            placeholder="{{ __('shop::app.header.search-text') }}" />
                        <button type="submit" class="search-button">
                            <div class="button-content">
                                <img src="{{ bagisto_asset('icons/search.svg') }}" alt="Search" />
                            </div>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </nav>
</script>



<script>
    Vue.component('my-mobile-nav', {
        template: '#my-mobile-nav-template',
        data () {
            return {
                categories: [],

                loading: false,

                burger: undefined,
                burgerItemInner: undefined,
                burgerDropInner: undefined,
            }
        },
        methods: {
            getCategories() {
                if(!this.categories.length) { // if we have not fetched categories yet

                    this.setLoading(true)

                    fetch("{!! route('descendant-categories', ['parent_id' => 1,'locale'=>\Illuminate\Support\Facades\App::getLocale()]) !!} ")
                    .then(res => res.json())
                    .then(res => {
                        this.categories = res.data
                    })
                    .then(() => {

                        // when all categories are fetched, set listeners to DOM elements
                        this.setListenersToDomElements()

                        // find and assign DOM elements
                        this.assignDomElements()

                        this.toggleCategoriesDomElements()

                        this.setLoading(false)
                    })
                    .catch(err => {
                        alert(err)
                        this.categories = []
                        this.setLoading(false)
                        this.burger = undefined
                        this.burgerItemInner = undefined
                        this.burgerDropInner = undefined
                    })
                } else { // if we have already fetched categories

                    this.toggleCategoriesDomElements()
                }
            },

            closeMobileMenu(e) {

                const burgerInner = this.s('.burger-mobile-inner');

                if (e.target.contains(burgerInner)) this.burger.classList.remove('active');
                document.body.style.overflow = 'visible';
            },

            toggleRootCategories(index) {

                this.burgerItemInner[index].classList.toggle('active');
                this.burgerDropInner[index].classList.toggle('active');
            },
            toggleChildCategories(indexRoot, indexChild) {

                const burgerInner2 = document.getElementById('item-title-root-' + indexRoot + '-child-' + indexChild);
                const burgerDropInner3 = document.getElementById('item-drop-root-' + indexRoot + '-child-' + indexChild);

                burgerInner2.classList.toggle('active');
                burgerDropInner3.classList.toggle('active');
            },

            /**
             * Set loading config while categories are fetched
             */
            setLoading(loading) {
                this.loading = loading
                document.querySelector('.burger-lines').style.opacity = loading ? 0 : 1
            },

            /**
             * Quering DOM elements after categories are fetched
             * Called one time
             * when categories are fetched - in `promise`
             */
            setListenersToDomElements() {

                const burgerItem = this.sAll('.burger-item-title');
                const burgerDrop = this.sAll('.burger-dropdown');

                burgerItem.forEach((el, i) =>
                    el.addEventListener('click', () => {
                        burgerItem[i].classList.toggle('active');
                        burgerDrop[i].classList.toggle('active');
                    })
                );
            },

            assignDomElements() {
                this.burger = this.s('.burger-mobile');

                this.burgerItemInner = this.sAll('.burger-item-title-inner');
                this.burgerDropInner = this.sAll('.burger-dropdown-inner');
            },

            // query selector
            s(identifier) {
                return document.querySelector(identifier);
            },

            // query selector all
            sAll(identifier) {
                return document.querySelectorAll(identifier);
            },

            /**
             * Can be called two times
             * - when categories are fecthed in `promise`
             * - when categories have already been fecthed in `else` section
             */
            toggleCategoriesDomElements() {

                this.burger.classList.toggle('active');
                if (this.burger.classList.contains('active'))
                    document.body.style.overflow = 'hidden';
                else document.body.style.overflow = 'visible';
            },

            loginModal() {
                this.burger.classList.remove('active');
                document.querySelector('.registration-form').style.display = 'none';
                document.querySelector('.password-recovery-nr').style.display = 'none';
                document.querySelector('.password-recovery-sms').style.display = 'none';
                document.querySelector('.sign-up').style.display = 'block';
                // document.querySelector('.login-form.confirm').style.display = 'none';
                document.body.style.overflowY = 'hidden';
            }

        }
    })
</script>
@endpush

