@extends('layouts.master')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="{{ asset('js/ckeditor/ckeditor.js') }}"></script>

<style>
    .font-cairo { font-family: 'Cairo', sans-serif !important; }
    .cke_contents { font-family: 'Cairo', sans-serif !important; }
</style>

<div class="p-4 sm:p-6 space-y-6 font-cairo" dir="rtl">
    <div class="flex items-center justify-between bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                <i class="fas fa-edit text-amber-500"></i>
                تعديل قالب المستند: {{ $documentTemplate->title }}
            </h1>
        </div>
        <a href="{{ route('document-templates.index') }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-xl font-bold text-sm">
            <i class="fas fa-arrow-right"></i> العودة للقوالب
        </a>
    </div>

    <form method="POST" action="{{ route('document-templates.update', $documentTemplate->id) }}" class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 space-y-4 max-w-5xl">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">عنوان القالب <span class="text-rose-500">*</span></label>
                <input type="text" name="title" value="{{ old('title', $documentTemplate->title) }}" required class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2 text-sm text-gray-800 dark:text-gray-200">
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">نوع المستند <span class="text-rose-500">*</span></label>
                <select name="type" required class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2 text-sm text-gray-800 dark:text-gray-200">
                    <option value="registration_certificate" {{ $documentTemplate->type === 'registration_certificate' ? 'selected' : '' }}>إفادة قيد وتجسير (Registration Cert)</option>
                    <option value="academic_certificate" {{ $documentTemplate->type === 'academic_certificate' ? 'selected' : '' }}>شهادة تفاصيل درجات (Academic Cert)</option>
                    <option value="graduate_statement" {{ $documentTemplate->type === 'graduate_statement' ? 'selected' : '' }}>إفادة تخرج (Graduate Statement)</option>
                    <option value="transcript" {{ $documentTemplate->type === 'transcript' ? 'selected' : '' }}>سجل أكاديمي كامل (Transcript)</option>
                    <option value="custom" {{ $documentTemplate->type === 'custom' ? 'selected' : '' }}>قالب مخصص (Custom)</option>
                </select>
            </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">حجم الورق</label>
                <select name="paper_size" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2 text-sm">
                    <option value="A4" {{ $documentTemplate->paper_size === 'A4' ? 'selected' : '' }}>A4 Standard</option>
                    <option value="A5" {{ $documentTemplate->paper_size === 'A5' ? 'selected' : '' }}>A5 Small</option>
                    <option value="Letter" {{ $documentTemplate->paper_size === 'Letter' ? 'selected' : '' }}>Letter</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">اتجاه الورقة</label>
                <select name="orientation" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2 text-sm">
                    <option value="portrait" {{ $documentTemplate->orientation === 'portrait' ? 'selected' : '' }}>عمودي (Portrait)</option>
                    <option value="landscape" {{ $documentTemplate->orientation === 'landscape' ? 'selected' : '' }}>أفقي (Landscape)</option>
                </select>
            </div>
        </div>

        <!-- Dynamic Variables Insertion Palette -->
        <div class="bg-emerald-50/70 dark:bg-gray-700/50 p-4 rounded-xl border border-emerald-100 dark:border-gray-600 space-y-2">
            <span class="text-xs font-bold text-emerald-900 dark:text-emerald-300 flex items-center gap-1">
                <i class="fas fa-magic"></i> انقر لإدراج المتغير الديناميكي داخل المحرر:
            </span>
            <div class="flex flex-wrap gap-1.5">
                @foreach($variables as $varKey => $varLabel)
                    <button type="button" onclick="insertVariable('{{ $varKey }}')" class="px-2.5 py-1 bg-white dark:bg-gray-800 text-emerald-700 dark:text-emerald-400 hover:bg-emerald-600 hover:text-white border border-emerald-200 dark:border-emerald-700 rounded-lg text-xs font-mono font-bold transition shadow-sm">
                        + {{ $varKey }}
                    </button>
                @endforeach
            </div>
        </div>

        <!-- Rich Text Editor (CKEditor) -->
        <div>
            <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">محتوى وتصميم القالب <span class="text-rose-500">*</span></label>
            <textarea id="editor" name="content" class="w-full">{!! old('content', $documentTemplate->content) !!}</textarea>
        </div>

        <div class="flex items-center gap-4 pt-2">
            <label class="flex items-center gap-2 text-xs font-bold text-gray-700 dark:text-gray-300">
                <input type="checkbox" name="is_default" value="1" {{ $documentTemplate->is_default ? 'checked' : '' }} class="rounded border-gray-300 text-emerald-600">
                تعيين كقالب افتراضي لهذه الفئة
            </label>

            <label class="flex items-center gap-2 text-xs font-bold text-gray-700 dark:text-gray-300">
                <input type="checkbox" name="is_active" value="1" {{ $documentTemplate->is_active ? 'checked' : '' }} class="rounded border-gray-300 text-emerald-600">
                مفعل
            </label>
        </div>

        <button type="submit" class="px-6 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl text-sm transition shadow-md">
            حفظ التعديلات
        </button>
    </form>
</div>

<script>
    if (typeof CKEDITOR !== 'undefined') {
        CKEDITOR.replace('editor', {
            language: 'ar',
            height: 380,
            contentsLangDirection: 'rtl'
        });
    }

    function insertVariable(variableText) {
        if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances.editor) {
            CKEDITOR.instances.editor.insertText(variableText);
        }
    }
</script>
@endsection