@foreach($items as $val)
<tr class="dv-row"
    data-id="{{ $val->id }}"
    data-parent="{{ $val->parent_id ?? 'null' }}"
    data-level="{{ $level }}"
    style="{{ $level > 0 ? 'display:none' : '' }}">

    <td style="padding-left:{{ $level * 18 + 12 }}px">
        <div class="d-flex align-items-center gap-1">
            @if(count($val->children_tree) > 0)
                <button class="dv-toggle btn btn-link p-0 border-0 lh-1 flex-shrink-0"
                        data-id="{{ $val->id }}" style="width:20px;color:#6c757d">
                    <i class="bi bi-chevron-right dv-icon" style="font-size:11px"></i>
                </button>
            @else
                <span style="display:inline-block;width:20px"></span>
            @endif
            <span class="{{ count($val->children_tree) > 0 ? 'fw-semibold' : '' }}" style="font-size:13.5px">
                {{ $val->name }}
            </span>
            {{-- Show code inline on mobile --}}
            @if($val->code)
            <code class="d-sm-none ms-1" style="font-size:11px">{{ $val->code }}</code>
            @endif
        </div>
    </td>

    <td class="d-none d-sm-table-cell">
        <code style="font-size:12px">{{ $val->code ?? '—' }}</code>
    </td>

    <td class="d-none d-md-table-cell text-center text-muted" style="font-size:12px">
        {{ $val->sort_order }}
    </td>

    <td>
        <span class="badge" style="background:{{ $val->is_active ? '#d1e7dd' : '#f8d7da' }};color:{{ $val->is_active ? '#0a3622' : '#842029' }};font-size:11px">
            {{ $val->is_active ? 'Active' : 'Inactive' }}
        </span>
    </td>

    <td class="text-end pe-2">
        @php
            $collectDescendantIds = function ($node) use (&$collectDescendantIds) {
                $ids = [];
                foreach ($node->children_tree as $child) {
                    $ids[] = $child->id;
                    $ids = array_merge($ids, $collectDescendantIds($child));
                }

                return $ids;
            };
            $descendantIds = $collectDescendantIds($val);
        @endphp
        <div class="d-flex justify-content-end gap-1">
            <button class="btn btn-outline-primary btn-sm btn-edit-val"
                    data-url="{{ route('dimensions.values.update', [$dimension, $val]) }}"
                    data-id="{{ $val->id }}"
                    data-parent="{{ $val->parent_id ?? '' }}"
                    data-descendants="{{ json_encode($descendantIds) }}"
                    data-code="{{ $val->code }}" data-name="{{ $val->name }}"
                    data-sort="{{ $val->sort_order }}" data-active="{{ $val->is_active ? '1':'0' }}"
                    title="Edit">
                <i class="bi bi-pencil"></i>
            </button>
            @if(count($val->children_tree) === 0)
            <form method="POST" action="{{ route('dimensions.values.destroy', [$dimension, $val]) }}" id="dvd-{{ $val->id }}">
                @csrf @method('DELETE')
                <button type="button" class="btn btn-outline-danger btn-sm"
                    data-confirm data-form="#dvd-{{ $val->id }}"
                    data-confirm-title="Delete?" data-confirm-text="Delete '{{ $val->name }}'?"
                    data-confirm-icon="warning" data-confirm-color="#E74C3C" data-confirm-btn="Delete"
                    title="Delete">
                    <i class="bi bi-trash"></i>
                </button>
            </form>
            @endif
        </div>
    </td>
</tr>
@if(count($val->children_tree) > 0)
    @include('accounting.dimensions._value_tree', [
        'items'     => $val->children_tree,
        'level'     => $level + 1,
        'dimension' => $dimension,
        'allValues' => $allValues,
    ])
@endif
@endforeach