{!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.before') !!}

<div class="flex min-h-[78px] w-full justify-between border border-b border-l-0 border-r-0 border-t-0 px-[60px] max-1180:px-8">
    <!--
        This section will provide categories for the first, second, and third levels. If
        additional levels are required, users can customize them according to their needs.
    -->
    <!-- Left Nagivation Section -->
    <div class="flex items-center gap-x-10 max-[1180px]:gap-x-5">
        {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.logo.before') !!}

        <a href="{{ route('yas_member.member.session.index') }}" aria-label="@lang('yas_theme::app.components.layouts.header.bagisto')">
            <img src="{{ core()->getCurrentChannel()->logo_url ?? bagisto_asset('images/logo.svg') }}" width="131" height="29" alt="{{ config('app.name') }}">
        </a>

        {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.logo.after') !!}

        {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.category.before') !!}

        <v-desktop-category>
            <div class="flex items-center gap-5">
                <span class="shimmer h-6 w-20 rounded" role="presentation"></span>

                <span class="shimmer h-6 w-20 rounded" role="presentation"></span>

                <span class="shimmer h-6 w-20 rounded" role="presentation"></span>
            </div>
        </v-desktop-category>

        {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.category.after') !!}
    </div>

    <!-- Right Nagivation Section -->
    <div class="flex items-center gap-x-9 max-[1100px]:gap-x-6 max-lg:gap-x-8">

        {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.search_bar.before') !!}

        <!-- Search Bar Container -->
        <div class="relative w-full">
            <form action="{{ route('yas_member.search.index') }}" class="flex max-w-[445px] items-center" role="search">
                <label for="organic-search" class="sr-only">
                    @lang('yas_theme::app.components.layouts.header.search')
                </label>

                <div class="icon-search pointer-events-none absolute top-2.5 flex items-center text-xl ltr:left-3 rtl:right-3 text-icon"></div>

                <input type="text" name="query" value="{{ request('query') }}" class="custom-search block w-full  border border-transparent bg-zinc-100 px-11 py-3 text-xs font-medium text-gray-900 transition-all hover:border-gray-400 focus:border-gray-400" minlength="{{ core()->getConfigData('catalog.products.search.min_query_length') }}" maxlength="{{ core()->getConfigData('catalog.products.search.max_query_length') }}" placeholder="@lang('yas_theme::app.components.layouts.header.search-text')" aria-label="@lang('yas_theme::app.components.layouts.header.search-text')" aria-required="true" required>

                <button type="submit" class="hidden" aria-label="@lang('yas_theme::app.components.layouts.header.submit')">
                </button>

                @if (core()->getConfigData('catalog.products.settings.image_search'))
                @include('yas_member::search.images.index')
                @endif
            </form>
        </div>

        {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.search_bar.after') !!}

        <!-- Right Navigation Links -->
        <div class="mt-1.5 flex gap-x-8 max-[1100px]:gap-x-6 max-lg:gap-x-8">

            {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.compare.before') !!}

            <!-- Compare -->
            @if(core()->getConfigData('catalog.products.settings.compare_option'))
            <a href="{{ route('yas_member.compare.index') }}" aria-label="@lang('yas_theme::app.components.layouts.header.compare')">
                <span class="icon-compare inline-block cursor-pointer text-2xl text-icon" role="presentation"></span>
            </a>
            @endif

            {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.compare.after') !!}

            {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.mini_cart.before') !!}

            <!-- Mini cart -->
            @if(core()->getConfigData('sales.checkout.shopping_cart.cart_page'))
            @include('yas_member::checkout.cart.mini-cart')
            @endif

            {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.mini_cart.after') !!}

            {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.profile.before') !!}

            <!-- user profile -->
            <x-yas_member::dropdown position="bottom-{{ core()->getCurrentLocale()->direction === 'ltr' ? 'right' : 'left' }}">
                <x-slot:toggle>
                    <span class="icon-users inline-block cursor-pointer text-2xl text-icon" role="button" aria-label="@lang('yas_theme::app.components.layouts.header.profile')" tabindex="0"></span>
                    </x-slot>

                    <!-- Guest Dropdown -->
                    @guest('yas_member')
                    <x-slot:content>
                        <div class="grid gap-2.5">
                            <p class="font-dmserif text-xl">
                                @lang('yas_theme::app.components.layouts.header.welcome-guest')
                            </p>

                            <p class="text-sm">
                                @lang('member::app.member.dropdown-text')
                            </p>
                        </div>

                        <p class="py-2px  w-full border-t border-divider"></p>

                        {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.customers_action.before') !!}

                        <div class="mt-6 flex gap-4">
                            <!-- {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.sign_in_button.before') !!} -->

                            <a href="{{ route('yas_member.member.session.create') }}" class="primary-button m-0 mx-auto block w-max  py-3 text-center text-base ltr:ml-0 rtl:mr-0">
                            @lang('member::app.member.index.title') @lang('yas_theme::app.components.layouts.header.sign-in')
                            </a>

                            <!-- <a href="{{ route('yas_member.member.register.index') }}" class="secondary-button border-2 px-7 text-center text-base  max-md:py-3 ltr:ml-0 rtl:mr-0 m-0 mx-auto block w-max  py-3">
                                @lang('yas_theme::app.components.layouts.header.sign-up')
                            </a> -->

                            <!-- {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.sign_up_button.after') !!} -->
                        </div>

                        {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.customers_action.after') !!}
                        </x-slot>
                        @endguest

                        <!-- Customers Dropdown -->
                        @auth('yas_member')
                        <x-slot:content class="!p-0">
                            <div class="grid gap-2.5 p-5 pb-0">
                                <p class="font-dmserif text-xl">
                                    @lang('yas_theme::app.components.layouts.header.welcome')
                                    {{ auth()->guard('yas_member')->user()->first_name }}
                                </p>

                                <p class="text-sm">
                                @lang('member::app.member.dropdown-text')
                                </p>
                            </div>



                            <div class="mt-2.5 grid gap-1 pb-2.5 border-t border-divider">
                                {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.profile_dropdown.links.before') !!}

                                <a class="cursor-pointer px-5 py-2 text-base hover:bg-gray-100" href="{{ route('yas_member.member.account.profile.index') }}">
                                    @lang('yas_theme::app.components.layouts.header.profile')
                                </a>

                                <a class="cursor-pointer px-5 py-2 text-base hover:bg-gray-100" href="{{ route('yas_member.member.account.orders.index') }}">
                                    @lang('yas_theme::app.components.layouts.header.orders')
                                </a>

                                @php /*
                                 @if (core()->getConfigData('customer.settings.wishlist.wishlist_option'))
                                <a class="cursor-pointer px-5 py-2 text-base hover:bg-gray-100" href="{{ route('yas_member.customers.account.wishlist.index') }}">
                                    @lang('yas_theme::app.components.layouts.header.wishlist')
                                </a>
                                @endif */
                                @endphp

                                <!--Customers logout-->
                                @auth('yas_member')
                                <x-yas_member::form method="DELETE" action="{{ route('yas_member.member.session.destroy') }}" id="memberLogout" />

                                <a class="cursor-pointer px-5 py-2 text-base hover:bg-gray-100" href="{{ route('yas_member.member.session.destroy') }}" onclick="event.preventDefault(); document.getElementById('memberLogout').submit();">
                                    @lang('yas_theme::app.components.layouts.header.logout')
                                </a>
                                @endauth

                                {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.profile_dropdown.links.after') !!}
                            </div>
                            </x-slot>
                            @endauth
            </x-yas_member::dropdown>

            {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.profile.after') !!}
        </div>
    </div>
</div>

@pushOnce('scripts')
<script type="text/x-template" id="v-desktop-category-template">
    <div
            class="flex items-center gap-5"
            v-if="isLoading"
        >
            <span
                class="shimmer h-6 w-20 rounded"
                role="presentation"
            ></span>

            <span
                class="shimmer h-6 w-20 rounded"
                role="presentation"
            ></span>

            <span
                class="shimmer h-6 w-20 rounded"
                role="presentation"
            ></span>
        </div>

        <div
            class="flex items-center"
            v-else
        >
            <!--Brands Menu-->
            <div class="group relative flex h-[77px] items-center border-b-4 border-transparent hover:border-b-4 hover:border-navyBlue">
                <span>
                    <a href="/" class="inline-block px-5 uppercase text-header">
                    {{ trans('yas_theme::app.categories.brand_title') }}
                    </a>
                </span>
                <div class="pointer-events-none absolute top-[78px] z-[1] max-h-[580px] w-max max-w-[1260px] translate-y-1 overflow-auto overflow-x-auto border border-b-0 border-l-0 border-r-0 border-t border-[#F3F3F3] bg-white p-9 opacity-0 shadow-[0_6px_6px_1px_rgba(0,0,0,.3)] transition duration-300 ease-out group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-hover:duration-200 group-hover:ease-in ltr:-left-9 rtl:-right-9"
                v-if="brands.length">
                    <div class="aigns flex justify-between gap-x-[70px]">
                        <div class="grid grid-cols-3 gap-x-[70px] ">
                            <div class="w-full min-w-max max-w-[150px] flex-auto  content-start gap-5 p-4"
                            v-for="brand in brands" :key="typeId">
                                <p class="font-medium text-navyBlue">
                                    <a :href="brand.toLowerCase().replace(/\s+/g, '-')">
                                        @{{ brand }}
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Brands Menu-->
            <div
                class="group relative flex h-[77px] items-center border-b-4 border-transparent hover:border-b-4 hover:border-navyBlue"
                v-for="category in categories"
            >
                <span>
                    <a
                        :href="category.url"
                        class="inline-block px-5 uppercase text-header"
                    >
                        @{{ category.name }}
                    </a>
                </span>

                <div
                    class="pointer-events-none absolute top-[78px] z-[1] max-h-[580px] w-max max-w-[1260px] translate-y-1 overflow-auto overflow-x-auto border border-b-0 border-l-0 border-r-0 border-t border-[#F3F3F3] bg-white p-9 opacity-0 shadow-[0_6px_6px_1px_rgba(0,0,0,.3)] transition duration-300 ease-out group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-hover:duration-200 group-hover:ease-in ltr:-left-9 rtl:-right-9"
                    v-if="category.children.length"
                >
                    <div class="aigns flex justify-between gap-x-[70px]">

                        <div class="grid w-full min-w-max max-w-[150px] flex-auto grid-cols-[1fr] content-start gap-5"
                            v-for="(groupedCategories, typeId) in groupCategoriesByType(category.children)" :key="typeId" >
                                <p class="font-medium text-navyBlue" style="font-weight: 600; font-size: 18px; text-decoration: underline;">
                                <b>@{{ categoryTypeNames[typeId] }}</b>
                                </p>

                                <template v-for="secondLevelCategory in groupedCategories" :key="secondLevelCategory.id">
                                    <p class="font-medium text-navyBlue">
                                        <a :href="secondLevelCategory.url">
                                            @{{ secondLevelCategory.name }}
                                        </a>
                                    </p>

                                <ul class="grid grid-cols-[1fr] gap-3" v-if="secondLevelCategory.children.length">
                                    <li class="text-sm font-medium text-zinc-500" v-for="thirdLevelCategory in secondLevelCategory.children" :key="thirdLevelCategory.id">
                                        <a :href="thirdLevelCategory.url">
                                            @{{ thirdLevelCategory.name }}
                                        </a>
                                    </li>
                                </ul>
                            </template>
                        </div>
                        <template v-for="pairCategoryChildren in pairCategoryChildren(category)">
                            <div v-if="!pairCategoryChildren[0].category_type" >
                            <template v-for="secondLevelCategory in pairCategoryChildren">
                                    
                                    <p class="font-medium text-navyBlue">
                                        <a :href="secondLevelCategory.url">
                                            @{{ secondLevelCategory.name }}
                                        </a>
                                    </p>

                                    <ul
                                        class="grid grid-cols-[1fr] gap-3"
                                        v-if="secondLevelCategory.children.length"
                                    >
                                        <li
                                            class="text-sm font-medium text-zinc-500"
                                            v-for="thirdLevelCategory in secondLevelCategory.children"
                                        >
                                            <a :href="thirdLevelCategory.url">
                                                @{{ thirdLevelCategory.name }}
                                            </a>
                                        </li>
                                    </ul>
                                </template>
                            </div>
                           
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </script>

<script type="module">
    app.component('v-desktop-category', {
        template: '#v-desktop-category-template',

        data() {
            return {
                isLoading: true,

                categories: [],
                brands: [],
                categoryTypeNames: [],
                groupedCategories : {},
            }
        },

        mounted() {
            this.get();
            this.getBrands();
        },

        methods: {
            get() {
                this.$axios.get("{{ route('yas_member.api.categories.tree') }}")
                    .then(response => {
                        this.isLoading = false;

                        this.categories = response.data.data;
                        this.groupedCategories = {};

                        this.categories.forEach(category => {
                            const grouped = this.groupCategoriesByType(category.children);
                            
                            this.groupedCategories[category.id] = grouped; 
                        });
                    }).catch(error => {
                        console.log(error);
                    });
            },

            getBrands() {
                this.$axios.get("{{ route('yas_member.api.categories.brand_tree') }}")
                    .then(response => {
                        this.isLoading = false;
                        this.brands = response.data.data;
                        console.log(this.brands);
                    }).catch(error => {
                        console.log(error);
                    });
            },

            getCategoryTypeName(typeId) {

                this.$axios.post("{{ route('yas_member.api.categories.getCategoryTypeName') }}", {typeId: typeId})
                    .then(response => {
                        this.isLoading = false;
                        if(response.data.data){
                            this.categoryTypeNames[typeId]= response.data.data;

                        }else{
                            this.categoryTypeNames[typeId]= NULL;
                        }
                        
                    }).catch(error => {
                        console.log(error);
                    });
            },

            groupCategoriesByType(categories) {
            const grouped = {};

                categories.forEach(category => {
                    if (category.category_type) {
                        const typeId = category.category_type.category_type_id;

                        if (!grouped[typeId]) {
                            grouped[typeId] = [];
                        }

                        grouped[typeId].push(category);

                        if (!this.categoryTypeNames[typeId]) {
                            this.getCategoryTypeName(typeId);
                        }
                    }
                });
                return grouped;
            },

            pairCategoryChildren(category) {
                return category.children.reduce((result, value, index, array) => {
                    if (index % 1 === 0) {
                        result.push(array.slice(index, index + 1));
                    }

                    return result;
                }, []);
            }
        },
    });
</script>
@endPushOnce

{!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.after') !!}