@extends('layouts.superadmin')
@section('title', 'إدارة اقرأني لليوم')

@section('content')
<div class="container mx-auto px-4 py-6 rtl space-y-6">

    @if(session('success'))
        <div class="bg-green-50 border border-green-200 text-green-800 rounded-lg p-3 mb-3 text-sm">
            {{ session('success') }}
        </div>
    @endif

    <!-- فورم إنشاء مقال -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h1 class="text-xl font-bold text-gray-900 dark:text-white mb-1">اقرأني لليوم</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400">
                اكتب مقال اليوم بصيغة مهنية واضحة. يظهر لكل الأعضاء في أسفل الصفحة مع زر تأكيد قراءة.
            </p>
        </div>

        <div class="p-6">
            <form action="{{ route('superadmin.daily-reading.store') }}" method="POST">
                @csrf

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            عنوان المقال
                        </label>
                        <input type="text" name="title" value="{{ old('title') }}"
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md
                                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
                                      dark:bg-gray-700 dark:text-white">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            تاريخ انتهاء الصلاحية
                        </label>
                        <input type="datetime-local" name="expires_at" value="{{ old('expires_at') }}"
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md
                                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
                                      dark:bg-gray-700 dark:text-white">
                    </div>
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        محتوى المقال (يدعم HTML)
                    </label>
                    <textarea id="body_html" name="body_html" rows="10"
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md
                                     focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
                                     dark:bg-gray-700 dark:text-white">{{ old('body_html') }}</textarea>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        يمكنك استخدام التنسيقات، العناوين، الجداول، القوائم، إلخ.
                    </p>
                </div>

                <div class="flex justify-end gap-2">
                    <button type="submit"
                            class="inline-flex items-center px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700
                                   text-white text-sm font-medium rounded-lg transition">
                        <i class="fa-solid fa-paper-plane ml-2 text-xs"></i>
                        نشر اقرأني لليوم
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- آخر المقالات (اختياري للعرض) -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
        <div class="px-6 py-3 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-base font-semibold text-gray-900 dark:text-white">أحدث المقالات</h2>
        </div>
        <div class="p-4 space-y-3 text-sm">
            @forelse($readings as $reading)
                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
                    <div class="flex justify-between items-center mb-1">
                        <span class="font-semibold">{{ $reading->title }}</span>
                        <span class="text-xs text-gray-500">
                            {{ optional($reading->starts_at)->format('Y/m/d H:i') }} -
                            {{ optional($reading->expires_at)->format('Y/m/d H:i') }}
                        </span>
                    </div>
                    <div class="text-xs text-gray-500 mb-1">
                        الحالة: {{ $reading->is_active ? 'فعّال' : 'غير فعّال' }}
                    </div>
                    <div class="prose prose-sm max-w-none rtl text-gray-800 dark:text-gray-100">
                        {!! Str::limit($reading->body_html, 200) !!}
                    </div>
                </div>
            @empty
                <p class="text-gray-500">لا توجد مقالات بعد.</p>
            @endforelse
        </div>
    </div>
</div>

{{-- محرر WYSIWYG بسيط (مثال TinyMCE من CDN) --}}
@push('scripts')
    <!-- TinyMCE v8 -->
    <script
        src="https://cdn.tiny.cloud/1/09nsj5jnbtczo593pdtlwz9lzv0hjwqohfw0gwu457rohzw8/tinymce/8/tinymce.min.js"
        referrerpolicy="origin"
        crossorigin="anonymous">
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof tinymce === 'undefined') {
                console.warn('TinyMCE لم يتم تحميله، سيتم استخدام textarea عادي.');
                return;
            }

            tinymce.init({
                // استهدف textarea تبع المقال فقط
                selector: '#body_html',
                directionality: 'rtl',
                language: 'ar',

                plugins: [
                    // Core
                    'anchor', 'autolink', 'charmap', 'codesample', 'emoticons', 'link',
                    'lists', 'media', 'searchreplace', 'table', 'visualblocks', 'wordcount',

                    // Premium / trial
                    'checklist', 'mediaembed', 'casechange', 'formatpainter', 'pageembed',
                    'a11ychecker', 'tinymcespellchecker', 'permanentpen', 'powerpaste',
                    'advtable', 'advcode', 'advtemplate', 'ai', 'uploadcare', 'mentions',
                    'tinycomments', 'tableofcontents', 'footnotes', 'mergetags',
                    'autocorrect', 'typography', 'inlinecss', 'markdown',
                    'importword', 'exportword', 'exportpdf'
                ],

                toolbar:
                    'undo redo | blocks fontfamily fontsize | ' +
                    'bold italic underline strikethrough | ' +
                    'link media table mergetags | ' +
                    'addcomment showcomments | ' +
                    'spellcheckdialog a11ycheck typography uploadcare | ' +
                    'align lineheight | checklist numlist bullist indent outdent | ' +
                    'emoticons charmap | removeformat',

                tinycomments_mode: 'embedded',
                tinycomments_author: @json(auth()->user()->name),

                mergetags_list: [
                    { value: 'First.Name', title: 'First Name' },
                    { value: 'Email',      title: 'Email' }
                ],

                ai_request: (request, respondWith) =>
                    respondWith.string(() =>
                        Promise.reject('AI Assistant غير مفعّل حالياً')
                    ),

                uploadcare_public_key: 'b5d5d1f3165c88c1c1e9',
            });
        });
    </script>
@endpush
@endsection