<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? (array) $attributes->getIterator() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag && $constructor = (new ReflectionClass(App\View\Components\AppLayout::class))->getConstructor()): ?>
<?php $attributes = $attributes->except(collect($constructor->getParameters())->map->getName()->all()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
   <div class="p-4 space-y-4 md:space-y-5">
                <script src="https://kit.fontawesome.com/6130ba508c.js" crossorigin="anonymous"></script>

        <div class="flex justify-between items-center">
            <div>
                <div class="flex items-center gap-2">
                    <a href="<?php echo e(route('messenger-flows.index')); ?>" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h2 class="font-semibold text-xl text-gray-800">
                        قوالب Flow جاهزة
                    </h2>
                </div>
                <p class="text-sm text-gray-500 mt-1">اختر قالباً جاهزاً للبدء السريع</p>
            </div>
            <a href="<?php echo e(route('messenger-flows.builder')); ?>" 
               class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90">
                <i class="fas fa-plus mr-2"></i>إنشاء من الصفر
            </a>
        </div>

        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                
                <!-- Template 1: Welcome Message -->
                <div class="bg-white rounded-lg shadow-sm border hover:shadow-md transition-all">
                    <div class="p-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-hand-wave text-white text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">رسالة ترحيب بسيطة</h3>
                        <p class="text-sm text-gray-600 mb-4">
                            رسالة ترحيب تلقائية مع خيارات للمستخدم
                        </p>
                        
                        <div class="space-y-2 mb-4 text-xs">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>رسالة ترحيب نصية</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>أزرار خيارات (استفسار / شكوى)</span>
                            </div>
                        </div>

                        <button onclick="useTemplate('welcome')" 
                                class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                            <i class="fas fa-rocket mr-2"></i>استخدام القالب
                        </button>
                    </div>
                </div>
<!-- Template: AI Assistant -->
<div class="bg-white rounded-lg shadow-sm border hover:shadow-md transition-all">
    <div class="p-6">
        <div class="w-12 h-12 bg-gradient-to-br from-teal-500 to-teal-600 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-brain text-white text-xl"></i>
        </div>
        <h3 class="text-lg font-semibold mb-2">مساعد ذكي AI</h3>
        <p class="text-sm text-gray-600 mb-4">
            شات بوت مدعوم بالذكاء الاصطناعي يجيب على جميع الأسئلة
        </p>
        
        <div class="space-y-2 mb-4 text-xs">
            <div class="flex items-center gap-2 text-gray-600">
                <i class="fas fa-check text-green-500"></i>
                <span>ردود ذكية مخصصة</span>
            </div>
            <div class="flex items-center gap-2 text-gray-600">
                <i class="fas fa-check text-green-500"></i>
                <span>فهم سياق المحادثة</span>
            </div>
            <div class="flex items-center gap-2 text-gray-600">
                <i class="fas fa-check text-green-500"></i>
                <span>تحويل للدعم البشري</span>
            </div>
        </div>

        <button onclick="useTemplate('ai_assistant')" 
                class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
            <i class="fas fa-rocket mr-2"></i>استخدام القالب
        </button>
    </div>
</div>
                <!-- Template 2: FAQ Bot -->
                <div class="bg-white rounded-lg shadow-sm border hover:shadow-md transition-all">
                    <div class="p-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-question-circle text-white text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">بوت الأسئلة الشائعة</h3>
                        <p class="text-sm text-gray-600 mb-4">
                            للإجابة على الأسئلة المتكررة تلقائياً
                        </p>
                        
                        <div class="space-y-2 mb-4 text-xs">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>قائمة أسئلة مع ردود سريعة</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>إجابات تفصيلية لكل سؤال</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>خيار "مساعدة أخرى"</span>
                            </div>
                        </div>

                        <button onclick="useTemplate('faq')" 
                                class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                            <i class="fas fa-rocket mr-2"></i>استخدام القالب
                        </button>
                    </div>
                </div>

                <!-- Template 3: Product Showcase -->
                <div class="bg-white rounded-lg shadow-sm border hover:shadow-md transition-all">
                    <div class="p-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-pink-500 to-pink-600 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-shopping-bag text-white text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">عرض المنتجات</h3>
                        <p class="text-sm text-gray-600 mb-4">
                            عرض منتجاتك في Carousel تفاعلي
                        </p>
                        
                        <div class="space-y-2 mb-4 text-xs">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>Carousel بالمنتجات</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>أزرار للتفاصيل والطلب</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>معلومات الاتصال</span>
                            </div>
                        </div>

                        <button onclick="useTemplate('products')" 
                                class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                            <i class="fas fa-rocket mr-2"></i>استخدام القالب
                        </button>
                    </div>
                </div>

                <!-- Template 4: Survey Bot -->
                <div class="bg-white rounded-lg shadow-sm border hover:shadow-md transition-all">
                    <div class="p-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-poll text-white text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">استبيان تفاعلي</h3>
                        <p class="text-sm text-gray-600 mb-4">
                            جمع آراء العملاء وتقييماتهم
                        </p>
                        
                        <div class="space-y-2 mb-4 text-xs">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>أسئلة متعددة الخيارات</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>تقييم بالنجوم</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>رسالة شكر نهائية</span>
                            </div>
                        </div>

                        <button onclick="useTemplate('survey')" 
                                class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                            <i class="fas fa-rocket mr-2"></i>استخدام القالب
                        </button>
                    </div>
                </div>

                <!-- Template 5: Appointment Booking -->
                <div class="bg-white rounded-lg shadow-sm border hover:shadow-md transition-all">
                    <div class="p-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-calendar-check text-white text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">حجز موعد</h3>
                        <p class="text-sm text-gray-600 mb-4">
                            نظام حجز مواعيد تفاعلي
                        </p>
                        
                        <div class="space-y-2 mb-4 text-xs">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>اختيار نوع الخدمة</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>تحديد التاريخ والوقت</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>تأكيد الحجز</span>
                            </div>
                        </div>

                        <button onclick="useTemplate('booking')" 
                                class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                            <i class="fas fa-rocket mr-2"></i>استخدام القالب
                        </button>
                    </div>
                </div>

                <!-- Template 6: Lead Collection -->
                <div class="bg-white rounded-lg shadow-sm border hover:shadow-md transition-all">
                    <div class="p-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-user-plus text-white text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">جمع بيانات العملاء</h3>
                        <p class="text-sm text-gray-600 mb-4">
                            جمع معلومات الاتصال من العملاء المحتملين
                        </p>
                        
                        <div class="space-y-2 mb-4 text-xs">
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>طلب الاسم ورقم الهاتف</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>الاهتمامات والاحتياجات</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-600">
                                <i class="fas fa-check text-green-500"></i>
                                <span>رسالة شكر وتواصل</span>
                            </div>
                        </div>

                        <button onclick="useTemplate('lead')" 
                                class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                            <i class="fas fa-rocket mr-2"></i>استخدام القالب
                        </button>
                    </div>
                </div>

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

    <script>
        const templates = {
            welcome: {
                nodes: [
                    {
                        id: 'node-1',
                        type: 'start',
                        position: { x: 100, y: 50 },
                        data: {}
                    },
                    {
                        id: 'node-2',
                        type: 'text',
                        position: { x: 100, y: 150 },
                        data: { text: 'مرحباً {name}! 👋\n\nأهلاً بك في خدمة العملاء الذكية.\nكيف يمكنني مساعدتك اليوم؟' }
                    },
                    {
                        id: 'node-3',
                        type: 'buttons',
                        position: { x: 100, y: 280 },
                        data: { 
                            text: 'اختر أحد الخيارات:', 
                            buttons: [
                                { title: '💬 لدي استفسار', payload: 'inquiry', type: 'postback' },
                                { title: '⚠️ لدي شكوى', payload: 'complaint', type: 'postback' },
                                { title: '📞 تواصل معنا', payload: 'contact', type: 'postback' }
                            ]
                        }
                    },
                    {
                        id: 'node-4',
                        type: 'text',
                        position: { x: -100, y: 430 },
                        data: { text: 'شكراً لتواصلك! 😊\n\nسيقوم أحد ممثلي خدمة العملاء بالرد عليك في أقرب وقت ممكن.' }
                    },
                    {
                        id: 'node-5',
                        type: 'text',
                        position: { x: 300, y: 430 },
                        data: { text: 'نأسف لما حدث 😔\n\nسنعمل على حل المشكلة فوراً. يرجى وصف المشكلة بالتفصيل.' }
                    },
                    {
                        id: 'node-6',
                        type: 'end',
                        position: { x: 100, y: 580 },
                        data: {}
                    }
                ],
                connections: [
                    { source: 'node-1', target: 'node-2', label: '' },
                    { source: 'node-2', target: 'node-3', label: '' },
                    { source: 'node-3', target: 'node-4', label: 'inquiry' },
                    { source: 'node-3', target: 'node-5', label: 'complaint' },
                    { source: 'node-4', target: 'node-6', label: '' },
                    { source: 'node-5', target: 'node-6', label: '' }
                ]
            },
            
            faq: {
                nodes: [
                    {
                        id: 'node-1',
                        type: 'start',
                        position: { x: 150, y: 50 },
                        data: {}
                    },
                    {
                        id: 'node-2',
                        type: 'text',
                        position: { x: 150, y: 150 },
                        data: { text: 'مرحباً! 👋\n\nمركز الأسئلة الشائعة في خدمتك.' }
                    },
                    {
                        id: 'node-3',
                        type: 'quick_replies',
                        position: { x: 150, y: 270 },
                        data: { 
                            text: 'اختر السؤال الذي تبحث عن إجابته:', 
                            quick_replies: [
                                { title: '⏰ ساعات العمل', payload: 'hours' },
                                { title: '📍 الموقع', payload: 'location' },
                                { title: '💰 الأسعار', payload: 'prices' },
                                { title: '🚚 التوصيل', payload: 'delivery' }
                            ]
                        }
                    },
                    {
                        id: 'node-4',
                        type: 'text',
                        position: { x: -100, y: 420 },
                        data: { text: '⏰ ساعات العمل:\n\nالسبت - الخميس: 9 صباحاً - 9 مساءً\nالجمعة: 2 ظهراً - 9 مساءً' }
                    },
                    {
                        id: 'node-5',
                        type: 'text',
                        position: { x: 100, y: 420 },
                        data: { text: '📍 موقعنا:\n\nشارع الملك فهد، الرياض\nمقابل مركز التسوق الكبير' }
                    },
                    {
                        id: 'node-6',
                        type: 'buttons',
                        position: { x: 150, y: 570 },
                        data: { 
                            text: 'هل تحتاج مساعدة أخرى؟',
                            buttons: [
                                { title: 'نعم', payload: 'yes_more', type: 'postback' },
                                { title: 'لا، شكراً', payload: 'no_thanks', type: 'postback' }
                            ]
                        }
                    },
                    {
                        id: 'node-7',
                        type: 'end',
                        position: { x: 150, y: 720 },
                        data: {}
                    }
                ],
                connections: [
                    { source: 'node-1', target: 'node-2', label: '' },
                    { source: 'node-2', target: 'node-3', label: '' },
                    { source: 'node-3', target: 'node-4', label: 'hours' },
                    { source: 'node-3', target: 'node-5', label: 'location' },
                    { source: 'node-4', target: 'node-6', label: '' },
                    { source: 'node-5', target: 'node-6', label: '' },
                    { source: 'node-6', target: 'node-3', label: 'yes_more' },
                    { source: 'node-6', target: 'node-7', label: 'no_thanks' }
                ]
            },

            products: {
                nodes: [
                    {
                        id: 'node-1',
                        type: 'start',
                        position: { x: 150, y: 50 },
                        data: {}
                    },
                    {
                        id: 'node-2',
                        type: 'text',
                        position: { x: 150, y: 150 },
                        data: { text: '🛍️ مرحباً بك في متجرنا!\n\nتصفح منتجاتنا الرائعة:' }
                    },
                    {
                        id: 'node-3',
                        type: 'carousel',
                        position: { x: 150, y: 270 },
                        data: { 
                            elements: [
                                { 
                                    title: 'منتج مميز 1', 
                                    subtitle: 'وصف المنتج الأول - السعر: 299 ريال', 
                                    image_url: 'https://placehold.co/400x300/4F46E5/FFFFFF?text=منتج+1',
                                    buttons: [
                                        { title: '🛒 اطلب الآن', payload: 'order_1', type: 'postback' },
                                        { title: 'ℹ️ المزيد', payload: 'details_1', type: 'postback' }
                                    ]
                                },
                                { 
                                    title: 'منتج مميز 2', 
                                    subtitle: 'وصف المنتج الثاني - السعر: 399 ريال', 
                                    image_url: 'https://placehold.co/400x300/8B5CF6/FFFFFF?text=منتج+2',
                                    buttons: [
                                        { title: '🛒 اطلب الآن', payload: 'order_2', type: 'postback' },
                                        { title: 'ℹ️ المزيد', payload: 'details_2', type: 'postback' }
                                    ]
                                }
                            ]
                        }
                    },
                    {
                        id: 'node-4',
                        type: 'text',
                        position: { x: 150, y: 420 },
                        data: { text: 'رائع! 🎉\n\nللطلب، تواصل معنا عبر:\n📞 الهاتف: 0501234567\n📧 البريد: orders@example.com' }
                    },
                    {
                        id: 'node-5',
                        type: 'end',
                        position: { x: 150, y: 570 },
                        data: {}
                    }
                ],
                connections: [
                    { source: 'node-1', target: 'node-2', label: '' },
                    { source: 'node-2', target: 'node-3', label: '' },
                    { source: 'node-3', target: 'node-4', label: '' },
                    { source: 'node-4', target: 'node-5', label: '' }
                ]
            },

            survey: {
                nodes: [
                    {
                        id: 'node-1',
                        type: 'start',
                        position: { x: 150, y: 50 },
                        data: {}
                    },
                    {
                        id: 'node-2',
                        type: 'text',
                        position: { x: 150, y: 150 },
                        data: { text: '📊 استبيان رضا العملاء\n\nنقدّر وقتك في مشاركة رأيك معنا! 🙏' }
                    },
                    {
                        id: 'node-3',
                        type: 'quick_replies',
                        position: { x: 150, y: 270 },
                        data: { 
                            text: 'كيف تقيّم تجربتك معنا؟', 
                            quick_replies: [
                                { title: '⭐⭐⭐⭐⭐ ممتازة', payload: 'rate_5' },
                                { title: '⭐⭐⭐⭐ جيدة جداً', payload: 'rate_4' },
                                { title: '⭐⭐⭐ جيدة', payload: 'rate_3' },
                                { title: '⭐⭐ مقبولة', payload: 'rate_2' },
                                { title: '⭐ ضعيفة', payload: 'rate_1' }
                            ]
                        }
                    },
                    {
                        id: 'node-4',
                        type: 'text',
                        position: { x: 150, y: 420 },
                        data: { text: 'شكراً لتقييمك! 🎉\n\nنسعد دائماً بخدمتك.\nنتطلع لرؤيتك مجدداً!' }
                    },
                    {
                        id: 'node-5',
                        type: 'end',
                        position: { x: 150, y: 570 },
                        data: {}
                    }
                ],
                connections: [
                    { source: 'node-1', target: 'node-2', label: '' },
                    { source: 'node-2', target: 'node-3', label: '' },
                    { source: 'node-3', target: 'node-4', label: '' },
                    { source: 'node-4', target: 'node-5', label: '' }
                ]
            },

            booking: {
                nodes: [
                    {
                        id: 'node-1',
                        type: 'start',
                        position: { x: 150, y: 50 },
                        data: {}
                    },
                    {
                        id: 'node-2',
                        type: 'text',
                        position: { x: 150, y: 150 },
                        data: { text: '📅 نظام حجز المواعيد\n\nسنساعدك في حجز موعدك المناسب! ✨' }
                    },
                    {
                        id: 'node-3',
                        type: 'buttons',
                        position: { x: 150, y: 280 },
                        data: { 
                            text: 'اختر نوع الخدمة:', 
                            buttons: [
                                { title: '💇 قص شعر', payload: 'service_haircut', type: 'postback' },
                                { title: '💆 تدليك', payload: 'service_massage', type: 'postback' },
                                { title: '💅 عناية بالأظافر', payload: 'service_nails', type: 'postback' }
                            ]
                        }
                    },
                    {
                        id: 'node-4',
                        type: 'quick_replies',
                        position: { x: 150, y: 430 },
                        data: { 
                            text: 'اختر التاريخ المناسب:', 
                            quick_replies: [
                                { title: '📅 اليوم', payload: 'date_today' },
                                { title: '📅 غداً', payload: 'date_tomorrow' },
                                { title: '📅 بعد غد', payload: 'date_after' }
                            ]
                        }
                    },
                    {
                        id: 'node-5',
                        type: 'text',
                        position: { x: 150, y: 580 },
                        data: { text: '✅ تم تأكيد حجزك بنجاح!\n\nسنرسل لك تذكيراً قبل الموعد.\nشكراً لاختيارك خدماتنا! 🎉' }
                    },
                    {
                        id: 'node-6',
                        type: 'end',
                        position: { x: 150, y: 730 },
                        data: {}
                    }
                ],
                connections: [
                    { source: 'node-1', target: 'node-2', label: '' },
                    { source: 'node-2', target: 'node-3', label: '' },
                    { source: 'node-3', target: 'node-4', label: '' },
                    { source: 'node-4', target: 'node-5', label: '' },
                    { source: 'node-5', target: 'node-6', label: '' }
                ]
            },
// في templates القالب الجديد مع AI
              ai_assistant: {
    nodes: [
        {
            id: 'node-1',
            type: 'start',
            position: { x: 150, y: 50 },
            data: {}
        },
        {
            id: 'node-2',
            type: 'text',
            position: { x: 150, y: 150 },
            data: { text: '🤖 مرحباً! أنا مساعدك الذكي المدعوم بالذكاء الاصطناعي.\n\nاسألني أي سؤال!' }
        },
        {
            id: 'node-3',
            type: 'ai',
            position: { x: 150, y: 280 },
            data: {
                ai_provider: 'openai',
                model: 'gpt-4o-mini',
                instructions: 'أنت مساعد خدمة عملاء ذكي ومحترف.\n\nمهمتك:\n- الإجابة على أسئلة العملاء\n- تقديم معلومات دقيقة ومفيدة\n- التعامل بأسلوب ودي ومهذب\n- إذا لم تعرف الإجابة، اعترف بذلك\n\nمعلومات الشركة:\n- نحن شركة متخصصة في [مجالك]\n- نقدم خدمات [خدماتك]\n- ساعات العمل: السبت-الخميس 9ص-6م',
                context: '',
                temperature: 0.7,
                max_tokens: 500,
                use_conversation_history: true,
                fallback_message: 'عذراً، واجهت مشكلة في معالجة طلبك. يرجى إعادة صياغة سؤالك.'
            }
        },
        {
            id: 'node-4',
            type: 'buttons',
            position: { x: 150, y: 430 },
            data: {
                text: 'هل تحتاج المزيد من المساعدة؟',
                buttons: [
                    { title: '✅ نعم', payload: 'yes_more', type: 'postback' },
                    { title: '📞 تواصل بشري', payload: 'human', type: 'postback' },
                    { title: '❌ لا، شكراً', payload: 'no_thanks', type: 'postback' }
                ]
            }
        },
        {
            id: 'node-5',
            type: 'text',
            position: { x: -50, y: 580 },
            data: { text: 'سيتواصل معك أحد موظفينا قريباً. شكراً لتواصلك! 🙏' }
        },
        {
            id: 'node-6',
            type: 'end',
            position: { x: 150, y: 730 },
            data: {}
        }
    ],
    connections: [
        { source: 'node-1', target: 'node-2', label: '' },
        { source: 'node-2', target: 'node-3', label: '' },
        { source: 'node-3', target: 'node-4', label: '' },
        { source: 'node-4', target: 'node-3', label: 'yes_more' },
        { source: 'node-4', target: 'node-5', label: 'human' },
        { source: 'node-4', target: 'node-6', label: 'no_thanks' },
        { source: 'node-5', target: 'node-6', label: '' }
    ]
},

            lead: {
                nodes: [
                    {
                        id: 'node-1',
                        type: 'start',
                        position: { x: 150, y: 50 },
                        data: {}
                    },
                    {
                        id: 'node-2',
                        type: 'text',
                        position: { x: 150, y: 150 },
                        data: { text: '👋 مرحباً بك!\n\nيسعدنا التعرف عليك أكثر.' }
                    },
                    {
                        id: 'node-3',
                        type: 'text',
                        position: { x: 150, y: 270 },
                        data: { text: 'من فضلك، ما هو اسمك الكريم؟ 📝' }
                    },
                    {
                        id: 'node-4',
                        type: 'delay',
                        position: { x: 150, y: 390 },
                        data: { seconds: 2 }
                    },
                    {
                        id: 'node-5',
                        type: 'text',
                        position: { x: 150, y: 510 },
                        data: { text: 'رائع {name}! 😊\n\nكيف يمكننا خدمتك؟' }
                    },
                    {
                        id: 'node-6',
                        type: 'buttons',
                        position: { x: 150, y: 640 },
                        data: { 
                            text: 'أنا مهتم بـ:', 
                            buttons: [
                                { title: '💼 خدمات الأعمال', payload: 'interest_business', type: 'postback' },
                                { title: '🏠 خدمات شخصية', payload: 'interest_personal', type: 'postback' },
                                { title: 'ℹ️ معلومات عامة', payload: 'interest_info', type: 'postback' }
                            ]
                        }
                    },
                    {
                        id: 'node-7',
                        type: 'text',
                        position: { x: 150, y: 790 },
                        data: { text: 'شكراً على وقتك! 🙏\n\nسنتواصل معك قريباً على رقمك المسجل.' }
                    },
                    {
                        id: 'node-8',
                        type: 'end',
                        position: { x: 150, y: 940 },
                        data: {}
                    }
                ],
                connections: [
                    { source: 'node-1', target: 'node-2', label: '' },
                    { source: 'node-2', target: 'node-3', label: '' },
                    { source: 'node-3', target: 'node-4', label: '' },
                    { source: 'node-4', target: 'node-5', label: '' },
                    { source: 'node-5', target: 'node-6', label: '' },
                    { source: 'node-6', target: 'node-7', label: '' },
                    { source: 'node-7', target: 'node-8', label: '' }
                ]
            }
        };

        function useTemplate(templateName) {
            if (!templates[templateName]) {
                alert('القالب غير موجود');
                return;
            }

            // Store template in sessionStorage
            sessionStorage.setItem('flowTemplate', JSON.stringify(templates[templateName]));
            
            // Redirect to builder
            window.location.href = '<?php echo e(route("messenger-flows.builder")); ?>';
        }
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH /www/wwwroot/fast.rompure.com/fast.rompure.com/resources/views/messenger-flows/templates.blade.php ENDPATH**/ ?>