{{-- resources/views/instagram/auto-replies/index.blade.php --}}
<x-app-layout>
    <x-slot name="title">الردود التلقائية - إنستقرام</x-slot>

 <div class="p-4 space-y-4 md:space-y-5">
    
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
        <div>
            <h1 class="text-2xl 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-md flex items-center justify-center flex-shrink-0">
                    <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069z"/>
                    </svg>
                </div>
                {{ __('الردود التلقائية - إنستقرام') }}
            </h1>
            <p class="text-sm text-muted-foreground">{{ __('إدارة الردود التلقائية على تعليقات إنستقرام') }}</p>
        </div>
        
        <div>
            @if(isset($planLimits) && $planLimits['feature_available'])
                @if($planLimits['can_create_more'])
                    <a href="{{ route('instagram.auto-replies.create') }}" class="inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-xs hover:from-purple-700 hover:to-pink-700 h-8 px-3 py-1.5">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                            <line x1="12" y1="5" x2="12" y2="19"/>
                            <line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                        {{ __('إضافة جديد') }}
                    </a>
                @else
                    <a href="{{ route('plans.index') }}" class="inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-gradient-to-r from-orange-500 to-orange-600 text-white shadow-xs hover:from-orange-600 hover:to-orange-700 h-8 px-3 py-1.5">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                            <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                        </svg>
                        {{ __('ترقية للمزيد') }}
                    </a>
                @endif
            @else
                <a href="{{ route('plans.index') }}" class="inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-gradient-to-r from-purple-500 to-purple-600 text-white shadow-xs hover:from-purple-600 hover:to-purple-700 h-8 px-3 py-1.5">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                        <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                    </svg>
                    {{ __('ترقية لتفعيل الميزة') }}
                </a>
            @endif
        </div>
    </div>

    <hr class="border-gray-200 dark:border-gray-800 my-2" />

    @if(isset($planLimits))
        @php
            $percentage = !$planLimits['unlimited'] && $planLimits['max'] > 0 ? ($planLimits['current'] / $planLimits['max']) * 100 : 0;
            $isLow = !$planLimits['unlimited'] && $planLimits['remaining'] <= 2;
            $isFull = !$planLimits['unlimited'] && $planLimits['remaining'] == 0;
            
            // Determine banner color - Instagram theme overrides default
            if (!$planLimits['feature_available']) {
                $bannerColor = 'from-purple-500 to-purple-600';
                $iconBg = 'bg-purple-400/30';
            } elseif ($isFull) {
                $bannerColor = 'from-red-500 to-red-600';
                $iconBg = 'bg-red-400/30';
            } elseif ($isLow) {
                $bannerColor = 'from-orange-500 to-orange-600';
                $iconBg = 'bg-orange-400/30';
            } elseif ($planLimits['unlimited']) {
                $bannerColor = 'from-green-500 to-green-600';
                $iconBg = 'bg-green-400/30';
            } else {
                $bannerColor = 'from-purple-600 via-pink-600 to-orange-500'; // Instagram Gradient
                $iconBg = 'bg-white/20';
            }
        @endphp

        <div class="bg-gradient-to-r {{ $bannerColor }} rounded-lg shadow-md overflow-hidden">
            <div class="px-4 py-3">
                <div class="flex items-center justify-between gap-4">
                    <div class="flex items-center gap-3 flex-1 min-w-0">
                        <div class="w-8 h-8 {{ $iconBg }} rounded-md flex items-center justify-center flex-shrink-0">
                            <svg class="h-4 w-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069z"/>
                            </svg>
                        </div>
                        
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 mb-0.5">
                                <h3 class="text-white font-medium text-sm">{{ __('الردود النشطة:') }}</h3>
                                <span class="font-bold text-lg text-white -mr-1">{{ $planLimits['current'] }}</span>
                                @if(!$planLimits['unlimited'])
                                    <span class="text-white/80 text-sm">/ {{ $planLimits['max'] }}</span>
                                @endif
                            </div>
                            
                            @if(!$planLimits['unlimited'])
                                <div class="flex items-center gap-3 mt-1">
                                    <div class="flex-1 max-w-[150px]">
                                        <div class="w-full bg-white/20 rounded-full h-1.5 overflow-hidden">
                                            @php
                                                $progressColor = $percentage >= 90 ? 'bg-red-300' : ($percentage >= 70 ? 'bg-yellow-300' : 'bg-green-300');
                                            @endphp
                                            <div class="{{ $progressColor }} h-full rounded-full transition-all duration-500" style="width: {{ min($percentage, 100) }}%"></div>
                                        </div>
                                    </div>
                                    <div class="text-white/90 text-xs font-medium">
                                        {{ number_format($percentage, 0) }}%
                                    </div>
                                </div>
                            @else
                                <span class="inline-flex items-center rounded-full bg-white/20 px-2 py-0.5 text-xs font-semibold text-white mt-1">
                                    <svg class="h-3 w-3 mr-1" 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>
                            @endif
                        </div>
                    </div>

                    <div class="flex items-center gap-2 flex-shrink-0">
                        @if(!$planLimits['feature_available'])
                            <div class="text-white text-right hidden sm:block">
                                <div class="text-xs text-white/80">{{ __('غير متاحة') }}</div>
                                <div class="font-medium text-sm">{{ __('قم بالترقية') }}</div>
                            </div>
                            <a href="{{ route('plans.index') }}" class="inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium bg-white text-purple-600 hover:bg-white/90 transition-all h-8 px-3 py-1.5 shadow-sm">
                                {{ __('ترقية') }}
                            </a>
                        @elseif($isFull)
                            <div class="text-white text-right hidden sm:block">
                                <div class="text-xs text-white/80">{{ __('الحد الأقصى') }}</div>
                                <div class="font-medium text-sm">{{ __('ترقية للمزيد') }}</div>
                            </div>
                            <a href="{{ route('plans.index') }}" class="inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium bg-white text-red-600 hover:bg-white/90 transition-all h-8 px-3 py-1.5 shadow-sm">
                                {{ __('ترقية') }}
                            </a>
                        @elseif($isLow)
                            <div class="text-white text-right hidden sm:block">
                                <div class="text-xs text-white/80">{{ __('متبقي') }}</div>
                                <div class="font-bold text-lg">{{ $planLimits['remaining'] }}</div>
                            </div>
                            <a href="{{ route('plans.index') }}" class="inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium bg-white/20 text-white hover:bg-white/30 transition-all h-8 px-3 py-1.5 border border-white/20">
                                {{ __('عرض الباقات') }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @endif
    
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-5">

        <div data-slot="card" class="bg-gradient-to-br from-purple-500 to-pink-600 text-white flex flex-col gap-3 rounded-xl border shadow-md p-4">
            <div data-slot="card-content">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-2xl font-bold">{{ $stats['total'] }}</div>
                        <div class="text-xs text-white/80">إجمالي الردود</div>
                    </div>
                    <div class="w-10 h-10 bg-white/20 rounded-md flex items-center justify-center">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                            <polyline points="9 10 4 15 9 20"/>
                            <path d="M20 4v7a4 4 0 0 1-4 4H4"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <div data-slot="card" class="bg-gradient-to-r from-green-500 to-green-600 text-white flex flex-col gap-3 rounded-xl border shadow-md p-4">
            <div data-slot="card-content">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-2xl font-bold">{{ $stats['active'] }}</div>
                        <div class="text-xs text-green-100">نشط</div>
                    </div>
                    <div class="w-10 h-10 bg-white/20 rounded-md flex items-center justify-center">
                        <svg class="h-5 w-5" 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>
            </div>
        </div>

        <div data-slot="card" class="bg-gradient-to-r from-gray-500 to-gray-600 text-white flex flex-col gap-3 rounded-xl border shadow-md p-4">
            <div data-slot="card-content">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-2xl font-bold">{{ $stats['inactive'] }}</div>
                        <div class="text-xs text-gray-100">متوقف</div>
                    </div>
                    <div class="w-10 h-10 bg-white/20 rounded-md flex items-center justify-center">
                        <svg class="h-5 w-5" 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>
            </div>
        </div>

        <div data-slot="card" class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white flex flex-col gap-3 rounded-xl border shadow-md p-4">
            <div data-slot="card-content">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-2xl font-bold">{{ $autoReplies->sum('usage_count') }}</div>
                        <div class="text-xs text-cyan-100">إجمالي الاستخدام</div>
                    </div>
                    <div class="w-10 h-10 bg-white/20 rounded-md flex items-center justify-center">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                            <path d="M3 3v18h18"/>
                            <path d="m19 9-5 5-4-4-3 3"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div data-slot="card" class="bg-card text-card-foreground flex flex-col rounded-xl border shadow-sm">
        <div data-slot="card-content" class="px-4 py-3">
            <form method="GET" action="{{ route('instagram.auto-replies.index') }}" class="flex flex-col md:flex-row gap-3 md:items-center">
                
                <div class="relative flex-1 min-w-[150px] md:max-w-[200px]">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-3.5 w-3.5">
                        <circle cx="11" cy="11" r="8"></circle>
                        <path d="m21 21-4.3-4.3"></path>
                    </svg>
                    <input type="text" name="search"
                        value="{{ request('search') }}"
                        placeholder="ابحث..."
                        class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 flex h-8 w-full rounded-md border bg-transparent px-3 text-sm shadow-xs outline-none pr-9 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]" />
                </div>

                <select name="account_id" 
                        class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30
                                flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 text-sm
                                shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] w-full md:w-40 h-8 py-0">
                    <option value="">جميع الحسابات</option>
                    @foreach($accounts as $account)
                        <option value="{{ $account->id }}" {{ request('account_id') == $account->id ? 'selected' : '' }}>
                            {{ '@' . $account->username }}
                        </option>
                    @endforeach
                </select>

                <select name="status" 
                        class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30
                                flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 text-sm
                                shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] w-full md:w-36 h-8 py-0">
                    <option value="">جميع الحالات</option>
                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>نشط</option>
                    <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>متوقف</option>
                </select>

                <select name="trigger_type" 
                        class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30
                                flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 text-sm
                                shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] w-full md:w-44 h-8 py-0">
                    <option value="">جميع الأنواع</option>
                    <option value="all" {{ request('trigger_type') == 'all' ? 'selected' : '' }}>جميع التعليقات</option>
                    <option value="keywords" {{ request('trigger_type') == 'keywords' ? 'selected' : '' }}>كلمات مفتاحية</option>
                    <option value="new_commenters" {{ request('trigger_type') == 'new_commenters' ? 'selected' : '' }}>معلقين جدد</option>
                </select>

                <div class="flex gap-2 flex-shrink-0">
                    <button type="submit" 
                            class="inline-flex items-center justify-center gap-1.5 rounded-md border bg-background shadow-xs
                                    hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input
                                    dark:hover:bg-input/50 h-8 px-3 text-sm font-medium transition-all">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"/>
                            <path d="m21 21-4.3-4.3"/>
                        </svg>
                        تصفية
                    </button>
                    <a href="{{ route('instagram.auto-replies.index') }}" 
                       class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all h-8 rounded-md px-3 border border-border hover:bg-accent hover:text-accent-foreground dark:hover:bg-input/50">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 6 6 18"/>
                            <path d="m6 6 12 12"/>
                        </svg>
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- قائمة الردود التلقائية -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    @forelse($autoReplies as $autoReply)
        <div class="auto-reply-card group" data-id="{{ $autoReply->id }}">
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col rounded-xl border shadow-sm transition-all hover:shadow-lg hover:-translate-y-1 h-full">
                
                <!-- رأس البطاقة -->
                <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] py-4 flex flex-row items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-purple-600 via-pink-600 to-orange-500 rounded-full flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="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>
                        <div>
                            <h6 class="font-semibold text-sm">{{ $autoReply->name }}</h6>
                            <small class="text-muted-foreground text-xs">
                                {{ '@' . $autoReply->instagramAccount->username }}
                            </small>
                        </div>
                    </div>
                    
                    <div class="relative">
                        <button class="auto-reply-menu-btn inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md px-2"
                                data-reply-id="{{ $autoReply->id }}">
                            <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="12" cy="5" r="1"/>
                                <circle cx="12" cy="19" r="1"/>
                            </svg>
                        </button>
                        
                        <!-- قائمة منسدلة -->
                        <div class="auto-reply-menu hidden absolute left-0 top-full mt-1 w-48 rounded-md border border-border bg-card shadow-lg z-10" data-reply-id="{{ $autoReply->id }}">
                            <div class="py-1">
                                <a href="{{ route('instagram.auto-replies.show', $autoReply) }}" class="block w-full text-right px-4 py-2 text-sm hover:bg-accent hover:text-accent-foreground">
                                    <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="inline ml-2">
                                        <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
                                        <circle cx="12" cy="12" r="3"/>
                                    </svg>
                                    عرض التفاصيل
                                </a>
                                <a href="{{ route('instagram.auto-replies.edit', $autoReply) }}" class="block w-full text-right px-4 py-2 text-sm hover:bg-accent hover:text-accent-foreground">
                                    <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="inline ml-2">
                                        <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>
                                <hr class="my-1 border-border">
                                <form method="POST" action="{{ route('instagram.auto-replies.toggle', $autoReply) }}" class="inline w-full">
                                    @csrf
                                    <button type="submit" class="block w-full text-right px-4 py-2 text-sm hover:bg-accent hover:text-accent-foreground">
                                        @if($autoReply->is_active)
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline ml-2">
                                                <rect width="4" height="16" x="6" y="4"/>
                                                <rect width="4" height="16" x="14" y="4"/>
                                            </svg>
                                            إيقاف
                                        @else
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline ml-2">
                                                <polygon points="5 3 19 12 5 21 5 3"/>
                                            </svg>
                                            تفعيل
                                        @endif
                                    </button>
                                </form>
                                <hr class="my-1 border-border">
                                <button class="delete-reply block w-full text-right px-4 py-2 text-sm text-red-600 hover:bg-red-50 hover:text-red-700"
                                        data-id="{{ $autoReply->id }}" data-name="{{ $autoReply->name }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline ml-2">
                                        <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 data-slot="card-content" class="px-6 flex-1">
                    
                    <!-- الحالة ونوع التفعيل -->
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            {!! $autoReply->getStatusBadge() !!}
                        </div>
                        <div>
                            <span class="inline-flex items-center rounded-full bg-muted px-2 py-1 text-xs font-medium">
                                <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">
                                    <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>
                                {{ $autoReply->getTriggerTypeText() }}
                            </span>
                        </div>
                    </div>

                    <!-- الوصف -->
                    @if($autoReply->description)
                        <p class="text-muted-foreground text-sm mb-4">{{ $autoReply->description }}</p>
                    @endif

                    <!-- الكلمات المفتاحية -->
                    @if($autoReply->trigger_type === 'keywords' && !empty($autoReply->keywords))
                        <div class="mb-4">
                            <small class="text-muted-foreground text-xs block mb-2">الكلمات المفتاحية:</small>
                            <div class="flex flex-wrap gap-1">
                                @foreach(array_slice($autoReply->keywords, 0, 3) as $keyword)
                                    <span class="inline-flex items-center rounded-full bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground">
                                        #{{ $keyword }}
                                    </span>
                                @endforeach
                                @if(count($autoReply->keywords) > 3)
                                    <span class="inline-flex items-center rounded-full bg-muted px-2 py-1 text-xs font-medium">
                                        +{{ count($autoReply->keywords) - 3 }}
                                    </span>
                                @endif
                            </div>
                        </div>
                    @endif

                    <!-- معاينة الردود -->
                    <div class="space-y-3 mb-4">
                        @if($autoReply->reply_message)
                            <div class="reply-preview">
                                <small class="text-muted-foreground text-xs block mb-1">الرد العلني:</small>
                                <div class="bg-muted/50 p-3 rounded-lg text-sm">
                                    {{ Str::limit($autoReply->reply_message, 80) }}
                                </div>
                            </div>
                        @endif
                        @if($autoReply->private_message)
                            <div class="reply-preview">
                                <small class="text-muted-foreground text-xs block mb-1">الرسالة الخاصة:</small>
                                <div class="bg-primary/10 p-3 rounded-lg text-sm">
                                    {{ Str::limit($autoReply->private_message, 80) }}
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- الإحصائيات -->
                    <div class="grid grid-cols-3 gap-4 text-center">
                        <div class="stat-item">
                            <div class="text-lg font-semibold text-primary">{{ $autoReply->usage_count }}</div>  
                            <small class="text-muted-foreground text-xs">استخدام</small>
                        </div>
                        <div class="stat-item">
                            <div class="text-lg font-semibold text-green-600">
                                {{ $autoReply->max_replies ?? '∞' }}
                            </div>
                            <small class="text-muted-foreground text-xs">الحد الأقصى</small>
                        </div>
                        <div class="stat-item">
                            <div class="text-lg font-semibold text-cyan-600">{{ $autoReply->delay_seconds }}s</div>
                            <small class="text-muted-foreground text-xs">التأخير</small>
                        </div>
                    </div>
                </div>

                <!-- تذييل البطاقة -->
                <div class="border-t border-border p-4">
                    <div class="flex items-center justify-between">
                        <small class="text-muted-foreground text-xs">
                            @if($autoReply->last_used_at)
                                آخر استخدام: {{ $autoReply->last_used_at->diffForHumans() }}
                            @else
                                لم يتم الاستخدام بعد
                            @endif
                        </small>
                        <div class="flex gap-2">
                            <a href="{{ route('instagram.auto-replies.show', $autoReply) }}" 
                               class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-7 rounded-md px-2 border border-border">
                                <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">
                                    <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
                                    <circle cx="12" cy="12" r="3"/>
                                </svg>
                            </a>
                            <a href="{{ route('instagram.auto-replies.edit', $autoReply) }}" 
                               class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs h-7 rounded-md px-2 bg-green-600 hover:bg-green-600/90">
                                <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">
                                    <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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="col-span-full">
            <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-12 shadow-sm">
                <div data-slot="card-content" class="px-6 text-center">
                    <div class="w-16 h-16 bg-gradient-to-br from-purple-600 via-pink-600 to-orange-500 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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>
                    <h4 class="text-lg font-semibold text-muted-foreground mb-3">لا توجد ردود تلقائية</h4>
                    <p class="text-muted-foreground mb-6">ابدأ بإنشاء رد تلقائي لتحسين تفاعلك مع المتابعين</p>
                    <a href="{{ route('instagram.auto-replies.create') }}" 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">
                            <line x1="12" y1="5" x2="12" y2="19"/>
                            <line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                        إنشاء رد تلقائي جديد
                    </a>
                </div>
            </div>
        </div>
    @endforelse
