{{-- resources/views/instagram/auto-replies/edit.blade.php --}}
<x-app-layout>
    <x-slot name="title">تعديل الرد التلقائي - {{ $autoReply->name }}</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">تحديث إعدادات "{{ $autoReply->name }}"</p>
</div>

<div class="flex items-center gap-2">
    <a href="{{ route('instagram.auto-replies.show', $autoReply) }}" 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>
    <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">
            <line x1="3" y1="6" x2="21" y2="6"/>
            <line x1="3" y1="12" x2="21" y2="12"/>
            <line x1="3" y1="18" x2="21" y2="18"/>
        </svg>
        القائمة
    </a>
</div>

</div>

<form method="POST" action="{{ route('instagram.auto-replies.update', $autoReply) }}" id="auto-reply-form">
    @csrf
    @method('PUT')
    
    <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', $autoReply->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">حساب إنستقرام</label>
                            <div class="mt-1 p-3 bg-muted/50 rounded-lg border">
                                <div class="flex items-center gap-3">
                                    <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 flex-shrink-0">
                                        <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-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>
                                    <div>
                                        <div class="font-medium text-sm">{{ '@' . $autoReply->instagramAccount->username }}</div>
                                        <small class="text-muted-foreground text-xs">{{ $autoReply->instagramAccount->getDisplayName() }}</small>
                                    </div>
                                </div>
                            </div>
                            <p class="text-muted-foreground text-xs mt-1">لا يمكن تغيير الحساب بعد الإنشاء</p>
                        </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', $autoReply->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', $autoReply->trigger_type) == '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', $autoReply->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', $autoReply->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">
                            @php
                                $keywords = old('keywords', $autoReply->keywords ?? []);
                            @endphp
                            @if(!empty($keywords))
                                @foreach($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', $autoReply->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', $autoReply->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', $autoReply->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-green-600">
                            <path d="M3 3v18h18"/>
                            <rect width="4" height="7" x="7" y="10" rx="1"/>
                            <rect width="4" height="12" x="15" y="5" rx="1"/>
                        </svg>
                        الإحصائيات الحالية
                    </div>
                </div>

                <div data-slot="card-content" class="px-6 text-center">
                    <div class="grid grid-cols-2 gap-4">
                        <div class="stat-item p-4">
                            <div class="text-2xl font-bold text-primary mb-1">{{ $autoReply->usage_count }}</div>
                            <small class="text-muted-foreground">استخدام</small>
                        </div>
                        <div class="stat-item p-4">
                            <div class="text-2xl font-bold text-success mb-1">
                                @if($autoReply->last_used_at)
                                    <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-500 mx-auto">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                @else
                                    <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-gray-400 mx-auto">
                                        <line x1="5" y1="12" x2="19" y2="12"/>
                                    </svg>
                                @endif
                            </div>
                            <small class="text-muted-foreground">آخر استخدام</small>
                        </div>
                    </div>
                    @if($autoReply->last_used_at)
                        <div class="mt-3 pt-3 border-t border-border">
                            <small class="text-muted-foreground">{{ $autoReply->last_used_at->diffForHumans() }}</small>
                        </div>
                    @endif
                </div>
            </div>
            
            <!-- إعدادات متقدمة -->
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                    <div data-slot="card-title" class="font-semibold text-base sm:text-lg flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-orange-600">
                            <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', $autoReply->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', $autoReply->delay_seconds) }}" 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', $autoReply->prevent_duplicate_replies) ? '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', $autoReply->scheduled_start_local ? $autoReply->scheduled_start_local->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', $autoReply->scheduled_end_local ? $autoReply->scheduled_end_local->format('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>

    @if($autoReply->scheduled_start || $autoReply->scheduled_end)
        <div class="px-4 py-3 rounded-lg flex items-center gap-2 {{ $autoReply->isScheduledActive() ? 'bg-green-50 border border-green-200 text-green-700' : 'bg-yellow-50 border border-yellow-200 text-yellow-700' }}">
            @if($autoReply->isScheduledActive())
                <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-600">
                    <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span class="text-sm">الجدولة نشطة حالياً</span>
            @else
                <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-yellow-600">
                    <circle cx="12" cy="12" r="10"/>
                    <polyline points="12 6 12 12 16 14"/>
                </svg>
                <span class="text-sm">خارج وقت الجدولة</span>
            @endif
        </div>
    @endif
</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.show', $autoReply) }}" 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 class="border-t border-border pt-3">
                        <div class="flex gap-2">
                            <form method="POST" action="{{ route('instagram.auto-replies.toggle', $autoReply) }}" class="flex-1">
                                @csrf
                                <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-9 px-4 py-2 has-[>svg]:px-3 w-full {{ $autoReply->is_active ? 'bg-yellow-600 hover:bg-yellow-600/90' : 'bg-green-600 hover:bg-green-600/90' }}">
                                    @if($autoReply->is_active)
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <rect width="4" height="16" x="6" y="4"/>
                                            <rect width="4" height="16" x="14" y="4"/>
                                        </svg>
                                        إيقاف
                                    @else
                                        <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">
                                            <polygon points="5 3 19 12 5 21 5 3"/>
                                        </svg>
                                        تفعيل
                                    @endif
                                </button>
                            </form>

                            <button class="delete-reply 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 hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 rounded-md px-3 border border-red-300 text-red-600 hover:bg-red-50"
                                    data-name="{{ $autoReply->name }}">
                                <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">
                                    <polyline points="3 6 5 6 21 6"/>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                                    <line x1="10" y1="11" x2="10" y2="17"/>
                                    <line x1="14" y1="11" x2="14" y2="17"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </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>

