@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-plus-circle text-blue-600"></i>
                افزودن مقاله جدید به بلاگ
            </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.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5 text-right" dir="rtl">
            @csrf

            <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') }}"
                           class="w-full text-xs p-3 border border-gray-300 rounded-xl focus:border-blue-500 input-focus transition bg-gray-50/50">
                </div>

                <div>
                    <label class="block text-xs font-bold text-gray-700 mb-2">اسلاگ (URL به انگلیسی یا فارسی)</label>
                    <input type="text" name="slug" required value="{{ old('slug') }}" placeholder="مثال: bilateral-contract"
                           class="w-full text-xs p-3 border border-gray-300 rounded-xl focus:border-blue-500 input-focus transition 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 focus:border-blue-500 input-focus transition bg-gray-50/50">{{ old('excerpt') }}</textarea>
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 mb-2">تصویر شاخص مقاله</label>
                <input type="file" name="image" required
                       class="w-full text-xs p-2.5 border border-gray-300 rounded-xl focus:border-blue-500 bg-gray-50/50 file:ml-4 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
            </div>
            <div>
                <label class="block text-xs font-bold text-gray-700 mb-2">برچسب‌ها (با کاما «،» از هم جدا کنید)</label>
                <input type="text" name="tags" value="{{ old('tags') }}" placeholder="مثال: قرارداد دوجانبه، بورس انرژی، خرید برق"
                       class="w-full text-xs p-3 border border-gray-300 rounded-xl focus:border-blue-500 outline-none transition bg-gray-50/50">
            </div>

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

            <div class="flex items-center gap-2 pt-2">
                <input type="checkbox" name="is_published" value="1" id="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">
                    <i class="fas fa-check-circle ml-1"></i>
                    ذخیره و انتشار مقاله
                </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