﻿<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">
                {{ __('عرض فئة حساب') }}
            </h2>
            <div>
                <a href="{{ route('accounting.account-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>
                    {{ __('العودة إلى القائمة') }}
                </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="mb-6">
                        <h3 class="text-lg font-medium text-gray-900">{{ __('معلومات الفئة') }}</h3>
                        <div class="mt-4 space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <span class="text-gray-500 text-sm">{{ __('الكود') }}</span>
                                    <p class="text-gray-900">{{ $category->code }}</p>
                                </div>
                                <div>
                                    <span class="text-gray-500 text-sm">{{ __('الاسم') }}</span>
                                    <p class="text-gray-900">{{ $category->name }}</p>
                                </div>
                            </div>
                            
                            <div>
                                <span class="text-gray-500 text-sm">{{ __('الوصف') }}</span>
                                <p class="text-gray-900">{{ $category->description ?? __('لا يوجد وصف') }}</p>
                            </div>
                            
                            <div>
                                <span class="text-gray-500 text-sm">{{ __('الحالة') }}</span>
                                <p class="text-gray-900">
                                    @if ($category->is_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">
                                            {{ __('نشط') }}
                                        </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">
                                            {{ __('غير نشط') }}
                                        </span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="mt-8">
                        <h3 class="text-lg font-medium text-gray-900">{{ __('الحسابات المرتبطة') }}</h3>
                        <div class="mt-4">
                            @if ($category->accounts->count() > 0)
                                <div class="overflow--auto">
                                    <table class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                                                    {{ __('الكود') }}
                                                </th>
                                                <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                                                    {{ __('الاسم') }}
                                                </th>
                                                <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                                                    {{ __('نوع الحساب') }}
                                                </th>
                                                <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                                                    {{ __('الحالة') }}
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200">
                                            @foreach ($category->accounts as $account)
                                                <tr>
                                                    <td class="p-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                                        {{ $account->code }}
                                                    </td>
                                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                        {{ $account->name }}
                                                    </td>
                                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                        @switch($account->account_type)
                                                            @case('asset')
                                                                {{ __('أصول') }}
                                                                @break
                                                            @case('liability')
                                                                {{ __('خصوم') }}
                                                                @break
                                                            @case('equity')
                                                                {{ __('حقوق ملكية') }}
                                                                @break
                                                            @case('revenue')
                                                                {{ __('إيرادات') }}
                                                                @break
                                                            @case('expense')
                                                                {{ __('مصروفات') }}
                                                                @break
                                                            @default
                                                                {{ $account->account_type }}
                                                        @endswitch
                                                    </td>
                                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                        @if ($account->is_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">
                                                                {{ __('نشط') }}
                                                            </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">
                                                                {{ __('غير نشط') }}
                                                            </span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <p class="text-gray-500 text-center py-4">{{ __('لا توجد حسابات مرتبطة بهذه الفئة') }}</p>
                            @endif
                        </div>
                    </div>

                    <div class="mt-8 flex space-y-4 space-y-reverse">
                        <a href="{{ route('accounting.account-categories.edit', $category) }}" 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">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                            </svg>
                            {{ __('تعديل') }}
                        </a>
                        <form action="{{ route('accounting.account-categories.destroy', $category) }}" 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('{{ __('هل أنت متأكد من حذف هذه الفئة؟') }}')">
                                <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 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ __('حذف') }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
