<?php
// session_start();

// Check admin access - DISABLED
// if (!isset($_SESSION['user_id']) || $_SESSION['role'] !== 'admin') {
//     header('Location: ../login.php');
//     exit;
// }

require_once '../../config/database.php';

$database = new Database();
$db = $database->getConnection();

$message = '';
$message_type = 'success';

// Get all settings
$query = "SELECT * FROM settings";
$stmt = $db->prepare($query);
$stmt->execute();
$settings_rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Convert to associative array
$settings = [];
foreach ($settings_rows as $row) {
    $settings[$row['setting_key']] = $row['setting_value'];
}



// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $updates = [];
    
    // Handle File Uploads
    // Handle File Uploads
    // Vertical Covers 1-3
    for ($i = 1; $i <= 3; $i++) {
        $inputName = 'home_vertical_cover_' . $i;
        if (isset($_FILES[$inputName]) && $_FILES[$inputName]['error'] === UPLOAD_ERR_OK) {
            $uploadDir = '../../uploads/settings/';
            if (!file_exists($uploadDir)) {
                mkdir($uploadDir, 0777, true);
            }
            
            $fileExtension = strtolower(pathinfo($_FILES[$inputName]['name'], PATHINFO_EXTENSION));
            $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
            
            if (in_array($fileExtension, $allowedExtensions)) {
                $fileName = 'vertical_cover_' . $i . '_' . time() . '.' . $fileExtension;
                $uploadFile = $uploadDir . $fileName;
                
                if (move_uploaded_file($_FILES[$inputName]['tmp_name'], $uploadFile)) {
                    // Save relative path
                    $updates[$inputName] = 'uploads/settings/' . $fileName;
                }
            }
        }
    }

    foreach ($_POST as $key => $value) {
        if ($key !== 'save_settings') {
            $updates[$key] = $value;
        }
    }
    
    // Update each setting
    foreach ($updates as $key => $value) {
        $query = "INSERT INTO settings (setting_key, setting_value, setting_type) 
                  VALUES (?, ?, 'string') 
                  ON DUPLICATE KEY UPDATE setting_value = ?";
        $stmt = $db->prepare($query);
        $stmt->execute([$key, $value, $value]);
    }
    
    $message = 'تم حفظ الإعدادات بنجاح!';
    $message_type = 'success';
    
    // Refresh settings
    $stmt = $db->prepare("SELECT * FROM settings");
    $stmt->execute();
    $settings_rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
    $settings = [];
    foreach ($settings_rows as $row) {
        $settings[$row['setting_key']] = $row['setting_value'];
    }
}

// Get Categories for Dropdown
$categories_query = "SELECT id, name FROM categories WHERE type = 'product' ORDER BY name";
$categories_stmt = $db->prepare($categories_query);
$categories_stmt->execute();
$categories_list = $categories_stmt->fetchAll(PDO::FETCH_ASSOC);

