{{-- resources/views/facebook-posts/create.blade.php --}}
<x-app-layout>
    <x-slot name="title">إنشاء منشور فيسبوك - إنشاء ونشر منشور على صفحات فيسبوك</x-slot>

<div class="p-6 space-y-6" >

<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">

<div>
    <h1 class="text-3xl font-bold text-foreground">إنشاء منشور فيسبوك جديد</h1>
    <p class="text-muted-foreground">إنشاء ونشر منشور على صفحات فيسبوك</p>
</div>

<div class="flex items-center gap-2">
    <a href="{{ route('facebook-posts.index') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs h-9 px-4 py-2 has-[>svg]:px-3 bg-gray-600 hover:bg-gray-600/90">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <path d="M12 8l-4 4 4 4M16 12H9"/>
        </svg>
        العودة
    </a>
</div>

</div>

<!-- نموذج إنشاء المنشور -->
<form method="POST" action="{{ route('facebook-posts.store') }}" 
      enctype="multipart/form-data" id="post-form">
    @csrf
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- العمود الرئيسي -->
        <div class="lg:col-span-2 space-y-6">
            
            <!-- معلومات المنشور -->
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                    <div data-slot="card-title" class="font-semibold text-base sm:text-lg">معلومات المنشور</div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-4 w-4 text-muted-foreground">
                        <path d="M14 2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="16" y1="13" x2="8" y2="13"/>
                        <line x1="16" y1="17" x2="8" y2="17"/>
                        <polyline points="10 9 9 9 8 9"/>
                    </svg>
                </div>

                <div data-slot="card-content" class="px-6 space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="text-sm font-medium text-foreground">الصفحة <span class="text-red-500">*</span></label>
                            <select name="facebook_page_id" class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] w-full mt-1 @error('facebook_page_id') border-red-300 @enderror" required>
                                <option value="">اختر الصفحة</option>
                                @foreach($pages as $page)
                                    <option value="{{ $page->id }}" {{ old('facebook_page_id') == $page->id ? 'selected' : '' }}>
                                        {{ $page->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('facebook_page_id')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label class="text-sm font-medium text-foreground">نوع المنشور <span class="text-red-500">*</span></label>
                            <select name="type" class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] w-full mt-1 @error('type') border-red-300 @enderror" 
                                    id="post-type" required>
                                <option value="text" {{ old('type') == 'text' ? 'selected' : '' }}>نص فقط</option>
                                <option value="image" {{ old('type') == 'image' ? 'selected' : '' }}>صورة واحدة</option>
                                <option value="carousel" {{ old('type') == 'carousel' ? 'selected' : '' }}>ألبوم صور</option>
                                <option value="video" {{ old('type') == 'video' ? 'selected' : '' }}>فيديو</option>
                            </select>
                            @error('type')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label class="text-sm font-medium text-foreground">محتوى المنشور <span class="text-red-500">*</span></label>
                        <textarea name="content" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] w-full mt-1 min-h-[120px] @error('content') border-red-300 @enderror" 
                                  rows="6" placeholder="اكتب محتوى المنشور هنا..." 
                                  maxlength="5000" required>{{ old('content') }}</textarea>
                        <div class="flex justify-between items-center mt-1">
                            <p class="text-xs text-muted-foreground">
                                <span id="char-count">0</span> / 5000 حرف
                            </p>
                        </div>
                        @error('content')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- رفع الملفات -->
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm" id="media-section" style="display: none;">
                <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                    <div data-slot="card-title" class="font-semibold text-base sm:text-lg flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600">
                            <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/>
                            <circle cx="12" cy="13" r="3"/>
                        </svg>
                        رفع الملفات
                    </div>
                </div>

                <div data-slot="card-content" class="px-6 space-y-4">
                    <div>
                        <label class="text-sm font-medium text-foreground">اختر الملفات <span class="text-red-500" id="media-required">*</span></label>
                        <input type="file" name="media[]" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] mt-1 @error('media') border-red-300 @enderror" 
                               id="media-input" multiple accept="image/*,video/*">
                        <p class="text-xs text-muted-foreground mt-1" id="media-help">
                            يمكنك رفع صور (JPG, PNG, GIF) أو فيديوهات (MP4, MOV, AVI)
                        </p>
                        @error('media')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                        @error('media.*')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- معاينة الملفات -->
                    <div id="media-preview" class="grid grid-cols-2 md:grid-cols-3 gap-4"></div>
                </div>
            </div>

            <!-- جدولة النشر -->
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                    <div data-slot="card-title" class="font-semibold text-base sm:text-lg flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-orange-600">
                            <rect width="18" height="18" x="3" y="4" rx="2" ry="2"/>
                            <line x1="16" y1="2" x2="16" y2="6"/>
                            <line x1="8" y1="2" x2="8" y2="6"/>
                            <line x1="3" y1="10" x2="21" y2="10"/>
                        </svg>
                        جدولة النشر
                    </div>
                </div>

                <div data-slot="card-content" class="px-6 space-y-4">
                    <div class="flex items-center space-x-2">
                        <input type="checkbox" id="schedule-toggle" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                        <label for="schedule-toggle" class="text-sm font-medium text-foreground">
                            جدولة المنشور لوقت محدد
                        </label>
                    </div>

