@php
    $menuGroups = [
        [
            'key'   => 'users',
            'label' => 'مدیریت کاربران',
            'icon'  => 'fas fa-users-cog',
            'items' => [
                ['route' => 'admin.users.index',   'icon' => 'fas fa-users',       'label' => 'کاربران',          'active' => ['admin.users.*']],
                ['route' => 'admin.admins.index',  'icon' => 'fas fa-user-shield', 'label' => 'مدیریت ادمین‌ها', 'active' => ['admin.admins.*']],
                ['route' => 'admin.drivers.index', 'icon' => 'fas fa-id-card',     'label' => 'رانندگان',         'active' => ['admin.drivers.*']],
            ],
        ],
        [
            'key'   => 'loads',
            'label' => 'مدیریت بارها',
            'icon'  => 'fas fa-truck',
            'items' => [
                ['route' => 'admin.loads.index',             'icon' => 'fas fa-boxes',        'label' => 'بارها',     'active' => ['admin.loads.*']],
                ['route' => 'admin.bills.index',             'icon' => 'fas fa-file-invoice', 'label' => 'حواله‌ها',  'active' => ['admin.bills.*']],
                ['route' => 'admin.freight-companies.index', 'icon' => 'fas fa-warehouse',    'label' => 'باربری‌ها', 'active' => ['admin.freight-companies.*']],
            ],
        ],
        [
            'key'   => 'system',
            'label' => 'سیستم',
            'icon'  => 'fas fa-cogs',
            'items' => [
                ['route' => 'admin.map',                   'icon' => 'fas fa-map-marked-alt', 'label' => 'نقشه رانندگان',     'active' => ['admin.map']],
                ['route' => 'admin.reports.index',         'icon' => 'fas fa-chart-bar',      'label' => 'گزارشات',           'active' => ['admin.reports.*']],
                ['route' => 'admin.master-data.index',     'icon' => 'fas fa-database',       'label' => 'مرجع داده و مالی', 'active' => ['admin.master-data.*']],
                ['route' => 'admin.app-versions.index',    'icon' => 'fas fa-mobile-alt',     'label' => 'نسخه‌های اپ',       'active' => ['admin.app-versions.*']],
                ['route' => 'admin.webservice-docs.index', 'icon' => 'fas fa-book-open',      'label' => 'داکیومنت API',      'active' => ['admin.webservice-docs.*']],
                ['route' => 'admin.system-settings.index', 'icon' => 'fas fa-cog',            'label' => 'تنظیمات سیستم',    'active' => ['admin.system-settings.*']],
            ],
        ],
        [
            'key'   => 'rmto',
            'label' => 'سامانه RMTO',
            'icon'  => 'fas fa-file-contract',
            'items' => [
                ['route' => 'admin.rmto.index', 'icon' => 'fas fa-file-alt', 'label' => 'تست و دمو RMTO', 'active' => ['admin.rmto.*']],
            ],
        ],
    ];
@endphp

