@extends('layouts.app')

@section('title', 'تعديل الترجمة')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-2xl mx-auto">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-black mb-2">تعديل الترجمة</h1>
            <p class="text-black">قم بتعديل ترجمة موجودة</p>
        </div>

        @if($errors->any())
        <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                </div>
                <div class="mr-3">
                    <ul class="text-red-700 font-medium list-disc list-inside">
                        @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        @endif

        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 mb-6">
            <div class="p-6 bg-gray-50 border-b border-gray-200">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <p class="text-sm text-black">اللغة</p>
                        <p class="text-lg font-semibold text-black">{{ $translation->language->flag_emoji }} {{ $translation->language->name }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-black">المفتاح</p>
                        <p class="text-lg font-semibold text-black">{{ $translation->translationKey->key }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-black">الحالة</p>
                        @if($translation->status === 'draft')
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
                            مسودة
                        </span>
                        @elseif($translation->status === 'published')
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                            منشورة
                        </span>
                        @else
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                            موافق عليها
                        </span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <form action="{{ route('localization.translations.update', $translation) }}" method="POST" class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
            @csrf
            @method('PUT')

            <div class="p-6">
                <div class="mb-6">
                    <label for="value" class="block text-sm font-medium text-black mb-2">الترجمة <span class="text-red-600">*</span></label>
                    <textarea name="value" id="value" rows="8" class="w-full rounded-lg border-gray-300 border px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>{{ old('value', $translation->value) }}</textarea>
                    @error('value')
                    <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                    @enderror
                    <p class="text-black text-sm mt-1">يمكنك استخدام متغيرات مثل :name, :email, إلخ</p>
                </div>

                <div class="mb-6">
                    <label for="notes" class="block text-sm font-medium text-black mb-2">ملاحظات</label>
                    <textarea name="notes" id="notes" rows="3" class="w-full rounded-lg border-gray-300 border px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">{{ old('notes', $translation->notes) }}</textarea>
                    @error('notes')
                    <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                    @enderror
                </div>

                @if($translation->history->count() > 0)
                <div class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
                    <h3 class="text-sm font-medium text-blue-900 mb-3">سجل التغييرات</h3>
                    <div class="space-y-2">
                        @foreach($translation->history->take(3) as $change)
                        <div class="text-sm">
                            <p class="text-blue-800"><strong>{{ $change->changedBy?->name ?? 'مستخدم' }}</strong> قام بـ <strong>{{ $change->action }}</strong></p>
                            <p class="text-blue-700 text-xs">{{ $change->created_at->diffForHumans() }}</p>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <div class="flex items-center justify-between pt-6 border-t border-gray-200">
                    <a href="{{ route('localization.translations.index') }}" class="text-black hover:text-black font-medium">
                        <i class="fas fa-arrow-right ml-2"></i> إلغاء
                    </a>
                    <div class="flex gap-3">
                        @can('approve', $translation)
                        @if($translation->status === 'draft')
                        <form action="{{ route('localization.translations.approve', $translation) }}" method="POST" class="inline">
                            @csrf
                            <button type="submit" class="px-6 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-all duration-200">
                                <i class="fas fa-check ml-2"></i> الموافقة
                            </button>
                        </form>
                        @endif
                        @endcan

                        <button type="submit" class="px-6 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200">
                            <i class="fas fa-save ml-2"></i> حفظ التغييرات
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection