{{-- resources/views/instagram/index.blade.php --}}
<x-app-layout>
    <x-slot name="title">إدارة حسابات إنستقرام</x-slot>

    <div class="p-6 space-y-6">
        
        <!-- Page Header -->
        <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-10 h-10 bg-gradient-to-br from-purple-600 via-pink-600 to-orange-500 rounded-lg flex items-center justify-center">
                        <svg class="h-6 w-6 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-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                        </svg>
                    </div>
                    {{ __('إدارة حسابات إنستقرام') }}
                </h1>
                <p class="text-muted-foreground">{{ __('ربط وإدارة حسابات إنستقرام للنشر والتفاعل') }}</p>
            </div>
            
            <!-- Action Button -->
            <div>
                @if(isset($planLimits) && $planLimits['feature_available'])
                    @if($planLimits['can_add_more'])
                        <a href="{{ route('instagram.connect') }}" class="inline-flex items-center justify-center gap-2 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-9 px-4 py-2">
                            <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-2 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-9 px-4 py-2">
                            <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-2 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-9 px-4 py-2">
                        <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>

        <!-- Compact Usage Banner -->
        @if(isset($planLimits))
            @php
                $percentage = !$planLimits['unlimited'] && $planLimits['max'] > 0 
                    ? ($planLimits['current'] / $planLimits['max']) * 100 
                    : 0;
                $isLow = !$planLimits['unlimited'] && $planLimits['remaining'] <= 1;
                $isFull = !$planLimits['unlimited'] && $planLimits['remaining'] == 0;
                
                // Determine banner color - Instagram theme
                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';
                    $iconBg = 'bg-white/20';
                }
            @endphp

            <div class="bg-gradient-to-r {{ $bannerColor }} rounded-lg shadow-sm overflow-hidden">
                <div class="px-6 py-4">
                    <div class="flex items-center justify-between gap-4">
                        <!-- Left Section: Usage Info -->
                        <div class="flex items-center gap-4 flex-1">
                            <div class="w-10 h-10 {{ $iconBg }} rounded-lg 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>
                            
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 mb-1">
                                    <h3 class="text-white font-semibold text-sm">{{ __('الحسابات المربوطة') }}</h3>
                                    @if($planLimits['unlimited'])
                                        <span class="inline-flex items-center rounded-full bg-white/20 px-2 py-0.5 text-xs font-semibold text-white">
                                            <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">
                                                <path d="M18 6L6 18"/>
                                                <path d="m6 6 12 12"/>
                                            </svg>
                                            {{ __('غير محدود') }}
                                        </span>
                                    @endif
                                </div>
                                
                                <div class="flex items-center gap-3">
                                    <div class="text-white text-sm">
                                        <span class="font-bold text-lg">{{ $planLimits['current'] }}</span>
                                        @if(!$planLimits['unlimited'])
                                            <span class="text-white/80">/ {{ $planLimits['max'] }}</span>
                                        @endif
                                        <span class="text-white/80 text-xs">{{ __('حساب') }}</span>
                                    </div>
                                    
                                    @if(!$planLimits['unlimited'])
                                        <!-- Progress Bar (Inline) -->
                                        <div class="flex-1 max-w-xs">
                                            <div class="w-full bg-white/20 rounded-full h-2 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>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Right Section: Status & Action -->
                        <div class="flex items-center gap-3">
                            @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-2 whitespace-nowrap rounded-md text-sm font-medium bg-white text-purple-600 hover:bg-white/90 transition-all h-9 px-4 py-2 shadow-sm">
                                    <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>
                            @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-2 whitespace-nowrap rounded-md text-sm font-medium bg-white text-red-600 hover:bg-white/90 transition-all h-9 px-4 py-2 shadow-sm">
                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                        <polyline points="23,6 13.5,15.5 8.5,10.5 1,18"/>
                                        <polyline points="17,6 23,6 23,12"/>
                                    </svg>
                                    {{ __('ترقية') }}
                                </a>
                            @elseif($isLow)
                                <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-2 whitespace-nowrap rounded-md text-sm font-medium bg-white/20 text-white hover:bg-white/30 transition-all h-9 px-4 py-2 border border-white/20">
                                    {{ __('عرض الباقات') }}
                                </a>
                            @elseif($planLimits['unlimited'])
                                <div class="text-white text-right hidden sm:block">
                                    <div class="text-xs text-white/80">{{ __('الباقة') }}</div>
                                    <div class="font-medium text-sm flex items-center gap-1">
                                        <svg class="h-4 w-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>
                                        {{ __('مميزة') }}
                                    </div>
                                </div>
                            @else
                                <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>
                                @if($planLimits['remaining'] <= 2)
                                    <a href="{{ route('plans.index') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium bg-white/20 text-white hover:bg-white/30 transition-all h-9 px-4 py-2 border border-white/20">
                                        {{ __('ترقية') }}
                                    </a>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Statistics Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            
            <!-- Total Accounts Card -->
            <div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white flex flex-col gap-6 rounded-xl border shadow-sm p-6">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <div class="text-3xl font-bold mb-1">{{ $accounts->count() }}</div>
                        <div class="text-sm text-purple-100">{{ __('إجمالي الحسابات') }}</div>
                    </div>
                    <div class="w-14 h-14 bg-white/20 rounded-lg flex items-center justify-center">
                           <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">
                        <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="flex items-center gap-1 text-xs text-purple-100">
                    <svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                        <circle cx="9" cy="7" r="4"/>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                    </svg>
                    <span>{{ __('مربوطة بحسابك') }}</span>
                </div>
            </div>

            <!-- Active Accounts Card -->
            <div class="bg-gradient-to-br from-green-500 to-green-600 text-white flex flex-col gap-6 rounded-xl border shadow-sm p-6">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <div class="text-3xl font-bold mb-1">{{ number_format($accounts->sum('followers_count')) }}</div>
                        <div class="text-sm text-green-100">{{ __('إجمالي المتابعين') }}</div>
                    </div>
                    <div class="w-14 h-14 bg-white/20 rounded-lg flex items-center justify-center">
                        <svg class="h-7 w-7" 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>
                    </div>
                </div>
                <div class="flex items-center gap-1 text-xs text-green-100">
                    <div class="w-2 h-2 bg-green-300 rounded-full animate-pulse"></div>
                    <span>{{ __('متابيعن الحسابات ') }}</span>
                </div>
            </div>

            <!-- Business Accounts Card -->
            <div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white flex flex-col gap-6 rounded-xl border shadow-sm p-6">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <div class="text-3xl font-bold mb-1">{{ number_format($accounts->sum('media_count')) }}</div>
                        <div class="text-sm text-blue-100">{{ __('إجمالي المنشورات') }}</div>
                    </div>
                    <div class="w-14 h-14 bg-white/20 rounded-lg flex items-center justify-center">
                        <svg class="h-7 w-7" 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="3" rx="2"/>
                            <path d="M8 7v7"/>
                            <path d="M12 7v11"/>
                            <path d="M16 7v4"/>
                        </svg>
                    </div>
                </div>
                <div class="flex items-center gap-1 text-xs text-blue-100">
                    <svg class="h-3 w-3" 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>
                    <span>{{ __('منشورة على حسابك') }}</span>
                </div>
            </div>

            <!-- Available Slots Card -->
            <div class="bg-gradient-to-br from-orange-500 to-orange-600 text-white flex flex-col gap-6 rounded-xl border shadow-sm p-6">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <div class="text-3xl font-bold mb-1">
                            @if($planLimits['unlimited'] ?? false)
                                <svg class="h-8 w-8 inline-block" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                    <path d="M18 6L6 18"/>
                                    <path d="m6 6 12 12"/>
                                </svg>
                            @else
                                {{ $planLimits['remaining'] ?? 0 }}
                            @endif
                        </div>
                        <div class="text-sm text-orange-100">{{ __('متاح للربط') }}</div>
                    </div>
                    <div class="w-14 h-14 bg-white/20 rounded-lg flex items-center justify-center">
                        <svg class="h-7 w-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                            <circle cx="9" cy="7" r="4"/>
                            <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                        </svg>
                    </div>
                </div>
                <div class="flex items-center gap-1 text-xs text-orange-100">
                    @if($planLimits['unlimited'] ?? false)
                        <svg class="h-3 w-3" 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>{{ __('بدون حدود') }}</span>
                    @else
                        <svg class="h-3 w-3" 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="M12 6v6l4 2"/>
                        </svg>
                        <span>{{ __('حسب باقتك') }}</span>
                    @endif
                </div>
            </div>
        </div>

        <!-- Rest of your page content (accounts list, etc.) -->
        