{{--
  Sidebar – CSS-driven layout.
  Labels use .sidebar-label class (not x-cloak) so they are always visible.
  Alpine.js adds/removes .sidebar-collapsed and .mobile-open on this element.
  Sub-items default to display:none via CSS; Alpine's x-show overrides inline.
--}}
<aside class="admin-sidebar"
       :class="{
           'sidebar-collapsed': !isSidebarExpanded(),
           'mobile-open': isMobileView && mobileSidebarOpen
       }">

    {{-- Logo / title row --}}
    <div style="display:flex;align-items:center;justify-content:space-between;height:4rem;padding:0 1rem;flex-shrink:0;border-bottom:1px solid #e5e7eb;">
        <span class="sidebar-label" style="font-size:1.125rem;font-weight:700;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">سبک بار</span>
        <button @click="toggleSidebar()" type="button"
                style="width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;border:none;background:transparent;cursor:pointer;color:#6b7280;flex-shrink:0;"
                :title="isMobileView ? 'بستن منو' : (sidebarOpen ? 'بستن سایدبار' : 'باز کردن سایدبار')">
            <i class="fas" :class="isMobileView ? 'fa-times' : (sidebarOpen ? 'fa-angles-right' : 'fa-angles-left')"></i>
        </button>
    </div>

    <nav style="flex:1;overflow-y:auto;padding:.75rem;">
        <ul class="sidebar-nav-list" style="display:flex;flex-direction:column;gap:.25rem;">

            {{-- Dashboard --}}
            <li style="position:relative;"
                x-data="{ hovering: false, tipTop: 0, tipRight: 0 }"
                @mouseenter="hovering = true; if (!isSidebarExpanded()) { var r = $refs.dashLink.getBoundingClientRect(); tipTop = r.top + r.height/2; tipRight = window.innerWidth - r.left + 10; }"
                @mouseleave="hovering = false">

                <a href="{{ route('admin.dashboard') }}"
                   x-ref="dashLink"
                   @click="if (isMobileView) closeMobileSidebar()"
                   class="sidebar-link{{ request()->routeIs('admin.dashboard') ? ' active' : '' }}">
                    <span class="sidebar-icon{{ request()->routeIs('admin.dashboard') ? ' active' : '' }}">
                        <i class="fas fa-tachometer-alt"></i>
                    </span>
                    <span class="sidebar-label" style="margin-right:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">داشبورد</span>
                </a>

                {{-- Tooltip flyout (collapsed mode only) --}}
                <template x-teleport="body">
                    <div x-cloak x-show="!isSidebarExpanded() && hovering" x-transition
                         style="position:fixed;z-index:9999;pointer-events:none;transform:translateY(-50%);"
                         :style="'top:' + tipTop + 'px; right:' + tipRight + 'px'">
                        <div style="white-space:nowrap;border-radius:.5rem;background:#1f2937;padding:.375rem .75rem;font-size:.8125rem;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2);">داشبورد</div>
                    </div>
                </template>
            </li>

            {{-- Menu Groups --}}
            @foreach($menuGroups as $group)
                @php
                    $isGroupActive = collect($group['items'])->contains(function ($child) {
                        return collect($child['active'])->contains(fn ($p) => request()->routeIs($p));
                    });
                @endphp

                <li style="position:relative;"
                    x-data="{
                        expanded: false,
                        hovering: false,
                        flyTop: 0, flyRight: 0,
                        setFlyPos() {
                            var r = this.$refs.groupBtn.getBoundingClientRect();
                            this.flyTop   = Math.max(8, Math.min(r.top, window.innerHeight - 300));
                            this.flyRight = window.innerWidth - r.left + 10;
                        }
                    }"
                    @mouseenter="hovering = true; if (!isSidebarExpanded()) setFlyPos()"
                    @mouseleave="hovering = false">

                    <button type="button"
                            x-ref="groupBtn"
                            @click="expanded = !expanded; if (!isSidebarExpanded()) setFlyPos()"
                            class="sidebar-link{{ $isGroupActive ? ' active' : '' }}">
                        <span class="sidebar-icon{{ $isGroupActive ? ' active' : '' }}">
                            <i class="{{ $group['icon'] }}"></i>
                        </span>
                        <span class="sidebar-label" style="flex:1;margin-right:.75rem;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $group['label'] }}</span>
                        <i class="fas fa-chevron-down sidebar-chevron"
                           style="font-size:.7rem;transition:transform .2s;"
                           :style="expanded ? 'transform:rotate(180deg)' : ''"></i>
                    </button>

                    {{-- Sub-items (expanded sidebar, inline) --}}
                    <div class="sidebar-sub-items"
                         x-show="expanded"
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:enter-start="opacity-0 -translate-y-1"
                         x-transition:enter-end="opacity-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-150"
                         x-transition:leave-start="opacity-100"
                         x-transition:leave-end="opacity-0">
                        @foreach($group['items'] as $item)
                            @php $isActive = collect($item['active'])->contains(fn ($p) => request()->routeIs($p)); @endphp
                            <a href="{{ route($item['route']) }}"
                               @click="if (isMobileView) closeMobileSidebar()"
                               class="sidebar-sub-link{{ $isActive ? ' active' : '' }}">
                                <span class="sidebar-sub-icon{{ $isActive ? ' active' : '' }}">
                                    <i class="{{ $item['icon'] }}" style="font-size:.75rem;"></i>
                                </span>
                                <span style="margin-right:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $item['label'] }}</span>
                            </a>
                        @endforeach
                    </div>

                    {{-- Flyout popup (collapsed mode only) --}}
                    <template x-teleport="body">
                        <div x-cloak
                             x-show="!isSidebarExpanded() && (hovering || expanded)"
                             x-transition
                             style="position:fixed;z-index:9999;width:14rem;border-radius:.75rem;border:1px solid #e5e7eb;background:#fff;padding:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.12);"
                             :style="'top:' + flyTop + 'px; right:' + flyRight + 'px'"
                             @mouseenter="hovering = true"
                             @mouseleave="hovering = false">
                            <p style="margin:0 0 .5rem;font-size:.8125rem;font-weight:600;color:#374151;display:flex;align-items:center;">
                                <i class="{{ $group['icon'] }}" style="margin-left:.5rem;color:#6366f1;"></i>
                                {{ $group['label'] }}
                            </p>
                            <div style="display:flex;flex-direction:column;gap:.25rem;">
                                @foreach($group['items'] as $item)
                                    @php $isActive = collect($item['active'])->contains(fn ($p) => request()->routeIs($p)); @endphp
                                    <a href="{{ route($item['route']) }}"
                                       style="display:flex;align-items:center;border-radius:.5rem;padding:.4375rem .625rem;font-size:.8125rem;text-decoration:none;transition:background .15s,color .15s;{{ $isActive ? 'background:#eef2ff;color:#4338ca;' : 'color:#6b7280;' }}">
                                        <i class="{{ $item['icon'] }}" style="width:1.25rem;text-align:center;margin-left:.5rem;"></i>
                                        {{ $item['label'] }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </template>
                </li>
            @endforeach

        </ul>
    </nav>
</aside>