@props(['role' => \App\Enums\RoleEnum::Seller()->value])

{{--@php--}}
{{--    use App\Enums\RoleEnum;--}}
{{--    $openSidebarClasses = 'fi-sidebar-open w-[--sidebar-width] translate-x-0 shadow-xl ring-1 ring-gray-950/5 rtl:-translate-x-0 dark:ring-white/10';--}}
{{--@endphp--}}

<aside
    x-cloak
    x-data="{}"
    x-bind:class="
        $store.sidebar.isOpen
            ? 'fi-sidebar-open w-[--sidebar-width] translate-x-0 shadow-xl ring-1 ring-gray-950/5 dark:ring-white/10 lg:sticky lg:top-0'
            : '-translate-x-full lg:sticky lg:top-0 lg:translate-x-0'
    "
    class="fi-sidebar fixed inset-y-0 start-0 z-30 flex flex-col h-screen content-start bg-white transition-all dark:bg-gray-900 lg:z-0 lg:bg-transparent lg:shadow-none lg:ring-0 lg:transition-none dark:lg:bg-transparent lg:translate-x-0 fi-sidebar-open translate-x-0 shadow-xl ring-1 ring-gray-950/5 dark:ring-white/10 lg:sticky"
>
    <div class="overflow-clip">
        <header
            x-bind:class="
                $store.sidebar.isOpen
                    ? 'pl-6'
                    : 'px-4'
            "
            class="fi-sidebar-header sticky top-0 flex h-16 z-40 items-center justify-center bg-primary-600/20 ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 lg:shadow-sm"
        >
            <div
                x-show="$store.sidebar.isOpen"
                x-transition:enter="lg:transition lg:delay-100"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
            >
                <a href="{{ route($role.'.dashboard') }}" wire:navigate>
                    <x-logo class="h-[3.3rem]" />
                </a>
            </div>

            <x-filament::icon-button
                color="primary"
                icon="heroicon-o-bars-3"
                icon-alias="panels::topbar.open-sidebar-button"
                icon-size="lg"
                :label="__('filament-panels::layout.actions.sidebar.expand.label')"
                x-cloak
                x-data="{}"
                x-on:click="$store.sidebar.open()"
                x-show="! $store.sidebar.isOpen"
                @class(['-ms-1.5 open-sidebar'])
            />

            <x-filament::icon-button
                color="primary"
                :icon="'heroicon-o-chevron-left'"
                icon-alias="panels::sidebar.collapse-button"
                icon-size="lg"
                :label="__('filament-panels::layout.actions.sidebar.collapse.label')"
                x-cloak
                x-data="{}"
                x-on:click="$store.sidebar.close()"
                x-show="$store.sidebar.isOpen"
                class="-mx-1.5 ms-auto hidden lg:flex close-sidebar"
            />
        </header>
    </div>

    <nav
        class="fi-sidebar-nav flex-1 flex flex-col justify-stretch gap-y-7 overflow-y-auto overflow-x-hidden px-4 pt-4 bg-white shadow-lg"
        style="scrollbar-gutter: stable"
    >
        <ul class="-mx-2 relative flex flex-col gap-y-6 h-full">
            <!--   MENU DU VENDEUR   -->
            @seller
            <!--   Dashboard   -->
            <x-partials.sidebar.item
                icon="heroicon-o-home"
                :url="route($role.'.dashboard')"
                :active="request()->routeIs($role.'.dashboard')"
                :grouped="false"
            >
                {{ __('Dashboard') }}
            </x-partials.sidebar.item>

            <!--   Commandes   -->
            {{--            <x-partials.sidebar.item--}}
            {{--                icon="heroicon-o-shopping-cart"--}}
            {{--                :url="route($role.'.orders')"--}}
            {{--                :active="request()->routeIs($role.'.orders')"--}}
            {{--                :grouped="false"--}}
            {{--            >--}}
            {{--                {{ __('orders') }}--}}
            {{--            </x-partials.sidebar.item>--}}

            <!--   Notifications   -->
            <x-partials.sidebar.item
                icon="heroicon-o-bell-alert"
                :url="route($role.'.notifications')"
                :active="request()->routeIs($role.'.notifications')"
                :grouped="false"
            >
                {{ __('notifications') }}
            </x-partials.sidebar.item>

            <!--   Boutiques   -->
            <x-partials.sidebar.item
                icon="heroicon-o-building-storefront"
                :url="route($role.'.shops.index')"
                :active="request()->routeIs($role.'.shops.*')"
                :grouped="false"
            >
                {{ __('shops') }}
            </x-partials.sidebar.item>

            <!--   Publicités   -->
            <x-partials.sidebar.item
                icon="heroicon-m-arrows-pointing-out"
                :url="route($role.'.advertisements')"
                :active="request()->routeIs($role.'.advertisements')"
                :grouped="false"
            >
                {{ __('advertisements') }}
            </x-partials.sidebar.item>

            <!--   Paramétrages   -->
            <div class="mb-16 flex-1 flex flex-col justify-end">
                <x-partials.sidebar.item
                    icon="heroicon-o-cog-8-tooth"
                    :url="route($role.'.settings')"
                    :active="request()->routeIs($role.'.settings')"
                    :grouped="false"
                >
                    {{ __('settings') }}
                </x-partials.sidebar.item>
            </div>
            @endseller

            <!--   MENU DE L'ADMINISTRATEUR   -->
            @admin
            <!--   Dashboard   -->
            <x-partials.sidebar.item
                icon="heroicon-o-home"
                :url="route($role.'.dashboard')"
                :active="request()->routeIs($role.'.dashboard')"
                :grouped="false"
            >
                {{ __('dashboard') }}
            </x-partials.sidebar.item>

            <!--   Module Référentiel   -->
            <x-partials.sidebar.group :label="__('referentiel')">
                <x-slot:items>
                    <x-partials.sidebar.item
                        icon="heroicon-o-rectangle-group"
                        :url="route($role.'.referentiel.countries.index')"
                        :active="request()->routeIs($role.'.referentiel.countries.*')"
                        first="true"
                    >
                        {{ __('countries') }}
                    </x-partials.sidebar.item>

                    <x-partials.sidebar.item
                        icon="heroicon-o-rectangle-group"
                        :url="route($role.'.referentiel.cities.index')"
                        :active="request()->routeIs($role.'.referentiel.cities.*')"
                    >
                        {{ __('cities') }}
                    </x-partials.sidebar.item>

                    <x-partials.sidebar.item
                        icon="heroicon-o-rectangle-group"
                        :url="route($role.'.referentiel.categories.index')"
                        :active="request()->routeIs($role.'.referentiel.categories.*')"
                    >
                        {{ __('categories') }}
                    </x-partials.sidebar.item>

                    <x-partials.sidebar.item
                        icon="heroicon-o-rectangle-group"
                        :url="route($role.'.referentiel.options.index')"
                        :active="request()->routeIs($role.'.referentiel.options.*')"
                    >
                        {{ __('options') }}
                    </x-partials.sidebar.item>

                    <x-partials.sidebar.item
                        icon="heroicon-o-rectangle-group"
                        :url="route($role.'.referentiel.ads-fees.index')"
                        :active="request()->routeIs($role.'.referentiel.ads-fees.*')"
                        last="true"
                    >
                        {{ __('Frais de publicités') }}
                    </x-partials.sidebar.item>
                </x-slot:items>
            </x-partials.sidebar.group>

            <x-partials.sidebar.item
                icon="heroicon-o-users"
                :url="route($role.'.sellers.index')"
                :active="request()->routeIs($role.'.sellers.*')"
                :grouped="false"
            >
                {{ __('sellers') }}
            </x-partials.sidebar.item>

            <x-partials.sidebar.item
                icon="heroicon-o-building-storefront"
                :url="route($role.'.shops.index')"
                :active="request()->routeIs($role.'.shops.*')"
                :grouped="false"
            >
                {{ __('shops') }}
            </x-partials.sidebar.item>

            <x-partials.sidebar.item
                icon="heroicon-o-rectangle-stack"
                :url="route($role.'.partners.index')"
                :active="request()->routeIs($role.'.partners.*')"
                :grouped="false"
            >
                Partenaires
            </x-partials.sidebar.item>

            <x-partials.sidebar.item
                icon="heroicon-o-arrows-pointing-out"
                :url="route($role.'.advertisements.index')"
                :active="request()->routeIs($role.'.advertisements.*')"
                :grouped="false"
            >
                {{ __('advertisements') }}
            </x-partials.sidebar.item>

            <!--   Module Packages   -->
            <x-partials.sidebar.group label="Abonnement" :last="true">
                <x-slot:items>
                    <x-partials.sidebar.item
                        icon="heroicon-o-rectangle-group"
                        :url="route($role.'.packages.options')"
                        :active="request()->routeIs($role.'.packages.options')"
                        :grouped="true"
                        :first="true"
                    >
                        {{ __('options') }}
                    </x-partials.sidebar.item>

                    <x-partials.sidebar.item
                        icon="heroicon-o-rectangle-group"
                        :url="route($role.'.packages.index')"
                        :active="request()->routeIs($role.'.packages.index')"
                        :grouped="true"
                        :last="true"
                    >
                        {{ __('packages') }}
                    </x-partials.sidebar.item>
                </x-slot:items>
            </x-partials.sidebar.group>

            @endadmin
        </ul>

        <script>
            collapsedGroups = JSON.parse(
                localStorage.getItem('collapsedGroups'),
            )

            if (collapsedGroups === null || collapsedGroups === 'null') {
                localStorage.setItem(
                    'collapsedGroups',
                    JSON.stringify(@js(
                        collect()->values()
                    )),
                )
            }

            document
                .querySelectorAll('.fi-sidebar-group')
                .forEach((group) => {
                    // Alpine.js loads too slow, so attempt to hide a
                    // collapsed sidebar group earlier.
                    group.querySelector('.fi-sidebar-group-items').style.display = 'none'
                    group.querySelector('.fi-sidebar-group-collapse-button').classList.add('rotate-180')
                })
        </script>
    </nav>
</aside>