{{--@extends('layouts.admin')--}}

{{--@section('page-title', 'ویرایش مقاله')--}}

{{--@section('content')--}}
{{--    <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-sm border border-gray-200 p-6">--}}
{{--        <div class="flex items-center justify-between border-b pb-4 mb-6">--}}
{{--            <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">--}}
{{--                <i class="fas fa-edit text-blue-600"></i>--}}
{{--                ویرایش مقاله: {{ $post->title }}--}}
{{--            </h2>--}}
{{--            <a href="{{ route('admin.posts.index') }}" class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-650 px-3 py-2 rounded-lg transition">بازگشت</a>--}}
{{--        </div>--}}

{{--        <form action="{{ route('admin.posts.update', $post->id) }}" method="POST" enctype="multipart/form-data" class="space-y-5 text-right" dir="rtl">--}}
{{--            @csrf--}}
{{--            @method('PUT')--}}

{{--            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">--}}
{{--                <div>--}}
{{--                    <label class="block text-xs font-bold text-gray-700 mb-2">عنوان مقاله</label>--}}
{{--                    <input type="text" name="title" required value="{{ old('title', $post->title) }}" class="w-full text-xs p-3 border border-gray-300 rounded-xl outline-none bg-gray-50/50">--}}
{{--                </div>--}}
{{--                <div>--}}
{{--                    <label class="block text-xs font-bold text-gray-700 mb-2">اسلاگ</label>--}}
{{--                    <input type="text" name="slug" required value="{{ old('slug', $post->slug) }}" class="w-full text-xs p-3 border border-gray-300 rounded-xl outline-none bg-gray-50/50 text-left" dir="ltr">--}}
{{--                </div>--}}
{{--            </div>--}}

{{--            <div>--}}
{{--                <label class="block text-xs font-bold text-gray-700 mb-2">چکیده</label>--}}
{{--                <textarea name="excerpt" rows="2" required class="w-full text-xs p-3 border border-gray-300 rounded-xl outline-none bg-gray-50/50">{{ old('excerpt', $post->excerpt) }}</textarea>--}}
{{--            </div>--}}

{{--            <div>--}}
{{--                <label class="block text-xs font-bold text-gray-700 mb-2">تصویر شاخص (اگر نمی‌خواهید تغییر کند، خالی بگذارید)</label>--}}
{{--                <input type="file" name="image" class="w-full text-xs p-2.5 border border-gray-300 rounded-xl bg-gray-50/50">--}}
{{--                <p class="text-[11px] text-gray-400 mt-1">تصویر فعلی: <a href="{{ asset($post->image) }}" target="_blank" class="text-blue-650 underline">مشاهده</a></p>--}}
{{--            </div>--}}

{{--            <div>--}}
{{--                <label class="block text-xs font-bold text-gray-700 mb-2">برچسب‌ها (با کاما «،» جدا کنید)</label>--}}
{{--                <input type="text" name="tags" value="{{ old('tags', $post->tags->pluck('name')->implode('، ')) }}" class="w-full text-xs p-3 border border-gray-300 rounded-xl outline-none bg-gray-50/50">--}}
{{--            </div>--}}

{{--            <div>--}}
{{--                <label class="block text-xs font-bold text-gray-700 mb-2">متن اصلی مقاله</label>--}}
{{--                <textarea name="body" id="editor">{{ old('body', $post->body) }}</textarea>--}}
{{--            </div>--}}

{{--            <div class="flex items-center gap-2 pt-2">--}}
{{--                <input type="checkbox" name="is_published" value="1" id="is_published"--}}
{{--                       {{ old('is_published', $post->is_published) ? 'checked' : '' }}--}}
{{--                       class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">--}}
{{--                <label for="is_published" class="text-xs font-bold text-gray-700 cursor-pointer">انتشار مستقیم در سایت</label>--}}
{{--            </div>--}}

{{--            <div class="border-t pt-4 flex justify-end">--}}
{{--                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold px-6 py-3 rounded-xl transition shadow-sm">--}}
{{--                    بروزرسانی مقاله--}}
{{--                </button>--}}
{{--            </div>--}}
{{--        </form>--}}
{{--    </div>--}}

{{--    <script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>--}}
{{--    <script>--}}
{{--        ClassicEditor.create(document.querySelector('#editor'), { language: 'fa', rtl: true, toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'insertTable', 'tableColumn', 'tableRow', 'mergeTableCells', '|', 'undo', 'redo'] });--}}
{{--    </script>--}}
{{--    <style>--}}
{{--        .ck-editor__editable_inline {--}}
{{--            text-align: right !important;--}}
{{--            direction: rtl !important;--}}
{{--            min-height: 300px;--}}
{{--            border-radius: 0 0 12px 12px !important;--}}
{{--        }--}}
{{--    </style>--}}
{{--@endsection--}}

@extends('layouts.admin')

@section('page-title', 'ویرایش مقاله')

@section('content')
    <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between border-b pb-4 mb-6">
            <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
                <i class="fas fa-edit text-blue-600"></i>
                ویرایش مقاله: {{ $post->title }}
            </h2>
            <a href="{{ route('admin.posts.index') }}" class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-650 px-3 py-2 rounded-lg transition">بازگشت</a>
        </div>

        {{-- نمایش ارورها در صورت وجود مشکل در ولیدیشن --}}
        @if ($errors->any())
            <div class="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-xs space-y-1">
                @foreach ($errors->all() as $error)
                    <p><i class="fas fa-exclamation-circle ml-1"></i> {{ $error }}</p>
                @endforeach
            </div>
        @endif

        <form action="{{ route('admin.posts.update', $post->id) }}" method="POST" enctype="multipart/form-data" class="space-y-5 text-right" dir="rtl">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="block text-xs font-bold text-gray-700 mb-2">عنوان مقاله</label>
                    <input type="text" name="title" required value="{{ old('title', $post->title) }}" class="w-full text-xs p-3 border border-gray-300 rounded-xl outline-none bg-gray-50/50">
                </div>
                <div>
                    <label class="block text-xs font-bold text-gray-700 mb-2">اسلاگ</label>
                    <input type="text" name="slug" required value="{{ old('slug', $post->slug) }}" class="w-full text-xs p-3 border border-gray-300 rounded-xl outline-none bg-gray-50/50 text-left" dir="ltr">
                </div>
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 mb-2">چکیده</label>
                <textarea name="excerpt" rows="2" required class="w-full text-xs p-3 border border-gray-300 rounded-xl outline-none bg-gray-50/50">{{ old('excerpt', $post->excerpt) }}</textarea>
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 mb-2">تصویر شاخص (اگر نمی‌خواهید تغییر کند، خالی بگذارید)</label>
                <input type="file" name="image" class="w-full text-xs p-2.5 border border-gray-300 rounded-xl bg-gray-50/50">
                <p class="text-[11px] text-gray-400 mt-1">تصویر فعلی: <a href="{{ asset($post->image) }}" target="_blank" class="text-blue-650 underline">مشاهده</a></p>
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 mb-2">برچسب‌ها (با کاما «،» جدا کنید)</label>
                <input type="text" name="tags" value="{{ old('tags', $post->tags->pluck('name')->implode('، ')) }}" class="w-full text-xs p-3 border border-gray-300 rounded-xl outline-none bg-gray-50/50">
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 mb-2">متن اصلی مقاله</label>
                <div id="editor-container">
                    {{-- این تغییر حیاتیه: استفاده از علامت خام برای ارسال دیتای HTML به CKEditor --}}
                    <textarea name="body" id="editor">{!! old('body', $post->body) !!}</textarea>
                </div>
            </div>

            <div class="flex items-center gap-2 pt-2">
                <input type="checkbox" name="is_published" value="1" id="is_published"
                       {{ old('is_published', $post->is_published) ? 'checked' : '' }}
                       class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                <label for="is_published" class="text-xs font-bold text-gray-700 cursor-pointer">انتشار مستقیم در سایت</label>
            </div>

            <div class="border-t pt-4 flex justify-end">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold px-6 py-3 rounded-xl transition shadow-sm">
                    بروزرسانی مقاله
                </button>
            </div>
        </form>
    </div>

    <script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
    <script>
        ClassicEditor
            .create(document.querySelector('#editor'), {
                language: 'fa',
                rtl: true,
                toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'insertTable', 'tableColumn', 'tableRow', 'mergeTableCells', '|', 'undo', 'redo']
            })
            .catch(error => {
                console.error(error);
            });
    </script>
    <style>
        .ck-editor__editable_inline {
            text-align: right !important;
            direction: rtl !important;
            min-height: 300px;
            border-radius: 0 0 12px 12px !important;
        }
    </style>
@endsection