</div>

<!-- الترقيم -->
@if($autoReplies->hasPages())
    <div class="flex justify-center">
        {{ $autoReplies->links() }}
    </div>
@endif

</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-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">
                    <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>
                <span class="text-sm">هذا الإجراء لا يمكن التراجع عنه</span>
            </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 id="delete-form" method="POST" 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('.auto-reply-menu-btn')) {
            const replyId = e.target.closest('.auto-reply-menu-btn').dataset.replyId;
            const menu = document.querySelector(`.auto-reply-menu[data-reply-id="${replyId}"]`);
            
            // إخفاء جميع القوائم الأخرى
            document.querySelectorAll('.auto-reply-menu').forEach(m => {
                if (m !== menu) m.classList.add('hidden');
            });
            
            menu.classList.toggle('hidden');
            return;
        }

        // إخفاء القوائم عند النقر خارجها
        if (!e.target.closest('.auto-reply-menu')) {
            document.querySelectorAll('.auto-reply-menu').forEach(menu => {
                menu.classList.add('hidden');
            });
        }
    });

    // معالج حذف الردود
    document.addEventListener('click', function(e) {
        if (e.target.closest('.delete-reply')) {
            const button = e.target.closest('.delete-reply');
            const id = button.dataset.id;
            const name = button.dataset.name;
            
            document.getElementById('delete-name').textContent = name;
            document.getElementById('delete-form').action = `/instagram/auto-replies/${id}`;
            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();
    }
});

// تحديث الشارات كل 30 ثانية (اختياري)
setInterval(function() {
    // يمكن إضافة استدعاء AJAX لتحديث حالة الشارات
}, 30000);
</script>

<style>
/* تأثيرات إضافية للبطاقات */
.auto-reply-card {
    transition: all 0.3s ease;
}

.auto-reply-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* تأثيرات للإحصائيات */
.stat-item {
    transition: all 0.2s ease;
}

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

/* تحسين مظهر معاينة الردود */
.reply-preview {
    transition: all 0.2s ease;
}

.reply-preview:hover {
    transform: scale(1.02);
}

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

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

/* تحسين التجاوب */
@media (max-width: 768px) {
    .auto-reply-card {
        margin-bottom: 1rem;
    }
    
    .stat-item {
        padding: 0.5rem 0;
    }
}
</style>

</x-app-layout>