{{-- resources/views/facebook-pages/connect.blade.php --}}
<x-app-layout>
    <x-slot name="title">ربط حساب فيسبوك - اربط حسابك لإدارة الصفحات والردود التلقائية</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>

<a href="{{ route('facebook-pages.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 class="flex justify-center">
    <div class="w-full max-w-2xl">
        <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-8 shadow-sm">
            <div data-slot="card-content" class="px-8 text-center">
                
                <!-- الأيقونة والعنوان -->
                <div class="mb-8">
                    <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <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-blue-600">
                            <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-foreground mb-2">ربط حساب فيسبوك</h3>
                    <p class="text-muted-foreground">اربط حساب فيسبوك الخاص بك لإدارة صفحاتك والردود التلقائية</p>
                </div>

                <!-- المميزات -->
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6 text-right">
                    <div class="flex items-center gap-2 mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600">
                            <circle cx="12" cy="12" r="10"/>
                            <path d="m9 12 2 2 4-4"/>
                        </svg>
                        <h6 class="font-semibold text-blue-800">ما ستحصل عليه:</h6>
                    </div>
                    <ul class="space-y-2 text-sm text-blue-700">
                        <li 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" class="text-blue-500">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            إدارة صفحاتك تلقائياً
                        </li>
                        <li 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" class="text-blue-500">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            إنشاء ردود تلقائية للتعليقات
                        </li>
                        <li 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" class="text-blue-500">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            إرسال رسائل خاصة للمعلقين
                        </li>
                        <li 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" class="text-blue-500">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            مراقبة النشاط والإحصائيات
                        </li>
                        <li 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" class="text-blue-500">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            تحليل التعليقات والتفاعلات
                        </li>
                    </ul>
                </div>

                <!-- الصلاحيات المطلوبة
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 mb-8 text-right">
                    <div class="flex items-center gap-2 mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-600">
                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/>
                            <path d="m9 12 2 2 4-4"/>
                        </svg>
                        <h6 class="font-semibold text-yellow-800">الصلاحيات المطلوبة:</h6>
                    </div>
                    <div class="space-y-3 text-sm text-yellow-700">
                        <div class="flex items-start 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" class="text-yellow-500 mt-0.5 flex-shrink-0">
                                <circle cx="12" cy="12" r="3"/>
                                <path d="M12 1v6m0 6v6"/>
                                <path d="m21 12-6 0m-6 0-6 0"/>
                            </svg>
                            <div>
                                <strong>pages_show_list:</strong> عرض قائمة صفحاتك المتاحة
                            </div>
                        </div>
                        <div class="flex items-start 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" class="text-yellow-500 mt-0.5 flex-shrink-0">
                                <circle cx="12" cy="12" r="3"/>
                                <path d="M12 1v6m0 6v6"/>
                                <path d="m21 12-6 0m-6 0-6 0"/>
                            </svg>
                            <div>
                                <strong>pages_manage_posts:</strong> إدارة منشورات الصفحة والتعليق عليها
                            </div>
                        </div>
                        <div class="flex items-start 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" class="text-yellow-500 mt-0.5 flex-shrink-0">
                                <circle cx="12" cy="12" r="3"/>
                                <path d="M12 1v6m0 6v6"/>
                                <path d="m21 12-6 0m-6 0-6 0"/>
                            </svg>
                            <div>
                                <strong>pages_manage_engagement:</strong> الرد على التعليقات والرسائل
                            </div>
                        </div>
                        <div class="flex items-start 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" class="text-yellow-500 mt-0.5 flex-shrink-0">
                                <circle cx="12" cy="12" r="3"/>
                                <path d="M12 1v6m0 6v6"/>
                                <path d="m21 12-6 0m-6 0-6 0"/>
                            </svg>
                            <div>
                                <strong>pages_read_engagement:</strong> قراءة التعليقات والتفاعلات
                            </div>
                        </div>
                    </div>
                </div> -->

                <!-- زر الربط -->
                <div class="mb-6">
                    <a href="{{ route('facebook.auth.redirect') }}" 
                       class="inline-flex items-center justify-center gap-3 whitespace-nowrap rounded-lg text-base font-semibold transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5 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-white shadow-lg h-12 px-8 py-3 bg-blue-600 hover:bg-blue-700 transform hover:scale-[1.02]">
                        <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">
                            <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                        </svg>
                        تسجيل الدخول بفيسبوك
                    </a>
                </div>

                <!-- ملاحظة الموافقة -->
                <div class="text-center">
                    <p class="text-xs text-muted-foreground leading-relaxed">
                        بالنقر على "تسجيل الدخول بفيسبوك" فإنك توافق على منح التطبيق صلاحيات إدارة صفحاتك.<br>
                        يمكنك إلغاء هذه الصلاحيات في أي وقت من إعدادات حسابك على فيسبوك.
                    </p>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- بطاقات المعلومات الإضافية -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
    
    <!-- الأمان والخصوصية -->
    <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
        <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
            <div data-slot="card-title" class="font-semibold text-base sm:text-lg flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/>
                    <path d="m9 12 2 2 4-4"/>
                </svg>
                الأمان والخصوصية
            </div>
        </div>

        <div data-slot="card-content" class="px-6">
            <p class="text-sm text-muted-foreground mb-4">نحن نلتزم بحماية بياناتك وخصوصيتك</p>
            <ul class="space-y-2 text-sm">
                <li class="flex items-center gap-2 text-green-700">
                    <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>
                    تشفير آمن للبيانات
                </li>
                <li class="flex items-center gap-2 text-green-700">
                    <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>
                    عدم مشاركة البيانات مع الغير
                </li>
                <li class="flex items-center gap-2 text-green-700">
                    <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>
                    إمكانية إلغاء الربط في أي وقت
                </li>
            </ul>
        </div>
    </div>

    <!-- الميزات المتقدمة -->
    <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
        <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
            <div data-slot="card-title" class="font-semibold text-base sm:text-lg flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-purple-600">
                    <path d="M12 2a3 3 0 0 0-3 3v4a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
                    <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
                    <line x1="12" y1="19" x2="12" y2="23"/>
                    <line x1="8" y1="23" x2="16" y2="23"/>
                </svg>
                الميزات المتقدمة
            </div>
        </div>

        <div data-slot="card-content" class="px-6">
            <p class="text-sm text-muted-foreground mb-4">أدوات متقدمة لإدارة صفحاتك بفعالية</p>
            <ul class="space-y-2 text-sm">
                <li class="flex items-center gap-2 text-purple-700">
                    <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>
                    ردود ذكية بالذكاء الاصطناعي
                </li>
                <li class="flex items-center gap-2 text-purple-700">
                    <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>
                    تحليلات مفصلة للأداء
                </li>
                <li class="flex items-center gap-2 text-purple-700">
                    <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>
                    جدولة الردود التلقائية
                </li>
            </ul>
        </div>
    </div>

    <!-- الدعم الفني -->
    <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
        <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
            <div data-slot="card-title" class="font-semibold text-base sm:text-lg flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600">
                    <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
                </svg>
                الدعم الفني
            </div>
        </div>

        <div data-slot="card-content" class="px-6">
            <p class="text-sm text-muted-foreground mb-4">نحن هنا لمساعدتك في كل خطوة</p>
            <ul class="space-y-2 text-sm">
                <li class="flex items-center gap-2 text-blue-700">
                    <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>
                    دعم فني 24/7
                </li>
                <li class="flex items-center gap-2 text-blue-700">
                    <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>
                    دليل استخدام مفصل
                </li>
                <li class="flex items-center gap-2 text-blue-700">
                    <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>
                    مجتمع المستخدمين النشط
                </li>
            </ul>
        </div>
    </div>

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

</div>
<!-- مكان للتنبيهات -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
        // عرض رسائل الجلسة
        @if(session('error'))
            showAlert('error', "{{ session('error') }}");
        @endif

        @if(session('success'))
            showAlert('success', "{{ session('success') }}");
        @endif

        @if(session('warning'))
            showAlert('warning', "{{ session('warning') }}");
        @endif

        @if(session('info'))
            showAlert('info', "{{ session('info') }}");
        @endif
    });

    function showAlert(type, message) {
        const container = document.getElementById('alerts-container');
        if (!container) {
            console.error('Alerts container not found');
            return;
        }

        const bgColor = 
            type === 'success' ? 'bg-green-500' : 
            type === 'error' ? 'bg-red-500' :
            type === 'warning' ? 'bg-yellow-500' :
            'bg-blue-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 === 'error' ?
                '<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"/>' :
            type === 'warning' ?
                '<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>' :
            '<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>';

        const alertDiv = document.createElement('div');
        alertDiv.className = `${bgColor} text-white px-4 py-3 rounded shadow-lg flex items-center gap-2 min-w-80 max-w-md transform transition-all duration-300 ease-in-out translate-x-0 opacity-100`;
        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 close-alert">
                <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);

        // إضافة حدث إغلاق للزر
        const closeButton = alertDiv.querySelector('.close-alert');
        closeButton.addEventListener('click', function() {
            alertDiv.style.opacity = '0';
            alertDiv.style.transform = 'translateX(100%)';
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 300);
        });

        // إزالة التنبيه تلقائياً بعد 4 ثوانٍ
        setTimeout(() => {
            alertDiv.style.opacity = '0';
            alertDiv.style.transform = 'translateX(100%)';
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 300);
        }, 8000);
    }
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    // إضافة تأثيرات تفاعلية للأزرار
    const connectButton = document.querySelector('a[href*="facebook.auth.redirect"]');
    
    if (connectButton) {
        connectButton.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.02)';
        });
        
        connectButton.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
        
        connectButton.addEventListener('click', function(e) {
            this.innerHTML = `
                <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="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>
                جاري التوجيه إلى فيسبوك...
            `;
            this.style.pointerEvents = 'none';
        });
    }
});
</script>

</x-app-layout>