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

<!-- Authenticated User Header (After Login) -->
@auth('customer')
<div class="flex gap-20 justify-end w-full px-[60px]  ">
   <a
            href="{{ route('seller.products.create-new') }}"
            class="accordrx-list-item-btn"
        >
            List an Item
        </a>
  <!-- User Profile -->
        <x-shop::dropdown position="bottom-right">
            <x-slot:toggle>
                <div class="flex items-center gap-x-3 cursor-pointer">
                    <img
                        src="{{ auth()->user()->image_url ?? bagisto_asset('images/user-placeholder.png') }}"
                        alt="User 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">{{ auth()->user()->first_name }} {{ auth()->user()->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('shop.customers.account.profile.index') }}"
                    >
                        Profile
                    </a>

                    <a
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        href="{{ route('shop.customers.account.orders.index') }}"
                    >
                        My Orders
                    </a>

                    @if (core()->getConfigData('customer.settings.wishlist.wishlist_option'))
                        <a
                            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                            href="{{ route('shop.customers.account.wishlist.index') }}"
                        >
                            Wishlist
                        </a>
                    @endif

                    <!-- Marketplace Links (if user is a seller) -->
                    @if(auth()->user()->isSeller ?? false)
                        <hr class="my-1">
                        <a
                            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                            href="/seller/dashboard"
                        >
                            Seller Dashboard
                        </a>
                        <a
                            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                            href="/seller/products"
                        >
                            My Products
                        </a>
                    @endif

                    <hr class="my-1">

                    <!--Logout-->
                    <x-shop::form
                        method="DELETE"
                        action="{{ route('shop.customer.session.destroy') }}"
                        id="customerLogout"
                    />

                    <a
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                        href="{{ route('shop.customer.session.destroy') }}"
                        onclick="event.preventDefault(); document.getElementById('customerLogout').submit();"
                    >
                        Logout
                    </a>
                </div>
            </x-slot>
        </x-shop::dropdown>
         </div>
<div class="flex min-h-[70px] w-full items-center px-[60px] max-1180:px-8 py-4" style="background: #fff">
    <!-- Left Section: AccordRx Logo (outside white container) -->

    <div class="flex items-center mr-6">
        {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.logo.before') !!}

        <!-- AccordRx Logo -->
        <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>

        {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.logo.after') !!}
    </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="/marketplace" class="accordrx-nav-link">
                    Marketplace
                </a>
                <a href="{{ route('shop.customers.account.wishlist.index') }}" class="accordrx-nav-link">
                    Wishlist
                </a>
            </nav>

            <!-- Center - Search Bar -->
            <div class="flex items-center mx-8">
                <div class="relative flex items-center md:w-[440px] md:max-w-[440px]">
                    <i class="icon-search absolute top-2.5 flex items-center text-2xl ltr:left-2 rtl:right-2 text-gray-500"></i>
                    <input
                        type="text"
                        class="h-11 block w-full rounded-lg border border-transparent bg-[#F5F5F5] px-11 py-2.5 text-xs font-medium text-gray-900 transition-all hover:border-gray-400 focus:border-gray-400"
                        placeholder="Search products, brands, and more..."
                    >
                </div>
            </div>

        <!-- Right Section: Actions + User Profile -->
        <div class="flex items-center gap-x-6">

        <!-- List an Item Button -->

        <!-- Action Icons -->
        <div class="flex items-center gap-x-4">
            <!-- Search Icon -->


            <!-- Notifications -->
            <button
                type="button"
                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>
            </button>

            <!-- Messages -->
            <button
                type="button"
                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>
            </button>

            <!-- Favorites -->
            <button
                type="button"
                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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                </svg>
            </button>

            <!-- Shopping Cart -->
            @if(core()->getConfigData('sales.checkout.shopping_cart.cart_page'))
                @include('shop::checkout.cart.mini-cart')
            @endif
        </div>


        </div>
    </div>
</div>
@endauth

<!-- Guest User Header (Original Non-Login Layout) -->
@guest('customer')
<div class="flex min-h-[70px] w-full justify-between items-center px-[60px] max-1180:px-8 bg-white border-b border-gray-100 pb-4">
    <!-- Left Section: Logo + Navigation -->
    <div class="flex items-center gap-x-12">
        {!! view_render_event('bagisto.shop.components.layouts.header.desktop.bottom.logo.before') !!}

        <!-- AccordRx Logo -->
        <a
            href="{{ route('shop.home.index') }}"
            aria-label="AccordRx"
            class="flex items-center"
        >
            <img
                src="{{ core()->getCurrentChannel()->logo_url ?? bagisto_asset('images/logo.svg') }}"
                width="140"
                height="32"
                alt="AccordRx"
                class="h-8 w-auto"
            >
        </a>

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


    </div>
    <div>
  <!-- Navigation Links -->
        <nav class="flex items-center gap-x-8">
            <a href="{{ route('shop.home.index') }}" class="accordrx-nav-link">
                Home
            </a>
            <a href="/about-us" class="accordrx-nav-link">
                About Us
            </a>
            <a href="/faqs" class="accordrx-nav-link">
                FAQs
            </a>
            <a href="/pricing" class="accordrx-nav-link">
                Pricing
            </a>
            <a href="{{ route('shop.home.contact_us') }}" class="accordrx-nav-link">
                Contact
            </a>
        </nav>

    </div>

    <!-- Right Section: Search + Buttons -->
    <div class="flex items-center gap-x-4">
        <!-- Search Icon -->
        <button
            type="button"
            class="p-2 text-gray-500 hover:text-gray-700 transition-colors"
            onclick="toggleSearch()"
        >
            <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
        </button>

        <!-- Login Button -->
        <a
            href="{{ route('shop.customer.session.create') }}"
            class="accordrx-login-btn"
        >
            Login
        </a>

        <!-- Contact Us Button -->
        <a
            href="{{ route('shop.home.contact_us') }}"
            class="accordrx-contact-btn"
        >
            Contact Us
        </a>
    </div>
</div>
@endguest

@pushOnce('scripts')
    <script>
        function toggleSearch() {
            // Simple search toggle functionality
            window.location.href = "{{ route('shop.search.index') }}";
        }
    </script>
@endPushOnce

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