{{-- resources/views/instagram/auto-replies/show.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>
        {{ $autoReply->name }}
    </h1>
    <p class="text-muted-foreground flex items-center gap-4">
        <span class="flex items-center gap-1">
            <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="1"/>
                <circle cx="19" cy="12" r="1"/>
                <circle cx="5" cy="12" r="1"/>
            </svg>
            {{ $autoReply->instagramAccount->username }}
        </span>
        <span class="flex items-center gap-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect width="18" height="18" x="3" y="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('instagram.auto-replies.index') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 rounded-md px-4 py-2 border border-border">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <path d="M12 8l-4 4 4 4M16 12H9"/>
        </svg>
        العودة للقائمة
    </a>
    <a href="{{ route('instagram.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-9 px-4 py-2 has-[>svg]:px-3 bg-primary hover:bg-primary/90">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
            <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
        </svg>
        تعديل
    </a>
    <form method="POST" action="{{ route('instagram.auto-replies.toggle', $autoReply) }}" class="inline">
        @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->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="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 width="4" height="16" x="14" y="4"/>
                </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"/>
                </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">

    <!-- المعلومات الأساسية -->
    <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-6">
                <div class="info-item">
                    <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 class="info-item">
                    <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">حساب إنستقرام</label>
                    <div class="mt-1">
                        <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>
                </div>
            </div>

            @if($autoReply->description)
                <div class="info-item">
                    <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">الوصف</label>
                    <div class="mt-1 text-sm">{{ $autoReply->description }}</div>
                </div>
            @endif

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="info-item">
                    <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 px-2 py-1 text-xs font-medium text-primary-foreground">
                            {{ $autoReply->getTriggerTypeText() }}
                        </span>
                    </div>
                </div>
                <div class="info-item">
                    <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">الحالة</label>
                    <div class="mt-1">{!! $autoReply->getStatusBadge() !!}</div>
                </div>
            </div>

            @if($autoReply->post_id)
                <div class="info-item">
                    <label class="text-xs font-medium text-muted-foreground uppercase tracking-wide">منشور محدد</label>
                    <div class="mt-1 flex items-center gap-2">
                        <code class="bg-muted px-2 py-1 rounded text-xs">{{ $autoReply->post_id }}</code>
                        <a href="https://instagram.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" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <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>
                </div>
            @endif
        </div>
    </div>

    <!-- الكلمات المفتاحية -->
    @if($autoReply->trigger_type === 'keywords' && !empty($autoReply->keywords))
        <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
            <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
                <div data-slot="card-title" class="font-semibold text-base sm:text-lg flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-600">
                        <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>
                    الكلمات المفتاحية
                </div>
            </div>

            <div data-slot="card-content" class="px-6">
                <div class="flex flex-wrap gap-2 mb-4">
                    @foreach($autoReply->keywords as $keyword)
                        <span class="inline-flex items-center rounded-full bg-secondary px-3 py-1 text-sm font-medium text-secondary-foreground keyword-badge">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-1">
                                <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 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 class="text-sm">سيتم تفعيل الرد التلقائي عند وجود أي من هذه الكلمات في التعليق</span>
                </div>
            </div>
        </div>
    @endif

    <!-- رسائل الرد -->
    <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-6">
            @if($autoReply->reply_message)
                <div class="reply-message-box border-r-4 border-r-primary pr-4">
                    <div class="flex items-center gap-2 mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
                            <path d="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">
                            سيظهر كتعليق
                        </span>
                    </div>
                    <div class="message-preview">
                        <div class="message-bubble bg-muted/50 rounded-2xl p-4 inline-block max-w-full">
                            <p class="text-sm mb-0">{{ $autoReply->reply_message }}</p>
                        </div>
                    </div>
                </div>
            @endif

            @if($autoReply->private_message)
                <div class="reply-message-box border-r-4 border-r-cyan-500 pr-4">
                    <div class="flex items-center gap-2 mb-3">
                        <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-cyan-600">
                            <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-muted px-2 py-1 text-xs font-medium">
                            سيتم إرسالها خاصة
                        </span>
                    </div>
                    <div class="message-preview">
                        <div class="message-bubble bg-gradient-to-r from-purple-500 to-blue-600 text-white rounded-2xl p-4 inline-block max-w-full">
                            <p class="text-sm mb-0">{{ $autoReply->private_message }}</p>
                        </div>
                    </div>
                </div>
            @endif
        </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">
            <div class="text-center p-4 bg-muted/50 rounded-lg mb-4">
                <div class="text-3xl font-bold text-primary mb-1">{{ $autoReply->usage_count }}</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 }}s</div>
                    <div class="text-xs text-muted-foreground">تأخير الرد</div>
                </div>
            </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>

    <!-- الإعدادات المتقدمة -->
    <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 class="setting-item flex justify-between items-center p-3 border rounded-lg">
                <div>
                    <div class="font-medium text-sm">منع الردود المكررة</div>
                    <div class="text-xs text-muted-foreground">عدم الرد على نفس المعلق مرتين</div>
                </div>
                <div>
                    @if($autoReply->prevent_duplicate_replies)
                        <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700">مفعل</span>
                    @else
                        <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700">معطل</span>
                    @endif
                </div>
            </div>

            @if($autoReply->max_replies)
                <div class="setting-item flex justify-between items-center p-3 border rounded-lg">
                    <div>
                        <div class="font-medium text-sm">الحد الأقصى للردود</div>
                        <div class="text-xs text-muted-foreground">عدد الردود المسموح</div>
                    </div>
                    <div>
                        <span class="inline-flex items-center rounded-full bg-primary px-2 py-1 text-xs font-medium text-primary-foreground">
                            {{ $autoReply->max_replies }}
                        </span>
                    </div>
                </div>
            @endif

            <div class="setting-item flex justify-between items-center p-3 border rounded-lg">
                <div>
                    <div class="font-medium text-sm">تأخير الرد</div>
                    <div class="text-xs text-muted-foreground">الوقت قبل إرسال الرد</div>
                </div>
                <div>
                    <span class="inline-flex items-center rounded-full bg-cyan-100 px-2 py-1 text-xs font-medium text-cyan-700">
                        @if($autoReply->delay_seconds == 0)
                            فوري
                        @else
                            {{ $autoReply->delay_seconds }} ثانية
                        @endif
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- معلومات الجدولة -->
    @if($autoReply->scheduled_start || $autoReply->scheduled_end)
        <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">
    @if($autoReply->scheduled_start)
        @php
            $startLocal = \App\Helpers\TimeHelper::toUserTimezone($autoReply->scheduled_start, 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" width="14" height="14" 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>
                تاريخ البداية
            </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 = \App\Helpers\TimeHelper::toUserTimezone($autoReply->scheduled_end, 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" width="14" height="14" 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>
                تاريخ النهاية
            </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 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">
                                <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 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"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                            <span class="text-sm">خارج وقت الجدولة</span>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif

    <!-- الإجراءات -->
    <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('instagram.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 d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                </svg>
                تعديل الرد التلقائي
            </a>
            
            <form method="POST" action="{{ route('instagram.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-10 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="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 width="4" height="16" x="14" y="4"/>
                        </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"/>
                        </svg>
                        تفعيل الرد التلقائي
                    @endif
                </button>
            </form>

            <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"/>
                        <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>

<!-- نافذة تأكيد الحذف -->
<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>

<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();
    }
});
</script>

<style>
/* تحسينات للعرض */
.info-item label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.keyword-badge {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
}

.keyword-badge:hover {
    transform: scale(1.05);
}

.reply-message-box {
    transition: all 0.2s ease;
}

.reply-message-box:hover {
    transform: translateX(-2px);
}

.message-bubble {
    word-wrap: break-word;
    position: relative;
    transition: all 0.2s ease;
}

.message-bubble:hover {
    transform: scale(1.02);
}

.setting-item, .schedule-item {
    transition: all 0.2s ease;
}

.setting-item:hover, .schedule-item:hover {
    background-color: rgb(248 250 252 / 0.5);
}

/* تأثيرات الانتقال للنافذة المنبثقة */
#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: 1024px) {
    .grid.grid-cols-1.lg\\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .grid.grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    .flex.flex-col.sm\\:flex-row {
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>

</x-app-layout>