<li class="mt-2 tree-item" data-center-id="{{ $costCenter->id }}">
    <div class="flex items-center">
        @if ($costCenter->children && $costCenter->children->count() > 0)
            <button class="toggle-btn mr-2 p-1 hover:bg-gray-100 rounded transition-colors duration-150" data-center-id="{{ $costCenter->id }}" title="{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.ToggleExpand', __('Expand/Collapse')) }}">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600 transition-transform duration-200 transform" viewBox="0 0 20 20" fill="currentColor" style="transform: rotate(-90deg);">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
            </button>
        @else
            <div class="mr-2 p-1 w-8"></div>
        @endif
        
        <div class="flex-shrink-0">
            @if ($costCenter->center_type === 'parent')
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
                </svg>
            @else
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" />
                </svg>
            @endif
        </div>
        <div class="mr-3 flex-grow">
            <div class="text-sm font-medium text-gray-900">
                <a href="{{ route('accounting.cost-centers.show', $costCenter) }}" class="hover:underline">
                    {{ $costCenter->code }} - {{ $costCenter->name_ar }}
                </a>
                @if ($costCenter->status === 'inactive')
                    <span class="inline-flex items-center p-2.5 py-0.5 rounded-full text-s font-medium bg-red-100 text-red-800 mr-2">
                        {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Inactive', __('Inactive')) }}
                    </span>
                @endif
            </div>
            <div class="text-s text-gray-500">
                @if ($costCenter->type)
                    {{ $costCenter->type->name_ar }} -
                @endif
                @if ($costCenter->center_type === 'parent')
                    {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.ParentCenter', __('Parent Center')) }}
                @else
                    {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.SubCenter', __('Sub Center')) }}
                @endif
                @if ($costCenter->budget)
                    - {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Budget', __('Budget')) }}: {{ number_format($costCenter->budget, 2) }}
                @endif
            </div>
        </div>
    </div>

    @if ($costCenter->children && $costCenter->children->count() > 0)
        <ul class="children-container mt-2 space-y-2 mr-6 border-r-2 border-gray-200 pr-4" id="children-{{ $costCenter->id }}" style="display: block;">
            @foreach ($costCenter->children as $child)
                @include('cost-centers.partials.cost-center-tree-item', ['costCenter' => $child])
            @endforeach
        </ul>
    @endif
</li>
