@extends('components.web.main')

@section('content')
    {{-- --- подключаем Tailwind CSS --- --}}
    <script src="https://cdn.tailwindcss.com"></script>
    {{-- --- подключаем Alpine.js для интерактивности --- --}}
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    {{-- --- подключаем Heroicons для иконок --- --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/heroicons/2.0.18/24/outline/heroicons.min.css">

    {{--
  ملاحظة: تم تصميم هذا الكود ليوضع فوق خلفية داكنة (زرقاء كما ذكرت).
  تم تغيير الألوان لتكون بيضاء ورمادية فاتحة لضمان القراءة الواضحة.
--}}

    <div x-data="{ activeTab: 'account' }" class="min-h-screen font-sans antialiased text-gray-200" dir="rtl">
        <div class="container mx-auto px-4 sm:px-8 max-w-7xl">
            <div class="py-8">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between">
                    <h2 class="text-3xl font-bold leading-tight text-white">الملف الشخصي والإعدادات</h2>
                </div>
                <div class="text-gray-300 mt-2">
                    <p>إدارة معلوماتك الشخصية، إعدادات الخصوصية، والإشعارات من مكان واحد.</p>
                </div>
            </div>

            <div class="flex flex-col md:flex-row -mx-4">

                {{-- --- الشريط الجانبي (Sidebar) --- --}}
                <aside class="w-full md:w-1/4 px-4 mb-8 md:mb-0">
                    <div
                        class="sticky top-8 bg-blue-900/30 backdrop-blur-sm p-4 rounded-lg shadow-2xl border border-white/10">
                        <ul class="space-y-2">
                            <li>
                                <a href="#" @click.prevent="activeTab = 'account'"
                                    :class="{ 'bg-blue-600 text-white shadow-md': activeTab === 'account', 'hover:bg-white/10 text-gray-300': activeTab !== 'account' }"
                                    class="flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-lg transition-all duration-200">
                                    <i class="o-cog-6-tooth text-lg"></i>
                                    <span class="font-semibold">إعدادات الحساب</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" @click.prevent="activeTab = 'education'"
                                    :class="{ 'bg-blue-600 text-white shadow-md': activeTab === 'education', 'hover:bg-white/10 text-gray-300': activeTab !== 'education' }"
                                    class="flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-lg transition-all duration-200">
                                    <i class="o-academic-cap text-lg"></i>
                                    <span class="font-semibold">إعدادات التعليم</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" @click.prevent="activeTab = 'evaluation'"
                                    :class="{ 'bg-blue-600 text-white shadow-md': activeTab === 'evaluation', 'hover:bg-white/10 text-gray-300': activeTab !== 'evaluation' }"
                                    class="flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-lg transition-all duration-200">
                                    <i class="o-star text-lg"></i>
                                    <span class="font-semibold">إعدادات التقييم</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" @click.prevent="activeTab = 'notifications'"
                                    :class="{ 'bg-blue-600 text-white shadow-md': activeTab === 'notifications', 'hover:bg-white/10 text-gray-300': activeTab !== 'notifications' }"
                                    class="flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-lg transition-all duration-200">
                                    <i class="o-bell-alert text-lg"></i>
                                    <span class="font-semibold">إعدادات الإشعارات</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" @click.prevent="activeTab = 'security'"
                                    :class="{ 'bg-blue-600 text-white shadow-md': activeTab === 'security', 'hover:bg-white/10 text-gray-300': activeTab !== 'security' }"
                                    class="flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-lg transition-all duration-200">
                                    <i class="o-shield-check text-lg"></i>
                                    <span class="font-semibold">الخصوصية والأمان</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" @click.prevent="activeTab = 'support'"
                                    :class="{ 'bg-blue-600 text-white shadow-md': activeTab === 'support', 'hover:bg-white/10 text-gray-300': activeTab !== 'support' }"
                                    class="flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-lg transition-all duration-200">
                                    <i class="o-question-mark-circle text-lg"></i>
                                    <span class="font-semibold">الدعم الفني</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </aside>

                {{-- --- المحتوى الرئيسي (Main Content) --- --}}
                <main class="w-full md:w-3/4 px-4">
                    <div class="bg-blue-900/30 backdrop-blur-sm p-6 md:p-8 rounded-lg shadow-2xl border border-white/10">

                        {{-- 1. إعدادات الحساب --}}
                        <div x-show="activeTab === 'account'" x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform -translate-y-4"
                            x-transition:enter-end="opacity-100 transform translate-y-0">
                            <h3 class="text-xl font-bold mb-6 border-b border-white/20 pb-4 text-white">إعدادات الحساب</h3>
                            <div class="flex items-center space-x-4 space-x-reverse mb-8">
                                <img class="h-24 w-24 rounded-full object-cover border-2 border-blue-400"
                                    src="https://i.pravatar.cc/150?u=a042581f4e29026704d" alt="صورة الملف الشخصي">
                                <div>
                                    <button
                                        class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 font-semibold">تغيير
                                        الصورة</button>
                                    <p class="text-sm text-gray-400 mt-2">يفضل أن تكون الصورة بصيغة JPG أو PNG وبحجم لا
                                        يتجاوز 5 ميجابايت.</p>
                                </div>
                            </div>
                            <form class="space-y-6">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label for="fullName" class="block text-sm font-medium text-gray-300">الاسم
                                            الكامل</label>
                                        <input type="text" id="fullName" value="عبدالرحمن أحمد"
                                            class="mt-1 block w-full bg-gray-700/50 border-gray-600 text-white rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                    </div>
                                    <div>
                                        <label for="username" class="block text-sm font-medium text-gray-300">اسم
                                            المستخدم</label>
                                        <input type="text" id="username" value="abdulrahman_ah"
                                            class="mt-1 block w-full rounded-md bg-gray-800/60 border-gray-700 text-gray-400 shadow-sm cursor-not-allowed"
                                            readonly>
                                    </div>
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-300">البريد
                                        الإلكتروني</label>
                                    <input type="email" id="email" value="example@email.com"
                                        class="mt-1 block w-full bg-gray-700/50 border-gray-600 text-white rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="bio" class="block text-sm font-medium text-gray-300">نبذة
                                        تعريفية</label>
                                    <textarea id="bio" rows="4"
                                        class="mt-1 block w-full bg-gray-700/50 border-gray-600 text-white rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">مطور ويب وشغوف بتقنيات الذكاء الاصطناعي. أبحث دائمًا عن تعلم كل ما هو جديد في عالم التكنولوجيا.</textarea>
                                </div>
                                <div class="text-left">
                                    <button type="submit"
                                        class="px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">حفظ
                                        التغييرات</button>
                                </div>
                            </form>
                        </div>

                        {{-- 2. إعدادات التعليم --}}
                        <div x-show="activeTab === 'education'" x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform -translate-y-4"
                            x-transition:enter-end="opacity-100 transform translate-y-0" style="display: none;">
                            <h3 class="text-xl font-bold mb-6 border-b border-white/20 pb-4 text-white">إعدادات التعليم
                            </h3>
                            <div class="space-y-6">
                                <div class="p-4 border border-white/10 bg-white/5 rounded-lg">
                                    <h4 class="font-semibold text-white">المسار الحالي: تطوير الويب الشامل</h4>
                                    <div class="w-full bg-gray-700 rounded-full h-2.5 mt-2">
                                        <div class="bg-green-500 h-2.5 rounded-full" style="width: 75%"></div>
                                    </div>
                                    <p class="text-sm text-gray-400 mt-2">أكملت 75% من المسار التعليمي. استمر في التقدم!
                                    </p>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-4 text-white">الشهادات المكتسبة</h4>
                                    <ul class="space-y-3">
                                        <li class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                                            <span class="text-gray-300">شهادة إتمام أساسيات HTML5 & CSS3</span>
                                            <a href="#"
                                                class="text-sm text-blue-400 hover:underline font-semibold">عرض الشهادة</a>
                                        </li>
                                        <li class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                                            <span class="text-gray-300">شهادة إتقان JavaScript للمبتدئين</span>
                                            <a href="#"
                                                class="text-sm text-blue-400 hover:underline font-semibold">عرض الشهادة</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="text-left">
                                    <button
                                        class="px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors">تصفح
                                        مسارات جديدة</button>
                                </div>
                            </div>
                        </div>

                        {{-- 3. إعدادات التقييم --}}
                        <div x-show="activeTab === 'evaluation'" x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform -translate-y-4"
                            x-transition:enter-end="opacity-100 transform translate-y-0" style="display: none;">
                            <h3 class="text-xl font-bold mb-6 border-b border-white/20 pb-4 text-white">إعدادات التقييم
                            </h3>
                            <p class="mb-6 text-gray-300">شاركنا رأيك حول الدورات التي أكملتها لمساعدتنا في تحسين المحتوى.
                            </p>
                            <div class="space-y-6">
                                <div class="border border-white/10 rounded-lg p-4">
                                    <h4 class="font-semibold text-white">دورة "الخوارزميات وهياكل البيانات"</h4>
                                    <p class="text-sm text-gray-400 mb-4">تاريخ الإكمال: 15 أغسطس 2025</p>
                                    <div class="flex items-center space-x-2 space-x-reverse">
                                        <span class="text-gray-300">تقييمك:</span>
                                        <div class="flex items-center text-yellow-400">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                fill="currentColor" class="w-5 h-5">
                                                <path fill-rule="evenodd"
                                                    d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.007z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                fill="currentColor" class="w-5 h-5">
                                                <path fill-rule="evenodd"
                                                    d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.007z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                fill="currentColor" class="w-5 h-5">
                                                <path fill-rule="evenodd"
                                                    d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.007z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                fill="currentColor" class="w-5 h-5">
                                                <path fill-rule="evenodd"
                                                    d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.007z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-gray-500">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
                                            </svg>
                                        </div>
                                        <span class="text-sm text-gray-400">(4 نجوم)</span>
                                    </div>
                                    <textarea placeholder="اكتب مراجعتك هنا..." rows="3"
                                        class="mt-4 w-full bg-gray-700/50 border-gray-600 text-white rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea>
                                    <div class="text-left mt-2">
                                        <button
                                            class="px-4 py-2 text-sm bg-gray-200 text-gray-800 font-semibold rounded-lg hover:bg-gray-300">تحديث
                                            التقييم</button>
                                    </div>
                                </div>
                                <div class="border border-white/10 rounded-lg p-4 bg-white/5">
                                    <h4 class="font-semibold text-white">دورة "مقدمة في تعلم الآلة"</h4>
                                    <p class="text-sm text-gray-400 mb-4">تاريخ الإكمال: 20 يوليو 2025</p>
                                    <p class="text-gray-300">لم تقم بتقييم هذه الدورة بعد.</p>
                                    <div class="text-left mt-4">
                                        <button
                                            class="px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">قيم
                                            الآن</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- 4. إعدادات الإشعارات --}}
                        <div x-show="activeTab === 'notifications'" x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform -translate-y-4"
                            x-transition:enter-end="opacity-100 transform translate-y-0" style="display: none;">
                            <h3 class="text-xl font-bold mb-6 border-b border-white/20 pb-4 text-white">إعدادات الإشعارات
                            </h3>
                            <div class="space-y-6">
                                <div>
                                    <h4 class="font-semibold text-white">إشعارات البريد الإلكتروني</h4>
                                    <p class="text-sm text-gray-400">اختر ما يصلك على بريدك الإلكتروني.</p>
                                </div>
                                <div class="divide-y divide-white/10">
                                    <div class="py-4 flex items-center justify-between">
                                        <div>
                                            <p class="font-medium text-gray-200">النشرة البريدية الأسبوعية</p>
                                            <p class="text-sm text-gray-400">ملخص لأهم المقالات والدورات الجديدة.</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" value="" class="sr-only peer" checked>
                                            <div
                                                class="w-11 h-6 bg-gray-700 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
                                            </div>
                                        </label>
                                    </div>
                                    <div class="py-4 flex items-center justify-between">
                                        <div>
                                            <p class="font-medium text-gray-200">تنبيهات التقدم في الدورات</p>
                                            <p class="text-sm text-gray-400">تذكيرات لمتابعة دروسك.</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" value="" class="sr-only peer" checked>
                                            <div
                                                class="w-11 h-6 bg-gray-700 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
                                            </div>
                                        </label>
                                    </div>
                                    <div class="py-4 flex items-center justify-between">
                                        <div>
                                            <p class="font-medium text-gray-200">عروض وخصومات</p>
                                            <p class="text-sm text-gray-400">إشعارات حول العروض الخاصة على المسارات
                                                التعليمية.</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" value="" class="sr-only peer">
                                            <div
                                                class="w-11 h-6 bg-gray-700 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="text-left mt-6">
                                    <button
                                        class="px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">حفظ
                                        الإعدادات</button>
                                </div>
                            </div>
                        </div>

                        {{-- 5. الخصوصية والأمان --}}
                        <div x-show="activeTab === 'security'" x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform -translate-y-4"
                            x-transition:enter-end="opacity-100 transform translate-y-0" style="display: none;">
                            <h3 class="text-xl font-bold mb-6 border-b border-white/20 pb-4 text-white">الخصوصية والأمان
                            </h3>
                            <div class="space-y-8">
                                <div>
                                    <h4 class="text-lg font-semibold text-white">تغيير كلمة المرور</h4>
                                    <form class="space-y-4 mt-4 max-w-lg">
                                        <div>
                                            <label for="current_password"
                                                class="block text-sm font-medium text-gray-300">كلمة المرور الحالية</label>
                                            <input type="password" id="current_password"
                                                class="mt-1 block w-full bg-gray-700/50 border-gray-600 text-white rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                        </div>
                                        <div>
                                            <label for="new_password" class="block text-sm font-medium text-gray-300">كلمة
                                                المرور الجديدة</label>
                                            <input type="password" id="new_password"
                                                class="mt-1 block w-full bg-gray-700/50 border-gray-600 text-white rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                        </div>
                                        <div>
                                            <label for="confirm_password"
                                                class="block text-sm font-medium text-gray-300">تأكيد كلمة المرور
                                                الجديدة</label>
                                            <input type="password" id="confirm_password"
                                                class="mt-1 block w-full bg-gray-700/50 border-gray-600 text-white rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                        </div>
                                        <div class="text-left">
                                            <button type="submit"
                                                class="px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">تغيير
                                                كلمة المرور</button>
                                        </div>
                                    </form>
                                </div>
                                <div class="border-t border-white/10 pt-8">
                                    <h4 class="text-lg font-semibold text-white">الأجهزة المتصلة</h4>
                                    <p class="text-sm text-gray-400 mb-4">قائمة بالأجهزة التي سجلت الدخول منها إلى حسابك.
                                    </p>
                                    <ul class="space-y-3">
                                        <li class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                                            <div class="flex items-center space-x-3 space-x-reverse">
                                                <i class="o-computer-desktop text-2xl text-gray-400"></i>
                                                <div>
                                                    <p class="font-semibold text-gray-200">Windows 11 - Chrome</p>
                                                    <p class="text-sm text-gray-400">القاهرة، مصر - <span
                                                            class="text-green-400 font-medium">نشط الآن</span></p>
                                                </div>
                                            </div>
                                            <button class="text-sm text-red-400 hover:underline font-semibold">تسجيل
                                                الخروج</button>
                                        </li>
                                        <li class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                                            <div class="flex items-center space-x-3 space-x-reverse">
                                                <i class="o-device-phone-mobile text-2xl text-gray-400"></i>
                                                <div>
                                                    <p class="font-semibold text-gray-200">iPhone 14 Pro - Safari</p>
                                                    <p class="text-sm text-gray-400">الإسكندرية، مصر - منذ 3 أيام</p>
                                                </div>
                                            </div>
                                            <button class="text-sm text-red-400 hover:underline font-semibold">تسجيل
                                                الخروج</button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        {{-- 6. الدعم الفني --}}
                        <div x-show="activeTab === 'support'" x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform -translate-y-4"
                            x-transition:enter-end="opacity-100 transform translate-y-0" style="display: none;">
                            <h3 class="text-xl font-bold mb-6 border-b border-white/20 pb-4 text-white">الدعم الفني</h3>
                            <p class="mb-6 text-gray-300">هل تواجه مشكلة أو لديك استفسار؟ نحن هنا لمساعدتك. املأ النموذج
                                أدناه وسنتواصل معك في أقرب وقت ممكن.</p>
                            <form class="space-y-6">
                                <div>
                                    <label for="support_subject"
                                        class="block text-sm font-medium text-gray-300">الموضوع</label>
                                    <input type="text" id="support_subject"
                                        placeholder="مثال: مشكلة في الوصول إلى إحدى الدورات"
                                        class="mt-1 block w-full bg-gray-700/50 border-gray-600 text-white rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 placeholder:text-gray-500">
                                </div>
                                <div>
                                    <label for="support_message"
                                        class="block text-sm font-medium text-gray-300">رسالتك</label>
                                    <textarea id="support_message" rows="6" placeholder="يرجى وصف المشكلة بالتفصيل..."
                                        class="mt-1 block w-full bg-gray-700/50 border-gray-600 text-white rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 placeholder:text-gray-500"></textarea>
                                </div>
                                <div class="text-left">
                                    <button type="submit"
                                        class="px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">إرسال
                                        الرسالة</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </main>

            </div>
        </div>
    </div>
@endsection