@push('styles')
    <link rel="stylesheet" href="{{ asset('css/custom/accordrx-footer.css') }}">


@endPush

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

<!-- Seller Header (Matches Customer Header Style) -->
<header class="fixed top-0 left-0 right-0 z-[999] hidden lg:flex flex-col transition-all duration-300" style="background:#fff;">
    <!-- Top Row: List Item Button + User Profile -->
    <div class="flex gap-20 justify-end w-full px-[60px] py-2 border-b border-gray-100">
        <a
            href="{{ route('seller.products.create-new') }}"
            class="accordrx-list-item-btn"
        >
            List an Item
        </a>

        <!-- User Profile Dropdown -->
        <x-shop::dropdown position="bottom-right">
            <x-slot:toggle>
                <div class="flex items-center gap-x-3 cursor-pointer">
                    <img
                        src="{{ $seller->image_url ?? bagisto_asset('images/user-placeholder.png') }}"
                        alt="Seller Avatar"
                        class="w-8 h-8 rounded-full"
                    >
                    <div class="text-left">
                        <p class="text-sm text-gray-600">Welcome</p>
                        <p class="text-sm font-medium text-gray-900">{{ $seller->first_name }} {{ $seller->last_name }}</p>
                    </div>
                </div>
            </x-slot>

            <x-slot:content class="!p-0">
                <div class="py-2">
                    <a
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        href="{{ route('seller.profile.index') }}"
                    >
                        My Profile
                    </a>

                    <a
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        href="{{ route('seller.dashboard.index') }}"
                    >
                        Seller Dashboard
                    </a>

                    <a
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        href="{{ route('seller.products.index') }}"
                    >
                        My Products
                    </a>

                    @if ($seller && $seller->url)
                    <a
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        href="{{ route('shop.marketplace.sellers.show', $seller->url)}}"
                        target="_blank"
                    >
                        Visit My Shop
                    </a>
                    @endif

                    <hr class="my-1">

                    <!--Seller logout-->
                    <x-shop::form
                        method="DELETE"
                        action="{{ route('seller.session.destroy') }}"
                        id="sellerLogout"
                    />

                    <a
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                        href="{{ route('seller.session.destroy') }}"
                        onclick="event.preventDefault(); document.getElementById('sellerLogout').submit();"
                    >
                        Logout
                    </a>
                </div>
            </x-slot>
        </x-shop::dropdown>
    </div>

    <!-- Bottom Row: Logo + Navigation + Search + Actions -->
    <div class="flex min-h-[70px] w-full items-center px-[60px] max-1180:px-8 py-4">
        <!-- Left Section: AccordRx Logo -->
        <div class="flex items-center mr-6">
            <a
                href="{{ route('shop.home.index') }}"
                aria-label="AccordRx"
                class="flex items-center"
            >
                <img
                    src="https://accordrx.com/wp-content/uploads/2023/04/AccordRx_logo_color_350w.png"
                    width="160"
                    height="40"
                    alt="AccordRx"
                    class="h-10 w-auto"
                >
            </a>
        </div>

        <!-- Center/Right Section: Search + Navigation + Actions in white container -->
        <div class="flex items-center justify-between w-full" style="background: #ffffff; border-radius: 15px; padding: 1rem 2rem;">
            <!-- Left side of white container - Navigation -->
            <nav class="flex items-center gap-x-8">
                <a href="{{ route('seller.dashboard.index') }}" class="accordrx-nav-link">
                    Dashboard
                </a>
                <a href="{{ route('seller.products.index') }}" class="accordrx-nav-link">
                    Products
                </a>
                <a href="{{ route('seller.orders.index') }}" class="accordrx-nav-link">
                    Orders
                </a>
            </nav>

            <!-- Center - Search Bar -->
            <div class="flex items-center mx-8">
                <x-marketplace::seller.layouts.header.search />
            </div>

            <!-- Right Section: Actions -->
            <div class="flex items-center gap-x-6">
                <div class="flex items-center gap-x-4">
                    <!-- Home Page -->
                    <a
                        href="{{ route('shop.home.index') }}"
                        target="_blank"
                        class="p-2 text-gray-500 hover:text-gray-700 transition-colors"
                        title="Home Page"
                    >
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                    </a>

                    <!-- Notifications -->
                    @php
                        $unreadCount = $seller?->communication?->seller_unread_count;
                    @endphp
                    <a
                        href="{{ route('seller.communication.index') }}"
                        class="p-2 text-gray-500 hover:text-gray-700 transition-colors relative"
                    >
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                        </svg>
                        @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>

                    <!-- Messages -->
                    <a
                        href="{{ route('seller.communication.index') }}"
                        class="p-2 text-gray-500 hover:text-gray-700 transition-colors"
                    >
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>