@extends('admin.layouts.default')
@section('page_title', 'Edit Page ' . $page->title_en. config('default.page_title_delimiter') . config('default.app_name'))
@section('content')
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-6 md:py-8">
    {{-- Page Header --}}
    <div class="mb-6">
        <x-ui.page-header
            icon="file"
			title="Edit Page"
			description="{{ $page->title_en }}"
            
        />
    </div>
    
    

    <form action="{{ route('admin.pages.update', $page->id) }}" method="POST" class="bg-white p-8 rounded-2xl shadow-sm  space-y-6">
        @csrf
        @method('PUT')

        <div class="p-4 bg-slate-50 rounded-xl space-y-4 hidden">
            <h3 class="text-sm font-bold text-blue-600 border-b pb-2">المحتوى باللغة العربية</h3>
            <div>
                <label class="block text-xs font-bold text-slate-500 mb-2">عنوان الصفحة (عربي)</label>
                <input type="text" name="title_ar" value="{{ old('title_ar', $page->title_ar) }}" class="w-full p-3 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-blue-500">
            </div>
            <div>
                <label class="block text-xs font-bold text-slate-500 mb-2">المحتوى (عربي)</label>
                <textarea id="editor_ar" name="content_ar" rows="8" class="w-full p-3 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-blue-500">{{ old('content_ar', $page->content_ar) }}</textarea>
            </div>
        </div>

        <div class="p-4 bg-slate-50 rounded-xl space-y-4">
            <!--h3 class="text-sm font-bold text-indigo-600 border-b pb-2">المحتوى باللغة الإنجليزية (اختياري)</h3-->
            <div dir="ltr" class="text-left">
                <label class="block text-xs font-bold text-slate-500 mb-2 text-left">Page Title (EN)</label>
                <input type="text" name="title_en" value="{{ old('title_en', $page->title_en) }}" class="w-full p-3 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-indigo-500">
            </div>
            <div dir="ltr" class="text-left">
                <label class="block text-xs font-bold text-slate-500 mb-2 text-left">Page Content (EN)</label>
                <textarea id="editor_en" name="content_en" rows="8" class="w-full p-3 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-indigo-500">{{ old('content_en', $page->content_en) }}</textarea>
            </div>
        </div>

        <div class="pt-4 flex justify-end">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-6 py-3 rounded-xl text-sm shadow-sm transition-all">
                Save
            </button>
        </div>
    </form>
</div>


<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
<script>
    const editorConfig = {
        language: 'ar',
        // هنا بنجبره يظهر أيقونة الرفع (uploadImage) في الـ Toolbar 🚀
        toolbar: [ 
            'heading', '|', 'bold', 'italic', 'link', 'uploadImage', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'undo', 'redo' 
        ],
        // ربط السكريبت بالمسار اللي عملناه في لارافل لرفع الصور
        ckfinder: {
            uploadUrl: "{{ route('admin.pages.upload', ['_token' => csrf_token()]) }}"
        }
    };

    // تشغيل الأدبتور العربي
    ClassicEditor
        .create(document.querySelector('#editor_ar'), editorConfig)
        .catch(error => { console.error(error); });

    // تشغيل الأدبتور الإنجليزي (مع تغيير اللغة الافتراضية للإنجليزية)
    ClassicEditor
        .create(document.querySelector('#editor_en'), {
            ...editorConfig,
            language: 'en'
        })
        .catch(error => { console.error(error); });
</script>

<style>
    .ck-editor__editable_inline {
        min-height: 250px;
        border-radius: 0 0 12px 12px !important;
    }
    .ck-toolbar {
        border-radius: 12px 12px 0 0 !important;
        background: #f8fafc !important;
    }
</style>
@endsection