@php
    use App\Helpers\MenuHelper;

    $menuGroups = MenuHelper::getMenuGroups();

    $currentPath = '/' . trim(request()->path(), '/');
    $currentPath = $currentPath === '//' ? '/' : $currentPath;

    $initialOpenSubmenus = [];

    foreach ($menuGroups as $groupIndex => $menuGroup) {
        foreach (($menuGroup['items'] ?? []) as $itemIndex => $item) {
            if (!isset($item['subItems']) || !is_array($item['subItems'])) {
                continue;
            }

            foreach ($item['subItems'] as $subItem) {
                $subPath = '/' . ltrim($subItem['path'] ?? '', '/');
                $subPath = rtrim($subPath, '/') ?: '/';

                if (
                    $currentPath === $subPath ||
                    ($subPath !== '/' && str_starts_with(trim($currentPath, '/'), trim($subPath, '/')))
                ) {
                    $initialOpenSubmenus["{$groupIndex}-{$itemIndex}"] = true;
                    break;
                }
            }
        }
    }
@endphp

<style>
    [x-cloak] {
        display: none !important;
    }

    .erp-sidebar {
        background:
            radial-gradient(1200px 420px at -8% -6%, rgba(59, 130, 246, 0.14), transparent 42%),
            radial-gradient(900px 340px at 120% 0%, rgba(99, 102, 241, 0.12), transparent 38%),
            linear-gradient(180deg, rgba(255,255,255,0.985) 0%, rgba(247,250,255,0.985) 48%, rgba(240,246,255,0.99) 100%);
        color: #0f172a;
        border-right: 1px solid rgba(148, 163, 184, 0.16);
        box-shadow:
            18px 0 44px rgba(15, 23, 42, 0.07),
            inset -1px 0 0 rgba(255,255,255,0.72);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .dark .erp-sidebar {
        background:
            radial-gradient(1000px 360px at -10% -8%, rgba(59, 130, 246, 0.18), transparent 38%),
            radial-gradient(900px 320px at 115% 0%, rgba(99, 102, 241, 0.16), transparent 34%),
            linear-gradient(180deg, rgba(10,14,24,0.98) 0%, rgba(13,20,34,0.985) 48%, rgba(16,26,46,0.99) 100%);
        color: #dbe7ff;
        border-right: 1px solid rgba(255, 255, 255, 0.07);
        box-shadow:
            14px 0 38px rgba(2, 6, 23, 0.28),
            inset -1px 0 0 rgba(255,255,255,0.03);
    }

    .erp-sidebar-scroll {
        scrollbar-width: thin;
        scrollbar-color: rgba(99, 102, 241, 0.30) transparent;
    }

    .erp-sidebar-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .erp-sidebar-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .erp-sidebar-scroll::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(99, 102, 241, 0.55), rgba(59, 130, 246, 0.38));
        border-radius: 999px;
    }

    .erp-logo-shell {
        border: 1px solid rgba(148, 163, 184, 0.14);
        background:
            linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,255,0.96) 100%);
        box-shadow:
            0 14px 30px rgba(15, 23, 42, 0.07),
            inset 0 1px 0 rgba(255,255,255,0.95),
            inset 0 -1px 0 rgba(148,163,184,0.06);
    }

    .dark .erp-logo-shell {
        border: 1px solid rgba(255, 255, 255, 0.08);
        background:
            linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(247,249,255,0.95) 100%);
        box-shadow:
            0 14px 30px rgba(2, 6, 23, 0.24),
            inset 0 1px 0 rgba(255,255,255,0.82);
    }

    .erp-menu-section-label {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(51, 65, 85, 0.68);
    }

    .dark .erp-menu-section-label {
        color: rgba(191, 219, 254, 0.52);
    }

    .erp-menu-item {
        position: relative;
        display: flex;
        width: 100%;
        min-height: 50px;
        align-items: center;
        gap: 12px;
        border-radius: 18px;
        padding: 10px 12px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        border: 1px solid transparent;
        transition: all 0.22s ease;
        overflow: hidden;
    }

    .erp-menu-item::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.22s ease;
    }

    .erp-menu-item.inactive {
        color: #1e293b;
    }

    .erp-menu-item.inactive:hover {
        background:
            linear-gradient(135deg, rgba(79, 70, 229, 0.075) 0%, rgba(37, 99, 235, 0.06) 100%);
        color: #0f172a;
        border-color: rgba(99, 102, 241, 0.10);
        box-shadow:
            0 10px 22px rgba(99, 102, 241, 0.08),
            inset 0 1px 0 rgba(255,255,255,0.55);
        transform: translateX(2px);
    }

    .erp-menu-item.inactive:hover::before {
        opacity: 1;
        background: linear-gradient(90deg, rgba(79,70,229,0.08), transparent 55%);
    }

    .dark .erp-menu-item.inactive {
        color: rgba(226, 232, 240, 0.94);
    }

    .dark .erp-menu-item.inactive:hover {
        background:
            linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(99, 102, 241, 0.12) 100%);
        color: #ffffff;
        border-color: rgba(255,255,255,0.06);
        box-shadow:
            0 12px 24px rgba(2, 6, 23, 0.22),
            inset 0 1px 0 rgba(255,255,255,0.04);
    }

    .erp-menu-item.inactive:hover .erp-menu-item-icon {
        transform: scale(1.04);
    }

    .erp-menu-item.active {
        background:
            linear-gradient(135deg, #0f172a 0%, #1e3a8a 48%, #2563eb 100%);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow:
            0 18px 34px rgba(37, 99, 235, 0.24),
            0 8px 18px rgba(15, 23, 42, 0.16),
            inset 0 1px 0 rgba(255,255,255,0.18);
    }

    .erp-menu-item.active::before {
        opacity: 1;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 55%, transparent 100%);
    }

    .erp-menu-item-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        min-width: 22px;
        height: 22px;
        transition: all 0.2s ease;
    }

    .erp-menu-item-icon svg {
        width: 20px;
        height: 20px;
    }

    .erp-menu-item.active .erp-menu-item-icon {
        color: #ffffff;
        filter: drop-shadow(0 2px 8px rgba(255,255,255,0.18));
    }

    .erp-menu-item.inactive .erp-menu-item-icon {
        color: #475569;
    }

    .dark .erp-menu-item.inactive .erp-menu-item-icon {
        color: rgba(191, 219, 254, 0.92);
    }

    .erp-menu-item-text {
        flex: 1;
        min-width: 0;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .erp-menu-badge-new {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 3px 8px;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: linear-gradient(135deg, #312e81 0%, #2563eb 100%);
        color: #ffffff;
        box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
    }

    .erp-menu-badge-pro {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border-radius: 999px;
        padding: 3px 8px;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.03em;
        background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
        color: #111827;
        box-shadow: 0 8px 16px rgba(245, 158, 11, 0.18);
        border: 1px solid rgba(245, 158, 11, 0.16);
    }

    .erp-submenu-wrap {
        margin-top: 8px;
        margin-left: 15px;
        padding-left: 15px;
        border-left: 1px solid rgba(99, 102, 241, 0.16);
    }

    .dark .erp-submenu-wrap {
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }

    .erp-submenu-link {
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 15px;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 600;
        border: 1px solid transparent;
        transition: all 0.18s ease;
    }

    .erp-submenu-link.inactive {
        color: #475569;
    }

    .erp-submenu-link.inactive:hover {
        background: rgba(79, 70, 229, 0.06);
        color: #0f172a;
        border-color: rgba(99, 102, 241, 0.08);
        transform: translateX(2px);
    }

    .dark .erp-submenu-link.inactive {
        color: rgba(191, 219, 254, 0.82);
    }

    .dark .erp-submenu-link.inactive:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
        border-color: rgba(255,255,255,0.05);
    }

    .erp-submenu-link.active {
        background:
            linear-gradient(135deg, rgba(30, 64, 175, 0.10) 0%, rgba(37, 99, 235, 0.09) 100%);
        color: #1d4ed8;
        border-color: rgba(37, 99, 235, 0.10);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.45),
            0 8px 18px rgba(37, 99, 235, 0.08);
    }

    .dark .erp-submenu-link.active {
        background:
            linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(99, 102, 241, 0.12) 100%);
        color: #ffffff;
        border-color: rgba(255,255,255,0.06);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.04),
            0 10px 22px rgba(2, 6, 23, 0.20);
    }

    .erp-submenu-dot {
        width: 7px;
        min-width: 7px;
        height: 7px;
        border-radius: 999px;
        background: currentColor;
        opacity: 0.85;
        box-shadow: 0 0 0 4px rgba(59,130,246,0.08);
    }

    .erp-mini-divider {
        width: 30px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.28), transparent);
        margin: 0 auto;
    }

    .dark .erp-mini-divider {
        background: linear-gradient(90deg, transparent, rgba(191, 219, 254, 0.18), transparent);
    }

    .erp-chevron {
        transition: transform 0.2s ease;
    }

    #sidebar {
        width: 290px !important;
        max-width: 85vw !important;
        transform: translateX(-110%) !important;
        z-index: 2147483646 !important;
    }

    body.mobile-sidebar-open #sidebar {
        transform: translateX(0) !important;
    }

    @media (min-width: 1280px) {
        #sidebar {
            max-width: none !important;
            transform: translateX(0) !important;
        }

        #sidebar.sidebar-desktop-expanded {
            width: 290px !important;
        }

        #sidebar.sidebar-desktop-collapsed {
            width: 90px !important;
        }
    }