<div id="schedule-section" style="display: none;" class="space-y-4">
    <div>
        <label class="text-sm font-medium text-foreground">تاريخ ووقت النشر</label>
        
        @php
            $userTimezone = auth()->user()->getTimezone();
            $userNow = \App\Helpers\TimeHelper::toUserTimezone(now(), $userTimezone);
            $minDateTime = $userNow->format('Y-m-d\TH:i');
            $defaultSchedule = $userNow->copy()->addHour()->format('Y-m-d\TH:i');
        @endphp
        
       <input type="datetime-local" 
       name="scheduled_at" 
       id="scheduled-input"
       class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] mt-1 @error('scheduled_at') border-red-300 @enderror"
       value="{{ old('scheduled_at', $defaultSchedule) }}"
       min="{{ $minDateTime }}">

        <input type="hidden" name="user_timezone" value="{{ $userTimezone }}">

        <div class="text-xs text-muted-foreground mt-1" id="schedule-help">
            <div class="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="m9 12 2 2 4-4"/>
                </svg>
                التوقيت المحلي: {{ $userTimezone }}
            </div>
            <small class="text-muted-foreground block mt-1">
                الوقت الحالي: {{ $userNow->format('Y-m-d H:i') }}
            </small>
        </div>

        @error('scheduled_at')
            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
        @enderror
    </div>