@if($accounts->isEmpty())
    <!-- حالة فارغة -->
    <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-20 h-20 bg-gradient-to-br from-purple-600 via-pink-600 to-orange-500 rounded-full flex items-center justify-center mx-auto mb-6 opacity-80">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" 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>
            <h3 class="text-xl font-semibold text-muted-foreground mb-3">لم تقم بربط أي حساب إنستقرام بعد</h3>
            <p class="text-muted-foreground mb-6">ابدأ بربط حساب إنستقرام للاستفادة من جميع المميزات</p>
            <a href="{{ route('instagram.connect') }}" 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-6 py-2 has-[>svg]:px-3 bg-gradient-to-r from-purple-600 via-pink-600 to-orange-500 hover:opacity-90">
                <div class="w-5 h-5 bg-white rounded-sm flex items-center justify-center mr-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" class="text-purple-600">
                        <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>
                ربط حساب إنستقرام
            </a>
        </div>
    </div>
@else
    <!-- الحسابات المربوطة -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($accounts as $account)
            <div class="instagram-account-card group">
                <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-content" class="px-6 pt-6">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center gap-3 flex-1 min-w-0">
                                <img src="{{ $account->profile_picture_url ?: 'https://via.placeholder.com/60x60/e1306c/fff?text=IG' }}" 
                                     class="w-15 h-15 rounded-full border-2 border-gradient-to-r from-purple-500 to-pink-500 flex-shrink-0" 
                                     alt="{{ $account->username }}">
                                <div class="min-w-0 flex-1">
                                    <h5 class="font-semibold text-base truncate">{{ $account->getDisplayName() }}</h5>
                                    <p class="text-muted-foreground text-sm truncate">{{ '@' . $account->username }}</p>
                                    <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {{ $account->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                                        @if($account->is_active)
                                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="ml-1">
                                                <circle cx="12" cy="12" r="10"/>
                                            </svg>
                                            نشط
                                        @else
                                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="ml-1">
                                                <circle cx="12" cy="12" r="10"/>
                                            </svg>
                                            غير نشط
                                        @endif
                                    </span>
                                    
                                </div>
                            </div>
                            
                            <!-- قائمة الإجراءات -->
                            <div class="relative">
                                <button class="account-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-account-id="{{ $account->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="account-menu hidden absolute left-0 top-full mt-1 w-48 rounded-md border border-border bg-card shadow-lg z-10" data-account-id="{{ $account->id }}">
                                    <div class="py-1">
                                        <a href="{{ $account->getProfileUrl() }}" target="_blank" class="block w-full text-right px-4 py-2 text-sm hover:bg-accent hover:text-accent-foreground">
                                            <div class="w-4 h-4 bg-gradient-to-br from-purple-600 via-pink-600 to-orange-500 rounded-sm inline-block ml-2"></div>
                                            عرض الحساب
                                        </a>
                                        <form method="POST" action="{{ route('instagram.refresh', $account) }}" class="block">
                                            @csrf
                                            <button type="submit" 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="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
                                                    <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
                                                    <path d="M8 12l5 5L22 8"/>
                                                </svg>
                                                تحديث البيانات
                                            </button>
                                        </form>
                                        <hr class="my-1 border-border">
                                        <button class="disconnect-account block w-full text-right px-4 py-2 text-sm text-red-600 hover:bg-red-50 hover:text-red-700"
                                                data-account-id="{{ $account->id }}" data-username="{{ $account->username }}">
                                            <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="M17 12H7m0 0l4 4m-4-4l4-4"/>
                                            </svg>
                                            فصل الحساب
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- إحصائيات الحساب -->
                        <div class="grid grid-cols-3 gap-4 text-center mb-4">
                            <div class="p-3 border-l border-border">
                                <div class="text-lg font-bold text-foreground">{{ number_format($account->media_count) }}</div>
                                <div class="text-xs text-muted-foreground">منشور</div>
                            </div>
                            <div class="p-3 border-l border-border">
                                <div class="text-lg font-bold text-foreground">{{ number_format($account->followers_count) }}</div>
                                <div class="text-xs text-muted-foreground">متابع</div>
                            </div>
                            <div class="p-3">
                                <div class="text-lg font-bold text-foreground">{{ number_format($account->following_count) }}</div>
                                <div class="text-xs text-muted-foreground">متابَع</div>
                            </div>
                        </div>

                        <!-- حالة الرمز المميز -->
                        @if($account->isTokenExpired())
                            <div class="bg-yellow-50 border border-yellow-200 text-yellow-700 px-3 py-2 rounded-lg flex items-center gap-2 mb-4">
                                <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="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-xs">انتهت صلاحية الرمز المميز</span>
                            </div>
                        @else
                            <div class="bg-green-50 border border-green-200 text-green-700 px-3 py-2 rounded-lg flex items-center gap-2 mb-4">
                                <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">
                                    <polyline points="20 6 9 17 4 12"/>
                                </svg>
                                <span class="text-xs">الرمز المميز صالح</span>
                            </div>
                        @endif

                        <!-- إجراءات سريعة -->
                        <div class="grid grid-cols-2 gap-2">
                            <a href="{{ route('instagram.posts.index', ['account_id' => $account->id]) }}" 
                               class="inline-flex items-center justify-center gap-2 rounded-md border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground h-8 px-3 text-xs font-medium transition-all">
                                <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="18" height="18" x="3" y="3" rx="2" ry="2"/>
                                    <circle cx="9" cy="9" r="2"/>
                                    <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
                                </svg>
                                المنشورات
                            </a>
                            <a href="{{ route('instagram.comments.index', ['account_id' => $account->id]) }}" 
                               class="inline-flex items-center justify-center gap-2 rounded-md border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground h-8 px-3 text-xs font-medium transition-all">
                                <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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
                                </svg>
                                التعليقات
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

   
@endif
<div id="alerts-container" class="fixed top-4 right-4 z-50 space-y-2"></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        @if(session('error'))
            showAlert('error', "{{ session('error') }}");
        @endif

        @if(session('success'))
            showAlert('success', "{{ session('success') }}");
        @endif
    });
</script>
</div>

<!-- نافذة تأكيد فصل الحساب -->
<div id="disconnectModal" 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="closeDisconnectModal()">
                <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>هل أنت متأكد من فصل الحساب <strong id="disconnect-username"></strong>؟</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>
                <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="closeDisconnectModal()">إلغاء</button>
            <form id="disconnect-form" method="POST" 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 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">
                        <path d="M17 12H7m0 0l4 4m-4-4l4-4"/>
                    </svg>
                    فصل الحساب
                </button>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    
    // إدارة القوائم المنسدلة
    document.addEventListener('click', function(e) {
        if (e.target.closest('.account-menu-btn')) {
            const accountId = e.target.closest('.account-menu-btn').dataset.accountId;
            const menu = document.querySelector(`.account-menu[data-account-id="${accountId}"]`);
            
            // إخفاء جميع القوائم الأخرى
            document.querySelectorAll('.account-menu').forEach(m => {
                if (m !== menu) m.classList.add('hidden');
            });
            
            menu.classList.toggle('hidden');
            return;
        }

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

    // معالج فصل الحساب
    document.addEventListener('click', function(e) {
        if (e.target.closest('.disconnect-account')) {
            e.preventDefault();
            const button = e.target.closest('.disconnect-account');
            const accountId = button.dataset.accountId;
            const username = button.dataset.username;
            
            document.getElementById('disconnect-username').textContent = '@' + username;
          document.getElementById('disconnect-form').action = `/instagram/accounts/${accountId}/disconnect`;

            document.getElementById('disconnectModal').classList.remove('hidden');
        }
    });
});

function closeDisconnectModal() {
    document.getElementById('disconnectModal').classList.add('hidden');
}

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

window.addEventListener('click', function(e) {
    if (e.target === document.getElementById('disconnectModal')) {
        closeDisconnectModal();
    }
  
});
  
      function showAlert(type, message) {
        const container = document.getElementById('alerts-container');
        const alertDiv = document.createElement('div');
        const bgColor = type === 'success' ? 'bg-green-500' : 'bg-red-500';
        const icon = type === 'success' ? 
            '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>' :
            '<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>';
        
        alertDiv.className = `${bgColor} text-white px-4 py-3 rounded shadow-lg flex items-center gap-2 min-w-80 max-w-md`;
        alertDiv.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                ${icon}
            </svg>
            <span class="flex-1">${message}</span>
            <button type="button" class="text-white/80 hover:text-white" onclick="this.parentElement.remove()">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18"/>
                    <path d="m6 6 12 12"/>
                </svg>
            </button>
        `;
        
        container.appendChild(alertDiv);
        
        // إزالة التنبيه تلقائياً بعد 4 ثوانٍ
        setTimeout(() => {
            alertDiv.style.opacity = '0';
            alertDiv.style.transform = 'translateX(100%)';
            setTimeout(() => alertDiv.remove(), 300);
        }, 8000);
    }
  
</script>

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

.instagram-account-card:hover {
    transform: translateY(-4px);
}

/* تحسين مظهر الصور */
.w-15 {
    width: 3.75rem;
    height: 3.75rem;
}

.h-15 {
    width: 3.75rem;
    height: 3.75rem;
}

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

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

/* تحسين التجاوب */
@media (max-width: 768px) {
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .instagram-account-card {
        margin-bottom: 1rem;
    }
}

@media (max-width: 640px) {
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: 1fr;
    }
}
</style>

</x-app-layout>