<div class="hierarchy-item hierarchy-level-{{ $item['level'] }} mb-4 pb-4 border-b border-gray-100 last:border-b-0">
    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-blue-50 transition-colors duration-200">
        <div class="flex items-center space-x-3 space-x-reverse flex-1">
            <div class="text-sm">
                <div class="flex items-center gap-2">
                    <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-blue-100 text-blue-600 font-bold text-xs">
                        {{ $item['level'] + 1 }}
                    </span>
                    <div>
                        <p class="font-semibold text-gray-900">{{ $item['center_name'] }}</p>
                        <p class="text-xs text-gray-500">{{ \App\Helpers\TranslationHelper::transFromDatabase('Code', __('Code')) }}: {{ $item['center_code'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex items-center space-x-4 space-x-reverse">
            <div class="text-right">
                <p class="text-sm font-bold text-blue-600">
                    {{ number_format($item['total_cost'], 2) }}
                </p>
                <p class="text-xs text-gray-500">{{ \App\Helpers\TranslationHelper::transFromDatabase('Total Cost', __('Total Cost')) }}</p>
            </div>

            @if(count($item['details']) > 0)
            <button type="button" class="toggle-details text-blue-600 hover:text-blue-800" data-target="#details-{{ $item['center_id'] }}">
                <i class="fas fa-chevron-down"></i>
            </button>
            @endif
        </div>
    </div>

    @if(count($item['details']) > 0)
    <div id="details-{{ $item['center_id'] }}" class="details hidden mt-3 space-y-2 ml-4 pl-4 border-l-2 border-blue-200">
        @foreach($item['details'] as $detail)
        <div class="flex justify-between items-center p-3 bg-white border border-gray-100 rounded">
            <div>
                <p class="text-sm text-gray-700">{{ $detail['account_name'] }}</p>
                <p class="text-xs text-gray-500">{{ $detail['entry_date'] ?? 'N/A' }}</p>
            </div>
            <span class="text-sm font-semibold text-green-600">{{ number_format($detail['amount'], 2) }}</span>
        </div>
        @endforeach
    </div>
    @endif

    @if(count($item['children']) > 0)
    <div class="mt-4">
        @foreach($item['children'] as $child)
            @include('reports.cost-center.partials.hierarchy-item', ['item' => $child])
        @endforeach
    </div>
    @endif
</div>

<script>
if (typeof hierarchyItemInitialized === 'undefined') {
    window.hierarchyItemInitialized = true;
    document.addEventListener('click', function(e) {
        if (e.target.closest('.toggle-details')) {
            const btn = e.target.closest('.toggle-details');
            const target = document.querySelector(btn.dataset.target);
            target.classList.toggle('hidden');
            const icon = btn.querySelector('i');
            icon.classList.toggle('fa-chevron-down');
            icon.classList.toggle('fa-chevron-up');
        }
    });
}
</script>
