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

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

<header class="fixed top-0 left-0 right-0 z-[999] hidden p-4 max-lg:block w-full" style="background: #fff;">
    <!-- Mobile Menu -->
    <div class="grid gap-2 w-full" style="background: #ffffff; border-radius: 15px; padding: 1rem;">
        <div class="flex items-center justify-between gap-1.5">
            <div class="flex gap-2.5">
                <!-- Hamburger Menu -->
                <i
                    class="icon-hamburger hidden cursor-pointer rounded-md py-1 text-2xl hover:bg-gray-100 max-lg:block"
                    @click="$refs.sideMenuDrawer.open()"
                >
                </i>

                <!-- AccordRx Logo -->
                <a href="{{ route('seller.dashboard.index') }}">
                    <img
                        class="h-10"
                        src="https://accordrx.com/wp-content/uploads/2023/04/AccordRx_logo_color_350w.png"
                        alt="AccordRx Logo"
                    />
                </a>
            </div>

            <div class="flex gap-2.5">
                <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>

                <a
                    href="{{ route('shop.marketplace.sellers.show', $seller->url)}}"
                    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>

                <!-- 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 class="rounded-[20px] border !p-2.5 shadow-[0px_0px_0px_0px_rgba(0,0,0,0.10),0px_1px_3px_0px_rgba(0,0,0,0.10),0px_5px_5px_0px_rgba(0,0,0,0.09),0px_12px_7px_0px_rgba(0,0,0,0.05),0px_22px_9px_0px_rgba(0,0,0,0.01),0px_34px_9px_0px_rgba(0,0,0,0.00)]">
                        <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') }}"
                                id="sellerLogout"
                            >
                            </x-shop::form>

                            <a
                                class="cursor-pointer rounded-xl px-5 py-2 text-base hover:bg-gray-100"
                                href="{{ route('admin.session.destroy') }}"
                                onclick="event.preventDefault(); document.getElementById('sellerLogout').submit();"
                            >
                                @lang('marketplace::app.components.seller.layouts.header.logout')
                            </a>
                        </div>
                    </x-slot>
                </x-shop::dropdown>
            </div>
        </div>

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

<!-- Menu Sidebar Drawer -->
<x-marketplace::seller.drawer
    position="left"
    width="270px"
    ref="sideMenuDrawer"
>
    <!-- Drawer Header -->
    <x-slot:header>
        <div class="flex items-center justify-between">
            @if ($seller->logo)
                <img
                    class="h-10"
                    src="{{ Storage::url($seller->logo) }}"
                    alt="Seller Logo"
                />
            @else
                <img
                    src="{{ bagisto_asset('images/logo.svg') }}"
                    alt="Seller Logo"
                />
            @endif
        </div>
    </x-slot>

    <!-- Drawer Content -->
    <x-slot:content>
        <div class="journal-scroll h-[calc(100vh-120px)] overflow-auto">
            <!-- Account Navigation Menus -->
            @foreach (marketplace_menu()->getItems('seller') as $menuItem)
                <div class="{{ $menuItem->isActive() ? 'active' : 'inactive' }}">
                    <a
                        href="{{ $menuItem->getUrl() }}"
                        class="flex cursor-pointer justify-between p-5 hover:bg-[#f3f4f682]"
                    >
                        <div class="flex items-center gap-x-4">
                            <span class="{{ $menuItem->getIcon() }} text-2xl"></span>

                            <span class="whitespace-nowrap font-medium group-[.sidebar-collapsed]/container:hidden">
                                @lang($menuItem->getName())
                            </span>
                        </div>

                        @if ($menuItem->isActive())
                            <span class="mp-arrow-right-icon text-2xl max-md:hidden"></span>
                        @endif
                    </a>

                    @if ($menuItem->haveChildren())
                        <div class="{{ $menuItem->isActive() ? '!grid bg-gray-100' : '' }} hidden min-w-[180px] ltr:pl-12 rtl:pr-12 rounded-b-lg z-[100] overflow-hidden group-[.sidebar-collapsed]/container:!hidden">
                            @foreach ($menuItem->getChildren() as $subMenuItem)
                                <a
                                    href="{{ $subMenuItem->getUrl() }}"
                                    class="{{ $subMenuItem->isActive() ? 'text-navyBlue' : '' }} p-2.5 font-medium"
                                >
                                    @lang($subMenuItem->getName())
                                </a>
                            @endforeach
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </x-slot>
</x-marketplace::seller.drawer>