{{-- resources/views/instagram/auto-replies/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.auto-replies.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.auto-replies.store') }}" id="auto-reply-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 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">
                            <circle cx="12" cy="12" r="10"/>
                            <path d="m9 12 2 2 4-4"/>
                        </svg>
                        المعلومات الأساسية
                    </div>
                </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>
                            <input type="text" name="name" 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('name') border-red-300 @enderror" 
                                   value="{{ old('name') }}" required placeholder="مثل: ترحيب بالمعلقين الجدد">
                            @error('name')
                                <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="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 mt-1 @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
                            @if($accounts->isEmpty())
                                <p class="text-yellow-600 text-xs mt-1 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">
                                        <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"/>
                                        <line x1="12" y1="9" x2="12" y2="13"/>
                                        <line x1="12" y1="17" x2="12.01" y2="17"/>
                                    </svg>
                                    لا توجد حسابات إنستقرام متاحة. <a href="{{ route('instagram.index') }}" class="text-blue-600 hover:underline">ربط حساب إنستقرام</a>
                                </p>
                            @endif
                        </div>
                    </div>
                    
                    <div>
                        <label class="text-sm font-medium text-foreground">وصف الرد التلقائي</label>
                        <textarea name="description" 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 mt-1 @error('description') border-red-300 @enderror" 
                                  rows="2" placeholder="وصف مختصر لهذا الرد التلقائي...">{{ old('description') }}</textarea>
                        @error('description')
                            <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">
                <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-green-600">
                            <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 space-y-4">
                    <div>
                        <label class="text-sm font-medium text-foreground">نوع التفعيل <span class="text-red-500">*</span></label>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-3">
                            <div class="flex items-start space-x-3 p-3 border rounded-lg hover:bg-accent/50 transition-colors">
                                <input class="mt-1" type="radio" name="trigger_type" 
                                       value="all" id="trigger_all" {{ old('trigger_type', 'all') == 'all' ? 'checked' : '' }}>
                                <label class="flex-1 cursor-pointer" for="trigger_all">
                                    <div class="font-medium text-sm">جميع التعليقات</div>
                                    <small class="text-muted-foreground">الرد على كل تعليق</small>
                                </label>
                            </div>
                            <div class="flex items-start space-x-3 p-3 border rounded-lg hover:bg-accent/50 transition-colors">
                                <input class="mt-1" type="radio" name="trigger_type" 
                                       value="keywords" id="trigger_keywords" {{ old('trigger_type') == 'keywords' ? 'checked' : '' }}>
                                <label class="flex-1 cursor-pointer" for="trigger_keywords">
                                    <div class="font-medium text-sm">كلمات مفتاحية</div>
                                    <small class="text-muted-foreground">الرد عند وجود كلمات محددة</small>
                                </label>
                            </div>
                            <div class="flex items-start space-x-3 p-3 border rounded-lg hover:bg-accent/50 transition-colors">
                                <input class="mt-1" type="radio" name="trigger_type" 
                                       value="new_commenters" id="trigger_new" {{ old('trigger_type') == 'new_commenters' ? 'checked' : '' }}>
                                <label class="flex-1 cursor-pointer" for="trigger_new">
                                    <div class="font-medium text-sm">معلقين جدد</div>
                                    <small class="text-muted-foreground">الرد على المعلقين لأول مرة فقط</small>
                                </label>
                            </div>
                        </div>
                        @error('trigger_type')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div id="keywords-section" class="hidden">
                        <label class="text-sm font-medium text-foreground">الكلمات المفتاحية <span class="text-red-500">*</span></label>
                        <div id="keywords-container" class="space-y-2 mt-2">
                            @if(old('keywords'))
                                @foreach(old('keywords') as $index => $keyword)
                                    <div class="flex gap-2">
                                        <input type="text" name="keywords[]" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 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] flex-1" 
                                               placeholder="أدخل كلمة مفتاحية..." value="{{ $keyword }}">
                                        @if($index == 0)
                                            <button type="button" class="add-keyword inline-flex items-center justify-center whitespace-nowrap 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 rounded-md px-3 bg-green-600 hover:bg-green-600/90">
                                                <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="12" y1="5" x2="12" y2="19"/>
                                                    <line x1="5" y1="12" x2="19" y2="12"/>
                                                </svg>
                                            </button>
                                        @else
                                            <button type="button" class="remove-keyword inline-flex items-center justify-center whitespace-nowrap 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 rounded-md px-3 bg-red-600 hover:bg-red-600/90">
                                                <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="5" y1="12" x2="19" y2="12"/>
                                                </svg>
                                            </button>
                                        @endif
                                    </div>
                                @endforeach
                            @else
                                <div class="flex gap-2">
                                    <input type="text" name="keywords[]" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 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] flex-1" 
                                           placeholder="أدخل كلمة مفتاحية... مثل: شكراً، رائع، ممتاز">
                                    <button type="button" class="add-keyword inline-flex items-center justify-center whitespace-nowrap 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 rounded-md px-3 bg-green-600 hover:bg-green-600/90">
                                        <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="12" y1="5" x2="12" y2="19"/>
                                            <line x1="5" y1="12" x2="19" y2="12"/>
                                        </svg>
                                    </button>
                                </div>
                            @endif
                        </div>
                        @error('keywords')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                        @error('keywords.*')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-muted-foreground text-xs mt-2">أدخل الكلمات التي تريد أن يتم الرد عليها عند ذكرها في التعليقات</p>
                    </div>

                    <div>
                        <label class="text-sm font-medium text-foreground">تطبيق على منشور محدد (اختياري)</label>
                        <div class="flex gap-2 mt-1">
                            <input type="text" name="post_id" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 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] flex-1 @error('post_id') border-red-300 @enderror" 
                                   value="{{ old('post_id') }}" 
                                   placeholder="اتركه فارغاً للتطبيق على جميع منشورات الحساب">
                            <button type="button" 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-primary hover:bg-primary/90" 
                                    id="search-posts">
                                <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="11" cy="11" r="8"/>
                                    <path d="m21 21-4.3-4.3"/>
                                </svg>
                                اختر منشور
                            </button>
                        </div>
                        @error('post_id')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-muted-foreground text-xs mt-1">إذا تم تحديد منشور، سيتم تطبيق الرد التلقائي على هذا المنشور فقط</p>
                    </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-purple-600">
                            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
                        </svg>
                        رسائل الرد
                    </div>
                </div>

                <div data-slot="card-content" class="px-6 space-y-4">
                    <div>
                        <label class="text-sm font-medium text-foreground">الرد العلني</label>
                        <textarea name="reply_message" 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 mt-1 @error('reply_message') border-red-300 @enderror" 
                                  rows="3" placeholder="شكراً لك على التعليق! نقدر تفاعلك معنا ❤️">{{ old('reply_message') }}</textarea>
                        @error('reply_message')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-muted-foreground text-xs mt-1">سيتم نشر هذا الرد كتعليق علني على المنشور</p>
                    </div>

                    <div>
                        <label class="text-sm font-medium text-foreground">الرسالة الخاصة</label>
                        <textarea name="private_message" 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 mt-1 @error('private_message') border-red-300 @enderror" 
                                  rows="3" placeholder="مرحباً! شكراً لتعليقك على منشورنا. نحن نقدر تفاعلك 🙏">{{ old('private_message') }}</textarea>
                        @error('private_message')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-muted-foreground text-xs mt-1">سيتم إرسال هذه الرسالة كرسالة خاصة للمعلق</p>
                    </div>

                    <div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded-lg 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">
                            <circle cx="12" cy="12" r="10"/>
                            <path d="m9 12 2 2 4-4"/>
                        </svg>
                        <div class="text-sm">
                            <strong>ملاحظة مهمة:</strong> يجب إدخال رد علني أو رسالة خاصة على الأقل. يمكنك أيضاً استخدام كلاهما معاً.
                        </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 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">
                            <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
                            <circle cx="12" cy="12" 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">الحد الأقصى للردود</label>
                        <input type="number" name="max_replies" 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('max_replies') border-red-300 @enderror" 
                               value="{{ old('max_replies') }}" min="1" placeholder="غير محدود">
                        @error('max_replies')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-muted-foreground text-xs mt-1">اتركه فارغاً للردود غير المحدودة</p>
                    </div>

                    <div>
                        <label class="text-sm font-medium text-foreground">تأخير الرد (بالثواني)</label>
                        <input type="number" name="delay_seconds" 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('delay_seconds') border-red-300 @enderror" 
                               value="{{ old('delay_seconds', 0) }}" min="0" max="3600">
                        @error('delay_seconds')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-muted-foreground text-xs mt-1">0 = رد فوري، حتى 3600 ثانية (ساعة واحدة)</p>
                    </div>

                    <div class="flex items-center space-x-2">
                        <input type="checkbox" name="prevent_duplicate_replies" 
                               value="1" id="prevent_duplicates" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" {{ old('prevent_duplicate_replies', true) ? 'checked' : '' }}>
                        <label for="prevent_duplicates" class="text-sm font-medium text-foreground">
                            منع الردود المكررة
                        </label>
                    </div>
                    <p class="text-muted-foreground text-xs">لا ترد على نفس المعلق أكثر من مرة</p>
                </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-cyan-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>
        <label class="text-sm font-medium text-foreground">تاريخ البداية</label>
        <input type="datetime-local" name="scheduled_start" 
               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_start') border-red-300 @enderror" 
               value="{{ old('scheduled_start', isset($scheduledStart) ? \App\Helpers\TimeHelper::toUserTimezone($scheduledStart, auth()->user()->timezone, 'Y-m-d\TH:i') : '') }}"
               min="{{ now()->format('Y-m-d\TH:i') }}">
        @error('scheduled_start')
            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
        @enderror
        <p class="text-muted-foreground text-xs mt-1">متى تريد أن يبدأ الرد التلقائي</p>
    </div>

    <div>
        <label class="text-sm font-medium text-foreground">تاريخ النهاية</label>
        <input type="datetime-local" name="scheduled_end" 
               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_end') border-red-300 @enderror" 
               value="{{ old('scheduled_end', isset($scheduledEnd) ? \App\Helpers\TimeHelper::toUserTimezone($scheduledEnd, auth()->user()->timezone, 'Y-m-d\TH:i') : '') }}">
        @error('scheduled_end')
            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
        @enderror
        <p class="text-muted-foreground text-xs mt-1">متى تريد أن يتوقف الرد التلقائي</p>
    </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="submit" 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-10 px-4 py-2 has-[>svg]:px-3 bg-primary hover:bg-primary/90 w-full text-base" id="submit-btn">
                        <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">
                            <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>
                    <a href="{{ route('instagram.auto-replies.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-10 rounded-md px-4 py-2 border border-border w-full">
                        <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">
                            <path d="M18 6 6 18"/>
                            <path d="m6 6 12 12"/>
                        </svg>
                        إلغاء
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>

