@php
    $level = $level ?? 0;
    $padding = $level * 25;
    $hasChildren = (!empty($val['permissions']) && $val['permissions']->count()) || !empty($val['children']);
    $rowId = 'menuRow_' . $val['id'];
    $collapseId = 'collapse_' . $val['id'];
    $parentCollapse = $parentCollapse ?? null;

    // Check if any direct permissions are assigned
    $hasDirectPermission = !empty($val['permissions']) && $val['permissions']->filter(fn($perm) => in_array($perm->id, $permission))->isNotEmpty();

    // Check if any child menu items have permissions (recursive)
    $hasChildrenPermission = false;
    $checkChildPermissions = function($children) use(&$checkChildPermissions, $permission, &$hasChildrenPermission) {
        foreach($children as $child) {
            if(!empty($child['permissions']) && $child['permissions']->filter(fn($perm) => in_array($perm->id, $permission))->isNotEmpty()) {
                $hasChildrenPermission = true;
                return;
            }
            if(!empty($child['children'])) {
                $checkChildPermissions($child['children']);
                if($hasChildrenPermission) return;
            }
        }
    };
    if(!empty($val['children'])) {
        $checkChildPermissions($val['children']);
    }

    $checkParent = $hasDirectPermission || $hasChildrenPermission;
@endphp
<tr class="{{ $level > 0 ? 'collapse ' . $parentCollapse : '' }} {{ $hasChildren ? 'has-children' : '' }}" 
    id="{{ $rowId }}" 
    style="cursor: {{ $hasChildren ? 'pointer' : 'default' }};">
    <td style="padding-left: {{ $padding }}px;" 
        onclick="{{ $hasChildren ? "toggleMenuRow('$collapseId', '$rowId')" : '' }}"
        class="{{ $hasChildren ? 'feature-toggle' : '' }}">
        @if($hasChildren)
            <span class="toggle-icon me-2 ms-2">
                <i class="bx bxs-right-arrow" id="icon_{{ $collapseId }}"></i>
            </span>
        @else
            <span class="ms-2"></span>
        @endif
        <span class="menu-name fw-{{ $level == 0 ? 'bold' : 'normal' }}">{{ $val['menu'] ?? '' }}</span>
    </td>
    <td class="text-center" onclick="event.stopPropagation();">
        <input type="checkbox" switch="dark" name="valid[]" value="{{ $val['id'] }}" id="{{ $val['id'] }}" 
               {{ $checkParent ? 'checked' : '' }}/>
        <label class="mb-0" for="{{ $val['id'] }}" data-on-label="" data-off-label=""></label>
    </td>
</tr>

@if($val['permissions'] && $val['permissions']->count())
    @foreach($val['permissions'] as $k => $p)
        <tr class="collapse permission-row {{ $collapseId }}" id="perm_{{ $val['id'] }}_{{ $p->id }}">
            <td style="padding-left: {{ $padding + 40 }}px;">
                <i class="bx bx-minus me-2 text-muted"></i>
                <span class="text-muted">{{ ucwords(str_replace('_', ' ', $p->p_type)) }}</span>
            </td>
            <td class="text-center">
                <input type="checkbox" switch="dark" name="pid[]" value="{{ $p->id }}" id="{{ $val['id'] . '-' . $p->id }}"  
                       {{ in_array($p->id, $permission) ? 'checked' : '' }} switch="none"/>
                <label class="mb-0" for="{{ $val['id'] . '-' . $p->id }}" data-on-label="" data-off-label=""></label>
            </td>
        </tr>
    @endforeach
@endif

@if($val['children'])
    @foreach($val['children'] as $child)
        @include('admin.permissions.manage-role-row', [
            'val' => $child,
            'model' => $model,
            'routePrefix' => $routePrefix,
            'permission' => $permission,
            'level' => $level + 1,
            'parentCollapse' => $collapseId
        ])
    @endforeach
@endif

@if($level === 0)
    @push('page_script')
    <script src="{{ asset('assets/js/role-permission-management.js') }}"></script>
    @endpush
@endif