// Helper function to get setting value
function getSetting($settings, $key, $default = '') {
    return $settings[$key] ?? $default;
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>الإعدادات - Roz Skin</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body { font-family: 'Tajawal', sans-serif; }
    </style>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen">
        <header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-20">
            <div class="flex items-center justify-between px-6 py-4">
                <div class="flex items-center space-x-4 space-x-reverse">
                    <a href="../dashboard.php" class="text-gray-600 hover:text-gray-900">
                        <i class="fas fa-arrow-right text-xl"></i>
                    </a>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">إعدادات النظام</h1>
                        <p class="text-sm text-gray-500">إدارة جميع إعدادات الموقع والمتجر</p>
                    </div>
                </div>
            </div>
        </header>

        <div class="p-6">
            <!-- Success/Error Message -->
            <?php if ($message): ?>
                <div class="mb-6 p-4 rounded-lg border-r-4 <?php echo $message_type === 'success' ? 'bg-green-50 border-green-400' : 'bg-red-50 border-red-400'; ?>">
                    <div class="flex items-center">
                        <i class="fas <?php echo $message_type === 'success' ? 'fa-check-circle text-green-400' : 'fa-exclamation-circle text-red-400'; ?> text-xl ml-3"></i>
                        <p class="text-sm <?php echo $message_type === 'success' ? 'text-green-700' : 'text-red-700'; ?>"><?php echo $message; ?></p>
                    </div>
                </div>
            <?php endif; ?>

            <!-- Tabs Navigation -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
                <div class="flex overflow-x-auto">
                    <button onclick="showTab('general')" id="tab-general" class="tab-btn flex-1 px-6 py-4 text-center font-medium border-b-2 border-blue-600 text-blue-600">
                        <i class="fas fa-cog ml-2"></i>عام
                    </button>
                    <button onclick="showTab('contact')" id="tab-contact" class="tab-btn flex-1 px-6 py-4 text-center font-medium border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                        <i class="fas fa-address-book ml-2"></i>بيانات التواصل
                    </button>
                    <button onclick="showTab('social')" id="tab-social" class="tab-btn flex-1 px-6 py-4 text-center font-medium border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                        <i class="fas fa-share-alt ml-2"></i>سوشيال ميديا
                    </button>
                    <button onclick="showTab('theme')" id="tab-theme" class="tab-btn flex-1 px-6 py-4 text-center font-medium border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                        <i class="fas fa-palette ml-2"></i>الألوان والثيم
                    </button>
                    <button onclick="showTab('shipping')" id="tab-shipping" class="tab-btn flex-1 px-6 py-4 text-center font-medium border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                        <i class="fas fa-truck ml-2"></i>الشحن
                    </button>
                    <button onclick="showTab('homepage')" id="tab-homepage" class="tab-btn flex-1 px-6 py-4 text-center font-medium border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                        <i class="fas fa-home ml-2"></i>الصفحة الرئيسية
                    </button>
                    <button onclick="showTab('telegram')" id="tab-telegram" class="tab-btn flex-1 px-6 py-4 text-center font-medium border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                        <i class="fab fa-telegram ml-2"></i>تليجرام
                    </button>
                    <button onclick="showTab('database')" id="tab-database" class="tab-btn flex-1 px-6 py-4 text-center font-medium border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                        <i class="fas fa-database ml-2"></i>قاعدة البيانات
                    </button>
                </div>
            </div>

            <form method="POST" enctype="multipart/form-data">
                
                <!-- General Settings Tab -->
                <div id="content-general" class="tab-content">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Site Info -->
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                                <i class="fas fa-info-circle text-blue-600 ml-2"></i>معلومات الموقع
                            </h3>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">اسم الموقع</label>
                                    <input type="text" name="site_name" value="<?php echo htmlspecialchars(getSetting($settings, 'site_name', 'Roz Skin')); ?>" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">نص اللوجو</label>
                                    <input type="text" name="logo_text" value="<?php echo htmlspecialchars(getSetting($settings, 'logo_text', 'Roz Skin')); ?>" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">العملة الافتراضية</label>
                                    <select name="default_currency" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                        <option value="EGP" <?php echo getSetting($settings, 'default_currency') === 'EGP' ? 'selected' : ''; ?>>جنيه مصري (EGP)</option>
                                        <option value="USD" <?php echo getSetting($settings, 'default_currency') === 'USD' ? 'selected' : ''; ?>>دولار أمريكي (USD)</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Contact Info -->
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                                <i class="fas fa-phone text-green-600 ml-2"></i>معلومات الاتصال
                            </h3>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">رقم الهاتف</label>
                                    <input type="tel" name="site_phone" value="<?php echo htmlspecialchars(getSetting($settings, 'site_phone')); ?>" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">البريد الإلكتروني</label>
                                    <input type="email" name="site_email" value="<?php echo htmlspecialchars(getSetting($settings, 'site_email')); ?>" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">العنوان</label>
                                    <textarea name="site_address" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"><?php echo htmlspecialchars(getSetting($settings, 'site_address')); ?></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contact Info Tab -->
                <div id="content-contact" class="tab-content hidden">
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">
                            <i class="fas fa-address-book text-green-600 ml-2"></i>بيانات التواصل (Footer)
                        </h3>
                        <p class="text-sm text-gray-600 mb-6">هذه البيانات ستظهر في الشريط السفلي (Footer) لجميع صفحات الموقع</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Store Info -->
                            <div class="space-y-4">
                                <h4 class="font-semibold text-gray-800 border-b pb-2">معلومات المتجر</h4>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        <i class="fas fa-store text-purple-600 ml-2"></i>اسم المتجر
                                    </label>
                                    <input type="text" name="store_name" 
                                           value="<?php echo htmlspecialchars(getSetting($settings, 'store_name', 'روز سكين')); ?>" 
                                           placeholder="روز سكين"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        <i class="fas fa-align-left text-gray-600 ml-2"></i>وصف المتجر
                                    </label>
                                    <textarea name="store_description" rows="2"
                                              placeholder="دللي بشرتك بلمسة من الطبيعة"
                                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"><?php echo htmlspecialchars(getSetting($settings, 'store_description', 'دللي بشرتك بلمسة من الطبيعة')); ?></textarea>
                                </div>
                            </div>

                            <!-- Contact Details -->
                            <div class="space-y-4">
                                <h4 class="font-semibold text-gray-800 border-b pb-2">بيانات الاتصال</h4>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        <i class="fas fa-phone text-green-600 ml-2"></i>رقم الهاتف
                                    </label>
                                    <input type="tel" name="contact_phone" 
                                           value="<?php echo htmlspecialchars(getSetting($settings, 'contact_phone', '+20 123 456 7890')); ?>" 
                                           placeholder="+20 123 456 7890"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        <i class="fas fa-envelope text-blue-600 ml-2"></i>البريد الإلكتروني
                                    </label>
                                    <input type="email" name="contact_email" 
                                           value="<?php echo htmlspecialchars(getSetting($settings, 'contact_email', 'info@rozskin.com')); ?>" 
                                           placeholder="info@rozskin.com"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        <i class="fas fa-map-marker-alt text-red-600 ml-2"></i>العنوان
                                    </label>
                                    <input type="text" name="contact_address" 
                                           value="<?php echo htmlspecialchars(getSetting($settings, 'contact_address', 'القاهرة، مصر')); ?>" 
                                           placeholder="القاهرة، مصر"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                </div>
                            </div>
                        </div>

                        <!-- Preview -->
                        <div class="mt-8 p-6 bg-gray-900 text-white rounded-lg">
                            <h4 class="text-sm font-semibold text-gray-400 mb-4">
                                <i class="fas fa-eye ml-2"></i>معاينة Footer
                            </h4>
                            <div class="space-y-3">
                                <h3 class="text-xl font-bold" id="preview-store-name">روز سكين</h3>
                                <p class="text-gray-400 text-sm" id="preview-store-desc">دللي بشرتك بلمسة من الطبيعة</p>
                                <div class="space-y-2 text-sm text-gray-400">
                                    <div><i class="fas fa-phone ml-2"></i><span id="preview-phone">+20 123 456 7890</span></div>
                                    <div><i class="fas fa-envelope ml-2"></i><span id="preview-email">info@rozskin.com</span></div>
                                    <div><i class="fas fa-map-marker-alt ml-2"></i><span id="preview-address">القاهرة، مصر</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Social Media Tab -->
                <div id="content-social" class="tab-content hidden">
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">
                            <i class="fas fa-share-alt text-blue-600 ml-2"></i>روابط السوشيال ميديا
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fab fa-whatsapp text-green-600 ml-2"></i>واتساب
                                </label>
                                <input type="url" name="whatsapp_link" value="<?php echo htmlspecialchars(getSetting($settings, 'whatsapp_link')); ?>" 
                                       placeholder="https://wa.me/201234567890"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fab fa-facebook text-blue-600 ml-2"></i>فيسبوك
                                </label>
                                <input type="url" name="facebook_link" value="<?php echo htmlspecialchars(getSetting($settings, 'facebook_link')); ?>" 
                                       placeholder="https://facebook.com/yourpage"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fab fa-instagram text-pink-600 ml-2"></i>انستجرام
                                </label>
                                <input type="url" name="instagram_link" value="<?php echo htmlspecialchars(getSetting($settings, 'instagram_link')); ?>" 
                                       placeholder="https://instagram.com/yourpage"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fab fa-threads text-gray-900 ml-2"></i>ثريدز
                                </label>
                                <input type="url" name="threads_link" value="<?php echo htmlspecialchars(getSetting($settings, 'threads_link')); ?>" 
                                       placeholder="https://threads.net/@yourpage"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fab fa-tiktok text-gray-900 ml-2"></i>تيك توك
                                </label>
                                <input type="url" name="tiktok_link" value="<?php echo htmlspecialchars(getSetting($settings, 'tiktok_link')); ?>" 
                                       placeholder="https://tiktok.com/@yourpage"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fab fa-twitter text-blue-400 ml-2"></i>تويتر (X)
                                </label>
                                <input type="url" name="twitter_link" value="<?php echo htmlspecialchars(getSetting($settings, 'twitter_link')); ?>" 
                                       placeholder="https://twitter.com/yourpage"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Theme Tab -->
                <div id="content-theme" class="tab-content hidden">
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">
                            <i class="fas fa-palette text-purple-600 ml-2"></i>الألوان والثيم
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">اللون الأساسي</label>
                                <div class="flex gap-2">
                                    <input type="color" name="primary_color" value="<?php echo htmlspecialchars(getSetting($settings, 'primary_color', '#7c3aed')); ?>" 
                                           class="h-10 w-20 border border-gray-300 rounded-lg">
                                    <input type="text" value="<?php echo htmlspecialchars(getSetting($settings, 'primary_color', '#7c3aed')); ?>" 
                                           class="flex-1 px-3 py-2 border border-gray-300 rounded-lg" readonly>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">لون النجاح</label>
                                <div class="flex gap-2">
                                    <input type="color" name="success_color" value="<?php echo htmlspecialchars(getSetting($settings, 'success_color', '#10b981')); ?>" 
                                           class="h-10 w-20 border border-gray-300 rounded-lg">
                                    <input type="text" value="<?php echo htmlspecialchars(getSetting($settings, 'success_color', '#10b981')); ?>" 
                                           class="flex-1 px-3 py-2 border border-gray-300 rounded-lg" readonly>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">لون التحذير</label>
                                <div class="flex gap-2">
                                    <input type="color" name="warning_color" value="<?php echo htmlspecialchars(getSetting($settings, 'warning_color', '#f59e0b')); ?>" 
                                           class="h-10 w-20 border border-gray-300 rounded-lg">
                                    <input type="text" value="<?php echo htmlspecialchars(getSetting($settings, 'warning_color', '#f59e0b')); ?>" 
                                           class="flex-1 px-3 py-2 border border-gray-300 rounded-lg" readonly>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">لون الخطر</label>
                                <div class="flex gap-2">
                                    <input type="color" name="danger_color" value="<?php echo htmlspecialchars(getSetting($settings, 'danger_color', '#ef4444')); ?>" 
                                           class="h-10 w-20 border border-gray-300 rounded-lg">
                                    <input type="text" value="<?php echo htmlspecialchars(getSetting($settings, 'danger_color', '#ef4444')); ?>" 
                                           class="flex-1 px-3 py-2 border border-gray-300 rounded-lg" readonly>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">نوع الخط</label>
                                <select name="font_family" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                    <option value="Tajawal" <?php echo getSetting($settings, 'font_family') === 'Tajawal' ? 'selected' : ''; ?>>Tajawal</option>
                                    <option value="Cairo" <?php echo getSetting($settings, 'font_family') === 'Cairo' ? 'selected' : ''; ?>>Cairo</option>
                                    <option value="Almarai" <?php echo getSetting($settings, 'font_family') === 'Almarai' ? 'selected' : ''; ?>>Almarai</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">وضع الثيم</label>
                                <select name="theme_mode" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                    <option value="light" <?php echo getSetting($settings, 'theme_mode') === 'light' ? 'selected' : ''; ?>>فاتح</option>
                                    <option value="dark" <?php echo getSetting($settings, 'theme_mode') === 'dark' ? 'selected' : ''; ?>>داكن</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Shipping Tab -->
                <div id="content-shipping" class="tab-content hidden">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                                <i class="fas fa-truck text-orange-600 ml-2"></i>إعدادات الشحن
                            </h3>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">تكلفة الشحن الافتراضية (ج.م)</label>
                                    <input type="number" name="shipping_cost" value="<?php echo htmlspecialchars(getSetting($settings, 'shipping_cost', '50')); ?>" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">الشحن المجاني عند (ج.م)</label>
                                    <input type="number" name="free_shipping_threshold" value="<?php echo htmlspecialchars(getSetting($settings, 'free_shipping_threshold', '500')); ?>" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                                <i class="fas fa-percent text-green-600 ml-2"></i>الضرائب
                            </h3>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">نسبة الضريبة (%)</label>
                                    <input type="number" name="tax_rate" value="<?php echo htmlspecialchars(getSetting($settings, 'tax_rate', '14')); ?>" 
                                           step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Homepage Tab -->
                <div id="content-homepage" class="tab-content hidden">
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">
                            <i class="fas fa-home text-blue-600 ml-2"></i>إعدادات الصفحة الرئيسية
                        </h3>
                        <div class="space-y-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-heading text-blue-600 ml-2"></i>عنوان Hero
                                </label>
                                <input type="text" name="hero_title" value="<?php echo htmlspecialchars(getSetting($settings, 'hero_title', 'اكتشفي جمالك الطبيعي ✨')); ?>" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-align-left text-green-600 ml-2"></i>وصف Hero
                                </label>
                                <textarea name="hero_description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"><?php echo htmlspecialchars(getSetting($settings, 'hero_description', 'منتجات عناية بالبشرة والجمال طبيعية 100% مع خدمات متخصصة في مركزنا')); ?></textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-image text-purple-600 ml-2"></i>رابط صورة خلفية Hero
                                </label>
                                <input type="url" name="hero_bg_image" value="<?php echo htmlspecialchars(getSetting($settings, 'hero_bg_image')); ?>" 
                                       placeholder="https://example.com/image.jpg"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            </div>
                            
                            <!-- Hero Overlay Settings -->
                            <div class="border-t border-gray-200 pt-4 mt-4">
                                <h4 class="text-md font-semibold text-gray-800 mb-4">
                                    <i class="fas fa-adjust text-pink-600 ml-2"></i>إعدادات التأثير (Overlay)
                                </h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">
                                            <i class="fas fa-palette text-pink-600 ml-2"></i>لون التأثير
                                        </label>
                                        <div class="flex gap-2">
                                            <input type="color" name="hero_overlay_color" 
                                                   value="<?php echo htmlspecialchars(getSetting($settings, 'hero_overlay_color', '#E57393')); ?>" 
                                                   class="h-10 w-20 border border-gray-300 rounded-lg cursor-pointer"
                                                   onchange="updateOverlayPreview()">
                                            <input type="text" id="hero_overlay_color_text"
                                                   value="<?php echo htmlspecialchars(getSetting($settings, 'hero_overlay_color', '#E57393')); ?>" 
                                                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg" 
                                                   readonly>
                                        </div>
                                        <p class="text-xs text-gray-500 mt-1">اللون الأساسي للطبقة فوق الصورة</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">
                                            <i class="fas fa-eye text-indigo-600 ml-2"></i>شفافية التأثير
                                        </label>
                                        <div class="flex items-center gap-3">
                                            <input type="range" name="hero_overlay_opacity" 
                                                   value="<?php echo htmlspecialchars(getSetting($settings, 'hero_overlay_opacity', '0.7')); ?>" 
                                                   min="0" max="1" step="0.05"
                                                   class="flex-1"
                                                   oninput="document.getElementById('opacityValue').textContent = this.value; updateOverlayPreview()">
                                            <span id="opacityValue" class="text-sm font-semibold text-gray-700 min-w-[3rem]">
                                                <?php echo htmlspecialchars(getSetting($settings, 'hero_overlay_opacity', '0.7')); ?>
                                            </span>
                                        </div>
                                        <p class="text-xs text-gray-500 mt-1">0 = شفاف تماماً، 1 = معتم تماماً</p>
                                    </div>
                                </div>
                                
                                <!-- Preview -->
                                <div class="mt-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        <i class="fas fa-eye ml-2"></i>معاينة التأثير
                                    </label>
                                    <div id="overlayPreview" style="
                                        height: 100px;
                                        border-radius: 8px;
                                        background: linear-gradient(135deg, rgba(229, 115, 147, 0.7) 0%, rgba(229, 115, 147, 0.65) 100%),
                                                    url('https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=400&h=200&fit=crop') center/cover;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        color: white;
                                        font-weight: bold;
                                        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
                                    ">
                                        معاينة الهيرو
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Horizontal Cover Slideshow Settings -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">
                            <i class="fas fa-images text-pink-600 ml-2"></i>سلايد شو الغلاف الأفقي
                        </h3>
                        
                        <!-- Speed Control -->
                        <div class="mb-8 p-4 bg-blue-50 rounded-lg border border-blue-100">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-stopwatch text-blue-600 ml-2"></i>سرعة التقليب (بالثواني)
                            </label>
                            <input type="number" name="home_vertical_cover_speed" 
                                   value="<?php echo htmlspecialchars(getSetting($settings, 'home_vertical_cover_speed', '3')); ?>" 
                                   min="1" max="10" step="0.5"
                                   class="w-full md:w-1/3 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            <p class="text-xs text-gray-500 mt-1">الوقت الذي تظهر فيه كل صورة قبل الانتقال للصورة التالية</p>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <?php for ($i = 1; $i <= 3; $i++): ?>
                            <div class="border border-gray-200 rounded-lg p-4 relative bg-gray-50">
                                <h4 class="font-bold text-gray-800 mb-4 border-b pb-2">الصورة رقم <?php echo $i; ?></h4>
                                
                                <!-- Image Upload -->
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">رفع الصورة</label>
                                    <input type="file" name="home_vertical_cover_<?php echo $i; ?>" accept="image/*"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                                    <p class="text-xs text-gray-500 mt-1">يفضل أن تكون الصورة أفقية (مثلاً 1900x600)</p>
                                    <?php if (!empty($settings['home_vertical_cover_' . $i])): ?>
                                        <div class="mt-2 relative group">
                                            <img src="../../<?php echo htmlspecialchars($settings['home_vertical_cover_' . $i]); ?>" 
                                                 alt="Cover <?php echo $i; ?>" class="h-40 w-full object-cover rounded-lg border border-gray-200">
                                        </div>
                                    <?php endif; ?>
                                </div>

                                <!-- Category Select -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">القسم المرتبط</label>
                                    <select name="home_vertical_cover_category_<?php echo $i; ?>" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                                        <option value="">-- اختر القسم --</option>
                                        <?php foreach ($categories_list as $cat): ?>
                                            <option value="<?php echo $cat['id']; ?>" <?php echo getSetting($settings, 'home_vertical_cover_category_' . $i) == $cat['id'] ? 'selected' : ''; ?>>
                                                <?php echo htmlspecialchars($cat['name']); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <?php endfor; ?>
                        </div>
                    </div>
                </div>

                <!-- Telegram Tab -->
                <div id="content-telegram" class="tab-content hidden">
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <div class="flex items-center justify-between mb-6">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900">
                                    <i class="fab fa-telegram text-blue-500 ml-2"></i>إشعارات التليجرام
                                </h3>
                                <p class="text-sm text-gray-500 mt-1">استقبل إشعارات الطلبات الجديدة على التليجرام</p>
                            </div>
                            <button type="button" onclick="testTelegram()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">
                                <i class="fas fa-paper-plane ml-2"></i>اختبار الاتصال
                            </button>
                        </div>
                        
                        <div class="space-y-6">
                            <!-- Enable/Disable -->
                            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                                <div>
                                    <label class="text-sm font-medium text-gray-700">تفعيل الإشعارات</label>
                                    <p class="text-xs text-gray-500 mt-1">تفعيل/إيقاف إرسال الإشعارات على التليجرام</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" name="telegram_enabled" value="1" 
                                           <?php echo getSetting($settings, 'telegram_enabled') === '1' ? 'checked' : ''; ?>
                                           class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                </label>
                            </div>

                            <!-- Bot Token -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-key text-yellow-600 ml-2"></i>توكن البوت (Bot Token)
                                </label>
                                <input type="text" name="telegram_bot_token" 
                                       value="<?php echo htmlspecialchars(getSetting($settings, 'telegram_bot_token')); ?>" 
                                       placeholder="123456789:ABCdefGHIjklMNOpqrsTUVwxyz"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 font-mono text-sm">
                                <p class="text-xs text-gray-500 mt-1">
                                    احصل على التوكن من <a href="https://t.me/BotFather" target="_blank" class="text-blue-600 hover:underline">@BotFather</a>
                                </p>
                            </div>

                            <!-- Chat ID -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-hashtag text-blue-600 ml-2"></i>معرف المحادثة (Chat ID)
                                </label>
                                <input type="text" name="telegram_chat_id" 
                                       value="<?php echo htmlspecialchars(getSetting($settings, 'telegram_chat_id')); ?>" 
                                       placeholder="-1001234567890"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 font-mono text-sm">
                                <p class="text-xs text-gray-500 mt-1">
                                    احصل على Chat ID من <a href="https://t.me/userinfobot" target="_blank" class="text-blue-600 hover:underline">@userinfobot</a>
                                </p>
                            </div>

                            <!-- Instructions -->
                            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                                <h4 class="font-medium text-blue-900 mb-2">
                                    <i class="fas fa-info-circle ml-2"></i>كيفية الإعداد:
                                </h4>
                                <ol class="text-sm text-blue-800 space-y-2 mr-4">
                                    <li>1. افتح <a href="https://t.me/BotFather" target="_blank" class="underline">@BotFather</a> على التليجرام</li>
                                    <li>2. أرسل الأمر <code class="bg-blue-100 px-2 py-1 rounded">/newbot</code> لإنشاء بوت جديد</li>
                                    <li>3. اتبع التعليمات واحصل على التوكن</li>
                                    <li>4. افتح <a href="https://t.me/userinfobot" target="_blank" class="underline">@userinfobot</a> واحصل على Chat ID</li>
                                    <li>5. الصق التوكن و Chat ID في الحقول أعلاه</li>
                                    <li>6. فعّل الإشعارات واضغط حفظ</li>
                                    <li>7. اضغط "اختبار الاتصال" للتأكد من عمل البوت</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Database Verification Tab -->
                <div id="content-database" class="tab-content hidden">
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <div class="flex items-center justify-between mb-6">
                            <div>
                                <h3 class="text-xl font-bold text-gray-900 flex items-center">
                                    <i class="fas fa-database text-blue-600 ml-3"></i>
                                    التحقق من قاعدة البيانات
                                </h3>
                                <p class="text-sm text-gray-600 mt-2">تحقق من تطابق قاعدة البيانات مع ملف database.sql</p>
                            </div>
                            <div class="text-right">
                                <span class="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
                                    <i class="fas fa-info-circle ml-1"></i>
                                    أداة تشخيصية
                                </span>
                            </div>
                        </div>

                        <div class="space-y-6">
                            <!-- Quick Info -->
                            <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-5">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <i class="fas fa-info-circle text-blue-600 text-2xl"></i>
                                    </div>
                                    <div class="mr-4">
                                        <h4 class="text-lg font-semibold text-gray-900 mb-2">ماذا يفعل هذا الفحص؟</h4>
                                        <ul class="space-y-2 text-gray-700">
                                            <li class="flex items-center">
                                                <i class="fas fa-check-circle text-green-600 ml-2"></i>
                                                يعرض جميع الجداول الموجودة في قاعدة البيانات
                                            </li>
                                            <li class="flex items-center">
                                                <i class="fas fa-check-circle text-green-600 ml-2"></i>
                                                يقارنها مع ملف database.sql المرجعي
                                            </li>
                                            <li class="flex items-center">
                                                <i class="fas fa-check-circle text-green-600 ml-2"></i>
                                                يكتشف الجداول المفقودة أو الإضافية
                                            </li>
                                            <li class="flex items-center">
                                                <i class="fas fa-check-circle text-green-600 ml-2"></i>
                                                يعرض عدد السجلات في كل جدول
                                            </li>
                                            <li class="flex items-center">
                                                <i class="fas fa-check-circle text-green-600 ml-2"></i>
                                                يعرض بنية الجداول المهمة بالتفصيل
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!-- Database Info -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-white border border-gray-200 rounded-lg p-4 text-center">
                                    <div class="text-3xl font-bold text-blue-600 mb-2">
                                        <i class="fas fa-database"></i>
                                    </div>
                                    <div class="text-sm text-gray-600 mb-1">اسم قاعدة البيانات</div>
                                    <div class="text-lg font-semibold text-gray-900">ecommerce</div>
                                </div>
                                <div class="bg-white border border-gray-200 rounded-lg p-4 text-center">
                                    <div class="text-3xl font-bold text-green-600 mb-2">
                                        <i class="fas fa-table"></i>
                                    </div>
                                    <div class="text-sm text-gray-600 mb-1">الجداول المتوقعة</div>
                                    <div class="text-lg font-semibold text-gray-900">~35 جدول</div>
                                </div>
                                <div class="bg-white border border-gray-200 rounded-lg p-4 text-center">
                                    <div class="text-3xl font-bold text-purple-600 mb-2">
                                        <i class="fas fa-file-code"></i>
                                    </div>
                                    <div class="text-sm text-gray-600 mb-1">ملف SQL المرجعي</div>
                                    <div class="text-xs font-semibold text-gray-900">database.sql</div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="text-center pt-4 space-y-4">
                                <div class="flex gap-4 justify-center flex-wrap">
                                    <a href="../../verify-database.php" target="_blank" 
                                       class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-indigo-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                                        <i class="fas fa-search ml-2"></i>
                                        <span>التحقق من التطابق</span>
                                        <i class="fas fa-external-link-alt mr-2"></i>
                                    </a>
                                    <a href="../../update-database-sql.php" target="_blank" 
                                       class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-semibold rounded-lg hover:from-green-700 hover:to-emerald-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                                        <i class="fas fa-sync-alt ml-2"></i>
                                        <span>تحديث ملف database.sql</span>
                                        <i class="fas fa-external-link-alt mr-2"></i>
                                    </a>
                                </div>
                                <p class="text-sm text-gray-500">
                                    <i class="fas fa-info-circle ml-1"></i>
                                    استخدم "تحديث ملف database.sql" لمزامنة الملف مع قاعدة البيانات الحالية
                                </p>
                            </div>

                            <!-- Documentation Link -->
                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <i class="fas fa-book text-gray-600 text-xl ml-3"></i>
                                        <div>
                                            <h5 class="font-semibold text-gray-900">دليل التوثيق</h5>
                                            <p class="text-sm text-gray-600">اقرأ الدليل الكامل للتحقق من قاعدة البيانات</p>
                                        </div>
                                    </div>
                                    <a href="../../docs/DATABASE-VERIFICATION-AR.md" target="_blank" 
                                       class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
                                        <i class="fas fa-file-alt ml-2"></i>
                                        عرض الدليل
                                    </a>
                                </div>
                            </div>

                            <!-- Warning Note -->
                            <div class="bg-yellow-50 border-r-4 border-yellow-400 p-4 rounded">
                                <div class="flex items-start">
                                    <i class="fas fa-exclamation-triangle text-yellow-600 text-xl ml-3 mt-1"></i>
                                    <div>
                                        <h5 class="font-semibold text-yellow-900 mb-1">ملاحظة مهمة</h5>
                                        <p class="text-sm text-yellow-800">
                                            هذه الأداة للتشخيص فقط ولا تقوم بأي تعديلات على قاعدة البيانات. 
                                            إذا وجدت مشاكل، يمكنك إصلاحها يدوياً أو استيراد ملف database.sql.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Save Button -->
                <div class="mt-6 flex justify-end">
                    <button type="submit" name="save_settings" class="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition">
                        <i class="fas fa-save ml-2"></i>حفظ جميع الإعدادات
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function showTab(tabName) {
            // Hide all tabs
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.add('hidden');
            });
            
            // Remove active class from all buttons
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('border-blue-600', 'text-blue-600');
                btn.classList.add('border-transparent', 'text-gray-600');
            });
            
            // Show selected tab
            document.getElementById('content-' + tabName).classList.remove('hidden');
            
            // Add active class to selected button
            const activeBtn = document.getElementById('tab-' + tabName);
            activeBtn.classList.remove('border-transparent', 'text-gray-600');
            activeBtn.classList.add('border-blue-600', 'text-blue-600');
        }

        // Update color text inputs when color picker changes
        document.querySelectorAll('input[type="color"]').forEach(input => {
            input.addEventListener('change', function() {
                const textInput = this.nextElementSibling;
                if (textInput && textInput.tagName === 'INPUT') {
                    textInput.value = this.value;
                }
            });
        });

        // Update overlay preview
        function updateOverlayPreview() {
            const colorInput = document.querySelector('input[name="hero_overlay_color"]');
            const opacityInput = document.querySelector('input[name="hero_overlay_opacity"]');
            const preview = document.getElementById('overlayPreview');
            const colorText = document.getElementById('hero_overlay_color_text');
            
            if (colorInput && opacityInput && preview) {
                const color = colorInput.value;
                const opacity = parseFloat(opacityInput.value);
                const opacity2 = opacity - 0.05;
                
                // Update color text
                if (colorText) colorText.value = color;
                
                // Convert HEX to RGB
                const hex = color.replace('#', '');
                const r = parseInt(hex.substr(0, 2), 16);
                const g = parseInt(hex.substr(2, 2), 16);
                const b = parseInt(hex.substr(4, 2), 16);
                
                // Update preview
                preview.style.background = `linear-gradient(135deg, rgba(${r}, ${g}, ${b}, ${opacity}) 0%, rgba(${r}, ${g}, ${b}, ${opacity2}) 100%), url('https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=400&h=200&fit=crop') center/cover`;
            }
        }
        
        // Initialize preview on page load
        updateOverlayPreview();

        // Live preview for contact info
        const contactInputs = {
            'store_name': 'preview-store-name',
            'store_description': 'preview-store-desc',
            'contact_phone': 'preview-phone',
            'contact_email': 'preview-email',
            'contact_address': 'preview-address'
        };

        Object.keys(contactInputs).forEach(inputName => {
            const input = document.querySelector(`[name="${inputName}"]`);
            const preview = document.getElementById(contactInputs[inputName]);
            
            if (input && preview) {
                input.addEventListener('input', function() {
                    preview.textContent = this.value || preview.textContent;
                });
            }
        });

        // Test Telegram connection
        function testTelegram() {
            const btn = event.target;
            const originalText = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin ml-2"></i>جاري الاختبار...';
            
            fetch('test_telegram.php')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('✅ نجح الاتصال!/n/nاسم البوت: ' + data.bot_name);
                    } else {
                        alert('❌ فشل الاتصال!/n/n' + data.message);
                    }
                })
                .catch(error => {
                    alert('❌ حدث خطأ: ' + error.message);
                })
                .finally(() => {
                    btn.disabled = false;
                    btn.innerHTML = originalText;
                });
        }
    </script>
</body>
</html>