</div>

<!-- نافذة اختيار المنشورات -->
<div id="postsModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-card rounded-lg border shadow-lg w-full max-w-4xl mx-4 max-h-[80vh] overflow-hidden">
        <div class="flex items-center justify-between p-4 border-b border-border">
            <h5 class="font-semibold">اختيار منشور إنستقرام</h5>
            <button type="button" class="text-muted-foreground hover:text-foreground" onclick="closePostsModal()">
                <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">
                    <path d="M18 6 6 18"/>
                    <path d="m6 6 12 12"/>
                </svg>
            </button>
        </div>
        <div class="p-4 space-y-4 max-h-[calc(80vh-8rem)] overflow-auto">
            <div>
                <input type="text" id="post-search" 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]" 
                       placeholder="البحث في المنشورات...">
            </div>
            <div id="posts-list">
                <!-- Posts will be loaded here -->
            </div>
            <div class="text-center hidden" id="posts-loading">
                <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="animate-spin text-primary mx-auto">
                    <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>
                <p class="text-muted-foreground mt-2">جاري التحميل...</p>
            </div>
        </div>
    </div>
</div>
      <script>
document.addEventListener('DOMContentLoaded', () => {
    // دوال لإدراج النص في موقع المؤشر داخل textarea
    function insertAtCursor(textarea, text) {
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        const value = textarea.value;
        textarea.value = value.substring(0, start) + text + value.substring(end);
        // تحريك المؤشر بعد النص المدخل
        const cursorPos = start + text.length;
        textarea.selectionStart = textarea.selectionEnd = cursorPos;
        textarea.focus();
    }

    // إضافة أزرار إدخال المتغيرات بعد كل textarea
    const fields = [
        {name: 'reply_message', label: 'إدراج مستخدم متغير متغيرات الرد في التعليق'},
        {name: 'private_message', label: 'إدراج مستخدم متغير متغيرات الرسالة الخاصة'}
    ];

    fields.forEach(field => {
        const textarea = document.querySelector(`textarea[name="${field.name}"]`);
        if (!textarea) return;

        // إنشاء div للأزرار
        const container = document.createElement('div');
        container.style.marginTop = '4px';
        container.style.display = 'flex';
        container.style.gap = '8px';

        // زر إدراج {username}
        const btnUsername = document.createElement('button');
        btnUsername.type = 'button';
        btnUsername.textContent = '{username}';
        btnUsername.title = 'إدراج اسم المستخدم (username)';
        btnUsername.className = 'btn btn-sm bg-gray-200 hover:bg-gray-300 rounded px-2 py-1 cursor-pointer';
        btnUsername.addEventListener('click', () => {
            insertAtCursor(textarea, '{username}');
        });

        // زر إدراج {name}
        const btnName = document.createElement('button');
        btnName.type = 'button';
        btnName.textContent = '{name}';
        btnName.title = 'إدراج الاسم الكامل (name)';
        btnName.className = 'btn btn-sm bg-gray-200 hover:bg-gray-300 rounded px-2 py-1 cursor-pointer';
        btnName.addEventListener('click', () => {
            insertAtCursor(textarea, '{name}');
        });

        container.appendChild(btnUsername);
        container.appendChild(btnName);

        // أدخل الأزرار بعد مربع النص
        textarea.insertAdjacentElement('afterend', container);
    });
});
</script>
<!-- مكان للتنبيهات -->
<div id="alerts-container" class="fixed top-4 right-4 z-50 space-y-2"></div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    console.log('✅ Auto-reply form loaded');
    console.log('CSRF Token:', document.querySelector('meta[name="csrf-token"]')?.content);
    
    // =================================================================
    // إظهار/إخفاء قسم الكلمات المفتاحية
    // =================================================================
    
    function toggleKeywordsSection() {
        const selectedType = document.querySelector('input[name="trigger_type"]:checked');
        if (!selectedType) return;
        
        const selectedValue = selectedType.value;
        const keywordsSection = document.getElementById('keywords-section');
        const keywordInputs = document.querySelectorAll('#keywords-container input[name="keywords[]"]');
        
        console.log('🔄 Trigger type changed to:', selectedValue);
        
        if (selectedValue === 'keywords') {
            keywordsSection.classList.remove('hidden');
            // إضافة required فقط للحقل الأول
            if (keywordInputs.length > 0) {
                keywordInputs[0].setAttribute('required', 'true');
            }
        } else {
            keywordsSection.classList.add('hidden');
            // إزالة required من جميع حقول الكلمات المفتاحية
            keywordInputs.forEach(input => {
                input.removeAttribute('required');
            });
        }
    }
    
    // تطبيق عند تحميل الصفحة
    toggleKeywordsSection();
    
    // مراقبة تغيير نوع التفعيل
    document.querySelectorAll('input[name="trigger_type"]').forEach(radio => {
        radio.addEventListener('change', toggleKeywordsSection);
    });

    // =================================================================
    // إضافة/إزالة الكلمات المفتاحية
    // =================================================================
    
    document.addEventListener('click', function(e) {
        // إضافة كلمة مفتاحية جديدة
        if (e.target.closest('.add-keyword')) {
            const container = document.getElementById('keywords-container');
            const newInput = document.createElement('div');
            newInput.className = 'flex gap-2';
            newInput.innerHTML = `
                <input type="text" name="keywords[]" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 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] flex-1" 
                       placeholder="أدخل كلمة مفتاحية...">
                <button type="button" class="remove-keyword inline-flex items-center justify-center whitespace-nowrap 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 rounded-md px-3 bg-red-600 hover:bg-red-600/90">
                    <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="5" y1="12" x2="19" y2="12"/>
                    </svg>
                </button>
            `;
            container.appendChild(newInput);
            console.log('➕ New keyword input added');
        }

        // إزالة كلمة مفتاحية
        if (e.target.closest('.remove-keyword')) {
            const keywordContainer = e.target.closest('.flex');
            const container = document.getElementById('keywords-container');
            
            // لا تسمح بحذف الحقل الأخير
            if (container.querySelectorAll('.flex').length > 1) {
                keywordContainer.remove();
                console.log('➖ Keyword input removed');
            } else {
                showAlert('warning', 'يجب الاحتفاظ بحقل واحد على الأقل للكلمات المفتاحية');
            }
        }
    });

    // =================================================================
    // البحث عن المنشورات
    // =================================================================
    
    document.getElementById('search-posts').addEventListener('click', function() {
        const accountId = document.querySelector('select[name="instagram_account_id"]').value;
        if (!accountId) {
            showAlert('warning', 'يرجى اختيار حساب إنستقرام أولاً');
            document.querySelector('select[name="instagram_account_id"]').focus();
            return;
        }
        
        loadPosts(accountId);
        document.getElementById('postsModal').classList.remove('hidden');
    });

    // تحميل المزيد من المنشورات
    document.addEventListener('click', function(e) {
        if (e.target.closest('#load-more-posts')) {
            const accountId = document.querySelector('select[name="instagram_account_id"]').value;
            const search = document.getElementById('post-search').value;
            const after = e.target.closest('#load-more-posts').dataset.after;
            
            e.target.closest('#load-more-posts').remove();
            loadPosts(accountId, search, after);
        }
    });

    // اختيار منشور
    document.addEventListener('click', function(e) {
        if (e.target.closest('.post-item')) {
            const postId = e.target.closest('.post-item').dataset.postId;
            document.querySelector('input[name="post_id"]').value = postId;
            closePostsModal();
            showAlert('success', 'تم اختيار المنشور بنجاح');
        }
    });

    // البحث في المنشورات مع تأخير
    let searchTimeout;
    document.getElementById('post-search').addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const accountId = document.querySelector('select[name="instagram_account_id"]').value;
        const search = this.value;
        
        if (accountId) {
            searchTimeout = setTimeout(function() {
                loadPosts(accountId, search);
            }, 500);
        }
    });

    // =================================================================
    // التحقق من صحة النموذج قبل الإرسال
    // =================================================================
    
    document.getElementById('auto-reply-form').addEventListener('submit', function(e) {
        console.log('📝 Form submission started...');
        
        // التحقق من الحساب
        const accountId = document.querySelector('select[name="instagram_account_id"]').value;
        if (!accountId) {
            e.preventDefault();
            showAlert('danger', 'يجب اختيار حساب إنستقرام');
            document.querySelector('select[name="instagram_account_id"]').focus();
            return false;
        }
        console.log('✅ Account ID:', accountId);
        
        // التحقق من اسم الرد
        const name = document.querySelector('input[name="name"]').value.trim();
        if (!name) {
            e.preventDefault();
            showAlert('danger', 'يجب إدخال اسم للرد التلقائي');
            document.querySelector('input[name="name"]').focus();
            return false;
        }
        console.log('✅ Name:', name);
        
        const triggerType = document.querySelector('input[name="trigger_type"]:checked').value;
        console.log('✅ Trigger type:', triggerType);
        
        // التحقق من الكلمات المفتاحية إذا كان النوع keywords
        if (triggerType === 'keywords') {
            let hasValidKeyword = false;
            const keywordInputs = document.querySelectorAll('input[name="keywords[]"]');
            
            console.log('🔍 Keywords inputs found:', keywordInputs.length);
            
            // إزالة الحقول الفارغة وعدّ الصحيحة
            keywordInputs.forEach(input => {
                const value = input.value.trim();
                if (value) {
                    hasValidKeyword = true;
                    console.log('✅ Valid keyword found:', value);
                } else {
                    // إزالة attribute required من الحقول الفارغة
                    input.removeAttribute('required');
                }
            });
            
            if (!hasValidKeyword) {
                e.preventDefault();
                showAlert('danger', 'يجب إدخال كلمة مفتاحية واحدة على الأقل عند اختيار "كلمات مفتاحية"');
                document.getElementById('keywords-section').scrollIntoView({ behavior: 'smooth' });
                
                // التركيز على أول حقل كلمات مفتاحية
                const firstKeywordInput = document.querySelector('#keywords-container input[name="keywords[]"]');
                if (firstKeywordInput) {
                    setTimeout(() => firstKeywordInput.focus(), 300);
                }
                return false;
            }
        } else {
            // إذا لم يكن النوع keywords، إزالة required من جميع حقول الكلمات المفتاحية
            document.querySelectorAll('input[name="keywords[]"]').forEach(input => {
                input.removeAttribute('required');
            });
        }
        
        // التحقق من الرسائل
        const replyMessage = document.querySelector('textarea[name="reply_message"]').value.trim();
        const privateMessage = document.querySelector('textarea[name="private_message"]').value.trim();
        
        console.log('Reply message:', replyMessage ? 'exists (' + replyMessage.length + ' chars)' : 'empty');
        console.log('Private message:', privateMessage ? 'exists (' + privateMessage.length + ' chars)' : 'empty');
        
        if (!replyMessage && !privateMessage) {
            e.preventDefault();
            showAlert('danger', 'يجب إدخال رد علني أو رسالة خاصة على الأقل');
            document.querySelector('textarea[name="reply_message"]').focus();
            return false;
        }
        console.log('✅ Messages validation passed');
        
        // تعطيل زر الإرسال لمنع الإرسال المتكرر
        const submitBtn = document.getElementById('submit-btn');
        submitBtn.innerHTML = '<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="animate-spin"><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> جاري الحفظ...';
        submitBtn.disabled = true;
        
        console.log('✅ Form validation passed, submitting...');
        return true;
    });
});

