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

<v-topbar>
    <!-- Shimmer Effect -->
    <div class="flex items-center justify-between border border-b border-l-0 border-r-0 border-t-0 px-16">
        <!-- Currencies -->
        <div class="flex w-20 items-center justify-between gap-2.5 py-3">
            <div
                class="shimmer h-6 w-12 rounded"
                role="presentation"
            >
            </div>

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

        <!-- Offers -->
        <div
            class="shimmer h-6 w-72 rounded py-3"
            role="presentation"
        >
        </div>

        <!-- Locales -->
        <div class="flex w-32 items-center justify-between gap-2.5 py-3">
            <div
                class="shimmer h-6 w-6"
                role="presentation"
            >
            </div>

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

            <div
                class="shimmer h-6 w-6"
                role="presentation"
            >
            </div>
        </div>
    </div>
</v-topbar>

@pushOnce('scripts')
    <script
        type="text/x-template"
        id="v-topbar-template"
    >
        <div v-if="isLoading">
            <!-- Shimmer Effect -->
            <div class="flex items-center justify-between border border-b border-l-0 border-r-0 border-t-0 px-16">
                <!-- Currencies -->
                <div class="flex w-20 items-center justify-between gap-2.5 py-3">
                    <div
                        class="shimmer h-6 w-12 rounded"
                        role="presentation"
                    >
                    </div>

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

                <!-- Offers -->
                <div
                    class="shimmer h-6 w-72 rounded py-3"
                    role="presentation"
                >
                </div>

                <!-- Locales -->
                <div class="flex w-32 items-center justify-between gap-2.5 py-3">
                    <div
                        class="shimmer h-6 w-6"
                        role="presentation"
                    >
                    </div>

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

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

        <div
            class="flex items-center justify-between border border-b border-l-0 border-r-0 border-t-0 bg-zinc-100 px-16 max-1180:px-8 max-md:px-4"
            v-else
        >
            <!-- Currencies and Locales if available -->
            <div class="flex items-center justify-between w-full py-3">
                <!-- Currency Dropdown -->
                <div class="flex items-center gap-2.5" v-if="currencies.length > 1">
                    <x-shop::dropdown position="bottom-left">
                        <x-slot:toggle>
                            <div class="flex cursor-pointer items-center gap-2.5">
                                <span class="text-sm">
                                    @{{ currentCurrency.code }}
                                </span>

                                <span class="icon-sort-down text-xl"></span>
                            </div>
                        </x-slot>

                        <x-slot:content class="!p-0">
                            <div
                                class="grid gap-0.5"
                                v-for="currency in currencies"
                            >
                                <a
                                    :href="`{{ route('shop.currency.switch') }}/${currency.code}`"
                                    class="cursor-pointer px-5 py-2.5 text-sm hover:bg-gray-100"
                                >
                                    @{{ currency.name }}
                                </a>
                            </div>
                        </x-slot>
                    </x-shop::dropdown>
                </div>

                <!-- Promotional Text -->
                <div class="flex-1 text-center">
                    <span class="text-sm text-gray-600">Welcome to AccordRx Marketplace</span>
                </div>

                <!-- Locale Dropdown -->
                <div class="flex items-center gap-2.5" v-if="locales.length > 1">
                    <img
                        :src="`{{ bagisto_asset('images/flag') }}/${currentLocale.code}.svg`"
                        class="h-5 w-5"
                        :alt="currentLocale.name"
                    >

                    <x-shop::dropdown position="bottom-right">
                        <x-slot:toggle>
                            <div class="flex cursor-pointer items-center gap-2.5">
                                <span class="text-sm">
                                    @{{ currentLocale.name }}
                                </span>

                                <span class="icon-sort-down text-xl"></span>
                            </div>
                        </x-slot>

                        <x-slot:content class="!p-0">
                            <div
                                class="grid gap-0.5"
                                v-for="locale in locales"
                            >
                                <a
                                    :href="`{{ route('shop.locale.switch') }}/${locale.code}`"
                                    class="flex cursor-pointer items-center gap-2.5 px-5 py-2.5 text-sm hover:bg-gray-100"
                                >
                                    <img
                                        :src="`{{ bagisto_asset('images/flag') }}/${locale.code}.svg`"
                                        class="h-5 w-5"
                                    >

                                    @{{ locale.name }}
                                </a>
                            </div>
                        </x-slot>
                    </x-shop::dropdown>
                </div>
            </div>
        </div>
    </script>

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

            data() {
                return {
                    isLoading: true,
                    currencies: [],
                    locales: [],
                    currentCurrency: {},
                    currentLocale: {},
                }
            },

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

            methods: {
                get() {
                    // Use server-side data instead of API calls
                    this.currencies = @json(core()->getCurrentChannel()->currencies);
                    this.currentCurrency = @json(core()->getCurrentCurrency());
                    this.locales = @json(core()->getCurrentChannel()->locales);
                    this.currentLocale = @json(core()->getCurrentLocale());
                    this.isLoading = false;
                }
            },
        });
    </script>
@endPushOnce

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