@php
    use App\Services\NavigationMenuService;
    $menu = NavigationMenuService::getMenu();
    // Get full path - isActive() will normalize it
    $currentPath = request()->path();
@endphp

<aside class="fi-sidebar modern-sidebar" id="modern-sidebar">
    <nav class="fi-sidebar-nav modern-sidebar-nav">
        <div class="sidebar-content">
            @foreach($menu as $groupKey => $groupData)
                <div class="nav-group" data-group="{{ $groupKey }}">
                    @if(isset($groupData['children']) && is_array($groupData['children']))
                        @foreach($groupData['children'] as $itemKey => $itemData)
                            @php
                                // Get raw paths - isActive() will normalize them
                                $itemPath = $itemData['path'] ?? '';
                                $hasChildren = isset($itemData['children']) && is_array($itemData['children']) && count($itemData['children']) > 0;
                                
                                // Check if parent is active
                                $isActive = NavigationMenuService::isActive($itemPath, $currentPath);
                                
                                // If parent has children, also check if any child is active
                                if ($hasChildren) {
                                    foreach ($itemData['children'] as $childData) {
                                        $childPath = $childData['path'] ?? '';
                                        if (NavigationMenuService::isActive($childPath, $currentPath)) {
                                            $isActive = true;
                                            break;
                                        }
                                    }
                                }
                                
                                $icon = $itemData['icon'] ?? 'heroicon-o-document';
                                // Use path as-is (already includes /admin prefix from JSON)
                                $fullPath = $itemData['path'];
                            @endphp
                            
                            <div class="nav-item-wrapper {{ $isActive ? 'active' : '' }}">
                                @if($hasChildren)
                                    <div class="nav-item nav-item-parent {{ $isActive ? 'active' : '' }}" data-item="{{ $itemKey }}">
                                        <a href="{{ url($fullPath) }}" class="nav-link nav-link-parent {{ $isActive ? 'active' : '' }}">
                                            @if(isset($itemData['icon']))
                                                <x-dynamic-component :component="$icon" class="nav-icon" />
                                            @endif
                                            <span class="nav-label">{{ $itemKey }}</span>
                                            <svg class="nav-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                            </svg>
                                        </a>
                                        <div class="nav-children {{ $isActive ? 'expanded' : '' }}">
                                            @foreach($itemData['children'] as $childKey => $childData)
                                                @php
                                                    // Get raw path - isActive() will normalize it
                                                    $childPath = $childData['path'] ?? '';
                                                    $childIsActive = NavigationMenuService::isActive($childPath, $currentPath);
                                                    $childIcon = $childData['icon'] ?? 'heroicon-o-document';
                                                    // Use path as-is (already includes /admin prefix from JSON)
                                                    $childFullPath = $childData['path'];
                                                @endphp
                                                <a href="{{ url($childFullPath) }}" class="nav-link nav-link-child {{ $childIsActive ? 'active' : '' }}">
                                                    @if(isset($childData['icon']))
                                                        <x-dynamic-component :component="$childIcon" class="nav-icon" />
                                                    @endif
                                                    <span class="nav-label">{{ $childKey }}</span>
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                @else
                                    <a href="{{ url($fullPath) }}" class="nav-link {{ $isActive ? 'active' : '' }}">
                                        @if(isset($itemData['icon']))
                                            <x-dynamic-component :component="$icon" class="nav-icon" />
                                        @endif
                                        <span class="nav-label">{{ $itemKey }}</span>
                                    </a>
                                @endif
                            </div>
                        @endforeach
                    @endif
                </div>
            @endforeach
        </div>
    </nav>
</aside>

<style>
    .modern-sidebar {
        width: 16rem;
        background: white;
        border-right: 1px solid #e5e7eb;
        transition: all 0.3s ease-in-out;
        overflow-y: auto;
        height: calc(100vh - 64px);
    }

    .modern-sidebar-nav {
        padding: 0.5rem;
    }

    .nav-group {
        margin-bottom: 0.5rem;
    }

    .nav-item-wrapper {
        margin-bottom: 0.25rem;
    }

    .nav-item-wrapper.active {
        background-color: #eff6ff;
        border-radius: 0.375rem;
    }

    .nav-link {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        color: #6b7280;
        text-decoration: none;
        border-radius: 0.375rem;
        transition: all 0.2s ease-in-out;
        gap: 0.5rem;
    }

    .nav-link:hover {
        background-color: #f3f4f6;
        color: #374151;
    }

    .nav-link.active {
        background-color: #dbeafe;
        color: #1d4ed8;
        font-weight: 500;
    }

    .nav-item-wrapper.active .nav-link-parent {
        background-color: #dbeafe;
        color: #1d4ed8;
        font-weight: 500;
    }

    .nav-link-parent {
        justify-content: space-between;
    }

    .nav-icon {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }

    .nav-label {
        flex: 1;
        font-size: 0.875rem;
    }

    .nav-arrow {
        width: 1rem;
        height: 1rem;
        transition: transform 0.2s ease-in-out;
    }

    .nav-item-parent.active .nav-arrow {
        transform: rotate(90deg);
    }

    .nav-children {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        margin-left: 1.5rem;
        margin-top: 0.25rem;
    }

    .nav-children.expanded {
        max-height: 1000px;
    }

    .nav-link-child {
        padding-left: 2rem;
        font-size: 0.8125rem;
    }

    .nav-item-wrapper.active .nav-children {
        max-height: 1000px;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle parent item clicks to toggle children
        document.querySelectorAll('.nav-item-parent').forEach(function(item) {
            const link = item.querySelector('.nav-link-parent');
            const children = item.querySelector('.nav-children');
            
            if (link && children) {
                link.addEventListener('click', function(e) {
                    // Check if clicking on the arrow or if it's a parent with children
                    const isArrowClick = e.target.closest('.nav-arrow') || e.target.classList.contains('nav-arrow');
                    
                    if (isArrowClick || children.querySelector('.nav-link-child.active')) {
                        e.preventDefault();
                        children.classList.toggle('expanded');
                        item.classList.toggle('active');
                    }
                });
            }
        });

        // Auto-expand parent items if child is active
        document.querySelectorAll('.nav-link-child.active').forEach(function(activeChild) {
            const parent = activeChild.closest('.nav-item-wrapper');
            if (parent) {
                const children = parent.querySelector('.nav-children');
                const parentItem = parent.querySelector('.nav-item-parent');
                if (children) {
                    children.classList.add('expanded');
                }
                if (parentItem) {
                    parentItem.classList.add('active');
                }
            }
        });
    });
</script>