{{-- resources/views/instagram/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 flex items-center gap-2">
        <div class="w-8 h-8 bg-gradient-to-br from-purple-600 via-pink-600 to-orange-500 rounded-lg flex items-center justify-center">
            <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-white">
                <rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
                <path d="m13.5 8.5 2-2"/>
                <path d="m7.5 15.5 2-2"/>
                <circle cx="9" cy="9" r="2"/>
                <path d="m13.5 15.5 2 2"/>
            </svg>
        </div>
        إنشاء محتوى جديد
    </h1>
    <p class="text-muted-foreground">قم بإنشاء ونشر محتوى متنوع على حساب إنستقرام</p>
</div>

<a href="{{ route('instagram.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-border">
    <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>

<form method="POST" action="{{ route('instagram.posts.store') }}" enctype="multipart/form-data" id="post-form">
    @csrf
    
    <!-- حقل الإجراء المخفي -->
    <input type="hidden" name="action" id="action-field" value="save_draft">
    
    <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-content" class="px-6">
                    <label class="text-sm font-medium text-foreground flex items-center gap-2 mb-2">
                        <div class="w-4 h-4 bg-gradient-to-br from-purple-600 via-pink-600 to-orange-500 rounded-sm"></div>
                        حساب إنستقرام <span class="text-red-500">*</span>
                    </label>
                    <select name="instagram_account_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 @error('instagram_account_id') border-red-300 @enderror" required>
                        <option value="">اختر الحساب</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}" {{ old('instagram_account_id') == $account->id ? 'selected' : '' }}>
                                {{ '@' . $account->username }} - {{ $account->getDisplayName() }}
                            </option>
                        @endforeach
                    </select>
                    @error('instagram_account_id')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </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-content" class="px-6">
                    <label class="text-sm font-medium text-foreground flex items-center gap-2 mb-4">
                        <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-primary">
                            <rect width="7" height="7" x="3" y="3" rx="1"/>
                            <rect width="7" height="7" x="14" y="3" rx="1"/>
                            <rect width="7" height="7" x="14" y="14" rx="1"/>
                            <rect width="7" height="7" x="3" y="14" rx="1"/>
                        </svg>
                        نوع المحتوى <span class="text-red-500">*</span>
                    </label>
                   <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
   
    <div class="content-type-option">
        <input type="radio" name="media_type" id="type_post" value="IMAGE" class="sr-only">
        <label for="type_post" class="block p-4 border-2 border-dashed border-border rounded-lg cursor-pointer transition-all hover:border-primary hover:bg-primary/5 text-center">
            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
                <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="text-primary">
                    <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
                    <circle cx="9" cy="9" r="2"/>
                    <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
                </svg>
            </div>
            <div class="font-semibold text-sm mb-1">صورة</div>
            <div class="text-xs text-muted-foreground">صورة في الفيد</div>
        </label>
    </div>

   
  
    <div class="content-type-option">
        <input type="radio" name="media_type" id="type_story" value="STORY" class="sr-only">
        <label for="type_story" class="block p-4 border-2 border-dashed border-border rounded-lg cursor-pointer transition-all hover:border-green-500 hover:bg-green-50 text-center">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-3">
                <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="text-green-600">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="12" y1="8" x2="12" y2="16"/>
                    <line x1="8" y1="12" x2="16" y2="12"/>
                </svg>
            </div>
            <div class="font-semibold text-sm mb-1">ستوري</div>
            <div class="text-xs text-muted-foreground">يختفي بعد 24 ساعة</div>
        </label>
    </div>

   
    <div class="content-type-option">
        <input type="radio" name="media_type" id="type_reel" value="REEL" class="sr-only">
        <label for="type_reel" class="block p-4 border-2 border-dashed border-border rounded-lg cursor-pointer transition-all hover:border-red-500 hover:bg-red-50 text-center">
            <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-3">
                <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="text-red-600">
                    <polygon points="23 7 16 12 23 17 23 7"/>
                    <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                </svg>
            </div>
            <div class="font-semibold text-sm mb-1">ريلز</div>
            <div class="text-xs text-muted-foreground">فيديو قصير ترفيهي</div>
        </label>
    </div>

 
    <div class="content-type-option">
        <input type="radio" name="media_type" id="type_carousel" value="CAROUSEL_ALBUM" class="sr-only">
        <label for="type_carousel" class="block p-4 border-2 border-dashed border-border rounded-lg cursor-pointer transition-all hover:border-cyan-500 hover:bg-cyan-50 text-center">
            <div class="w-12 h-12 bg-cyan-100 rounded-lg flex items-center justify-center mx-auto mb-3">
                <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="text-cyan-600">
                    <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
                    <circle cx="9" cy="9" r="2"/>
                    <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
                    <rect width="14" height="14" x="7" y="7" rx="2" ry="2" opacity="0.5"/>
                </svg>
            </div>
            <div class="font-semibold text-sm mb-1">كاروسيل</div>
            <div class="text-xs text-muted-foreground">صور/فيديوهات متعددة</div>
        </label>
    </div>
</div>
                    @error('media_type')
                        <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- إرشادات المحتوى -->
            <div id="content-guidelines" class="hidden">
                <div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-4 rounded-lg flex gap-3">
                    <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="flex-shrink-0 mt-0.5">
                        <circle cx="12" cy="12" r="10"/>
                        <path d="m9 12 2 2 4-4"/>
                    </svg>
                    <div id="guidelines-content" class="text-sm">
                        <!-- سيتم تحديثه بـ JavaScript -->
                    </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-content" class="px-6">
                    <label class="text-sm font-medium text-foreground flex items-center gap-2 mb-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-primary">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                            <polyline points="7 10 12 15 17 10"/>
                            <line x1="12" y1="15" x2="12" y2="3"/>
                        </svg>
                        الملفات <span class="text-red-500">*</span>
                    </label>
                    
                    <input type="file" name="media_files[]" multiple 
                           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] @error('media_files') border-red-300 @enderror" 
                           id="media-files" accept="image/jpeg,image/jpg,image/png,video/mp4,video/mov" required>
                    <div class="text-xs text-muted-foreground mt-1" id="upload-help">
                        اختر الملفات المناسبة (JPG, PNG, MP4, MOV - حد أقصى 100MB لكل ملف)
                    </div>
                    @error('media_files')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    @error('media_files.*')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    
                    <!-- منطقة المعاينة -->
                    <div class="preview-area mt-4 hidden" id="preview-area">
                        <div class="grid grid-cols-3 gap-3" id="preview-container"></div>
                    </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-content" class="px-6">
                    <label class="text-sm font-medium text-foreground flex items-center gap-2 mb-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-primary">
                            <path d="M17 6.1H3"/>
                            <path d="M21 12.1H3"/>
                            <path d="M15.1 18H3"/>
                        </svg>
                        النص <span class="text-red-500">*</span>
                    </label>
                    <textarea name="caption" rows="5" 
                              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 resize-none md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] w-full @error('caption') border-red-300 @enderror" 
                              placeholder="اكتب وصف المحتوى هنا..."
                              maxlength="2200" required>{{ old('caption') }}</textarea>
                    <div class="flex justify-between text-xs text-muted-foreground mt-1">
                        <span id="caption-help">استخدم نص جذاب لزيادة التفاعل</span>
                        <span id="caption-counter">0/2200</span>
                    </div>
                    @error('caption')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </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="hashtags-section">
                <div data-slot="card-content" class="px-6">
                    <label class="text-sm font-medium text-foreground flex items-center gap-2 mb-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-primary">
                            <line x1="4" y1="9" x2="20" y2="9"/>
                            <line x1="4" y1="15" x2="20" y2="15"/>
                            <line x1="10" y1="3" x2="8" y2="21"/>
                            <line x1="16" y1="3" x2="14" y2="21"/>
                        </svg>
                        الهاشتاجات
                    </label>
                    <input type="text" name="hashtags" 
                           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] @error('hashtags') border-red-300 @enderror" 
                           placeholder="تسويق، انستقرام، محتوى (مفصولة بفواصل)" 
                           value="{{ old('hashtags') }}">
                    <div class="text-xs text-muted-foreground mt-1">
                        يمكنك إضافة حتى 30 هاشتاج. اكتبها بدون # وافصلها بفواصل
                    </div>
                    @error('hashtags')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </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="scheduling-section">
                <div data-slot="card-content" class="px-6">
                    <div class="flex items-center space-x-2 mb-4">
                        <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 flex items-center 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-primary">
                                <circle cx="12" cy="12" r="10"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                            جدولة المحتوى لوقت لاحق
                        </label>
                    </div>
                    
                    <div id="schedule-section" class="hidden">
    <label class="text-sm font-medium text-foreground mb-2 block">تاريخ ووقت النشر</label>

    <input type="datetime-local" 
           name="scheduled_at"
           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] @error('scheduled_at') border-red-300 @enderror" 
           min="{{ now()->format('Y-m-d\TH:i') }}"
           value="{{ old('scheduled_at', $scheduledAtLocal) }}">

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

                </div>
            </div>

           
        </div>

        <!-- الشريط الجانبي للمعاينة -->
        <div class="space-y-6">
            <div class="sticky top-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 border-b border-border">
                        <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-primary">
                                <rect width="14" height="20" x="5" y="2" rx="2" ry="2"/>
                                <path d="M9 22v-4h6v4"/>
                                <path d="M8 6h8"/>
                                <path d="M16 10a4 4 0 0 1-8 0"/>
                            </svg>
                            معاينة المحتوى
                        </div>
                    </div>
 
                  
                    <div data-slot="card-content" class="px-6">
                        <div id="post-preview">
                            <div class="text-center py-8">
                                <div class="w-16 h-16 bg-gradient-to-br from-purple-600 via-pink-600 to-orange-500 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <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="text-white">
                                        <rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
                                        <path d="m13.5 8.5 2-2"/>
                                        <path d="m7.5 15.5 2-2"/>
                                        <circle cx="9" cy="9" r="2"/>
                                        <path d="m13.5 15.5 2 2"/>
                                    </svg>
                                </div>
                                <p class="text-muted-foreground">اختر نوع المحتوى أولاً</p>
                            </div>
                        </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-content" class="px-6 space-y-3">
                    <button type="button" class="inline-flex w-full items-center justify-center gap-2 rounded-md border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 text-sm font-medium transition-all" id="save-draft-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">
                        <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>
                
                <button type="button" class="hidden w-full 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 text-primary-foreground shadow-xs h-9 px-4 py-2 bg-yellow-600 hover:bg-yellow-600/90" id="schedule-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">
                        <circle cx="12" cy="12" r="10"/>
                        <polyline points="12 6 12 12 16 14"/>
                    </svg>
                    جدولة النشر
                </button>
                
                <button type="button" class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 text-primary-foreground shadow-xs h-9 px-4 py-2 bg-primary hover:bg-primary/90" 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">
                        <path d="m22 2-7 20-4-9-9-4Z"/>
                        <path d="M22 2L11 13"/>
                    </svg>
                    نشر الآن
                </button>
                    
                </div>
            </div>
              
              
                <!-- نصائح المحتوى -->
                <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm hidden" id="content-tips">
                    <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 border-b border-border">
                        <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-600">
                                <circle cx="12" cy="12" r="10"/>
                                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
                                <path d="M12 17h.01"/>
                            </svg>
                            نصائح للنشر
                        </div>
                    </div>

                    <div data-slot="card-content" class="px-6" id="tips-content">
                        <!-- سيتم تحديثه بـ JavaScript -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