</style>

<aside
    id="sidebar"
    class="erp-sidebar fixed inset-y-0 left-0 flex h-screen flex-col overflow-x-hidden px-4 transition-all duration-300 ease-in-out"
    x-data="{
        openSubmenus: @js($initialOpenSubmenus),

        normalizePath(path) {
            if (!path) return '/';
            let normalized = path.startsWith('/') ? path : '/' + path;
            normalized = normalized.replace(/\/+$/, '');
            return normalized === '' ? '/' : normalized;
        },

        toggleSubmenu(groupIndex, itemIndex) {
            const key = groupIndex + '-' + itemIndex;
            const nextState = !this.openSubmenus[key];

            this.openSubmenus = {
                ...this.openSubmenus,
                [key]: nextState
            };
        },

        isSubmenuOpen(groupIndex, itemIndex) {
            const key = groupIndex + '-' + itemIndex;
            return !!this.openSubmenus[key];
        },

        isActive(path) {
            const current = this.normalizePath(window.location.pathname || '{{ $currentPath }}');
            const target = this.normalizePath(path);

            return current === target;
        },

        isChildActive(subItems) {
            if (!Array.isArray(subItems)) return false;
            return subItems.some((subItem) => this.isActive(subItem.path));
        },

        closeMobileSidebar() {
            if (!$store.sidebar.isDesktopViewport) {
                $store.sidebar.setMobileOpen(false);
            }
        }
    }"
    :class="{
        'sidebar-desktop-expanded': $store.sidebar.isDesktopViewport && ($store.sidebar.isExpanded || $store.sidebar.isHovered),
        'sidebar-desktop-collapsed': $store.sidebar.isDesktopViewport && !$store.sidebar.isExpanded && !$store.sidebar.isHovered
    }"
    @mouseenter="if ($store.sidebar.isDesktopViewport && !$store.sidebar.isExpanded) $store.sidebar.setHovered(true)"
    @mouseleave="if ($store.sidebar.isDesktopViewport) $store.sidebar.setHovered(false)"
