@extends('layouts.app')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-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="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-semibold text-black">
                        {{ __('تعديل القالب') }}: {{ $type ?? 'Document' }}
                    </h2>
                    <a href="{{ url()->previous() }}" class="text-black hover:text-black flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 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>

                @if(session('success'))
                    <div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                        <span class="block sm:inline">{{ session('success') }}</span>
                    </div>
                @endif

                <form action="{{ route('healthcare.settings.update') }}" method="POST">
                    @csrf
                    <input type="hidden" name="template_id" value="{{ $id ?? 0 }}">
                    <input type="hidden" name="template_type" value="{{ $type ?? '' }}">

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="md:col-span-2 space-y-6">
                            <div>
                                <label class="block text-sm font-medium text-black mb-2">{{ __('اسم القالب') }}</label>
                                <input type="text" name="template_name" class="w-full border-gray-300 rounded-md shadow-sm focus:border-red-500 focus:ring-red-500" value="{{ __('قالب افتراضي') }}">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-black mb-2">{{ __('محتوى القالب') }}</label>
                                <textarea name="template_content" rows="15" class="w-full border-gray-300 rounded-md shadow-sm focus:border-red-500 focus:ring-red-500 font-mono text-sm">
{{ __('هذا نص تجريبي لمحتوى القالب. يمكنك استخدام المتغيرات مثل [الاسم]، [التاريخ]، [رقم_الفاتورة] ليتم استبدالها آلياً عند الطباعة أو الإرسال.') }}
                                </textarea>
                            </div>
                        </div>

                        <div class="space-y-6">
                            <div class="bg-gray-50 p-4 rounded-lg border">
                                <h4 class="font-bold text-black mb-4 flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-red-600" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                    {{ __('المتغيرات المتاحة') }}
                                </h4>
                                <ul class="space-y-2">
                                    <li class="flex justify-between items-center text-xs">
                                        <code class="bg-white px-2 py-1 rounded border">[PatientName]</code>
                                        <span class="text-black">{{ __('اسم المريض') }}</span>
                                    </li>
                                    <li class="flex justify-between items-center text-xs">
                                        <code class="bg-white px-2 py-1 rounded border">[Date]</code>
                                        <span class="text-black">{{ __('التاريخ الحالي') }}</span>
                                    </li>
                                    <li class="flex justify-between items-center text-xs">
                                        <code class="bg-white px-2 py-1 rounded border">[ClinicName]</code>
                                        <span class="text-black">{{ __('اسم العيادة') }}</span>
                                    </li>
                                    <li class="flex justify-between items-center text-xs">
                                        <code class="bg-white px-2 py-1 rounded border">[DoctorName]</code>
                                        <span class="text-black">{{ __('اسم الطبيب') }}</span>
                                    </li>
                                    <li class="flex justify-between items-center text-xs">
                                        <code class="bg-white px-2 py-1 rounded border">[OrderNumber]</code>
                                        <span class="text-black">{{ __('رقم الطلب/الفاتورة') }}</span>
                                    </li>
                                </ul>
                                <p class="text-[10px] text-black mt-4 leading-relaxed">
                                    {{ __('قم بنسخ الكود ووضعه في المكان المناسب داخل نص القالب.') }}
                                </p>
                            </div>

                            <div class="bg-red-50 p-4 rounded-lg border border-red-100">
                                <h4 class="font-bold text-red-800 mb-2 text-sm">{{ __('إعدادات متقدمة') }}</h4>
                                <div class="space-y-3">
                                    <label class="flex items-center">
                                        <input type="checkbox" name="is_active" checked class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                        <span class="mr-2 text-xs text-black">{{ __('قالب نشط') }}</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" name="is_default" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                        <span class="mr-2 text-xs text-black">{{ __('ضبط كقالب افتراضي') }}</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-8 pt-6 border-t flex justify-end space-x-4 space-x-reverse">
                        <button type="submit" class="bg-red-600 text-white px-8 py-2 rounded-md font-bold hover:bg-red-700 transition-colors shadow-sm">
                            {{ __('حفظ التغييرات') }}
                        </button>
                        <a href="{{ url()->previous() }}" class="bg-gray-100 text-black px-6 py-2 rounded-md font-bold hover:bg-gray-200 transition-colors">
                            {{ __('إلغاء') }}
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection