{{-- resources/views/facebook-posts/show.blade.php --}}
<x-app-layout>
    <x-slot name="title">{{ $facebookPost->getTruncatedContent(50) }} - تفاصيل المنشور</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">تفاصيل المنشور</h1>
    <p class="text-muted-foreground">عرض تفاصيل وإحصائيات المنشور</p>
</div>

<div class="flex items-center gap-2">
    @if($facebookPost->canEdit())
        <a href="{{ route('facebook-posts.edit', $facebookPost) }}" 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-yellow-600 hover:bg-yellow-600/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>
    @endif
    
    @if(!$facebookPost->isPublished())
        <button class="publish-post 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-green-600 hover:bg-green-600/90"
                data-post-id="{{ $facebookPost->id }}">
            <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="18" height="18" x="3" y="3" rx="2"/>
                <path d="M9 9h6v6"/>
                <path d="m21 3-12 12"/>
            </svg>
            نشر الآن
        </button>
    @endif
    
    <a href="{{ route('facebook-posts.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 text-primary-foreground shadow-xs h-9 px-4 py-2 has-[>svg]:px-3 bg-gray-600 hover:bg-gray-600/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">
            <circle cx="12" cy="12" r="10"/>
            <path d="M12 8l-4 4 4 4M16 12H9"/>
        </svg>
        العودة
    </a>
</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>
                <div data-slot="card-title" class="font-semibold text-base sm:text-lg">محتوى المنشور</div>
                <small class="text-muted-foreground">{{ $facebookPost->facebookPage->name ?? 'صفحة محذوفة' }}</small>
            </div>
            <div class="flex items-center gap-2">
                {!! $facebookPost->getStatusBadge() !!}
                {!! $facebookPost->getTypeBadge() !!}
            </div>
        </div>

        <div data-slot="card-content" class="px-6 space-y-6">
            
            <!-- نص المنشور -->
            <div>
                <h6 class="font-medium text-sm mb-2">النص:</h6>
                <div class="bg-muted/50 p-4 rounded-lg border">
                    <p class="text-sm leading-relaxed whitespace-pre-line">{{ $facebookPost->content }}</p>
                </div>
            </div>

            <!-- المرفقات -->
            @if($facebookPost->media_urls)
                <div>
                    <h6 class="font-medium text-sm mb-3">المرفقات ({{ count($facebookPost->media_urls) }}):</h6>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        @foreach($facebookPost->media_urls as $index => $mediaUrl)
                            <div class="relative">
                                @if(in_array($facebookPost->type, ['image', 'carousel']))
                                    <img src="{{ Storage::url($mediaUrl) }}" 
                                         class="w-full h-48 object-cover rounded-lg border cursor-pointer hover:opacity-90 transition-opacity" 
                                         alt="Media {{ $index + 1 }}"
                                         onclick="openImageModal('{{ Storage::url($mediaUrl) }}')">
                                @else
                                    <div class="w-full h-48 bg-muted/50 rounded-lg border flex items-center justify-center">
                                        <div class="text-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary mx-auto mb-3">
                                                <polygon points="23 7 16 12 23 17 23 7"/>
                                                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                                            </svg>
                                            <h6 class="font-medium text-sm mb-1">{{ basename($mediaUrl) }}</h6>
                                            @if(isset($facebookPost->media_metadata[$index]))
                                                <small class="text-muted-foreground text-xs">
                                                    {{ round($facebookPost->media_metadata[$index]['size'] / 1024 / 1024, 2) }} MB
                                                </small>
                                            @endif
                                            <br>
                                            <a href="{{ Storage::url($mediaUrl) }}" 
                                               class="inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium transition-all hover:bg-accent hover:text-accent-foreground h-7 px-3 mt-2 border border-border" 
                                               target="_blank">
                                                <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">
                                                    <polygon points="5 3 19 12 5 21 5 3"/>
                                                </svg>
                                                تشغيل
                                            </a>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- استجابة فيسبوك -->
            @if($facebookPost->facebook_response)
                <div>
                    <h6 class="font-medium text-sm mb-2">استجابة فيسبوك:</h6>
                    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-4 rounded-lg">
                        <div class="flex items-center gap-2 mb-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" class="text-green-600">
                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                                <polyline points="22 4 12 14.01 9 11.01"/>
                            </svg>
                            <strong class="text-sm">تم النشر بنجاح</strong>
                        </div>
                        @if(isset($facebookPost->facebook_response['id']))
                            <div class="text-xs text-green-600 mb-3">
                                معرف المنشور: {{ $facebookPost->facebook_response['id'] }}
                            </div>
                            <a href="https://facebook.com/{{ $facebookPost->facebook_response['id'] }}" 
                               target="_blank" 
                               class="inline-flex items-center justify-center gap-2 rounded-md text-xs font-medium transition-all hover:bg-accent hover:text-accent-foreground h-7 px-3 border border-green-300 text-green-700 hover:bg-green-100">
                                <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 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                                </svg>
                                عرض على فيسبوك
                            </a>
                        @endif
                    </div>
                </div>
            @endif

            <!-- رسالة الخطأ -->
            @if($facebookPost->error_message)
                <div>
                    <h6 class="font-medium text-sm mb-2">رسالة الخطأ:</h6>
                    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
                        <div class="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"/>
                                <line x1="15" y1="9" x2="9" y2="15"/>
                                <line x1="9" y1="9" x2="15" y2="15"/>
                            </svg>
                            <p class="text-sm">{{ $facebookPost->error_message }}</p>
                        </div>
                    </div>
                </div>
            @endif

        </div>
    </div>

    <!-- إحصائيات المنشور -->
    @if($facebookPost->isPublished())
        <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">
                        <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="grid grid-cols-3 gap-4 text-center mb-6">
                    <div class="border-l border-border last:border-l-0">
                        <h3 class="text-2xl font-bold text-blue-600">{{ number_format($facebookPost->likes_count) }}</h3>
                        <p class="text-muted-foreground text-sm flex items-center justify-center gap-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">
                                <path d="M7 10v12"/>
                                <path d="M15 5v14"/>
                                <path d="M12 8v8"/>
                                <path d="M2 4v16l7-7-7-9z"/>
                            </svg>
                            إعجاب
                        </p>
                    </div>
                    <div class="border-l border-border last:border-l-0">
                        <h3 class="text-2xl font-bold text-green-600">{{ number_format($facebookPost->comments_count) }}</h3>
                        <p class="text-muted-foreground text-sm flex items-center justify-center gap-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">
                                <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
                            </svg>
                            تعليق
                        </p>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-cyan-600">{{ number_format($facebookPost->shares_count) }}</h3>
                        <p class="text-muted-foreground text-sm flex items-center justify-center gap-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">
                                <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
                                <polyline points="16 6 12 2 8 6"/>
                                <line x1="12" y1="2" x2="12" y2="15"/>
                            </svg>
                            مشاركة
                        </p>
                    </div>
                </div>
                
                <div class="border-t border-border pt-4 text-center">
                    <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" 
                            id="refresh-stats" data-post-id="{{ $facebookPost->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">
                            <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 3v5h-5"/>
                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
                            <path d="M3 21v-5h5"/>
                        </svg>
                        تحديث الإحصائيات
                    </button>
                </div>
            </div>
        </div>
    @endif

</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">معلومات المنشور</div>
            <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-info h-4 w-4 text-muted-foreground">
                <circle cx="12" cy="12" r="10"/>
                <path d="m9 9 1.5 1.5L16.5 4.5"/>
            </svg>
        </div>

        <div data-slot="card-content" class="px-6 space-y-3">
            <div class="flex items-center justify-between gap-3">
                <span class="text-sm text-muted-foreground">الصفحة:</span>
                <p href="{{ $facebookPost->facebookPage->name }}" 
                   class="text-sm text-primary hover:underline">
                    {{ $facebookPost->facebookPage->name ?? 'صفحة محذوفة' }}
                </p>
            </div>
            <div class="flex items-center justify-between gap-3">
                <span class="text-sm text-muted-foreground">النوع:</span>
                <div>{!! $facebookPost->getTypeBadge() !!}</div>
            </div>
            <div class="flex items-center justify-between gap-3">
                <span class="text-sm text-muted-foreground">الحالة:</span>
                <div>{!! $facebookPost->getStatusBadge() !!}</div>
            </div>
            <div class="flex items-center justify-between gap-3">
                <span class="text-sm text-muted-foreground">تاريخ الإنشاء:</span>
                <span class="text-sm">{{ $facebookPost->created_at->format('Y-m-d H:i') }}</span>
            </div>
            @if($facebookPost->isScheduled())
                <div class="flex items-center justify-between gap-3">
                    <span class="text-sm text-muted-foreground">موعد النشر:</span>
                    <div class="text-left">
                        <div class="text-sm">{{ auth()->user()->toUserTime($facebookPost->scheduled_at)->format('Y-m-d H:i') }}</div>
                        <small class="text-muted-foreground">{{ $facebookPost->scheduled_at->diffForHumans() }}</small>
                    </div>
                </div>
            @endif
            @if($facebookPost->published_at)
                <div class="flex items-center justify-between gap-3">
                    <span class="text-sm text-muted-foreground">تاريخ النشر:</span>
                    <div class="text-left">
                        <div class="text-sm">{{ $facebookPost->published_at->format('Y-m-d H:i') }}</div>
                        <small class="text-muted-foreground">{{ $facebookPost->published_at->diffForHumans() }}</small>
                    </div>
                </div>
            @endif
            @if($facebookPost->media_urls)
                <div class="flex items-center justify-between gap-3">
                    <span class="text-sm text-muted-foreground">عدد الملفات:</span>
                    <span class="text-sm">{{ count($facebookPost->media_urls) }}</span>
                </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">الإجراءات</div>
        </div>

        <div data-slot="card-content" class="px-6 space-y-3">
            @if($facebookPost->canEdit())
                <a href="{{ route('facebook-posts.edit', $facebookPost) }}" 
                   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-yellow-600 hover:bg-yellow-600/90 w-full">
                    <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="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>
            @endif

            @if(!$facebookPost->isPublished())
                <button class="publish-post 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-green-600 hover:bg-green-600/90 w-full" 
                        data-post-id="{{ $facebookPost->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">
                        <rect width="18" height="18" x="3" y="3" rx="2"/>
                        <path d="M9 9h6v6"/>
                        <path d="m21 3-12 12"/>
                    </svg>
                    نشر الآن
                </button>
            @endif

            @if($facebookPost->canDelete())
                <button class="delete-post 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-red-300 text-red-600 hover:bg-red-50 w-full" 
                        data-post-id="{{ $facebookPost->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">
                        <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>
            @endif

            <div class="border-t border-border pt-3">
                <a href="{{ route('facebook-posts.create') }}" 
                   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 w-full">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="5" x2="12" y2="19"/>
                        <line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                    منشور جديد
                </a>
            </div>
        </div>
    </div>

    <!-- منشورات أخيرة -->
    @if(isset($recentPosts) && $recentPosts->count() > 0)
        <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">منشورات أخيرة</div>
            </div>

            <div data-slot="card-content" class="px-6 space-y-3">
                @foreach($recentPosts as $recentPost)
                    <div class="flex items-start gap-3 {{ !$loop->last ? 'pb-3 border-b border-border' : '' }}">
                        @if($recentPost->getPreviewImage())
                            <img src="{{ $recentPost->getPreviewImage() }}" 
                                 class="w-10 h-10 rounded-lg object-cover flex-shrink-0" alt="Preview">
                        @else
                            <div class="w-10 h-10 bg-muted/50 rounded-lg 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-muted-foreground">
                                    <path d="M14 2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6z"/>
                                    <polyline points="14 2 14 8 20 8"/>
                                    <line x1="16" y1="13" x2="8" y2="13"/>
                                    <line x1="16" y1="17" x2="8" y2="17"/>
                                    <polyline points="10 9 9 9 8 9"/>
                                </svg>
                            </div>
                        @endif
                        <div class="flex-1 min-w-0">
                            <h6 class="text-sm font-medium mb-1">
                                <a href="{{ route('facebook-posts.show', $recentPost) }}" 
                                   class="text-foreground hover:text-primary transition-colors">
                                    {{ $recentPost->getTruncatedContent(50) }}
                                </a>
                            </h6>
                            <div class="flex items-center gap-2 text-xs">
                                {!! $recentPost->getStatusBadge() !!}
                                <span class="text-muted-foreground">{{ $recentPost->created_at->diffForHumans() }}</span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

</div>

</div>

</div>

<!-- نافذة عرض الصورة -->
<div id="imageModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-card rounded-lg border shadow-lg w-full max-w-4xl mx-4 max-h-[90vh] overflow-hidden">
        <div class="flex items-center justify-between p-4 border-b border-border">
            <h5 class="font-semibold">عرض الصورة</h5>
            <button type="button" class="text-muted-foreground hover:text-foreground" onclick="closeImageModal()">
                <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 text-center max-h-[calc(90vh-8rem)] overflow-auto">
            <img id="modal-image" src="" class="max-w-full max-h-full object-contain rounded-lg" alt="صورة">
        </div>
    </div>
</div>

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

<script>
document.addEventListener("DOMContentLoaded", function () {
    
    // نشر المنشور
    document.addEventListener('click', function(e) {
        if (e.target.closest('.publish-post')) {
            const postId = e.target.closest('.publish-post').dataset.postId;
            const btn = e.target.closest('.publish-post');
            const originalHtml = btn.innerHTML;
            
            if (confirm('هل أنت متأكد من نشر هذا المنشور الآن؟')) {
                btn.innerHTML = '<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="animate-spin"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 21v-5h5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/></svg> جاري النشر...';
                btn.disabled = true;
                
                fetch(`/facebook-posts/${postId}/publish`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('success', 'تم نشر المنشور بنجاح!');
                        setTimeout(() => location.reload(), 2000);
                    } else {
                        showAlert('error', data.message || 'فشل في نشر المنشور');
                        btn.innerHTML = originalHtml;
                        btn.disabled = false;
                    }
                })
                .catch(error => {
                    showAlert('error', 'حدث خطأ أثناء النشر');
                    btn.innerHTML = originalHtml;
                    btn.disabled = false;
                });
            }
        }
    });

    // حذف المنشور
    document.addEventListener('click', function(e) {
        if (e.target.closest('.delete-post')) {
            const postId = e.target.closest('.delete-post').dataset.postId;
            
            if (confirm('هل أنت متأكد من حذف هذا المنشور؟ هذا الإجراء لا يمكن التراجع عنه.')) {
                fetch(`/facebook-posts/${postId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    showAlert('success', 'تم حذف المنشور بنجاح');
                    setTimeout(() => {
                        window.location.href = '{{ route("facebook-posts.index") }}';
                    }, 1500);
                })
                .catch(error => {
                    showAlert('error', 'حدث خطأ أثناء حذف المنشور');
                });
            }
        }
    });

    // تحديث الإحصائيات
    document.getElementById('refresh-stats')?.addEventListener('click', function() {
        const btn = this;
        const originalHtml = btn.innerHTML;
        
        btn.innerHTML = '<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="animate-spin"><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 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg> جاري التحديث...';
        btn.disabled = true;
        
        // This would call an API endpoint to refresh stats from Facebook
        setTimeout(() => {
            btn.innerHTML = originalHtml;
            btn.disabled = false;
            showAlert('info', 'سيتم إضافة تحديث الإحصائيات في إصدار قادم');
        }, 2000);
    });

    function showAlert(type, message) {
        const container = document.getElementById('alerts-container');
        const alertDiv = document.createElement('div');
        const bgColor = type === 'success' ? 'bg-green-500' : 
                        type === 'info' ? 'bg-blue-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"/>' :
            type === 'info' ? 
            '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>' :
            '<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);
        }, 4000);
    }
});

// وظائف عرض الصور
function openImageModal(imageUrl) {
    document.getElementById('modal-image').src = imageUrl;
    document.getElementById('imageModal').classList.remove('hidden');
}

function closeImageModal() {
    document.getElementById('imageModal').classList.add('hidden');
}

// إغلاق النافذة عند النقر خارجها
window.addEventListener('click', function(e) {
    if (e.target === document.getElementById('imageModal')) {
        closeImageModal();
    }
});
</script>

</x-app-layout>