{{-- Tab 3: AI Assistant --}}


<div class="flex flex-col h-[600px] bg-gray-900/50 rounded-lg p-4">
    <div class="mb-4 text-center border-b border-white/10 pb-4">
        <h3 class="text-xl font-bold text-white">اسأل الذكاء الاصطناعي</h3>
        <p class="text-sm text-gray-400">
            اطرح أي سؤال حول الدرس الحالي:
            <span x-text="currentVideo.title" class="font-semibold text-cyan-400"></span>
        </p>
    </div>

    <div class="flex-1 space-y-6 overflow-y-auto p-4 scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-gray-800">

        <div class="flex items-start gap-3 justify-end">
            <div class="bg-gray-700 p-3 rounded-lg max-w-lg">
                <p class="font-semibold text-sm text-white">أحمد خالد</p>
                <p class="text-gray-300 mt-1">لم أفهم النقطة المتعلقة بـ Eloquent ORM، هل يمكنك التوضيح أكثر؟
                </p>
                <p class="text-xs text-gray-500 text-left mt-2">منذ دقيقتين</p>
            </div>
            <img src="https://ui-avatars.com/api/?name=أحمد+خالد&background=random&color=fff" alt="Avatar"
                class="w-10 h-10 rounded-full">
        </div>

        <div class="flex items-start gap-3">
            <img src="https://ui-avatars.com/api/?name=AI&background=0D8ABC&color=fff" alt="AI Avatar"
                class="w-10 h-10 rounded-full">
            <div class="bg-gray-800 p-3 rounded-lg max-w-lg">
                <p class="font-semibold text-sm text-cyan-400">المساعد الذكي</p>
                <div class="my-2 p-2 border-r-2 border-cyan-500 bg-gray-900/70 rounded-r-lg">
                    <p class="text-xs font-bold text-gray-400">أحمد خالد</p>
                    <p class="text-xs text-gray-500 italic line-clamp-1">"لم أفهم النقطة المتعلقة بـ Eloquent
                        ORM..."</p>
                </div>
                <p class="text-gray-300">
                    بالتأكيد يا أحمد! <strong>Eloquent ORM</strong> هو جزء من Laravel يتيح لك التعامل مع قاعدة
                    البيانات كأنها كائنات (Objects). بدلاً من كتابة استعلامات SQL معقدة، يمكنك استخدام دوال بسيطة
                    مثل `User::find(1)` لجلب مستخدم. هذا يجعل الكود أكثر قراءة وسهولة في الصيانة.
                </p>
                <p class="text-xs text-gray-500 text-left mt-2">منذ دقيقة واحدة</p>
            </div>
        </div>

        <div class="flex items-start gap-3 justify-end">
            <div class="bg-gray-700 p-3 rounded-lg max-w-lg">
                <p class="font-semibold text-sm text-white">سارة علي</p>
                <p class="text-gray-300 mt-1">ما الفرق الأساسي بين `GET` و `POST` في Routes؟</p>
                <p class="text-xs text-gray-500 text-left mt-2">الآن</p>
            </div>
            <img src="https://ui-avatars.com/api/?name=سارة+علي&background=random&color=fff" alt="Avatar"
                class="w-10 h-10 rounded-full">
        </div>

        <div class="flex items-start gap-3">
            <img src="https://ui-avatars.com/api/?name=AI&background=0D8ABC&color=fff" alt="AI Avatar"
                class="w-10 h-10 rounded-full">
            <div class="bg-gray-800 p-3 rounded-lg max-w-lg">
                <p class="font-semibold text-sm text-cyan-400">المساعد الذكي</p>
                <p class="text-gray-300 mt-1">
                    أهلاً سارة، سؤال ممتاز. ببساطة:
                    <br>• <strong>GET</strong>: تُستخدم لطلب وعرض البيانات (مثل فتح صفحة ويب). البيانات تكون ظاهرة
                    في رابط URL.
                    <br>• <strong>POST</strong>: تُستخدم لإرسال بيانات لإنشاء أو تحديث سجل (مثل إرسال نموذج
                    تسجيل). البيانات تكون مخفية في جسم الطلب (Request Body).
                </p>
                <p class="text-xs text-gray-500 text-left mt-2">الآن</p>
            </div>
        </div>

    </div>

    <div class="mt-4 pt-4 border-t border-white/20">
        <div class="relative">
            <input type="text" placeholder="اكتب سؤالك هنا للذكاء الاصطناعي..."
                class="w-full bg-gray-800 border border-gray-600 rounded-full py-2 pr-12 pl-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 transition-all">
            <button
                class="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-cyan-600 hover:bg-cyan-500 rounded-full transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transform rotate-180" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path
                        d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.428A1 1 0 009.5 16.571V11.5a1 1 0 012 0v5.071a1 1 0 00.225.632l5 1.428a1 1 0 001.17-1.408l-7-14z" />
                </svg>
            </button>
        </div>
    </div>
</div>