<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-l text-gray-800 leading-tight">
                {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.ShowTitle', __('Cost Center Details')) }}
            </h2>
            <div>
                <a href="{{ route('accounting.cost-centers.index') }}" class="inline-flex items-center p-4 py-2 bg-gray-600 border border-transparent rounded-md font-semibold text-s text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
                    </svg>
                    {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.BackToList', __('Back to List')) }}
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7l m-auto sm:p-6 lg:p-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.BasicInfo', __('Basic Information')) }}</h3>
                            
                            <div class="mb-4">
                                <label class="text-gray-600 text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Code', __('Code')) }}</label>
                                <p class="text-gray-900 font-medium">{{ $costCenter->code }}</p>
                            </div>

                            <div class="mb-4">
                                <label class="text-gray-600 text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.NameEnglish', __('English Name')) }}</label>
                                <p class="text-gray-900 font-medium">{{ $costCenter->name }}</p>
                            </div>

                            <div class="mb-4">
                                <label class="text-gray-600 text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.NameArabic', __('Arabic Name')) }}</label>
                                <p class="text-gray-900 font-medium">{{ $costCenter->name_ar }}</p>
                            </div>

                            <div class="mb-4">
                                <label class="text-gray-600 text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Status', __('Status')) }}</label>
                                @if ($costCenter->status === 'active')
                                    <span class="inline-flex items-center p-2.5 py-0.5 rounded-full text-s font-medium bg-green-100 text-green-800">
                                        {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Active', __('Active')) }}
                                    </span>
                                @else
                                    <span class="inline-flex items-center p-2.5 py-0.5 rounded-full text-s font-medium bg-red-100 text-red-800">
                                        {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Inactive', __('Inactive')) }}
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Classifications', __('Classifications')) }}</h3>
                            
                            <div class="mb-4">
                                <label class="text-gray-600 text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Type', __('Type')) }}</label>
                                <p class="text-gray-900 font-medium">{{ $costCenter->type?->name_ar ?? '-' }}</p>
                            </div>

                            <div class="mb-4">
                                <label class="text-gray-600 text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Category', __('Category')) }}</label>
                                <p class="text-gray-900 font-medium">{{ $costCenter->category?->name_ar ?? '-' }}</p>
                            </div>

                            <div class="mb-4">
                                <label class="text-gray-600 text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.ParentCenter', __('Parent Center')) }}</label>
                                <p class="text-gray-900 font-medium">
                                    @if ($costCenter->parent)
                                        <a href="{{ route('accounting.cost-centers.show', $costCenter->parent) }}" class="text-indigo-600 hover:text-indigo-900">
                                            {{ $costCenter->parent->name_ar }}
                                        </a>
                                    @else
                                        {{ '-' }}
                                    @endif
                                </p>
                            </div>

                            <div class="mb-4">
                                <label class="text-gray-600 text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Budget', __('Budget')) }}</label>
                                <p class="text-gray-900 font-medium">
                                    {{ $costCenter->budget ? number_format($costCenter->budget, 2) : '-' }}
                                </p>
                            </div>
                        </div>
                    </div>

                    @if ($costCenter->description)
                        <div class="border-t border-gray-200 pt-6 mb-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Description', __('Description')) }}</h3>
                            <p class="text-gray-700">{{ $costCenter->description }}</p>
                        </div>
                    @endif

                    @if ($costCenter->children->count() > 0)
                        <div class="border-t border-gray-200 pt-6 mb-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.SubCenters', __('Sub Centers')) }}</h3>
                            <ul class="space-y-2">
                                @foreach ($costCenter->children as $child)
                                    <li>
                                        <a href="{{ route('accounting.cost-centers.show', $child) }}" class="text-indigo-600 hover:text-indigo-900">
                                            {{ $child->name_ar }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="border-t border-gray-200 mt-6 pt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Actions', __('Actions')) }}</h3>
                        <div class="flex gap-3">
                            @if (auth()->user()->can('accounting.cost-centers.edit'))
                                <a href="{{ route('accounting.cost-centers.edit', $costCenter) }}" class="inline-flex items-center p-4 py-2 bg-yellow-600 border border-transparent rounded-md font-semibold text-s text-white uppercase tracking-widest hover:bg-yellow-700 focus:bg-yellow-700 active:bg-yellow-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                    {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Edit', __('Edit')) }}
                                </a>
                            @endif
                            @if (auth()->user()->can('accounting.cost-centers.delete'))
                                <form action="{{ route('accounting.cost-centers.destroy', $costCenter) }}" method="POST" class="inline-block">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="inline-flex items-center p-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-s text-white uppercase tracking-widest hover:bg-red-700 focus:bg-red-700 active:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150" onclick="return confirm('{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.DeleteConfirm', __('Are you sure you want to delete this center?')) }}')">
                                        {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Delete', __('Delete')) }}
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