<!-- نافذة تأكيد الحذف -->
<div id="deleteModal" 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-md mx-4">
        <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="closeDeleteModal()">
                <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">
            <p>هل أنت متأكد من حذف الرد التلقائي "<span id="delete-name" class="font-semibold"></span>"؟</p>
            <div class="bg-red-50 border border-red-200 text-red-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">
                    <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>
                <div class="text-sm">
                    <strong>تحذير:</strong> هذا الإجراء لا يمكن التراجع عنه وسيتم فقدان جميع الإحصائيات المرتبطة به.
                </div>
            </div>
        </div>
        <div class="flex items-center justify-end gap-2 p-4 border-t border-border">
            <button type="button" class="inline-flex 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" 
                    onclick="closeDeleteModal()">إلغاء</button>
            <form method="POST" action="{{ route('instagram.auto-replies.destroy', $autoReply) }}" class="inline">
                @csrf
                @method('DELETE')
                <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 text-primary-foreground shadow-xs h-9 px-4 py-2 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">
                        <polyline points="3 6 5 6 21 6"/>
                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                        <line x1="10" y1="11" x2="10" y2="17"/>
                        <line x1="14" y1="11" x2="14" y2="17"/>
                    </svg>
                    حذف نهائي
                </button>
            </form>
        </div>
    </div>
</div>

<!-- مكان للتنبيهات -->
<div id="alerts-container" class="fixed top-4 right-4 z-50 space-y-2"></div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    
    // إظهار/إخفاء قسم الكلمات المفتاحية
    toggleKeywordsSection();
    
    document.querySelectorAll('input[name="trigger_type"]').forEach(radio => {
        radio.addEventListener('change', toggleKeywordsSection);
    });
    
    function toggleKeywordsSection() {
        const selectedType = document.querySelector('input[name="trigger_type"]:checked').value;
        const keywordsSection = document.getElementById('keywords-section');
        const firstKeywordInput = document.querySelector('#keywords-container input[name="keywords[]"]');
        
        if (selectedType === 'keywords') {
            keywordsSection.classList.remove('hidden');
            if (firstKeywordInput) {
                firstKeywordInput.setAttribute('required', 'true');
            }
        } else {
            keywordsSection.classList.add('hidden');
            document.querySelectorAll('#keywords-container input[name="keywords[]"]').forEach(input => {
                input.removeAttribute('required');
            });
        }
    }

    // إضافة/إزالة الكلمات المفتاحية
    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="أدخل كلمة مفتاحية..." required>
                <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);
        }

        if (e.target.closest('.remove-keyword')) {
            e.target.closest('.flex').remove();
        }
    });

    // البحث عن المنشورات
    document.getElementById('search-posts').addEventListener('click', function() {
        const accountId = '{{ $autoReply->instagramAccount->id }}';
        loadPosts(accountId);
        document.getElementById('postsModal').classList.remove('hidden');
    });

    // اختيار منشور
    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', 'تم اختيار المنشور بنجاح');
        }
    });

    // معالج حذف الرد
    document.addEventListener('click', function(e) {
        if (e.target.closest('.delete-reply')) {
            const name = e.target.closest('.delete-reply').dataset.name;
            document.getElementById('delete-name').textContent = name;
            document.getElementById('deleteModal').classList.remove('hidden');
        }
    });

    // التحقق من صحة النموذج
    document.getElementById('auto-reply-form').addEventListener('submit', function(e) {
        const triggerType = document.querySelector('input[name="trigger_type"]:checked').value;
        const replyMessage = document.querySelector('textarea[name="reply_message"]').value.trim();
        const privateMessage = document.querySelector('textarea[name="private_message"]').value.trim();
        
        if (!replyMessage && !privateMessage) {
            e.preventDefault();
            showAlert('danger', 'يجب إدخال رد علني أو رسالة خاصة على الأقل');
            document.querySelector('textarea[name="reply_message"]').focus();
            return false;
        }
        
        if (triggerType === 'keywords') {
            let hasValidKeyword = false;
            document.querySelectorAll('input[name="keywords[]"]').forEach(input => {
                if (input.value.trim()) {
                    hasValidKeyword = true;
                }
            });
            
            if (!hasValidKeyword) {
                e.preventDefault();
                showAlert('danger', 'يجب إدخال كلمة مفتاحية واحدة على الأقل');
                document.getElementById('keywords-section').scrollIntoView();
                return false;
            }
        }
        
        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;
    });
});

// وظائف النوافذ المنبثقة
function closePostsModal() {
    document.getElementById('postsModal').classList.add('hidden');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
}

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

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

// وظائف تحميل المنشورات (مبسطة للتعديل)
function loadPosts(accountId, search = '', after = '') {
    document.getElementById('posts-loading').classList.remove('hidden');
    document.getElementById('posts-list').innerHTML = '';
    
    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 => {
        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 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">` :
                            `<div class="w-15 h-15 bg-muted rounded 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-muted-foreground"><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>
                    <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">
                            <span>${createdTime}</span>
                            <div class="flex items-center gap-3">
                                <span>❤️ ${post.like_count || 0}</span>
                                <span>💬 ${post.comments_count || 0}</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            postsList.appendChild(postHtml);
        });
    })
    .catch(error => {
        showAlert('danger', 'حدث خطأ أثناء تحميل المنشورات');
    })
    .finally(() => {
        document.getElementById('posts-loading').classList.add('hidden');
    });
}

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"/>' },
        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);
    
    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;
}

/* تحسين مظهر الإحصائيات */
.stat-item {
    transition: all 0.2s ease;
}

.stat-item:hover {
    transform: scale(1.05);
}

/* تحسين النوافذ المنبثقة */
#postsModal, #deleteModal {
    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>