{{-- resources/views/auto-replies/show.blade.php --}}
<x-app-layout>
    <x-slot name="title">تفاصيل الرد التلقائي - {{ $autoReply->name }}</x-slot>
    
    @php
        // 1. تحليل إعدادات فلترة الإساءة
        $offensiveSettings = $autoReply->offensive_settings ? json_decode($autoReply->offensive_settings, true) : [];
        $offensiveKeywords = $offensiveSettings['keywords'] ?? [];
        $offensiveAction = $offensiveSettings['action'] ?? 'hide';
        $offensiveReplyMessage = $offensiveSettings['reply_message'] ?? null;

        // 2. تحليل إعدادات الـ AI (ملاحظة: تم استخدام الأعمدة المباشرة كما هي في قاعدة البيانات)
        $aiProvider = $autoReply->ai_provider;
        $aiModel = $autoReply->ai_model;
        $aiInstructions = $autoReply->ai_instructions;
        $aiContext = $autoReply->ai_context;
        $aiTemperature = $autoReply->ai_temperature ?? 0.7;
        $aiMaxTokens = $autoReply->ai_max_tokens ?? 300;
        $aiUseCommentContext = $autoReply->ai_use_comment_context ?? true;
        $aiFallbackMessage = $autoReply->ai_fallback_message;

    // 3. تحليل إعدادات الرسالة الخاصة المتقدمة
    $pmType = $autoReply->private_message_type ?? 'text';
    $pmMediaUrl = $autoReply->private_message_media_url;
    $pmMediaMethod = $autoReply->private_message_media_method;

    $pmButtonsRaw = $autoReply->private_message_buttons;
    $pmQuickRepliesRaw = $autoReply->private_message_quick_replies;

    $pmButtons = is_string($pmButtonsRaw)
        ? json_decode($pmButtonsRaw, true)
        : (is_array($pmButtonsRaw) ? $pmButtonsRaw : []);

    $pmQuickReplies = is_string($pmQuickRepliesRaw)
        ? json_decode($pmQuickRepliesRaw, true)
        : (is_array($pmQuickRepliesRaw) ? $pmQuickRepliesRaw : []);
