@extends('layouts.app')

@section('content')
<div class="container mx-auto p-6">
    <!-- رأس الصفحة -->
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-black">تحديث مركز التكلفة الافتراضي</h1>
        <p class="text-black mt-2">الحساب: {{ $account->code }} - {{ $account->name }}</p>
    </div>

    <!-- النموذج -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <form method="POST" action="{{ route('chart-of-accounts.cost-center.update', $account) }}" class="space-y-6">
            @csrf
            @method('PUT')

            <!-- معلومات الحساب -->
            <div class="bg-gray-50 p-4 rounded-lg mb-6">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="text-sm font-medium text-black">رقم الحساب</label>
                        <p class="text-black font-semibold">{{ $account->code }}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-black">اسم الحساب</label>
                        <p class="text-black font-semibold">{{ $account->name }}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-black">نوع الحساب</label>
                        <p class="text-black font-semibold">
                            @switch($account->account_type)
                                @case('asset')
                                    {{ __('أصل') }}
                                    @break
                                @case('liability')
                                    {{ __('التزام') }}
                                    @break
                                @case('equity')
                                    {{ __('حقوق ملكية') }}
                                    @break
                                @case('revenue')
                                    {{ __('إيراد') }}
                                    @break
                                @case('expense')
                                    {{ __('مصروف') }}
                                    @break
                                @default
                                    {{ $account->account_type }}
                            @endswitch
                        </p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-black">نوع الرصيد</label>
                        <p class="text-black font-semibold">
                            {{ $account->balance_type === 'debit' ? __('مدين') : __('دائن') }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- مركز التكلفة الافتراضي -->
            <div class="mb-6">
                <label for="cost_center_id" class="block text-sm font-medium text-black mb-2">
                    {{ __('مركز التكلفة الافتراضي (اختياري)') }}
                </label>
                <select name="cost_center_id" id="cost_center_id" class="select2 w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">-- بدون مركز تكلفة --</option>
                    @foreach($costCentersList as $center)
                        <option value="{{ $center['id'] }}" 
                            {{ $account->cost_center_id == $center['id'] ? 'selected' : '' }}>
                            {!! $center['label'] !!} ({{ $center['code'] }})
                        </option>
                    @endforeach
                </select>
                <p class="text-sm text-black mt-2">
                    {{ __('عند تحديد مركز تكلفة هنا، سيتم استخدامه تلقائياً عند إنشاء قيود جديدة لهذا الحساب') }}
                </p>
                @error('cost_center_id')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- ملاحظات إضافية -->
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                <h3 class="text-sm font-semibold text-blue-900 mb-2">{{ __('ملاحظات مهمة:') }}</h3>
                <ul class="text-sm text-blue-800 space-y-1 list-disc list-inside">
                    <li>{{ __('مركز التكلفة الافتراضي يُستخدم لملء الحقل تلقائياً عند إنشاء قيود') }}</li>
                    <li>{{ __('يمكنك تجاوز هذا الاختيار الافتراضي عند إنشاء كل قيد') }}</li>
                    <li>{{ __('هذا الحقل إجباري للحسابات من نوع الإيرادات والمصروفات') }}</li>
                </ul>
            </div>

            <!-- الأزرار -->
            <div class="flex gap-3">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-200">
                    <i class="fas fa-save ml-2"></i>{{ __('حفظ التغييرات') }}
                </button>
                <a href="{{ route('chart-of-accounts.show', $account) }}" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg transition duration-200">
                    {{ __('إلغاء') }}
                </a>
            </div>
        </form>
    </div>

    <!-- معلومات إضافية -->
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- الحسابات المرتبطة -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold mb-4">{{ __('معلومات الحساب') }}</h3>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-black">{{ __('رقم الحساب:') }}</span>
                    <span class="font-semibold">{{ $account->code }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-black">{{ __('الوصف:') }}</span>
                    <span class="font-semibold">{{ $account->description ?? '--' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-black">{{ __('الحالة:') }}</span>
                    <span class="font-semibold">
                        @if($account->is_active)
                            <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs">{{ __('نشط') }}</span>
                        @else
                            <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-xs">{{ __('غير نشط') }}</span>
                        @endif
                    </span>
                </div>
            </div>
        </div>

        <!-- نصائح الاستخدام -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold mb-4">{{ __('نصائح الاستخدام') }}</h3>
            <div class="space-y-2 text-sm text-black">
                <p>✓ {{ __('استخدم هذه الميزة لتسريع عملية إدخال القيود') }}</p>
                <p>✓ {{ __('تأكد من أن مركز التكلفة يتطابق مع نوع الحساب') }}</p>
                <p>✓ {{ __('يمكنك تغيير مركز التكلفة لأي قيد بشكل فردي') }}</p>
                <p>✓ {{ __('المراكز الهرمية تظهر مع مسافات بادئة للتوضيح') }}</p>
            </div>
        </div>
    </div>
</div>
@endsection