>
    <div class="pb-6 pt-4">
        <div class="flex items-start justify-between gap-3">
            <a href="/" class="block flex-1" @click="closeMobileSidebar()">
                <div
                    class="erp-logo-shell flex items-center overflow-hidden rounded-2xl transition-all duration-300"
                    :class="($store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen)
                        ? 'justify-start px-3 py-3'
                        : 'justify-center px-2 py-3'"
                >
                    <img
                        x-show="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen"
                        src="{{ \App\Models\Setting::getShopLogo() }}"
                        alt="{{ \App\Models\Setting::getShopName() }}"
                        class="h-14 w-auto"
                    />
                    <img
                        x-show="!$store.sidebar.isExpanded && !$store.sidebar.isHovered && !$store.sidebar.isMobileOpen"
                        src="{{ \App\Models\Setting::getShopLogoIcon() }}"
                        alt="{{ \App\Models\Setting::getShopName() }}"
                        class="h-10 w-10 rounded-xl"
                    />
                </div>
            </a>

            <button
                type="button"
                class="mt-1 inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white/80 text-slate-600 shadow-sm hover:bg-slate-50 xl:hidden dark:border-white/10 dark:bg-white/10 dark:text-slate-200 dark:hover:bg-white/15"
                @click="$store.sidebar.setMobileOpen(false)"
                x-show="$store.sidebar.isMobileOpen && !$store.sidebar.isDesktopViewport"
                x-cloak
                aria-label="Tutup menu"
            >
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
    </div>

    <div class="erp-sidebar-scroll flex-1 overflow-y-auto pb-6">
        <nav class="space-y-5">
            @foreach ($menuGroups as $groupIndex => $menuGroup)
                <div>
                    <div
                        class="mb-3 flex items-center"
                        :class="($store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen)
                            ? 'justify-start px-2'
                            : 'justify-center'"
                    >
                        <template x-if="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen">
                            <span class="erp-menu-section-label">{{ $menuGroup['title'] }}</span>
                        </template>

                        <template x-if="!($store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen)">
                            <div class="erp-mini-divider"></div>
                        </template>
                    </div>

                    <ul class="space-y-1.5">
                        @foreach ($menuGroup['items'] as $itemIndex => $item)
                            <li>
                                @if (isset($item['subItems']))
                                    <button
                                        type="button"
                                        @click="toggleSubmenu({{ $groupIndex }}, {{ $itemIndex }})"
                                        class="erp-menu-item"
                                        :class="[
                                            isSubmenuOpen({{ $groupIndex }}, {{ $itemIndex }}) || isChildActive(@js($item['subItems'])) ? 'active' : 'inactive',
                                            (!$store.sidebar.isExpanded && !$store.sidebar.isHovered && !$store.sidebar.isMobileOpen) ? 'justify-center px-0' : 'justify-start'
                                        ]"
                                    >
                                        <span class="erp-menu-item-icon">
                                            {!! MenuHelper::getIconSvg($item['icon']) !!}
                                        </span>

                                        <span
                                            x-show="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen"
                                            class="erp-menu-item-text"
                                        >
                                            {{ $item['name'] }}
                                        </span>

                                        <div
                                            x-show="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen"
                                            class="ml-auto flex items-center gap-2"
                                        >
                                            @if (!empty($item['new']))
                                                <span class="erp-menu-badge-new">new</span>
                                            @endif

                                            @if (!empty($item['pro']))
                                                <span class="erp-menu-badge-pro">
                                                    <span>👑</span>
                                                    <span>Pro</span>
                                                </span>
                                            @endif

                                            <svg
                                                class="erp-chevron h-4 w-4"
                                                :class="{ 'rotate-180': isSubmenuOpen({{ $groupIndex }}, {{ $itemIndex }}) }"
                                                fill="none"
                                                stroke="currentColor"
                                                viewBox="0 0 24 24"
                                            >
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                            </svg>
                                        </div>
                                    </button>

                                    <div
                                        x-show="isSubmenuOpen({{ $groupIndex }}, {{ $itemIndex }}) && ($store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen)"
                                        x-collapse
                                        class="erp-submenu-wrap"
                                    >
                                        <ul class="space-y-1.5 py-1">
                                            @foreach ($item['subItems'] as $subItem)
                                                <li>
                                                    <a
                                                        href="{{ $subItem['path'] }}"
                                                        class="erp-submenu-link"
                                                        :class="isActive('{{ $subItem['path'] }}') ? 'active' : 'inactive'"
                                                        @click="closeMobileSidebar()"
                                                    >
                                                        <span class="erp-submenu-dot"></span>

                                                        <span class="flex-1 truncate">
                                                            {{ $subItem['name'] }}
                                                        </span>

                                                        <span class="ml-auto flex items-center gap-1">
                                                            @if (!empty($subItem['new']))
                                                                <span class="erp-menu-badge-new">new</span>
                                                            @endif

                                                            @if (!empty($subItem['pro']))
                                                                <span class="erp-menu-badge-pro">
                                                                    <span>👑</span>
                                                                    <span>Pro</span>
                                                                </span>
                                                            @endif
                                                        </span>
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @else
                                    <a
                                        href="{{ $item['path'] }}"
                                        class="erp-menu-item"
                                        :class="[
                                            isActive('{{ $item['path'] }}') ? 'active' : 'inactive',
                                            (!$store.sidebar.isExpanded && !$store.sidebar.isHovered && !$store.sidebar.isMobileOpen) ? 'justify-center px-0' : 'justify-start'
                                        ]"
                                        @click="closeMobileSidebar()"
                                    >
                                        <span class="erp-menu-item-icon">
                                            {!! MenuHelper::getIconSvg($item['icon']) !!}
                                        </span>

                                        <span
                                            x-show="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen"
                                            class="erp-menu-item-text"
                                        >
                                            {{ $item['name'] }}
                                        </span>

                                        <span
                                            x-show="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen"
                                            class="ml-auto flex items-center gap-2"
                                        >
                                            @if (!empty($item['new']))
                                                <span class="erp-menu-badge-new">new</span>
                                            @endif

                                            @if (!empty($item['pro']))
                                                <span class="erp-menu-badge-pro">
                                                    <span>👑</span>
                                                    <span>Pro</span>
                                                </span>
                                            @endif
                                        </span>
                                    </a>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </nav>
    </div>
</aside>

<div
    x-show="$store.sidebar.isMobileOpen && !$store.sidebar.isDesktopViewport"
    x-cloak
    @click="$store.sidebar.setMobileOpen(false)"
    class="fixed inset-0 bg-slate-950/40 backdrop-blur-[2px] xl:hidden"
    style="z-index: 2147483645;"
></div>