@endphp


    <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" 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>
                    {{ $autoReply->name }}
                </h1>
                <p class="text-muted-foreground flex items-center gap-4 mt-1">
                    <span class="flex items-center gap-1">
                        @if($autoReply->status === 'active')
                            <span class="inline-flex items-center rounded-full bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-600 status-badge">نشط</span>
                        @else
                            <span class="inline-flex items-center rounded-full bg-red-500/20 px-2 py-0.5 text-xs font-medium text-red-600 status-badge">غير نشط</span>
                        @endif
                    </span>
                    <span class="flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
                        {{ $autoReply->created_at->format('d/m/Y') }}
                    </span>
                </p>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('auto-replies.index') }}"
                   class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-all hover:bg-accent hover:text-accent-foreground h-9 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"></circle>
                        <path d="M12 8l-4 4 4 4M16 12H9"></path>
                    </svg>
                    العودة للقائمة
                </a>
                <a href="{{ route('auto-replies.edit', $autoReply) }}"
                   class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium text-primary-foreground shadow-xs h-9 px-4 py-2 bg-primary hover:bg-primary/90 transition-all">
                    <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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                        <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                    </svg>
                    تعديل
                </a>
                <form class="auto-reply-toggle-form" method="POST" action="{{ route('auto-replies.toggle', $autoReply) }}">
                    @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 {{ $autoReply->status === 'active' ? 'bg-yellow-600 hover:bg-yellow-600/90' : 'bg-green-600 hover:bg-green-600/90' }}">
                        @if($autoReply->status === 'active')
                            <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">
                                <rect width="4" height="16" x="6" y="4"></rect>
                                <rect width="4" height="16" x="14" y="4"></rect>
                            </svg>
                            إيقاف
                        @else
                            <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">
                                <polygon points="5 3 19 12 5 21 5 3"></polygon>
                            </svg>
                            تفعيل
                        @endif
                    </button>
                </form>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            <div class="lg:col-span-2 space-y-6">

                {{-- 1. المعلومات الأساسية --}}
                <div class="bg-card text-card-foreground rounded-xl border py-6 shadow-sm">
                    <div class="flex items-center justify-between px-6 border-b border-border pb-5">
                        <h2 class="font-semibold text-lg flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-600" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10"/>
                                <path d="m9 12 2 2 4-4"/>
                            </svg>
                            المعلومات الأساسية
                        </h2>
                    </div>
                    <div class="px-6 space-y-4 mt-4 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">اسم الرد التلقائي</label>
                            <div class="mt-1 text-sm font-medium">{{ $autoReply->name }}</div>
                        </div>
                        <div>
                            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">الصفحة</label>
                            <div class="mt-1">
                                <span
                                    class="inline-flex items-center rounded-md bg-blue-100 dark:bg-blue-900/50 px-2 py-0.5 text-xs font-medium text-blue-800 dark:text-blue-200">
                                    {{ $autoReply->page->name ?? 'غير محدد' }}
                                </span>
                            </div>
                        </div>

                        <div class="md:col-span-2">
                            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">الوصف</label>
                            <div class="mt-1 text-sm">{{ $autoReply->description ?? 'لا يوجد' }}</div>
                        </div>

                        <div>
                            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">نوع التفعيل</label>
                            <div class="mt-1">
                                <span
                                    class="inline-flex items-center rounded-full bg-primary/20 px-2 py-1 text-xs font-medium text-primary">
                                    @switch($autoReply->trigger_type)
                                        @case('all')
                                            جميع التعليقات
                                            @break
                                        @case('keywords')
                                            كلمات مفتاحية
                                            @break
                                        @case('new_commenters')
                                            معلقين جدد
                                            @break
                                        @default
                                            غير محدد
                                    @endswitch
                                </span>
                            </div>
                        </div>

                        <div>
                            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">الحالة</label>
                            <div class="mt-1 status-text-{{ $autoReply->id }}">
                                {{ $autoReply->status === 'active' ? 'نشط' : 'غير نشط' }}
                            </div>
                        </div>

                        @if($autoReply->post_id)
                            <div class="md:col-span-2 flex items-center gap-2">
                                <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">منشور محدد</label>
                                <code
                                    class="bg-muted px-2 py-1 rounded text-xs cursor-default select-all">{{ $autoReply->post_id }}</code>
                                <a href="https://facebook.com/p/{{ $autoReply->post_id }}" target="_blank"
                                   class="inline-flex items-center gap-1 rounded-md text-xs font-medium transition-all hover:bg-accent hover:text-accent-foreground h-7 px-3 border border-border">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none"
                                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            viewBox="0 0 24 24">
                                        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                                        <polyline points="15 3 21 3 21 9"/>
                                        <line x1="10" y1="14" x2="21" y2="3"/>
                                    </svg>
                                    عرض المنشور
                                </a>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- 2. الكلمات المفتاحية --}}
                @if($autoReply->trigger_type === 'keywords' && !empty($triggerKeywords))
                    <div class="bg-card text-card-foreground rounded-xl border py-6 shadow-sm">
                        <div class="flex items-center justify-between px-6 border-b border-border pb-5">
                            <h2 class="font-semibold text-lg flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-600" fill="none"
                                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        viewBox="0 0 24 24">
                                    <circle cx="7" cy="9" r="4"/>
                                    <path d="m9 9 3 11 4-9 4 9 3-11"/>
                                    <circle cx="15" cy="9" r="4"/>
                                </svg>
                                الكلمات المفتاحية
                            </h2>
                        </div>
                        <div class="px-6 mt-4 space-y-4">
                            <div class="flex flex-wrap gap-2">
                                @foreach ($triggerKeywords as $keyword)
                                    <span
                                        class="inline-flex items-center rounded-full bg-secondary px-3 py-1 text-sm font-medium text-secondary-foreground cursor-pointer transition-transform hover:scale-105 keyword-badge">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none"
                                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="ml-1" viewBox="0 0 24 24">
                                            <line x1="4" y1="9" x2="20" y2="9"/>
                                            <line x1="4" y1="15" x2="20" y2="15"/>
                                            <line x1="10" y1="3" x2="8" y2="21"/>
                                            <line x1="16" y1="3" x2="14" y2="21"/>
                                        </svg>
                                        {{ $keyword }}
                                    </span>
                                @endforeach
                            </div>
                            <div class="bg-blue-50 border border-blue-200 text-blue-700 dark:bg-blue-900/20 dark:border-blue-700 dark:text-blue-200 px-4 py-3 rounded-lg flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                    <circle cx="12" cy="12" r="10"/>
                                    <path d="m9 12 2 2 4-4"/>
                                </svg>
                                <span class="text-sm">سيتم تفعيل الرد التلقائي عند وجود أي من هذه الكلمات في التعليق.</span>
                            </div>
                        </div>
                    </div>
                @endif
                
                {{-- 3. إعدادات الرد بالذكاء الاصطناعي (AI) --}}
                @if($autoReply->use_ai_reply)
                    <div class="bg-card text-card-foreground rounded-xl border py-6 shadow-sm bg-gradient-to-br from-purple-50/50 to-indigo-50/50 dark:from-purple-900/20 dark:to-indigo-900/20">
                        <div class="flex items-center justify-between px-6 border-b border-purple-200 dark:border-purple-700 pb-5">
                            <h2 class="font-semibold text-lg flex items-center gap-2 text-purple-600">
                                <i class="fas fa-brain text-purple-600 w-6 h-6"></i>
                                🤖 الرد بالذكاء الاصطناعي
                            </h2>
                            <span class="inline-flex items-center rounded-full bg-purple-600/20 px-2 py-0.5 text-xs font-medium text-purple-600">مفعل</span>
                        </div>
                        <div class="px-6 mt-4 space-y-4">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">المزود</label>
                                    <div class="mt-1 text-sm font-medium">{{ $aiProvider }}</div>
                                </div>
                                <div>
                                    <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">النموذج</label>
                                    <div class="mt-1 text-sm font-medium">{{ $aiModel ?? 'غير محدد' }}</div>
                                </div>
                                <div>
                                    <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">الإبداعية (Temp)</label>
                                    <div class="mt-1 text-sm font-medium">{{ $aiTemperature }}</div>
                                </div>
                                <div>
                                    <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">أقصى طول</label>
                                    <div class="mt-1 text-sm font-medium">{{ $aiMaxTokens }} كلمة</div>
                                </div>
                                <div class="col-span-2">
                                    <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">استخدام سياق التعليق</label>
                                    <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {{ $aiUseCommentContext ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                        {{ $aiUseCommentContext ? 'نعم' : 'لا' }}
                                    </span>
                                </div>
                            </div>
                            
                            <hr class="my-3 border-purple-200 dark:border-purple-700/50">

                            <div>
                                <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">تعليمات الـ AI (الـ Prompt)</label>
                                <div class="mt-1 text-sm bg-purple-100 dark:bg-purple-900/20 p-3 rounded-lg whitespace-pre-wrap">{{ $aiInstructions ?? 'لا توجد تعليمات' }}</div>
                            </div>

                            @if($aiContext)
                            <div>
                                <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">السياق الإضافي</label>
                                <div class="mt-1 text-sm bg-purple-50 dark:bg-purple-900/30 p-3 rounded-lg whitespace-pre-wrap">{{ $aiContext }}</div>
                            </div>
                            @endif

                            @if($aiFallbackMessage)
                            <div>
                                <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">رسالة بديلة (عند الفشل)</label>
                                <div class="mt-1 text-sm bg-yellow-50 dark:bg-yellow-900/30 p-3 rounded-lg">{{ $aiFallbackMessage }}</div>
                            </div>
                            @endif
                        </div>
                    </div>
                @endif
                
                {{-- 4. الرسائل والمرفقات (العلنية والخاصة) --}}
                <div class="bg-card text-card-foreground rounded-xl border py-6 shadow-sm">
                    <div class="flex items-center justify-between px-6 border-b border-border pb-5">
                        <h2 class="font-semibold text-lg flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-purple-600" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                viewBox="0 0 24 24">
                                <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
                            </svg>
                            رسائل الرد والمرفقات
                        </h2>
                    </div>
                    <div class="px-6 mt-4 space-y-6">
                        
                        {{-- الرد العلني (يدوي) --}}
                        @if($autoReply->reply_message && !$autoReply->use_ai_reply)
                        <div class="reply-message-box border-r-4 border-r-primary pr-4 hover:translate-x-[-2px] transition-transform">
                            <div class="flex items-center gap-2 mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-primary" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                    <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
                                </svg>
                                <span class="font-semibold text-sm">الرد العلني</span>
                                <span class="inline-flex items-center rounded-full bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">تعليق مباشر</span>
                            </div>
                            <div class="message-preview bg-muted/50 rounded-2xl p-4 max-w-full inline-block">
                                <p class="text-sm mb-0 whitespace-pre-wrap">{{ $autoReply->reply_message }}</p>
                            </div>
                        </div>
                        @elseif($autoReply->use_ai_reply)
                        <div class="reply-message-box border-r-4 border-r-purple-500 pr-4 hover:translate-x-[-2px] transition-transform">
                            <div class="flex items-center gap-2 mb-3">
                                <i class="fas fa-robot w-4 h-4 text-purple-500"></i>
                                <span class="font-semibold text-sm text-purple-600">الرد العلني (AI)</span>
                                <span class="inline-flex items-center rounded-full bg-purple-100 px-2 py-1 text-xs font-medium text-purple-600">مولّد بالذكاء الاصطناعي</span>
                            </div>
                            <div class="message-preview bg-purple-50/50 rounded-2xl p-4 max-w-full inline-block">
                                <p class="text-sm mb-0 text-muted-foreground">سيتم توليد الرد بناءً على التعليمات المحددة في قسم الـ AI.</p>
                            </div>
                        </div>
                        @endif

                        {{-- المرفق العلني (Attachment Display) --}}
                        @if($autoReply->attachment_url && $autoReply->attachment_type)
                            <div class="attachment-box border-l-4 border-l-orange-500 pl-4 bg-orange-50/50 p-4 rounded-lg space-y-3">
                                <div class="font-semibold text-sm flex items-center gap-2 text-orange-600">
                                       <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                           <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19 7 7 4-4 2 2-4 4 2 2z"/>
                                           <line x1="5" y1="17" x2="19" y2="3"/>
                                       </svg>
                                       مرفق علني ({{ $autoReply->attachment_type === 'image' ? 'صورة' : 'فيديو' }})
                                </div>

                                <div class="bg-card border rounded-lg p-3 text-center">
                                    @if($autoReply->attachment_type === 'image')
                                        <img src="{{ $autoReply->attachment_url }}" alt="Attachment Preview" class="max-h-60 w-auto h-auto rounded-md mx-auto">
                                    @elseif($autoReply->attachment_type === 'video')
                                        <video src="{{ $autoReply->attachment_url }}" controls class="max-w-full max-h-60 rounded-md mx-auto"></video>
                                    @endif
                                    <p class="text-xs text-muted-foreground mt-2 break-all">
                                        المصدر: {{ $autoReply->attachment_method === 'url' ? 'رابط خارجي' : 'ملف مُحمّل' }}
                                    </p>
                                    <p class="text-xs text-muted-foreground mt-1 break-all">{{ Str::limit($autoReply->attachment_url, 70) }}</p>
                                </div>
                            </div>
                        @endif

                        <hr class="my-3 border-border">

                        {{-- الرسالة الخاصة (Messenger) --}}
                        @if($autoReply->private_message)
                        <div class="reply-message-box border-r-4 border-r-cyan-500 pr-4 hover:translate-x-[-2px] transition-transform">
                            <div class="flex items-center gap-2 mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-cyan-600" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                    <rect width="20" height="16" x="2" y="4" rx="2"/>
                                    <path d="m22 7-10 5L2 7"/>
                                </svg>
                                <span class="font-semibold text-sm">الرسالة الخاصة</span>
                                <span class="inline-flex items-center rounded-full bg-cyan-100 px-2 py-1 text-xs font-medium text-cyan-600">النوع: {{ $pmType === 'text' ? 'نص فقط' : ($pmType === 'image' ? 'صورة' : ($pmType === 'video' ? 'فيديو' : ($pmType === 'quick_replies' ? 'ردود سريعة' : 'أزرار'))) }}</span>
                            </div>
                            <div class="message-preview bg-gradient-to-r from-purple-500 to-blue-600 text-white rounded-2xl p-4 max-w-full inline-block">
                                <p class="text-sm mb-0 whitespace-pre-wrap">{{ $autoReply->private_message }}</p>

                                {{-- Media Attachment for PM --}}
                                @if(in_array($pmType, ['image', 'video']) && $pmMediaUrl)
                                    <div class="mt-4 border-t border-white/30 pt-3 text-center">
                                        <p class="text-xs mb-2">مرفق رسالة خاصة:</p>
                                        @if($pmType === 'image')
                                            <img src="{{ $pmMediaUrl }}" alt="PM Image" class="max-h-40 w-auto h-auto rounded-md mx-auto">
                                        @elseif($pmType === 'video')
                                            <video src="{{ $pmMediaUrl }}" controls class="max-w-full max-h-40 rounded-md mx-auto"></video>
                                        @endif
                                        <p class="text-xs opacity-70 mt-1 break-all">{{ Str::limit($pmMediaUrl, 50) }}</p>
                                    </div>
                                @endif

                                {{-- Quick Replies Display --}}
                                @if($pmType === 'quick_replies' && !empty($pmQuickReplies))
                                    <div class="mt-4 border-t border-white/30 pt-3 text-center">
                                        <p class="text-xs mb-2 font-semibold">ردود سريعة:</p>
                                        <div class="flex flex-wrap justify-center gap-2">
                                            @foreach($pmQuickReplies as $reply)
                                                <span class="inline-flex items-center rounded-full bg-white text-gray-800 px-3 py-1 text-xs font-medium">
                                                    {{ $reply['title'] ?? 'زر' }}
                                                </span>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                                {{-- Buttons Display --}}
                                @if($pmType === 'buttons' && !empty($pmButtons))
                                    <div class="mt-4 border-t border-white/30 pt-3 text-center">
                                        <p class="text-xs mb-2 font-semibold">أزرار تفاعلية:</p>
                                        <div class="flex flex-wrap justify-center gap-2">
                                            @foreach($pmButtons as $button)
                                                <span class="inline-flex items-center rounded-md bg-white text-blue-600 px-3 py-1 text-xs font-medium shadow-sm">
                                                    <i class="fas fa-{{ ($button['type'] ?? 'web_url') === 'web_url' ? 'link' : 'bolt' }} me-1"></i>
                                                    {{ $button['title'] ?? 'زر' }}
                                                </span>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                            </div>
                        </div>
                        @endif
                    </div>
                </div>

            </div>

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

                {{-- 5. إحصائيات الاستخدام --}}
                <div class="bg-card text-card-foreground rounded-xl border py-6 shadow-sm">
                    <div class="flex items-center justify-between px-6 border-b border-border pb-5">
                        <h2 class="font-semibold text-lg flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-green-600" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                viewBox="0 0 24 24">
                                <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>
                            إحصائيات الاستخدام
                        </h2>
                    </div>
                    <div class="px-6 mt-4 space-y-4">
                        <div class="text-center p-4 bg-muted/50 rounded-lg mb-4">
                            <div class="text-3xl font-bold text-primary mb-1">{{ $autoReply->reply_count ?? 0 }}</div>
                            <div class="text-sm text-muted-foreground">إجمالي الردود</div>
                        </div>

                        <div class="grid grid-cols-2 gap-3 mb-4">
                            <div class="text-center p-3 border rounded-lg">
                                <div class="text-lg font-semibold text-green-600 mb-1">{{ $autoReply->max_replies ?? '∞' }}</div>
                                <div class="text-xs text-muted-foreground">الحد الأقصى للردود</div>
                            </div>
                            <div class="text-center p-3 border rounded-lg">
                                <div class="text-lg font-semibold text-cyan-600 mb-1">{{ $autoReply->delay_seconds ?? 0 }}s</div>
                                <div class="text-xs text-muted-foreground">تأخير الرد</div>
                            </div>
                            
                            {{-- إحصائيات AI --}}
                            @if($autoReply->use_ai_reply)
                                <div class="text-center p-3 border rounded-lg col-span-2 bg-purple-50/50">
                                    <div class="grid grid-cols-2">
                                        <div>
                                            <div class="text-lg font-semibold text-purple-600 mb-1">{{ $autoReply->ai_replies_count ?? 0 }}</div>
                                            <div class="text-xs text-muted-foreground">ردود AI</div>
                                        </div>
                                        <div>
                                            <div class="text-lg font-semibold text-red-600 mb-1">${{ number_format($autoReply->ai_total_cost ?? 0, 6) }}</div>
                                            <div class="text-xs text-muted-foreground">إجمالي تكلفة AI</div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        @if($autoReply->last_used_at)
                            <div class="p-3 bg-muted/50 rounded-lg">
                                <div class="text-xs text-muted-foreground mb-1">آخر استخدام</div>
                                <div class="font-medium text-sm">{{ $autoReply->last_used_at->format('d/m/Y H:i') }}</div>
                                <div class="text-xs text-green-600">{{ $autoReply->last_used_at->diffForHumans() }}</div>
                            </div>
                        @else
                            <div class="text-center p-3 bg-muted/50 rounded-lg">
                                <div class="text-xs text-muted-foreground">لم يتم الاستخدام بعد</div>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- 6. الإعدادات المتقدمة (تم دمجها مع فلترة الإساءة) --}}
                <div class="bg-card text-card-foreground rounded-xl border py-6 shadow-sm">
                    <div class="flex items-center justify-between px-6 border-b border-border pb-5">
                        <h2 class="font-semibold text-lg flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-orange-600" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                viewBox="0 0 24 24">
                                <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>
                            الإعدادات المتقدمة
                        </h2>
                    </div>
                    <div class="px-6 mt-4 space-y-4">
                        
                        {{-- منع الردود المكررة --}}
                        <div class="setting-item flex justify-between items-start p-3 border rounded-lg">
                            <div class="space-y-1">
                                <div class="font-medium text-sm">منع الردود المكررة</div>
                                <div class="text-xs text-muted-foreground">عدم الرد على نفس المعلق مرتين</div>
                            </div>
                            <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {{ $autoReply->prevent_duplicate_replies ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                                {{ $autoReply->prevent_duplicate_replies ? 'مفعل' : 'معطل' }}
                            </span>
                        </div>
                        
                        {{-- إعجاب تلقائي --}}
                        <div class="setting-item flex justify-between items-start p-3 border rounded-lg">
                            <div class="space-y-1">
                                <div class="font-medium text-sm">👍 إعجاب تلقائي على التعليقات</div>
                                <div class="text-xs text-muted-foreground">إضافة إعجاب من الصفحة على التعليق</div>
                            </div>
                            <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {{ $autoReply->auto_like_comment ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                                {{ $autoReply->auto_like_comment ? 'مفعل' : 'معطل' }}
                            </span>
                        </div>
                        
                        {{-- إخفاء التعليق --}}
                        <div class="setting-item flex justify-between items-start p-3 border rounded-lg">
                            <div class="space-y-1">
                                <div class="font-medium text-sm">🙈 إخفاء التعليق بعد الرد</div>
                                <div class="text-xs text-muted-foreground">إخفاء التعليق عن الجمهور بعد الرد عليه</div>
                            </div>
                            <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {{ $autoReply->hide_comment_after_reply ? 'bg-orange-100 text-orange-700' : 'bg-gray-100 text-gray-700' }}">
                                {{ $autoReply->hide_comment_after_reply ? 'مفعل' : 'معطل' }}
                            </span>
                        </div>
                        
                        {{-- فلترة الكلمات المسيئة --}}
                        <div class="setting-item flex justify-between items-start p-3 border rounded-lg">
                            <div class="space-y-1">
                                <div class="font-medium text-sm">🛡️ فلترة الكلمات المسيئة</div>
                                <div class="text-xs text-muted-foreground">حذف/إخفاء التعليقات التي تتضمن إساءة</div>
                            </div>
                            <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {{ $autoReply->enable_offensive_filter ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700' }}">
                                {{ $autoReply->enable_offensive_filter ? 'مفعل' : 'معطل' }}
                            </span>
                        </div>
                        
                        @if($autoReply->enable_offensive_filter)
                            <div class="bg-red-50 dark:bg-red-900/10 border border-red-200 p-4 rounded-lg space-y-3">
                                <p class="text-sm font-semibold text-red-700 dark:text-red-300 flex items-center gap-1">
                                    <i class="fas fa-exclamation-triangle"></i> إعدادات الفلترة:
                                </p>
                                
                                {{-- إجراء الفلترة --}}
                                <div>
                                    <label class="text-xs font-medium text-muted-foreground uppercase">الإجراء المتخذ</label>
                                    <div class="mt-1 text-sm font-medium">
                                        @if($offensiveAction === 'hide')
                                            <span class="text-orange-500">إخفاء التعليق</span>
                                        @else
                                            <span class="text-red-500">حذف التعليق</span>
                                        @endif
                                    </div>
                                </div>
                                
                                {{-- الكلمات المسيئة المفلترة --}}
                                @if(!empty($offensiveKeywords))
                                    <div>
                                        <label class="text-xs font-medium text-muted-foreground uppercase">الكلمات المسيئة</label>
                                        <div class="mt-1 flex flex-wrap gap-2">
                                            @foreach($offensiveKeywords as $keyword)
                                                <span class="inline-flex items-center rounded-full bg-red-200 dark:bg-red-900/50 px-2 py-0.5 text-xs font-medium text-red-800 dark:text-red-200">
                                                    {{ $keyword }}
                                                </span>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                                
                                {{-- رسالة الرد الخاصة عند الفلترة --}}
                                @if($offensiveReplyMessage)
                                    <div class="border-t border-red-200 pt-3">
                                        <label class="text-xs font-medium text-muted-foreground uppercase">رسالة خاصة عند الإساءة</label>
                                        <p class="mt-1 text-sm bg-red-100 dark:bg-red-900/20 p-2 rounded-md whitespace-pre-wrap">{{ $offensiveReplyMessage }}</p>
                                    </div>
                                @endif
                            </div>
                        @endif

                    </div>
                </div>

                {{-- 7. الجدولة الزمنية --}}
                @if($autoReply->scheduled_start || $autoReply->scheduled_end)
                    <div class="bg-card text-card-foreground rounded-xl border py-6 shadow-sm">
                        <div class="flex items-center justify-between px-6 border-b border-border pb-5">
                            <h2 class="font-semibold text-lg flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-cyan-600" fill="none"
                                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        viewBox="0 0 24 24">
                                    <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>
                                الجدولة الزمنية
                            </h2>
                        </div>
                        <div class="px-6 mt-4 space-y-4">
                            @if($autoReply->scheduled_start)
                                @php
                                    // تأكد من وجود \Carbon\Carbon في هذا السياق
                                    $startLocal = \Carbon\Carbon::parse($autoReply->scheduled_start)->setTimezone(auth()->user()->timezone ?? 'UTC');
                                @endphp
                                <div class="schedule-item p-3 border rounded-lg">
                                    <div class="font-medium text-sm text-green-600 flex items-center gap-1 mb-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                            <polygon points="5 3 19 12 5 21 5 3"/>
                                        </svg>
                                        تاريخ البداية
                                    </div>
                                    <div class="text-sm">{{ $startLocal->format('d/m/Y H:i') }}</div>
                                    <div class="text-xs text-muted-foreground">{{ $startLocal->diffForHumans() }}</div>
                                </div>
                            @endif

                            @if($autoReply->scheduled_end)
                                @php
                                    $endLocal = \Carbon\Carbon::parse($autoReply->scheduled_end)->setTimezone(auth()->user()->timezone ?? 'UTC');
                                @endphp
                                <div class="schedule-item p-3 border rounded-lg">
                                    <div class="font-medium text-sm text-red-600 flex items-center gap-1 mb-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                            <rect width="4" height="16" x="6" y="4"/>
                                            <rect width="4" height="16" x="14" y="4"/>
                                        </svg>
                                        تاريخ النهاية
                                    </div>
                                    <div class="text-sm">{{ $endLocal->format('d/m/Y H:i') }}</div>
                                    <div class="text-xs text-muted-foreground">{{ $endLocal->diffForHumans() }}</div>
                                </div>
                            @endif

                            <div class="mt-4">
                                @if($autoReply->isScheduledActive())
                                    <div class="bg-green-50 border border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-700 dark:text-green-200 px-4 py-3 rounded-lg flex items-center gap-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                            <polyline points="20 6 9 17 4 12"/>
                                        </svg>
                                        <span class="text-sm">الجدولة نشطة حالياً</span>
                                    </div>
                                @else
                                    <div class="bg-yellow-50 border border-yellow-200 text-yellow-700 dark:bg-yellow-900/20 dark:border-yellow-700 dark:text-yellow-200 px-4 py-3 rounded-lg flex items-center gap-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                            <circle cx="12" cy="12" r="10"/>
                                            <polyline points="12 6 12 12 16 14"/>
                                        </svg>
                                        <span class="text-sm">خارج وقت الجدولة</span>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                {{-- 8. أزرار التحكم --}}
                <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">
                        <a href="{{ route('auto-replies.edit', $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 text-primary-foreground shadow-xs h-10 px-4 py-2 has-[>svg]:px-3 bg-primary hover:bg-primary/90 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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                            </svg>
                            تعديل الرد التلقائي
                        </a>


                        <div class="border-t border-border pt-3">
                            <button class="delete-reply 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-red-300 text-red-600 hover:bg-red-50 w-full"
                                    data-name="{{ $autoReply->name }}">
                                <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">
                                    <polyline points="3 6 5 6 21 6"></polyline>
                                    <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"></path>
                                    <line x1="10" y1="11" x2="10" y2="17"></line>
                                    <line x1="14" y1="11" x2="14" y2="17"></line>
                                </svg>
                                حذف الرد التلقائي
                            </button>
                        </div>
                    </div>
                </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" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                        <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 dark:bg-red-900/20 dark:border-red-700 dark:text-red-200 px-4 py-3 rounded-lg flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                        <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('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">حذف نهائي</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {

            // معالج حذف الرد
            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');
                }
            });
        });

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

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

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

        document.addEventListener("DOMContentLoaded", () => {
            document.querySelectorAll('.auto-reply-toggle-form').forEach(form => {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();

                    const btn = this.querySelector('button');
                    const originalBtnContent = btn.innerHTML; // حفظ المحتوى الأصلي
                    const isCurrentlyActive = btn.classList.contains('bg-yellow-600');
                    
                    // حالة التحميل
                    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
                    btn.disabled = true;


                    let id = this.action.split('/').pop(); // استخراج ID من الرابط

                    fetch(this.action, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': this.querySelector('input[name=_token]').value,
                            'Accept': 'application/json'
                        }
                    })
                    .then(res => res.json())
                    .then(data => {

                        // تحديث الزر
                        if (data.status === 'active') {
                            btn.classList.remove('bg-green-600', 'hover:bg-green-600/90');
                            btn.classList.add('bg-yellow-600', 'hover:bg-yellow-600/90');
                            btn.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"><rect width="4" height="16" x="6" y="4"></rect><rect width="4" height="16" x="14" y="4"></rect></svg> إيقاف';
                        } else {
                            btn.classList.remove('bg-yellow-600', 'hover:bg-yellow-600/90');
                            btn.classList.add('bg-green-600', 'hover:bg-green-600/90');
                            btn.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"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg> تفعيل';
                        }
                        
                        // تحديث نص الحالة في الـ Header وفي الـ Details
                        const statusTextElements = document.querySelectorAll(`.status-text-${id}`);
                        const newStatusText = data.status === 'active' ? 'نشط' : 'غير نشط';

                        statusTextElements.forEach(element => {
                            element.textContent = newStatusText;
                        });
                        
                        // تحديث حالة الشارة في الـ Header
                        const statusBadge = document.querySelector('.status-badge');
                        if (statusBadge) {
                            if (data.status === 'active') {
                                statusBadge.className = 'inline-flex items-center rounded-full bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-600 status-badge';
                                statusBadge.textContent = 'نشط';
                            } else {
                                statusBadge.className = 'inline-flex items-center rounded-full bg-red-500/20 px-2 py-0.5 text-xs font-medium text-red-600 status-badge';
                                statusBadge.textContent = 'غير نشط';
                            }
                        }

                        btn.disabled = false; // تفعيل الزر مجددًا
                    })
                    .catch(error => {
                            console.error('Error toggling status:', error);
                            // استرجاع المحتوى الأصلي للزر إذا حدث خطأ
                            btn.innerHTML = originalBtnContent; 
                            btn.disabled = false;
                    });
                });
            });
        });
    </script>


    <style>
        .keyword-badge:hover {
            transform: scale(1.05);
            transition: transform 0.2s ease;
            cursor: pointer;
        }

        .reply-message-box:hover {
            transform: translateX(-2px);
            transition: transform 0.2s ease;
            cursor: pointer;
        }

        .message-bubble:hover {
            transform: scale(1.02);
            transition: transform 0.2s ease;
        }

        .setting-item:hover,
        .schedule-item:hover {
            background-color: rgb(248 250 252 / 0.5);
            transition: background-color 0.2s ease;
        }
    </style>

</x-app-layout>