@foreach ($nodes as $treeAccount)
    @php
        $collapseId = 'accountTreeChildren' . $treeAccount->id;
        $hasChildren = $treeAccount->tree_children->isNotEmpty();
    @endphp

    <div class="chart-tree-node">
        <div class="chart-tree-row">
            <div class="chart-tree-main">
                @if ($hasChildren)
                    <button class="btn btn-outline-secondary btn-sm radius-8 chart-tree-toggle js-tree-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}" aria-expanded="true" aria-controls="{{ $collapseId }}" title="Toggle children">
                        <iconify-icon icon="lucide:chevron-down"></iconify-icon>
                    </button>
                @else
                    <span class="chart-tree-toggle-placeholder"></span>
                @endif

                <span class="badge rounded-pill bg-light text-primary border chart-tree-code">{{ $treeAccount->code }}</span>

                <div class="chart-tree-content">
                    <span class="account-title">{{ $treeAccount->title }}</span>
                    @if ($treeAccount->name_en)
                        <span class="text-secondary small">{{ $treeAccount->name_en }}</span>
                    @endif

                    <div class="chart-tree-meta">
                        <span class="badge rounded-pill bg-light text-secondary border">Level {{ $treeAccount->tree_level }}</span>
                        <span class="badge rounded-pill bg-light text-secondary border">{{ $accountTypes[$treeAccount->account_type] ?? 'Type not set' }}</span>
                        <span class="badge rounded-pill bg-light text-secondary border">{{ $accountSubtypes[$treeAccount->account_subtype] ?? 'Subtype not set' }}</span>
                        <span class="badge rounded-pill bg-light text-secondary border">{{ $accountNatures[$treeAccount->account_nature] ?? 'Nature not set' }}</span>
                        <span class="badge rounded-pill {{ $treeAccount->status == 'Active' ? 'bg-success' : 'bg-secondary' }}">{{ $treeAccount->status }}</span>
                        <span class="badge rounded-pill bg-light text-secondary border">{{ $treeAccount->children_count }} children</span>
                        <span class="badge rounded-pill bg-light text-secondary border">Inherited: {{ $treeAccount->is_nature_inherited ? 'Yes' : 'No' }}</span>
                    </div>
                </div>
            </div>

            <div class="chart-tree-actions d-flex align-items-center justify-content-end gap-2">
                <a href="{{ route('chart_of_accounts.show', $treeAccount->id) }}" class="btn btn-outline-info btn-sm radius-8" title="View" aria-label="View">
                    <iconify-icon icon="lucide:eye" class="text-lg"></iconify-icon>
                </a>
                <a href="{{ route('chart_of_accounts.ledgers.index', ['account_id' => $treeAccount->id]) }}" class="btn btn-outline-info btn-sm radius-8" title="View Ledger" aria-label="View Ledger">
                    <iconify-icon icon="lucide:book-open" class="text-lg"></iconify-icon>
                </a>
                <button type="button" class="btn btn-outline-primary btn-sm radius-8 js-add-child-account" data-bs-toggle="modal" data-bs-target="#createAccountModal" data-parent-id="{{ $treeAccount->id }}" title="Add Child" aria-label="Add Child">
                    <iconify-icon icon="lucide:list-plus" class="text-lg"></iconify-icon>
                </button>
                @if (!$treeAccount->can_delete)
                    <span class="badge rounded-pill bg-light text-secondary border px-3">Locked</span>
                @else
                    <button type="button" class="btn btn-outline-primary btn-sm radius-8" data-bs-toggle="modal" data-bs-target="#editAccountModal{{ $treeAccount->id }}" title="Edit" aria-label="Edit">
                        <iconify-icon icon="lucide:edit" class="text-lg"></iconify-icon>
                    </button>
                    <form action="{{ route('chart_of_accounts.update_status', $treeAccount->id) }}" method="POST" class="d-inline">
                        @csrf
                        @method('PATCH')
                        <input type="hidden" name="status" value="{{ $treeAccount->status === 'Active' ? 'Inactive' : 'Active' }}">
                        <button type="submit" class="btn btn-outline-primary btn-sm radius-8" title="{{ $treeAccount->status === 'Active' ? 'Deactivate' : 'Activate' }}" aria-label="{{ $treeAccount->status === 'Active' ? 'Deactivate' : 'Activate' }}">
                            <iconify-icon icon="{{ $treeAccount->status === 'Active' ? 'lucide:pause-circle' : 'lucide:play-circle' }}" class="text-lg"></iconify-icon>
                        </button>
                    </form>
                @endif
            </div>
        </div>

        @if ($hasChildren)
            <div id="{{ $collapseId }}" class="chart-tree-children collapse show">
                @include('dashboard.chart_of_accounts.partials.tree_nodes', [
                    'nodes' => $treeAccount->tree_children,
                    'accountTypes' => $accountTypes,
                    'accountSubtypes' => $accountSubtypes,
                    'accountNatures' => $accountNatures,
                ])
            </div>
        @endif
    </div>
@endforeach