</div>
                </div>
            </div>

        </div>

        <!-- الشريط الجانبي -->
        <div class="space-y-6">
            
            <!-- إجراءات النشر -->
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                    <div data-slot="card-title" class="font-semibold text-base sm:text-lg">إجراءات النشر</div>
                </div>

                <div data-slot="card-content" class="px-6 space-y-3">
                    <!-- زر النشر الفوري -->
                    <button type="submit" name="action" value="publish_now" 
                            class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs h-9 px-4 py-2 has-[>svg]:px-3 bg-green-600 hover:bg-green-600/90 w-full" 
                            id="publish-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect width="18" height="18" x="3" y="3" rx="2"/>
                            <path d="M9 9h6v6"/>
                            <path d="m21 3-12 12"/>
                        </svg>
                        نشر الآن
                    </button>
                    
                    <!-- زر الجدولة -->
                    <button type="submit" name="action" value="schedule" 
                            class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs h-9 px-4 py-2 has-[>svg]:px-3 bg-yellow-600 hover:bg-yellow-600/90 w-full" 
                            id="schedule-btn" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"/>
                            <polyline points="12 6 12 12 16 14"/>
                        </svg>
                        جدولة المنشور
                    </button>
                    
                    <!-- زر الحفظ كمسودة -->
                    <button type="submit" name="action" value="save_draft" 
                            class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 rounded-md px-4 py-2 border border-border w-full">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                            <polyline points="17 21 17 13 7 13 7 21"/>
                            <polyline points="7 3 7 8 15 8"/>
                        </svg>
                        حفظ كمسودة
                    </button>
                    
                    <div class="border-t border-border pt-3">
                        <a href="{{ route('facebook-posts.index') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 rounded-md px-4 py-2 border border-red-300 text-red-600 hover:bg-red-50 w-full">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M18 6 6 18"/>
                                <path d="m6 6 12 12"/>
                            </svg>
                            إلغاء
                        </a>
                    </div>
                </div>
            </div>

            <!-- نصائح للنشر -->
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                    <div data-slot="card-title" class="font-semibold text-base sm:text-lg flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-500">
                            <circle cx="12" cy="12" r="10"/>
                            <path d="m9 9 1.5 1.5L16.5 4.5"/>
                        </svg>
                        نصائح للنشر
                    </div>
                </div>

                <div data-slot="card-content" class="px-6">
                    <ul class="space-y-3 text-sm">
                        <li class="flex items-start gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 mt-0.5 flex-shrink-0">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            <span>استخدم صور عالية الجودة (1080x1080 أو أكبر)</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 mt-0.5 flex-shrink-0">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            <span>اكتب محتوى جذاب ومفيد للجمهور</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 mt-0.5 flex-shrink-0">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            <span>استخدم الهاشتاجات المناسبة</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 mt-0.5 flex-shrink-0">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            <span>اختر أوقات النشر المناسبة لجمهورك</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 mt-0.5 flex-shrink-0">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            <span>للألبومات: 2-10 صور، للفيديو: أقل من 200MB</span>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</form>

