@extends('layouts.superadmin')

@section('title','محرر الإدارة — حفظ كـ PDF')
@section('page-title','✏️ محرر الإدارة — PDF Editor')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-100 via-slate-50 to-slate-100 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
    <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 py-6 sm:py-8 space-y-6">

        {{-- هيدر ناعم وفاتح --}}
        <div class="relative overflow-hidden rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-lg shadow-slate-300/40 dark:shadow-black/40">
            <div class="pointer-events-none absolute -top-16 -left-10 w-40 h-40 rounded-full bg-emerald-400/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-20 -right-10 w-48 h-48 rounded-full bg-sky-400/20 blur-3xl"></div>

            <div class="relative p-5 sm:p-6 lg:p-7 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="space-y-2">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 text-[11px] font-medium dark:bg-emerald-500/15 dark:text-emerald-200">
                        <i class="fa-solid fa-pen-ruler text-[11px]"></i>
                        <span>محرر الإدارة — مستندات رسمية للتيم</span>
                    </div>
                    <h1 class="text-lg sm:text-2xl lg:text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">
                        اكتب تقريراً أو إعلاناً واحفظه كملف PDF رسمي
                    </h1>
                    <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-300 max-w-xl">
                        هذه الصفحة مخصّصة لكتابة نصوص إدارية (تقرير، إعلان، تنبيه، ملخص اجتماع...)
                        ثم تصديرها مباشرة كملف <span class="font-semibold text-emerald-600 dark:text-emerald-300">PDF A4</span>
                        جاهز للمشاركة أو الأرشفة داخل نظام فريق الوفاء الذهبي.
                    </p>
                </div>

                <div class="self-stretch sm:self-auto flex sm:block justify-end">
                    <div class="rounded-2xl bg-slate-900 text-slate-100 px-4 py-3 text-xs sm:text-sm shadow-md dark:bg-black/70">
                        <div class="text-[11px] text-slate-300 mb-1">وضع المحرر</div>
                        <div class="font-semibold text-sm sm:text-base">
                            تحرير إداري ➜ PDF
                        </div>
                        <div class="text-[10px] text-slate-400 mt-1">
                            {{ now()->locale('ar')->timezone(config('app.timezone'))->isoFormat('dddd D MMM YYYY, h:mm a') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- كرت المحرر --}}
        <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-sm">
            <form method="POST" action="{{ route('superadmin.text-editor.export') }}" class="p-4 sm:p-6 lg:p-7 space-y-5">
                @csrf

                {{-- الحقول العلوية --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">
                            عنوان الوثيقة (اختياري)
                        </label>
                        <input type="text" name="title" value="{{ old('title') }}"
                               class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-xs sm:text-sm text-slate-900
                                      placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-emerald-500/70 focus:border-emerald-500
                                      dark:bg-slate-900 dark:border-slate-700 dark:text-slate-50 dark:placeholder:text-slate-500">
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">
                            الموضوع / القسم (اختياري)
                        </label>
                        <input type="text" name="subject" value="{{ old('subject') }}"
                               class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-xs sm:text-sm text-slate-900
                                      placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-500/70 focus:border-sky-500
                                      dark:bg-slate-900 dark:border-slate-700 dark:text-slate-50 dark:placeholder:text-slate-500">
                    </div>
                </div>

                {{-- وصف بسيط --}}
                <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                    حاول أن يكون العنوان والموضوع واضحين؛ سيظهران في أعلى ملف الـ PDF كعنوان رئيسي ووصف مختصر.
                </p>

                {{-- منطقة الكتابة --}}
                <div class="space-y-2">
                    <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">
                        المحتوى
                    </label>

                    {{-- ممكن تضيف لاحقاً toolbar بسيط لو حبيت --}}
                    <textarea name="content" rows="14"
                              class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 sm:px-4 py-3 sm:py-3.5 text-sm sm:text-[15px]
                                     text-slate-900 leading-relaxed placeholder:text-slate-400 resize-y
                                     focus:outline-none focus:ring-2 focus:ring-emerald-500/70 focus:border-emerald-500
                                     dark:bg-slate-950 dark:border-slate-700 dark:text-slate-50 dark:placeholder:text-slate-500"
                              placeholder="اكتب هنا نص التقرير، الإعلان، أو أي محتوى إداري تريد حفظه كملف PDF رسمي...">{{ old('content') }}</textarea>

                    @error('content')
                        <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                    @enderror
                </div>

                {{-- شريط سفلي للأكشن --}}
                <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-3 mt-2">
                    <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400 space-y-1">
                        <p>
                            سيتم إنشاء ملف
                            <span class="font-semibold text-emerald-600 dark:text-emerald-300">PDF A4</span>
                            باتجاه عربي (RTL) مع الحفاظ على الفقرات والأسطر كما هي.
                        </p>
                        <p>
                            مناسب لتقارير القيادة، إعلانات التيم، أو حفظ ملخصات الاجتماعات في الأرشيف.
                        </p>
                    </div>

                    <button type="submit"
                            class="inline-flex items-center justify-center px-5 sm:px-7 py-2.5 rounded-2xl text-sm font-semibold
                                   bg-gradient-to-r from-emerald-500 to-sky-500 text-white shadow-md shadow-emerald-400/40
                                   hover:shadow-lg hover:shadow-emerald-400/50 hover:scale-[1.02] active:scale-[0.98] transition">
                        <i class="fa-solid fa-file-pdf ml-2 text-sm"></i>
                        <span>حفظ كـ PDF</span>
                    </button>
                </div>
            </form>
        </div>

    </div>
</div>
@endsection