<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('View Category', __('View Category')) }}
            </h2>
            <div>
                <a href="{{ route('accounting.cost-center-categories.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('Back to List', __('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">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ \App\Helpers\TranslationHelper::transFromDatabase('Category Information', __('Category Information')) }}</h3>
                            
                            <div class="mb-4">
                                <label class="text-gray-600 text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('Code', __('Code')) }}</label>
                                <p class="text-gray-900 font-medium">{{ $costCenterCategory->code }}</p>
                            </div>

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

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

                            <div class="mb-4">
                                <label class="text-gray-600 text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('Status', __('Status')) }}</label>
                                @if ($costCenterCategory->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('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('Inactive', __('Inactive')) }}
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ \App\Helpers\TranslationHelper::transFromDatabase('Description', __('Description')) }}</h3>
                            <p class="text-gray-700">{{ $costCenterCategory->description ?? '-' }}</p>
                        </div>
                    </div>

                    <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('Actions', __('Actions')) }}</h3>
                        <div class="flex gap-3">
                            @if (auth()->user()->can('accounting.cost-center-categories.edit'))
                                <a href="{{ route('accounting.cost-center-categories.edit', $costCenterCategory) }}" 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('Edit', __('Edit')) }}
                                </a>
                            @endif
                            @if (auth()->user()->can('accounting.cost-center-categories.delete'))
                                <form action="{{ route('accounting.cost-center-categories.destroy', $costCenterCategory) }}" 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('Are you sure you want to delete this category?', __('Are you sure you want to delete this category?')) }}')">
                                        {{ \App\Helpers\TranslationHelper::transFromDatabase('Delete', __('Delete')) }}
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