// =================================================================
// وظائف النوافذ المنبثقة
// =================================================================

function closePostsModal() {
    document.getElementById('postsModal').classList.add('hidden');
}

// إغلاق النوافذ عند النقر خارجها أو الضغط على Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closePostsModal();
    }
});

window.addEventListener('click', function(e) {
    if (e.target === document.getElementById('postsModal')) {
        closePostsModal();
    }
});

// =================================================================
// وظائف تحميل المنشورات
// =================================================================

function loadPosts(accountId, search = '', after = '') {
    document.getElementById('posts-loading').classList.remove('hidden');
    document.getElementById('posts-list').innerHTML = '';
    
    console.log('📥 Loading posts...', { accountId, search, after });
    
    const url = '/instagram/search-instagram-posts';
    
    fetch(url + '?' + new URLSearchParams({
        instagram_account_id: accountId,
        search: search,
        after: after
    }), {
        method: 'GET',
        headers: {
            'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log('✅ Posts response:', data);
        
        if (!data.success) {
            showAlert('danger', data.error || 'فشل في تحميل المنشورات');
            return;
        }
        
        const postsList = document.getElementById('posts-list');
        
        if (!data.posts || data.posts.length === 0) {
            postsList.innerHTML = `
                <div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded-lg 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">
                        <circle cx="12" cy="12" r="10"/>
                        <path d="m9 12 2 2 4-4"/>
                    </svg>
                    <span>لم يتم العثور على منشورات</span>
                </div>
            `;
            return;
        }
        
        data.posts.forEach(post => {
            const caption = post.caption ? post.caption.substring(0, 100) + '...' : 'بدون نص';
            const mediaType = getMediaTypeIcon(post.media_type);
            const createdTime = new Date(post.timestamp).toLocaleDateString('ar');
            
            const postHtml = document.createElement('div');
            postHtml.className = 'post-item p-4 border rounded-lg hover:bg-accent/50 cursor-pointer transition-colors';
            postHtml.dataset.postId = post.id;
            postHtml.innerHTML = `
                <div class="flex gap-3">
                    <div class="flex-shrink-0">
                        ${post.media_url ? 
                            `<img src="${post.media_url}" class="w-15 h-15 rounded object-cover" alt="Post media" onerror="this.style.display='none'">` :
                            `<div class="w-15 h-15 bg-muted rounded flex items-center justify-center">${mediaType}</div>`
                        }
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm mb-2 line-clamp-2">${caption}</p>
                        <div class="flex justify-between items-center text-xs text-muted-foreground">
                            <div class="flex items-center gap-2">
                                <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">
                                    <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>
                                ${createdTime}
                                ${mediaType}
                            </div>
                            <div class="flex items-center gap-3">
                                <span 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">
                                        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"/>
                                    </svg>
                                    ${post.like_count || 0}
                                </span>
                                <span 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">
                                        <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
                                    </svg>
                                    ${post.comments_count || 0}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            postsList.appendChild(postHtml);
        });

        // زر تحميل المزيد إذا كان هناك صفحة تالية
        if (data.nextPage) {
            const loadMoreBtn = document.createElement('div');
            loadMoreBtn.className = 'text-center';
            loadMoreBtn.innerHTML = `
                <button class="inline-flex items-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="load-more-posts" data-after="${data.nextPage}">
                    <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="12" y1="5" x2="12" y2="19"/>
                        <line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                    تحميل المزيد
                </button>
            `;
            postsList.appendChild(loadMoreBtn);
        }
    })
    .catch(error => {
        console.error('❌ Posts API error:', error);
        showAlert('danger', 'حدث خطأ أثناء تحميل المنشورات');
    })
    .finally(() => {
        document.getElementById('posts-loading').classList.add('hidden');
    });
}

function getMediaTypeIcon(mediaType) {
    switch(mediaType) {
        case 'VIDEO': 
            return '<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-red-500"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>';
        case 'CAROUSEL_ALBUM': 
            return '<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-blue-500"><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>';
        default: 
            return '<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"><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>';
    }
}

// =================================================================
// إظهار التنبيهات
// =================================================================

function showAlert(type, message) {
    const container = document.getElementById('alerts-container');
    const alertDiv = document.createElement('div');
    
    const styles = {
        success: { 
            bg: 'bg-green-500', 
            icon: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>' 
        },
        warning: { 
            bg: 'bg-yellow-500', 
            icon: '<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"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>' 
        },
        danger: { 
            bg: 'bg-red-500', 
            icon: '<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"/>' 
        }
    };
    
    const style = styles[type] || styles.danger;
    
    alertDiv.className = `${style.bg} text-white px-4 py-3 rounded shadow-lg flex items-center gap-2 min-w-80 max-w-md`;
    alertDiv.innerHTML = `
        <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">
            ${style.icon}
        </svg>
        <span class="flex-1">${message}</span>
        <button type="button" class="text-white/80 hover:text-white" onclick="this.parentElement.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">
                <path d="M18 6 6 18"/>
                <path d="m6 6 12 12"/>
            </svg>
        </button>
    `;
    
    container.appendChild(alertDiv);
    
    // إزالة التنبيه تلقائياً بعد 5 ثوانٍ
    setTimeout(() => {
        alertDiv.style.opacity = '0';
        alertDiv.style.transform = 'translateX(100%)';
        setTimeout(() => alertDiv.remove(), 300);
    }, 5000);
}
</script>



<style>
/* تأثيرات إضافية للنماذج */
input[type="radio"]:checked + label {
    color: rgb(59 130 246);
    font-weight: 600;
}

.post-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* تحسين مظهر الأزرار */
button:hover {
    transform: translateY(-1px);
}

/* تحسين النوافذ المنبثقة */
#postsModal {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* تحسين التجاوب */
@media (max-width: 768px) {
    .grid.grid-cols-1.md\\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    .w-15 {
        width: 3rem;
    }
    
    .h-15 {
        height: 3rem;
    }
}

/* تحسين مظهر التنبيهات */
#alerts-container > * {
    transition: all 0.3s ease;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
</style>

</x-app-layout>