</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    // متغيرات المنطقة الزمنية
    const userTimezone = '{{ auth()->user()->getTimezone() }}';
    
    console.log('User timezone:', userTimezone);

    // عد الأحرف
    const contentTextarea = document.querySelector('textarea[name="content"]');
    if (contentTextarea) {
        contentTextarea.addEventListener('input', function() {
            const count = this.value.length;
            const counterEl = document.getElementById('char-count');
            if (counterEl) {
                counterEl.textContent = count;
                
                if (count > 4500) {
                    counterEl.classList.add('text-yellow-600');
                } else {
                    counterEl.classList.remove('text-yellow-600');
                }
            }
        });
        
        // تحديث العداد عند التحميل
        contentTextarea.dispatchEvent(new Event('input'));
    }

    // تغيير نوع المنشور
    const postTypeSelect = document.getElementById('post-type');
    if (postTypeSelect) {
        postTypeSelect.addEventListener('change', function() {
            updateMediaSection(this.value);
        });
        
        // تهيئة عند التحميل
        updateMediaSection(postTypeSelect.value);
    }

    // تفعيل الجدولة
    const scheduleToggle = document.getElementById('schedule-toggle');
    if (scheduleToggle) {
        scheduleToggle.addEventListener('change', function() {
            console.log('Schedule toggle:', this.checked);
            toggleScheduleSection(this.checked);
        });
    }

    // مراقبة تغيير الوقت المحدد
    const scheduledInput = document.getElementById('scheduled-input');
    if (scheduledInput) {
        scheduledInput.addEventListener('change', function() {
            updateSchedulePreview(this.value);
        });
        
        // تحديث المعاينة عند التحميل إذا كان هناك قيمة
        if (scheduledInput.value) {
            updateSchedulePreview(scheduledInput.value);
        }
    }

    /**
     * تبديل عرض قسم الجدولة
     */
    function toggleScheduleSection(show) {
        const scheduleSection = document.getElementById('schedule-section');
        const publishBtn = document.getElementById('publish-btn');
        const scheduleBtn = document.getElementById('schedule-btn');
        const scheduledInput = document.getElementById('scheduled-input');

        if (show) {
            scheduleSection.style.display = 'block';
            
            // تغيير زر النشر إلى مسودة
            publishBtn.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                    <polyline points="17 21 17 13 7 13 7 21"/>
                    <polyline points="7 3 7 8 15 8"/>
                </svg>
                حفظ كمسودة
            `;
            publishBtn.className = publishBtn.className
                .replace('bg-green-600 hover:bg-green-600/90', '')
                .replace('text-primary-foreground', '') + 
                ' hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 border border-border';

            scheduleBtn.style.display = 'block';
            scheduledInput.setAttribute('required', 'true');
            
            // تحديث المعاينة
            if (scheduledInput.value) {
                updateSchedulePreview(scheduledInput.value);
            }
        } else {
            scheduleSection.style.display = 'none';
            
            // إرجاع زر النشر
            publishBtn.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect width="18" height="18" x="3" y="3" rx="2"/>
                    <path d="M9 9h6v6"/>
                    <path d="m21 3-12 12"/>
                </svg>
                نشر الآن
            `;
            publishBtn.className = publishBtn.className
                .replace('hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 border border-border', '') + 
                ' bg-green-600 hover:bg-green-600/90 text-primary-foreground';

            scheduleBtn.style.display = 'none';
            scheduledInput.removeAttribute('required');
        }
    }

    /**
     * تحديث معاينة الوقت المجدول
     */
    function updateSchedulePreview(selectedDateTime) {
        if (!selectedDateTime) return;

        try {
            const selectedDate = new Date(selectedDateTime);
            const now = new Date();
            
            // حساب الفرق بالدقائق
            const diffInMinutes = Math.round((selectedDate - now) / (1000 * 60));
            
            let statusIcon = '';
            let statusClass = '';
            let diffText = '';

            if (diffInMinutes < 0) {
                statusIcon = '❌';
                statusClass = 'text-red-600';
                diffText = 'الوقت في الماضي! اختر وقت في المستقبل';
            } else if (diffInMinutes < 5) {
                statusIcon = '⚠️';
                statusClass = 'text-yellow-600';
                diffText = 'قريب جداً! يُفضل وقت أبعد (5 دقائق على الأقل)';
            } else if (diffInMinutes < 60) {
                statusIcon = '✅';
                statusClass = 'text-green-600';
                diffText = `خلال ${diffInMinutes} دقيقة`;
            } else if (diffInMinutes < 1440) {
                const hours = Math.floor(diffInMinutes / 60);
                const minutes = diffInMinutes % 60;
                statusIcon = '✅';
                statusClass = 'text-green-600';
                diffText = minutes > 0 ? `خلال ${hours} ساعة و ${minutes} دقيقة` : `خلال ${hours} ساعة`;
            } else {
                const days = Math.floor(diffInMinutes / 1440);
                const hours = Math.floor((diffInMinutes % 1440) / 60);
                statusIcon = '✅';
                statusClass = 'text-green-600';
                diffText = hours > 0 ? `خلال ${days} يوم و ${hours} ساعة` : `خلال ${days} يوم`;
            }

            // تحديث النص التوضيحي
            const helpDiv = document.getElementById('schedule-help');
            if (helpDiv) {
                const formattedDate = selectedDate.toLocaleString('ar-SA', {
                    weekday: 'long',
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false
                });

                helpDiv.innerHTML = `
                    <div class="flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"/>
                            <path d="m9 12 2 2 4-4"/>
                        </svg>
                        التوقيت المحلي: ${userTimezone}
                    </div>
                    <small class="text-muted-foreground block mt-1">
                        الوقت الحالي: ${now.toLocaleString('ar-SA', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false })}
                    </small>
                    <small class="${statusClass} font-medium block mt-2 flex items-center gap-1">
                        <span>${statusIcon}</span>
                        <span>سيتم النشر: ${formattedDate}</span>
                    </small>
                    <small class="${statusClass} block mt-1">
                        ${diffText}
                    </small>
                `;
            }

            console.log('Schedule preview updated:', {
                selected: selectedDateTime,
                diff_minutes: diffInMinutes,
                is_valid: diffInMinutes > 0
            });

        } catch (e) {
            console.error('Error updating schedule preview:', e);
        }
    }

    /**
     * تحديث قسم الوسائط حسب النوع
     */
    function updateMediaSection(type) {
        const mediaSection = document.getElementById('media-section');
        const mediaInput = document.getElementById('media-input');
        const mediaHelp = document.getElementById('media-help');
        const mediaRequired = document.getElementById('media-required');

        if (!mediaSection || !mediaInput) return;

        switch(type) {
            case 'text':
                mediaSection.style.display = 'none';
                mediaInput.removeAttribute('required');
                if (mediaRequired) mediaRequired.style.display = 'none';
                break;

            case 'image':
                mediaSection.style.display = 'block';
                mediaInput.setAttribute('accept', 'image/*');
                mediaInput.removeAttribute('multiple');
                mediaInput.setAttribute('required', 'true');
                if (mediaHelp) mediaHelp.textContent = 'رفع صورة واحدة (JPG, PNG, GIF) - الحد الأقصى 50MB';
                if (mediaRequired) mediaRequired.style.display = 'inline';
                break;

            case 'carousel':
                mediaSection.style.display = 'block';
                mediaInput.setAttribute('accept', 'image/*');
                mediaInput.setAttribute('multiple', 'multiple');
                mediaInput.setAttribute('required', 'true');
                if (mediaHelp) mediaHelp.textContent = 'رفع 2-10 صور (JPG, PNG, GIF) - الحد الأقصى 50MB لكل صورة';
                if (mediaRequired) mediaRequired.style.display = 'inline';
                break;

            case 'video':
                mediaSection.style.display = 'block';
                mediaInput.setAttribute('accept', 'video/*');
                mediaInput.removeAttribute('multiple');
                mediaInput.setAttribute('required', 'true');
                if (mediaHelp) mediaHelp.textContent = 'رفع فيديو واحد (MP4, MOV, AVI) - الحد الأقصى 200MB';
                if (mediaRequired) mediaRequired.style.display = 'inline';
                break;
        }
    }

    /**
     * معالجة إرسال النموذج
     */
    const postForm = document.getElementById('post-form');
    if (postForm) {
        postForm.addEventListener('submit', function(e) {
            const clickedButton = document.activeElement;
            const action = clickedButton.value;

            console.log('Form submitting:', { action: action });

            // التحقق من الجدولة
            if (action === 'schedule') {
                const scheduledInput = document.getElementById('scheduled-input');
                const scheduledAt = scheduledInput ? scheduledInput.value : '';

                if (!scheduledAt || scheduledAt.trim() === '') {
                    e.preventDefault();
                    alert('يرجى تحديد موعد النشر للمنشورات المجدولة');
                    
                    const scheduleToggle = document.getElementById('schedule-toggle');
                    if (scheduleToggle) {
                        scheduleToggle.checked = true;
                        toggleScheduleSection(true);
                    }
                    
                    if (scheduledInput) {
                        setTimeout(() => scheduledInput.focus(), 300);
                    }
                    return false;
                }

                // التحقق من أن الوقت في المستقبل
                const selectedDate = new Date(scheduledAt);
                const now = new Date();
                
                if (selectedDate <= now) {
                    e.preventDefault();
                    alert('يرجى اختيار وقت في المستقبل');
                    if (scheduledInput) scheduledInput.focus();
                    return false;
                }
            }

            // تعطيل الأزرار وإضافة loader
            document.querySelectorAll('button[type="submit"]').forEach(btn => {
                btn.disabled = true;
                btn.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin inline-block ml-2">
                        <path d="M21 12a9 9 0 1 1-6.3-8.5"/>
                    </svg>
                    جاري المعالجة...
                `;
            });

            return true;
        });
    }

    // تتبع النقر على أزرار الإرسال
    document.querySelectorAll('button[type="submit"]').forEach(btn => {
        btn.addEventListener('click', function(e) {
            // إزالة input مخفي سابق
            const existingAction = document.querySelector('input[name="action"][type="hidden"]');
            if (existingAction) existingAction.remove();

            // إضافة action المختار
            const actionInput = document.createElement('input');
            actionInput.type = 'hidden';
            actionInput.name = 'action';
            actionInput.value = this.value;
            postForm.appendChild(actionInput);
        });
    });
});
</script>


</x-app-layout>