@php
    $seller = seller()->user();
@endphp

<header class="sticky top-0 z-10 hidden items-center justify-between border-b bg-white px-7 py-4 lg:flex">
    <div class="flex items-center gap-1.5">
        <!-- Logo -->
        <a href="{{ route('seller.dashboard.index') }}">
            <img
                src="{{ core()->getCurrentChannel()->logo_url ?? bagisto_asset('images/logo.svg') }}"
                width="131"
                height="29"
                alt="{{ config('app.name') }}"
            />
        </a>

        <!-- Search Bar Component -->
        <x-marketplace::seller.layouts.header.search />
    </div>

    <div class="flex gap-7">
        <a
            href="{{ route('shop.home.index') }}"
            target="_blank"
            class="flex"
        >
            <span 
                class="mp-home-icon cursor-pointer rounded-md p-1 text-2xl transition-all hover:bg-gray-100"
                title="@lang('marketplace::app.components.seller.layouts.header.home-page')"
            >
            </span>
        </a>

        @if ((bool) core()->getConfigData('marketplace.settings.seller.show_publicly'))
            <a 
                href="{{ route('shop.marketplace.sellers.show', $seller->slug)}}" 
                target="_blank"
                class="flex"
            >
                <span 
                    class="mp-store-icon cursor-pointer rounded-md p-1 text-2xl transition-all hover:bg-gray-100"
                    title="@lang('marketplace::app.components.seller.layouts.header.visit-shop')"
                >
                </span>
            </a>
        @endif

        @php
            $unreadCount = $seller->communication?->seller_unread_count;
        @endphp
        
        <a
            class="flex items-baseline relative"
            href="{{ route('seller.communication.index') }}"
        >
            <span class="mp-notification-icon cursor-pointer rounded-md p-1 text-2xl transition-all hover:bg-gray-100">
            </span>

            @if ($unreadCount)
                <span
                    class="h-5 w-5 absolute flex items-center justify-center top-0 right-0 -mt-1 -mr-1 text-xs text-white bg-blue-500 rounded-full px-1"
                >
                    {{ $unreadCount > 9 ? '9+' : $unreadCount }}
                </span>
            @endif
        </a>

        <!-- Seller profile -->
        <x-shop::dropdown position="bottom-{{ core()->getCurrentLocale()->direction === 'ltr' ? 'right' : 'left' }}">
            <x-slot:toggle>
                <div class="flex items-baseline">
                    <span class="icon-users cursor-pointer rounded-md p-1 text-2xl transition-all hover:bg-gray-100">
                    </span>
                </div>
            </x-slot>

            <!-- Seller Dropdown -->
            <x-slot:content>
                <div class="grid gap-1">
                    <a
                        class="cursor-pointer rounded-xl px-5 py-2 text-base hover:bg-gray-100"
                        href="{{ route('seller.profile.index') }}"
                    >
                        @lang('marketplace::app.components.seller.layouts.header.my-profile')
                    </a>

                    <!--Seller logout-->
                    <x-shop::form
                        method="DELETE"
                        action="{{ route('seller.session.destroy') }}"
                    >
                        <button
                            type="submit"
                            class="cursor-pointer rounded-xl px-5 py-2 text-base hover:bg-gray-100 w-full text-left"
                        >
                            @lang('marketplace::app.components.seller.layouts.header.logout')
                        </button>
                    </x-shop::form>
                </div>
            </x-slot>
        </x-shop::dropdown>
    </div>
</header>