</div>
<div id="alerts-container" class="fixed top-4 right-4 z-50 space-y-2"></div>





<style>
@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-out-right {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.animate-slide-in-right {
    animation: slide-in-right 0.3s ease-out;
}

/* تأثيرات إضافية لخيارات نوع المحتوى */
.content-type-option input:checked + label {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* تحسين مظهر المعاينة */
.instagram-preview {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.preview-area {
    max-height: 300px;
    overflow-y: auto;
}

/* تأثيرات الانتقال */
.content-type-option label {
    transition: all 0.2s ease;
}

.content-type-option label:hover {
    transform: translateY(-2px);
}

/* تحسين التجاوب */
@media (max-width: 1024px) {
    .grid.grid-cols-1.lg\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    .sticky.top-6 {
        position: static;
    }
}

@media (max-width: 768px) {
    .grid.grid-cols-2.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>

<script>
// ==========================================
// دوال عامة للتنبيهات
// ==========================================

/**
 * دالة عرض التنبيهات
 */
function showAlert(type, message) {
    const alertsContainer = document.getElementById('alerts-container');
    
    if (!alertsContainer) {
        console.error('Alerts container not found');
        return;
    }
    
    const colors = {
        'success': {
            bg: 'bg-green-50',
            border: 'border-green-200',
            text: 'text-green-800',
            icon: `<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-green-600">
                <circle cx="12" cy="12" r="10"/>
                <path d="m9 12 2 2 4-4"/>
            </svg>`
        },
        'error': {
            bg: 'bg-red-50',
            border: 'border-red-200',
            text: 'text-red-800',
            icon: `<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-red-600">
                <circle cx="12" cy="12" r="10"/>
                <line x1="15" y1="9" x2="9" y2="15"/>
                <line x1="9" y1="9" x2="15" y2="15"/>
            </svg>`
        },
        'warning': {
            bg: 'bg-yellow-50',
            border: 'border-yellow-200',
            text: 'text-yellow-800',
            icon: `<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-600">
                <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
                <path d="M12 9v4"/>
                <path d="M12 17h.01"/>
            </svg>`
        }
    };
    
    const alertType = colors[type] || colors['success'];
    const alertId = 'alert-' + Date.now();
    
    const alertHtml = `
        <div id="${alertId}" class="alert ${alertType.bg} ${alertType.border} ${alertType.text} border rounded-lg px-4 py-3 flex items-start gap-3 shadow-lg animate-slide-in-right max-w-md" role="alert">
            ${alertType.icon}
            <div class="flex-1">
                <p class="text-sm font-medium">${message}</p>
            </div>
            <button type="button" class="flex-shrink-0 hover:opacity-70 transition-opacity" onclick="this.closest('.alert').remove()">
                <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">
                    <line x1="18" y1="6" x2="6" y2="18"/>
                    <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
            </button>
        </div>
    `;
    
    alertsContainer.insertAdjacentHTML('beforeend', alertHtml);
    
    // إزالة التنبيه تلقائياً بعد 5 ثوان
    setTimeout(() => {
        const alert = document.getElementById(alertId);
        if (alert) {
            alert.style.animation = 'slide-out-right 0.3s ease-out';
            setTimeout(() => alert.remove(), 300);
        }
    }, 5000);
}

// ==========================================
// دوال التطبيق الرئيسية
// ==========================================

document.addEventListener('DOMContentLoaded', function() {
    // متغيرات عامة
    let selectedFiles = [];
    let selectedMediaType = '';
    
    // ==========================================
    // بيانات المحتوى والنصائح لكل نوع
    // ==========================================
    const contentData = {
        'IMAGE': {
            guidelines: '<strong>منشور صورة:</strong> يظهر في الفيد الرئيسي ويبقى دائماً على الحساب. مناسب للصور عالية الجودة والمحتوى المهم.',
            uploadHelp: 'صور JPG/PNG عالية الجودة، الأبعاد المثلى: 1080x1080 للمربع أو 1080x1350 للطولي',
            captionHelp: 'اكتب وصف مفصل مع دعوة للعمل (Call-to-Action)',
            tips: [
                'استخدم صور عالية الجودة ومضيئة',
                'أضف نص جذاب مع دعوة للتفاعل',
                'استخدم 5-10 هاشتاج ذات صلة',
                'انشر في أوقات نشاط المتابعين'
            ],
            allowHashtags: true,
            allowScheduling: true
        },
        'VIDEO': {
            guidelines: '<strong>منشور فيديو:</strong> فيديو عادي في الفيد، يبقى دائماً على الحساب.',
            uploadHelp: 'فيديو MP4/MOV، مدة من 3 ثواني إلى 60 دقيقة، الأبعاد: 1080x1920 أو 1920x1080',
            captionHelp: 'اكتب وصف جذاب مع دعوة للتفاعل',
            tips: [
                'استخدم فيديو عالي الجودة',
                'أضف نصوص توضيحية للفيديو',
                'اجعل أول 3 ثوان جذابة',
                'استخدم صوت واضح ومؤثرات بصرية'
            ],
            allowHashtags: true,
            allowScheduling: true
        },
        'STORY': {
            guidelines: '<strong>ستوري:</strong> يختفي بعد 24 ساعة. مناسب للمحتوى اليومي والتفاعل السريع مع المتابعين.',
            uploadHelp: 'صور أو فيديو قصير (15 ثانية)، الأبعاد المثلى: 1080x1920 (عمودي)',
            captionHelp: 'النص قصير ومباشر، يركز على المحتوى البصري',
            tips: [
                'استخدم أبعاد عمودية (9:16)',
                'أضف نصوص ومؤثرات بصرية',
                'استخدم ملصقات تفاعلية',
                'انشر بانتظام لزيادة الوصول'
            ],
            allowHashtags: false,
            allowScheduling: false
        },
        'REEL': {
            guidelines: '<strong>ريلز:</strong> فيديوهات قصيرة ترفيهية. أعلى وصول على إنستقرام، مناسب للمحتوى الإبداعي والترفيهي.',
            uploadHelp: 'فيديو MP4 قصير (15-90 ثانية)، عمودي 1080x1920، صوت واضح',
            captionHelp: 'نص قصير وجذاب، ركز على الكلمات المفتاحية الشائعة',
            tips: [
                'اجعل أول 3 ثوان جذابة جداً',
                'استخدم الموسيقى الشائعة',
                'أضف نصوص على الفيديو',
                'اتبع التريندات الحالية'
            ],
            allowHashtags: true,
            allowScheduling: true
        },
        'CAROUSEL_ALBUM': {
            guidelines: '<strong>كاروسيل:</strong> عدة صور أو فيديوهات في منشور واحد. مناسب لعرض منتجات متعددة أو حكاية قصة.',
            uploadHelp: 'من 2 إلى 10 صور أو فيديوهات، نفس الأبعاد لجميع الملفات',
            captionHelp: 'اكتب قصة متماسكة تربط بين جميع الصور',
            tips: [
                'ابدأ بأقوى صورة لجذب الانتباه',
                'اجعل كل صورة تحكي جزء من القصة',
                'استخدم تصميم متسق',
                'أضف رقم الصفحة في كل صورة'
            ],
            allowHashtags: true,
            allowScheduling: true
        }
    };
    
    // ==========================================
    // معالج تغيير ملف الإدخال
    // ==========================================
    const fileInput = document.getElementById('media-files');
    if (fileInput) {
        fileInput.addEventListener('change', function(e) {
            const files = Array.from(e.target.files);
            selectedFiles = files;
            
            if (files.length > 0) {
                displayPreview(files);
                updatePreview();
            } else {
                hidePreview();
            }
        });
    }
    
    // ==========================================
    // اختيار نوع الوسائط
    // ==========================================
    document.querySelectorAll('input[name="media_type"]').forEach(radio => {
        radio.addEventListener('change', function() {
            selectedMediaType = this.value;
            updateContentGuidelines(this.value);
            updateFileConstraints(this.value);
            updatePreview();
            
            // تحديث مظهر الخيارات
            document.querySelectorAll('.content-type-option label').forEach(label => {
                label.classList.remove(
                    'border-primary', 'bg-primary/10',
                    'border-purple-500', 'bg-purple-50',
                    'border-green-500', 'bg-green-50',
                    'border-red-500', 'bg-red-50',
                    'border-cyan-500', 'bg-cyan-50'
                );
                label.classList.add('border-border');
            });
            
            const selectedLabel = this.nextElementSibling;
            const colors = {
                'IMAGE': ['border-primary', 'bg-primary/10'],
                'VIDEO': ['border-purple-500', 'bg-purple-50'],
                'STORY': ['border-green-500', 'bg-green-50'],
                'REEL': ['border-red-500', 'bg-red-50'],
                'CAROUSEL_ALBUM': ['border-cyan-500', 'bg-cyan-50']
            };
            
            if (colors[this.value]) {
                selectedLabel.classList.add(...colors[this.value]);
            }
        });
    });
    
    // ==========================================
    // تحديث إرشادات المحتوى
    // ==========================================
    function updateContentGuidelines(mediaType) {
        const data = contentData[mediaType];
        const guidelines = document.getElementById('content-guidelines');
        const guidelinesContent = document.getElementById('guidelines-content');
        const uploadHelp = document.getElementById('upload-help');
        const captionHelp = document.getElementById('caption-help');
        const hashtagsSection = document.getElementById('hashtags-section');
        const schedulingSection = document.getElementById('scheduling-section');
        const contentTips = document.getElementById('content-tips');
        const tipsContent = document.getElementById('tips-content');
        
        if (data) {
            // إظهار الإرشادات
            if (guidelinesContent) guidelinesContent.innerHTML = data.guidelines;
            if (guidelines) guidelines.classList.remove('hidden');
            
            // تحديث النصوص المساعدة
            if (uploadHelp) uploadHelp.textContent = data.uploadHelp;
            if (captionHelp) captionHelp.textContent = data.captionHelp;
            
            // إظهار/إخفاء الأقسام
            if (hashtagsSection) hashtagsSection.style.display = data.allowHashtags ? 'block' : 'none';
            if (schedulingSection) schedulingSection.style.display = data.allowScheduling ? 'block' : 'none';
            
            // إظهار النصائح
            if (tipsContent) {
                const tipsList = data.tips.map(tip => `<li class="text-sm mb-1">${tip}</li>`).join('');
                tipsContent.innerHTML = `<ul class="list-disc list-inside space-y-1 text-muted-foreground">${tipsList}</ul>`;
            }
            if (contentTips) contentTips.classList.remove('hidden');
        } else {
            if (guidelines) guidelines.classList.add('hidden');
            if (contentTips) contentTips.classList.add('hidden');
        }
    }
    
    // ==========================================
    // تحديث قيود الملف حسب نوع الوسائط
    // ==========================================
    function updateFileConstraints(mediaType) {
        const fileInput = document.getElementById('media-files');
        if (!fileInput) return;
        
        switch(mediaType) {
            case 'IMAGE':
                fileInput.accept = 'image/jpeg,image/jpg,image/png';
                fileInput.removeAttribute('multiple');
                break;
            case 'VIDEO':
                fileInput.accept = 'video/mp4,video/mov';
                fileInput.removeAttribute('multiple');
                break;
            case 'STORY':
                fileInput.accept = 'image/jpeg,image/jpg,image/png,video/mp4,video/mov';
                fileInput.removeAttribute('multiple');
                break;
            case 'REEL':
                fileInput.accept = 'video/mp4,video/mov';
                fileInput.removeAttribute('multiple');
                break;
            case 'CAROUSEL_ALBUM':
                fileInput.accept = 'image/jpeg,image/jpg,image/png,video/mp4,video/mov';
                fileInput.setAttribute('multiple', 'multiple');
                break;
        }
    }
    
    // ==========================================
    // عرض معاينة الملف
    // ==========================================
    function displayPreview(files) {
        const previewContainer = document.getElementById('preview-container');
        const previewArea = document.getElementById('preview-area');
        
        if (!previewContainer || !previewArea) return;
        
        previewContainer.innerHTML = '';
        
        files.forEach((file, index) => {
            const reader = new FileReader();
            const isVideo = file.type.startsWith('video/');
            
            reader.onload = function(e) {
                let mediaElement;
                if (isVideo) {
                    mediaElement = `
                        <video class="w-full h-24 object-cover rounded-lg" muted>
                            <source src="${e.target.result}" type="${file.type}">
                        </video>
                    `;
                } else {
                    mediaElement = `
                        <img src="${e.target.result}" class="w-full h-24 object-cover rounded-lg" alt="Preview">
                    `;
                }
                
                const previewHtml = `
                    <div class="relative">
                        ${mediaElement}
                        ${isVideo ? '<span class="absolute top-1 right-1 bg-red-500 text-white text-xs px-1 rounded"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg></span>' : ''}
                        <span class="absolute top-1 left-1 bg-black/50 text-white text-xs px-1 rounded">${index + 1}</span>
                    </div>
                `;
                
                previewContainer.insertAdjacentHTML('beforeend', previewHtml);
            };
            
            reader.readAsDataURL(file);
        });
        
        previewArea.classList.remove('hidden');
    }
    
    // ==========================================
    // إخفاء المعاينة
    // ==========================================
    function hidePreview() {
        const previewArea = document.getElementById('preview-area');
        if (previewArea) {
            previewArea.classList.add('hidden');
        }
        updatePreview();
    }
    
    // ==========================================
    // عداد النص
    // ==========================================
    const captionTextarea = document.querySelector('textarea[name="caption"]');
    if (captionTextarea) {
        captionTextarea.addEventListener('input', function() {
            const count = this.value.length;
            const counter = document.getElementById('caption-counter');
            
            if (counter) {
                counter.textContent = count + '/2200';
                
                if (count > 2200) {
                    counter.classList.add('text-red-500');
                } else {
                    counter.classList.remove('text-red-500');
                }
            }
            
            updatePreview();
        });
    }
    
    // ==========================================
    // مفتاح الجدولة
    // ==========================================
    const scheduleToggle = document.getElementById('schedule-toggle');
    if (scheduleToggle) {
        scheduleToggle.addEventListener('change', function() {
            const scheduleSection = document.getElementById('schedule-section');
            const publishBtn = document.getElementById('publish-btn');
            const scheduleBtn = document.getElementById('schedule-btn');
            
            if (this.checked) {
                if (scheduleSection) scheduleSection.classList.remove('hidden');
                if (publishBtn) publishBtn.classList.add('hidden');
                if (scheduleBtn) scheduleBtn.classList.remove('hidden');
            } else {
                if (scheduleSection) scheduleSection.classList.add('hidden');
                if (scheduleBtn) scheduleBtn.classList.add('hidden');
                if (publishBtn) publishBtn.classList.remove('hidden');
            }
        });
    }
    
    // ==========================================
    // معالجات النقر على الأزرار
    // ==========================================
    const saveDraftBtn = document.getElementById('save-draft-btn');
    if (saveDraftBtn) {
        saveDraftBtn.addEventListener('click', function() {
            if (validateForm()) {
                document.getElementById('action-field').value = 'save_draft';
                submitForm(this);
            }
        });
    }
    
    const scheduleBtn = document.getElementById('schedule-btn');
    if (scheduleBtn) {
        scheduleBtn.addEventListener('click', function() {
            if (validateForm()) {
                const scheduledAt = document.querySelector('input[name="scheduled_at"]');
                if (!scheduledAt || !scheduledAt.value) {
                    showAlert('error', 'يجب تحديد موعد النشر للمحتوى المجدول');
                    return;
                }
                document.getElementById('action-field').value = 'schedule';
                submitForm(this);
            }
        });
    }
    
    const publishBtn = document.getElementById('publish-btn');
    if (publishBtn) {
        publishBtn.addEventListener('click', function() {
            if (validateForm()) {
                const contentType = getContentTypeText();
                if (confirm(`هل تريد نشر هذا ${contentType} الآن؟`)) {
                    document.getElementById('action-field').value = 'publish_now';
                    submitForm(this);
                }
            }
        });
    }
    
    // ==========================================
    // الحصول على نص نوع المحتوى بالعربية
    // ==========================================
    function getContentTypeText() {
        switch(selectedMediaType) {
            case 'VIDEO': return 'الفيديو';
            case 'STORY': return 'الستوري';
            case 'REEL': return 'الريل';
            case 'CAROUSEL_ALBUM': return 'الكاروسيل';
            default: return 'المنشور';
        }
    }
    
    // ==========================================
    // التحقق من صحة النموذج
    // ==========================================
    function validateForm() {
        if (!selectedMediaType) {
            showAlert('error', 'يجب اختيار نوع المحتوى');
            return false;
        }
        
        if (selectedFiles.length === 0) {
            showAlert('error', 'يجب اختيار ملف واحد على الأقل');
            return false;
        }
        
        // التحقق من نوع الملفات حسب نوع المحتوى
        const hasVideo = selectedFiles.some(file => file.type.startsWith('video/'));
        const hasImage = selectedFiles.some(file => file.type.startsWith('image/'));
        
        if (selectedMediaType === 'REEL' && !hasVideo) {
            showAlert('error', 'الريلز يتطلب ملف فيديو');
            return false;
        }
        
        if (selectedMediaType === 'VIDEO' && !hasVideo) {
            showAlert('error', 'منشور الفيديو يتطلب ملف فيديو');
            return false;
        }
        
        if (selectedMediaType === 'IMAGE' && hasVideo) {
            showAlert('error', 'منشور الصورة لا يدعم ملفات الفيديو');
            return false;
        }
        
        // التحقق من عدد الملفات حسب النوع
        if (selectedMediaType === 'CAROUSEL_ALBUM' && selectedFiles.length < 2) {
            showAlert('error', 'الكاروسيل يحتاج ملفين على الأقل');
            return false;
        }
        
        if (selectedMediaType === 'CAROUSEL_ALBUM' && selectedFiles.length > 10) {
            showAlert('error', 'الكاروسيل يسمح بحد أقصى 10 ملفات');
            return false;
        }
        
        if (['STORY', 'REEL', 'VIDEO', 'IMAGE'].includes(selectedMediaType) && selectedFiles.length > 1) {
            showAlert('error', 'هذا النوع من المحتوى يدعم ملف واحد فقط');
            return false;
        }
        
        const captionInput = document.querySelector('textarea[name="caption"]');
        const caption = captionInput ? captionInput.value.trim() : '';
        if (!caption) {
            showAlert('error', 'يجب كتابة نص للمحتوى');
            return false;
        }
        
        const accountSelect = document.querySelector('select[name="instagram_account_id"]');
        const account = accountSelect ? accountSelect.value : '';
        if (!account) {
            showAlert('error', 'يجب اختيار حساب إنستقرام');
            return false;
        }
        
        return true;
    }
    
    // ==========================================
    // إرسال النموذج
    // ==========================================
    function submitForm(button) {
        const originalText = button.innerHTML;
        button.disabled = true;
        button.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"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 21v-5h5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/></svg> جاري المعالجة...';
        
        // تعطيل جميع الأزرار الأخرى
        document.querySelectorAll('#save-draft-btn, #schedule-btn, #publish-btn').forEach(btn => {
            if (btn !== button) btn.disabled = true;
        });
        
        const form = document.getElementById('post-form');
        if (form) form.submit();
    }
    
    // ==========================================
    // تحديث المعاينة
    // ==========================================
    function updatePreview() {
        const postPreview = document.getElementById('post-preview');
        if (!postPreview) return;
        
        const accountSelect = document.querySelector('select[name="instagram_account_id"]');
        const account = accountSelect ? accountSelect.options[accountSelect.selectedIndex].text : 'اختر حساب';
        
        const captionInput = document.querySelector('textarea[name="caption"]');
        const caption = captionInput ? captionInput.value : '';
        
        const hashtagsInput = document.querySelector('input[name="hashtags"]');
        const hashtags = hashtagsInput ? hashtagsInput.value : '';
        
        let previewHtml = `<div class="instagram-preview bg-white p-4 rounded-lg border">`;
        
        // مؤشر نوع المحتوى
        if (selectedMediaType) {
            const typeNames = {
                'IMAGE': 'منشور صورة',
                'VIDEO': 'منشور فيديو',
                'STORY': 'ستوري', 
                'REEL': 'ريل',
                'CAROUSEL_ALBUM': 'كاروسيل'
            };
            
            previewHtml += `
                <div class="text-center mb-4">
                    <span class="inline-flex items-center rounded-full bg-primary px-3 py-1 text-xs font-medium text-primary-foreground">${typeNames[selectedMediaType]}</span>
                </div>
            `;
        }
        
        previewHtml += `
            <div class="flex items-center gap-3 mb-4">
                <div class="w-8 h-8 bg-gradient-to-br from-purple-600 via-pink-600 to-orange-500 rounded-full flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                        <rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
                        <path d="m13.5 8.5 2-2"/>
                        <path d="m7.5 15.5 2-2"/>
                        <circle cx="9" cy="9" r="2"/>
                        <path d="m13.5 15.5 2 2"/>
                    </svg>
                </div>
                <span class="font-semibold text-sm">${account}</span>
            </div>
        `;
        
        if (selectedFiles.length > 0) {
            previewHtml += `
                <div class="mb-4 bg-muted rounded-lg h-48 flex items-center justify-center">
            `;
            
            if (selectedFiles.length === 1) {
                const file = selectedFiles[0];
                if (file.type.startsWith('video/')) {
                    previewHtml += `
                        <div class="text-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground mb-2 mx-auto">
                                <polygon points="23 7 16 12 23 17 23 7"/>
                                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                            </svg>
                            <div class="text-sm text-muted-foreground">فيديو</div>
                        </div>
                    `;
                } else {
                    previewHtml += `
                        <div class="text-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground mb-2 mx-auto">
                                <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
                                <circle cx="9" cy="9" r="2"/>
                                <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
                            </svg>
                            <div class="text-sm text-muted-foreground">صورة</div>
                        </div>
                    `;
                }
            } else {
                previewHtml += `
                    <div class="text-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground mb-2 mx-auto">
                            <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
                            <circle cx="9" cy="9" r="2"/>
                            <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
                            <rect width="14" height="14" x="7" y="7" rx="2" ry="2" opacity="0.5"/>
                        </svg>
                        <div class="text-sm text-muted-foreground">${selectedFiles.length} ملف</div>
                    </div>
                `;
            }
            
            previewHtml += `</div>`;
        }
        
        if (caption || (hashtags && contentData[selectedMediaType]?.allowHashtags)) {
            let fullCaption = caption;
            if (hashtags && contentData[selectedMediaType]?.allowHashtags) {
                const hashtagList = hashtags.split(',').map(h => '#' + h.trim()).join(' ');
                if (fullCaption) fullCaption += '\n\n';
                fullCaption += hashtagList;
            }
            
            previewHtml += `
                <div class="text-sm whitespace-pre-line">${fullCaption}</div>
            `;
        }
        
        previewHtml += `</div>`;
        
        postPreview.innerHTML = previewHtml;
    }
    
    // ==========================================
    // الاستماع لتغييرات حقول النموذج
    // ==========================================
    document.querySelectorAll('select, input, textarea').forEach(element => {
        element.addEventListener('change', updatePreview);
        element.addEventListener('input', updatePreview);
    });
    
    // ==========================================
    // تحميل التنبيهات من Session عند تحميل الصفحة
    // ==========================================
    @if(session('error'))
        showAlert('error', {!! json_encode(session('error')) !!});
    @endif
    
    @if(session('success'))
        showAlert('success', {!! json_encode(session('success')) !!});
    @endif
    
    @if(session('warning'))
        showAlert('warning', {!! json_encode(session('warning')) !!});
    @endif
    
    // التهيئة الأولية
    updatePreview();
});
</script>

</x-app-layout>