<?php
// --- ملف: design.php ---
// صفحة التحكم المرئي في تصميم الصفحات الرئيسية (index) وصفحات المنتج (det)

// BASE_URL الآن معرف مركزيًا في db.php.
// تفعيل عرض الأخطاء (يمكنك تعطيله في الإنتاج)
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// --- إعدادات الاتصال بقاعدة البيانات ---
require_once __DIR__ . '/db.php';

// جلب معلومات المتجر للعرض
$stmtStore = $pdo->query("SELECT * FROM stores WHERE id = 1");
$store = $stmtStore->fetch(PDO::FETCH_ASSOC);
if (!$store) {
    $store = ['name' => 'متجري', 'logo' => '']; // قيم افتراضية
}

// --- جلب جميع التصميمات المحفوظة مسبقاً ---
$designs = [];
$stmtDesigns = $pdo->query("SELECT page_name, element_id, content, styles FROM page_designs");
while ($row = $stmtDesigns->fetch(PDO::FETCH_ASSOC)) {
    // نقوم بفك تشفير الـ styles من JSON إلى مصفوفة لتسهيل التعامل معها
    $row['styles'] = json_decode($row['styles'], true);
    $designs[$row['page_name']][$row['element_id']] = $row;
}

// --- التعامل مع طلب الحفظ (عبر AJAX) ---
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'save_design') {
    $savedData = json_decode(file_get_contents('php://input'), true);
    $response = ['success' => false, 'message' => 'حدث خطأ غير متوقع.'];

    if ($savedData && isset($savedData['page']) && isset($savedData['elements'])) {
        try {
            $pdo->beginTransaction();
            $page = $savedData['page'];

            // حذف التصميمات القديمة لهذه الصفحة
            $stmtDelete = $pdo->prepare("DELETE FROM page_designs WHERE page_name = ?");
            $stmtDelete->execute([$page]);

            // إدراج التصميمات الجديدة
            $stmtInsert = $pdo->prepare("INSERT INTO page_designs (page_name, element_id, element_type, content, styles) VALUES (?, ?, ?, ?, ?)");
            foreach ($savedData['elements'] as $element) {
                $elementType = $element['element_type'] ?? 'unknown';
                $content = $element['content'] ?? '';
                $stylesJson = json_encode($element['styles'] ?? []);
                $stmtInsert->execute([$page, $element['element_id'], $elementType, $content, $stylesJson]);
            }

            $pdo->commit();
            $response = ['success' => true, 'message' => 'تم حفظ التصميم بنجاح!'];
        } catch (Exception $e) {
            $pdo->rollBack();
            $response = ['success' => false, 'message' => 'خطأ في قاعدة البيانات: ' . $e->getMessage()];
        }
    } else {
        $response = ['success' => false, 'message' => 'بيانات غير صالحة.'];
    }

    header('Content-Type: application/json');
    echo json_encode($response);
    exit;
}

?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مصمم الصفحات المرئي - <?php echo htmlspecialchars($store['name']); ?></title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts - Tajawal -->
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Tajawal', sans-serif;
        }

        body {
            background-color: #f4f7fa;
            display: flex;
            height: 100vh;
            overflow: hidden;
            color: #333;
        }

        /* شريط الأدوات الجانبي */
        .toolbar {
            width: 350px;
            background-color: #ffffff;
            border-left: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            box-shadow: -5px 0 20px rgba(0,0,0,0.05);
            z-index: 10;
        }

        .toolbar-header {
            padding: 20px;
            background: linear-gradient(135deg, #1a237e, #0d47a1);
            color: white;
        }

        .toolbar-header h2 {
            font-size: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .toolbar-tabs {
            display: flex;
            background-color: #f5f5f5;
            border-bottom: 1px solid #e0e0e0;
        }

        .tab-btn {
            flex: 1;
            padding: 15px 5px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            color: #666;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
        }

        .tab-btn.active {
            color: #1a237e;
            border-bottom-color: #1a237e;
            background-color: rgba(26, 35, 126, 0.05);
        }

        .tab-pane {
            display: none;
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }

        .tab-pane.active {
            display: block;
        }

        .element-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 20px;
        }

        .element-card {
            background-color: #f9f9f9;
            border-radius: 12px;
            border: 1px solid #eee;
            overflow: hidden;
        }

        .element-header {
            padding: 15px;
            background-color: #fff;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-weight: 600;
            color: #2C3E50;
        }

        .element-header i {
            color: #2196F3;
            width: 20px;
        }

        .element-content {
            padding: 15px;
            display: none;
        }

        .element-card.expanded .element-content {
            display: block;
        }

        .control-group {
            margin-bottom: 15px;
        }

        .control-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 13px;
            color: #666;
            font-weight: 500;
        }

        .control-group input[type="text"],
        .control-group input[type="color"],
        .control-group select {
            width: 100%;
            padding: 8px 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .control-group input:focus,
        .control-group select:focus {
            border-color: #2196F3;
            outline: none;
        }

        .control-group input[type="color"] {
            height: 45px;
            cursor: pointer;
        }

        .save-all-btn {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            border: none;
            padding: 15px;
            width: 100%;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .save-all-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
        }

        /* منطقة المعاينة */
        .preview-area {
            flex: 1;
            background-color: #eef2f6;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .preview-header {
            padding: 15px 20px;
            background-color: white;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .preview-header h3 {
            color: #2C3E50;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .device-selector {
            display: flex;
            gap: 5px;
            background: #f0f0f0;
            padding: 5px;
            border-radius: 30px;
        }

        .device-btn {
            padding: 8px 16px;
            border: none;
            background: none;
            border-radius: 30px;
            cursor: pointer;
            color: #666;
            transition: all 0.3s;
        }

        .device-btn.active {
            background-color: #2196F3;
            color: white;
        }

        .iframe-container {
            flex: 1;
            padding: 20px;
            overflow: auto;
            background-color: #dde3e9;
        }

        #previewFrame {
            width: 100%;
            height: 100%;
            border: none;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            transition: all 0.3s;
        }

        .preview-frame.mobile {
            max-width: 375px;
            margin: 0 auto;
            display: block;
        }

        .preview-frame.tablet {
            max-width: 768px;
            margin: 0 auto;
            display: block;
        }

        /* رسائل التنبيه */
        .toast-message {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(-100px);
            background: white;
            padding: 15px 30px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            z-index: 9999;
            transition: transform 0.3s;
            font-weight: 500;
        }

        .toast-message.show {
            transform: translateX(-50%) translateY(0);
        }

        .toast-message.success {
            border-right: 5px solid #10b981;
        }

        .toast-message.error {
            border-right: 5px solid #f44336;
        }
    </style>
</head>
<body>

    <!-- رسالة التنبيه -->
    <div id="toast" class="toast-message"></div>

    <!-- شريط الأدوات الجانبي -->
    <div class="toolbar">
        <div class="toolbar-header">
            <h2><i class="fas fa-paint-brush"></i> مصمم الصفحات المرئي</h2>
        </div>

        <div class="toolbar-tabs">
            <button class="tab-btn active" data-tab="index">الصفحة الرئيسية (index.php)</button>
            <button class="tab-btn" data-tab="product">صفحة المنتج (det.php)</button>
        </div>

        <!-- تبويب الصفحة الرئيسية (index) -->
        <div id="tab-index" class="tab-pane active">
            <div class="element-list">
                <?php
                // عناصر الصفحة الرئيسية (index)
                $indexElements = [
                    ['id' => 'header-top', 'type' => 'header', 'label' => 'الشريط العلوي', 'icon' => 'fa-window-top'],
                    ['id' => 'header-main', 'type' => 'header', 'label' => 'الهيدر الرئيسي', 'icon' => 'fa-header'],
                    ['id' => 'logo', 'type' => 'image', 'label' => 'الشعار (Logo)', 'icon' => 'fa-image'],
                    ['id' => 'search-button', 'type' => 'button', 'label' => 'زر البحث', 'icon' => 'fa-search'],
                    ['id' => 'nav-home', 'type' => 'link', 'label' => 'رابط الرئيسية', 'icon' => 'fa-home'],
                    ['id' => 'nav-orders', 'type' => 'link', 'label' => 'رابط الطلبات', 'icon' => 'fa-shopping-bag'],
                    ['id' => 'nav-categories', 'type' => 'link', 'label' => 'رابط الأقسام', 'icon' => 'fa-th-large'],
                    ['id' => 'product-card-0', 'type' => 'product-card', 'label' => 'بطاقة منتج 1', 'icon' => 'fa-box'],
                    ['id' => 'product-btn-0', 'type' => 'button', 'label' => 'زر اطلب الآن 1', 'icon' => 'fa-cart-plus'],
                    ['id' => 'product-card-1', 'type' => 'product-card', 'label' => 'بطاقة منتج 2', 'icon' => 'fa-box'],
                    ['id' => 'product-btn-1', 'type' => 'button', 'label' => 'زر اطلب الآن 2', 'icon' => 'fa-cart-plus'],
                    ['id' => 'product-card-2', 'type' => 'product-card', 'label' => 'بطاقة منتج 3', 'icon' => 'fa-box'],
                    ['id' => 'product-btn-2', 'type' => 'button', 'label' => 'زر اطلب الآن 3', 'icon' => 'fa-cart-plus'],
                    ['id' => 'product-card-3', 'type' => 'product-card', 'label' => 'بطاقة منتج 4', 'icon' => 'fa-box'],
                    ['id' => 'product-btn-3', 'type' => 'button', 'label' => 'زر اطلب الآن 4', 'icon' => 'fa-cart-plus'],
                    ['id' => 'featured-button', 'type' => 'button', 'label' => 'زر عرض المزيد', 'icon' => 'fa-arrow-left'],
                    ['id' => 'footer', 'type' => 'footer', 'label' => 'الفوتر', 'icon' => 'fa-footnote'],
                ];

                foreach ($indexElements as $element):
                    $saved = $designs['home'][$element['id']] ?? [];
                    $styles = $saved['styles'] ?? [];
                    $content = $saved['content'] ?? '';
                ?>
                <div class="element-card" data-page="home" data-element-id="<?php echo $element['id']; ?>" data-element-type="<?php echo $element['type']; ?>">
                    <div class="element-header">
                        <i class="fas <?php echo $element['icon']; ?>"></i>
                        <span><?php echo $element['label']; ?></span>
                        <i class="fas fa-chevron-down" style="margin-right: auto;"></i>
                    </div>
                    <div class="element-content">
                        <?php if ($element['type'] === 'link' || $element['type'] === 'button' || $element['type'] === 'text' || $element['type'] === 'footer'): ?>
                        <div class="control-group">
                            <label>النص</label>
                            <input type="text" class="content-input" value="<?php echo htmlspecialchars($content); ?>">
                        </div>
                        <?php endif; ?>
                        <?php if ($element['type'] !== 'image'): // الصور لا تحتوي على هذه التعديلات عادةً ?>
                        <div class="control-group">
                            <label>لون الخلفية</label>
                            <input type="color" class="style-input" data-style="backgroundColor" value="<?php echo $styles['backgroundColor'] ?? '#ffffff'; ?>">
                        </div>
                        <div class="control-group">
                            <label>لون النص</label>
                            <input type="color" class="style-input" data-style="color" value="<?php echo $styles['color'] ?? '#333333'; ?>">
                        </div>
                        <div class="control-group">
                            <label>نصف قطر الحدود (px)</label>
                            <input type="text" class="style-input" data-style="borderRadius" value="<?php echo $styles['borderRadius'] ?? '0'; ?>">
                        </div>
                        <div class="control-group">
                            <label>الحشوة (Padding, مثال: 10px 20px)</label>
                            <input type="text" class="style-input" data-style="padding" value="<?php echo $styles['padding'] ?? ''; ?>">
                        </div>
                        <?php else: ?>
                        <div class="control-group">
                            <label>ارتفاع الصورة (px)</label>
                            <input type="text" class="style-input" data-style="height" value="<?php echo $styles['height'] ?? '60px'; ?>">
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <button class="save-all-btn" data-page="home"><i class="fas fa-save"></i> حفظ تصميم الصفحة الرئيسية</button>
        </div>

        <!-- تبويب صفحة المنتج (det) -->
        <div id="tab-product" class="tab-pane">
            <div class="element-list">
                <?php
                // عناصر صفحة المنتج (det)
                $productElements = [
                    ['id' => 'product-header-top', 'type' => 'header', 'label' => 'الشريط العلوي', 'icon' => 'fa-window-top'],
                    ['id' => 'product-header-main', 'type' => 'header', 'label' => 'الهيدر الرئيسي', 'icon' => 'fa-header'],
                    ['id' => 'product-logo', 'type' => 'image', 'label' => 'الشعار (Logo)', 'icon' => 'fa-image'],
                    ['id' => 'product-main-image', 'type' => 'image', 'label' => 'الصورة الرئيسية للمنتج', 'icon' => 'fa-image'],
                    ['id' => 'product-title', 'type' => 'text', 'label' => 'عنوان المنتج', 'icon' => 'fa-heading'],
                    ['id' => 'product-description', 'type' => 'text', 'label' => 'وصف المنتج', 'icon' => 'fa-paragraph'],
                    ['id' => 'product-price', 'type' => 'text', 'label' => 'سعر المنتج', 'icon' => 'fa-tag'],
                    ['id' => 'order-button', 'type' => 'button', 'label' => 'زر اطلب الآن', 'icon' => 'fa-shopping-bag'],
                ];

                foreach ($productElements as $element):
                    $saved = $designs['product'][$element['id']] ?? [];
                    $styles = $saved['styles'] ?? [];
                    $content = $saved['content'] ?? '';
                ?>
                <div class="element-card" data-page="product" data-element-id="<?php echo $element['id']; ?>" data-element-type="<?php echo $element['type']; ?>">
                    <div class="element-header">
                        <i class="fas <?php echo $element['icon']; ?>"></i>
                        <span><?php echo $element['label']; ?></span>
                        <i class="fas fa-chevron-down" style="margin-right: auto;"></i>
                    </div>
                    <div class="element-content">
                        <?php if ($element['type'] === 'text' || $element['type'] === 'button'): ?>
                        <div class="control-group">
                            <label>النص</label>
                            <input type="text" class="content-input" value="<?php echo htmlspecialchars($content); ?>">
                        </div>
                        <?php endif; ?>
                        <?php if ($element['type'] !== 'image'): ?>
                        <div class="control-group">
                            <label>لون الخلفية</label>
                            <input type="color" class="style-input" data-style="backgroundColor" value="<?php echo $styles['backgroundColor'] ?? '#ffffff'; ?>">
                        </div>
                        <div class="control-group">
                            <label>لون النص</label>
                            <input type="color" class="style-input" data-style="color" value="<?php echo $styles['color'] ?? '#333333'; ?>">
                        </div>
                        <div class="control-group">
                            <label>نصف قطر الحدود (px)</label>
                            <input type="text" class="style-input" data-style="borderRadius" value="<?php echo $styles['borderRadius'] ?? '0'; ?>">
                        </div>
                        <?php else: ?>
                        <div class="control-group">
                            <label>الارتفاع (px)</label>
                            <input type="text" class="style-input" data-style="height" value="<?php echo $styles['height'] ?? '400px'; ?>">
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <button class="save-all-btn" data-page="product"><i class="fas fa-save"></i> حفظ تصميم صفحة المنتج</button>
        </div>
    </div>

    <!-- منطقة المعاينة -->
    <div class="preview-area">
        <div class="preview-header">
            <h3><i class="fas fa-eye"></i> معاينة حية</h3>
            <div class="device-selector">
                <button class="device-btn active" data-device="desktop"><i class="fas fa-desktop"></i></button>
                <button class="device-btn" data-device="tablet"><i class="fas fa-tablet-alt"></i></button>
                <button class="device-btn" data-device="mobile"><i class="fas fa-mobile-alt"></i></button>
            </div>
        </div>
        <div class="iframe-container">
            <iframe id="previewFrame" src="about:blank" frameborder="0"></iframe>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // ---------- المتغيرات العامة ----------
            const toast = document.getElementById('toast');
            const previewFrame = document.getElementById('previewFrame');
            const tabs = document.querySelectorAll('.tab-btn');
            const panes = document.querySelectorAll('.tab-pane');
            const deviceBtns = document.querySelectorAll('.device-btn');
            const saveButtons = document.querySelectorAll('.save-all-btn');

            let currentPage = 'home'; // الصفحة الحالية (home أو product)
            let previewDoc = null; // سيتم تعيينها عند تحميل iframe

            // ---------- تحميل الصفحة في iframe ----------
            function loadPreview(page) {
                // نحدد أي صفحة سيتم عرضها في المعاينة
                let url = (page === 'home') ? 'index33.php' : 'det33.php?id=119';
                previewFrame.src = url;
            }

            previewFrame.onload = function() {
                try {
                    previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document;
                    applyAllStylesToPreview(); // تطبيق الأنماط عند تحميل الصفحة
                } catch (e) {
                    console.warn("لا يمكن الوصول إلى محتوى الإطار. تأكد من أن الصفحات في نفس النطاق.");
                }
            };

            // ---------- تطبيق الأنماط على المعاينة ----------
            function applyAllStylesToPreview() {
                if (!previewDoc) return;

                // الحصول على جميع العناصر في التبويب النشط
                const activePane = document.querySelector('.tab-pane.active');
                const cards = activePane.querySelectorAll('.element-card');

                cards.forEach(card => {
                    const elementId = card.dataset.elementId;
                    const page = card.dataset.page;

                    // نتأكد أن العنصر من الصفحة الحالية
                    if (page !== currentPage) return;

                    // تجميع الأنماط
                    let styles = {};
                    const styleInputs = card.querySelectorAll('.style-input');
                    styleInputs.forEach(input => {
                        const styleProp = input.dataset.style;
                        styles[styleProp] = input.value;
                    });

                    // الحصول على المحتوى
                    let content = '';
                    const contentInput = card.querySelector('.content-input');
                    if (contentInput) {
                        content = contentInput.value;
                    }

                    // تطبيق الأنماط على العنصر في iframe
                    applyStylesToElement(elementId, styles, content, page);
                });
            }

            function applyStylesToElement(elementId, styles, content, page) {
                if (!previewDoc) return;

                // البحث عن العنصر داخل iframe
                // يمكن أن يكون الـ id فريداً، أو يمكننا البحث باستخدام محددات أخرى.
                // هنا نفترض أن العناصر في الصفحة لها نفس الـ id.
                const element = previewDoc.getElementById(elementId);

                if (element) {
                    // تطبيق الأنماط
                    for (const [prop, value] of Object.entries(styles)) {
                        if (value) {
                            element.style[prop] = value;
                        }
                    }
                    // تطبيق المحتوى إذا كان موجوداً
                    if (content) {
                        if (element.tagName === 'IMG') {
                            // لا نغير محتوى الصورة، بل نغير src؟ هذه ميزة متقدمة
                        } else if (element.tagName === 'INPUT' || element.tagName === 'BUTTON') {
                            element.value = content;
                        } else {
                            element.innerHTML = content;
                        }
                    }
                } else {
                    console.warn(`العنصر ذو id "${elementId}" غير موجود في الصفحة ${page}.`);
                }
            }

            // ---------- تحديث المعاينة عند تغيير أي إدخال ----------
            document.querySelectorAll('.style-input, .content-input').forEach(input => {
                input.addEventListener('input', function() {
                    applyAllStylesToPreview();
                });
            });

            // ---------- فتح وإغلاق بطاقات العناصر ----------
            document.querySelectorAll('.element-header').forEach(header => {
                header.addEventListener('click', function() {
                    const card = this.closest('.element-card');
                    card.classList.toggle('expanded');
                    const icon = this.querySelector('.fa-chevron-down');
                    if (card.classList.contains('expanded')) {
                        icon.style.transform = 'rotate(180deg)';
                    } else {
                        icon.style.transform = 'rotate(0deg)';
                    }
                });
            });

            // ---------- تبديل التبويبات ----------
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const targetTab = this.dataset.tab;

                    // تحديث التبويبات النشطة
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');

                    panes.forEach(pane => {
                        pane.classList.remove('active');
                        if (pane.id === `tab-${targetTab}`) {
                            pane.classList.add('active');
                        }
                    });

                    // تحديث الصفحة الحالية
                    currentPage = (targetTab === 'index') ? 'home' : 'product';

                    // إعادة تحميل المعاينة بناءً على الصفحة الجديدة
                    loadPreview(currentPage);
                });
            });

            // ---------- تبديل أجهزة المعاينة ----------
            deviceBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    deviceBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');

                    const device = this.dataset.device;
                    previewFrame.className = '';
                    if (device === 'mobile') {
                        previewFrame.classList.add('mobile');
                    } else if (device === 'tablet') {
                        previewFrame.classList.add('tablet');
                    }
                });
            });

            // ---------- حفظ التصميم ----------
            saveButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    const page = this.dataset.page; // home أو product
                    const elements = [];

                    // جمع كل العناصر في التبويب المناسب
                    const activePane = document.querySelector(`.tab-pane${page === 'home' ? '#tab-index' : '#tab-product'}`);
                    const cards = activePane.querySelectorAll('.element-card');

                    cards.forEach(card => {
                        const elementId = card.dataset.elementId;
                        const elementType = card.dataset.elementType;

                        // تجميع الأنماط
                        let styles = {};
                        const styleInputs = card.querySelectorAll('.style-input');
                        styleInputs.forEach(input => {
                            const styleProp = input.dataset.style;
                            styles[styleProp] = input.value;
                        });

                        // تجميع المحتوى
                        let content = '';
                        const contentInput = card.querySelector('.content-input');
                        if (contentInput) {
                            content = contentInput.value;
                        }

                        elements.push({
                            element_id: elementId,
                            element_type: elementType,
                            content: content,
                            styles: styles
                        });
                    });

                    // إرسال البيانات إلى السيرفر
                    saveDesign(page, elements);
                });
            });

            function saveDesign(page, elements) {
                fetch('design.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        action: 'save_design',
                        page: page,
                        elements: elements
                    })
                })
                .then(response => response.json())
                .then(data => {
                    showToast(data.message, data.success ? 'success' : 'error');
                })
                .catch((error) => {
                    console.error('Error:', error);
                    showToast('حدث خطأ في الاتصال بالسيرفر.', 'error');
                });
            }

            function showToast(message, type = 'success') {
                toast.textContent = message;
                toast.className = `toast-message show ${type}`;
                setTimeout(() => {
                    toast.classList.remove('show');
                }, 3000);
            }

            // تحميل المعاينة الأولية
            loadPreview('home');
        });
    </script>
  <script> document.addEventListener('DOMContentLoaded', function() { // ---------- المتغيرات العامة ---------- const toast = document.getElementById('toast'); const previewFrame = document.getElementById('previewFrame'); const tabs = document.querySelectorAll('.tab-btn'); const panes = document.querySelectorAll('.tab-pane'); const deviceBtns = document.querySelectorAll('.device-btn'); const saveButtons = document.querySelectorAll('.save-all-btn'); let currentPage = 'home'; let previewDoc = null; let previewLoadAttempts = 0; const MAX_ATTEMPTS = 10; // ---------- تحميل الصفحة في iframe ---------- function loadPreview(page) { let url = (page === 'home') ? 'index33.php' : 'det33.php?id=119'; console.log('جاري تحميل:', url); previewFrame.src = url; } previewFrame.onload = function() { try { previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document; console.log('تم تحميل الإطار بنجاح'); previewLoadAttempts = 0; // تأخير بسيط للتأكد من تحمول DOM بالكامل setTimeout(() => { applyAllStylesToPreview(); }, 500); } catch (e) { console.warn("لا يمكن الوصول إلى محتوى الإطار:", e); previewLoadAttempts++; if (previewLoadAttempts < MAX_ATTEMPTS) { setTimeout(() => loadPreview(currentPage), 1000); } } }; // ---------- تطبيق الأنماط على المعاينة ---------- function applyAllStylesToPreview() { if (!previewDoc) { console.warn('previewDoc غير متوفر بعد'); return; } const activePane = document.querySelector('.tab-pane.active'); const cards = activePane.querySelectorAll('.element-card'); cards.forEach(card => { const elementId = card.dataset.elementId; const page = card.dataset.page; if (page !== currentPage) return; let styles = {}; const styleInputs = card.querySelectorAll('.style-input'); styleInputs.forEach(input => { const styleProp = input.dataset.style; if (input.value) { styles[styleProp] = input.value; } }); let content = ''; const contentInput = card.querySelector('.content-input'); if (contentInput) { content = contentInput.value; } applyStylesToElement(elementId, styles, content); }); } function applyStylesToElement(elementId, styles, content) { if (!previewDoc) return; const element = previewDoc.getElementById(elementId); if (element) { for (const [prop, value] of Object.entries(styles)) { if (value) { element.style[prop] = value; } } if (content) { if (element.tagName === 'IMG') { // لا نغير محتوى الصورة } else if (element.tagName === 'INPUT' || element.tagName === 'BUTTON') { element.value = content; } else { element.innerHTML = content; } } } else { // هذه مجرد تحذير وليست خطأ - يمكن تجاهلها console.log(`العنصر ${elementId} غير موجود في الصفحة (يمكن تجاهل هذا التحذير)`); } } // ---------- تحديث المعاينة عند تغيير أي إدخال ---------- document.querySelectorAll('.style-input, .content-input').forEach(input => { input.addEventListener('input', function() { applyAllStylesToPreview(); }); }); // ---------- فتح وإغلاق بطاقات العناصر ---------- document.querySelectorAll('.element-header').forEach(header => { header.addEventListener('click', function() { const card = this.closest('.element-card'); card.classList.toggle('expanded'); const icon = this.querySelector('.fa-chevron-down'); if (card.classList.contains('expanded')) { icon.style.transform = 'rotate(180deg)'; } else { icon.style.transform = 'rotate(0deg)'; } }); }); // ---------- تبديل التبويبات ---------- tabs.forEach(tab => { tab.addEventListener('click', function() { const targetTab = this.dataset.tab; tabs.forEach(t => t.classList.remove('active')); this.classList.add('active'); panes.forEach(pane => { pane.classList.remove('active'); if (pane.id === `tab-${targetTab}`) { pane.classList.add('active'); } }); currentPage = (targetTab === 'index') ? 'home' : 'product'; loadPreview(currentPage); }); }); // ---------- تبديل أجهزة المعاينة ---------- deviceBtns.forEach(btn => { btn.addEventListener('click', function() { deviceBtns.forEach(b => b.classList.remove('active')); this.classList.add('active'); const device = this.dataset.device; previewFrame.className = ''; if (device === 'mobile') { previewFrame.classList.add('mobile'); } else if (device === 'tablet') { previewFrame.classList.add('tablet'); } }); }); // ---------- حفظ التصميم ---------- saveButtons.forEach(btn => { btn.addEventListener('click', function() { const page = this.dataset.page; const elements = []; const activePane = document.querySelector(`.tab-pane${page === 'home' ? '#tab-index' : '#tab-product'}`); const cards = activePane.querySelectorAll('.element-card'); cards.forEach(card => { const elementId = card.dataset.elementId; const elementType = card.dataset.elementType; let styles = {}; const styleInputs = card.querySelectorAll('.style-input'); styleInputs.forEach(input => { const styleProp = input.dataset.style; if (input.value) { styles[styleProp] = input.value; } }); let content = ''; const contentInput = card.querySelector('.content-input'); if (contentInput) { content = contentInput.value; } elements.push({ element_id: elementId, element_type: elementType, content: content, styles: styles }); }); // منع الضغط المتكرر const originalText = btn.innerHTML; btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الحفظ...'; btn.disabled = true; fetch('design.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ action: 'save_design', page: page, elements: elements }) }) .then(async response => { const text = await response.text(); console.log('استجابة السيرفر:', text.substring(0, 200)); try { return JSON.parse(text); } catch (e) { console.error('النص المرتجع:', text); throw new Error('السيرفر أرجع رد غير متوقع'); } }) .then(data => { showToast(data.message, data.success ? 'success' : 'error'); }) .catch((error) => { console.error('خطأ:', error); showToast('حدث خطأ: ' + error.message, 'error'); }) .finally(() => { btn.innerHTML = originalText; btn.disabled = false; }); }); }); function showToast(message, type = 'success') { let toast = document.getElementById('toast'); if (!toast) { toast = document.createElement('div'); toast.id = 'toast'; toast.className = 'toast-message'; document.body.appendChild(toast); } toast.textContent = message; toast.className = `toast-message show ${type}`; setTimeout(() => { toast.classList.remove('show'); }, 3000); } // تحميل المعاينة الأولية loadPreview('home'); }); </script> <!-- أضف هذا الـ CSS للـ toast إذا لم يكن موجوداً --> <style> .toast-message { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background: white; padding: 15px 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 9999; transition: transform 0.3s; font-weight: 500; min-width: 300px; text-align: center; } .toast-message.show { transform: translateX(-50%) translateY(0); } .toast-message.success { border-right: 5px solid #10b981; color: #10b981; } .toast-message.error { border-right: 5px solid #f44336; color: #f44336; } .preview-frame.mobile { max-width: 375px; margin: 0 auto; display: block; } .preview-frame.tablet { max-width: 768px; margin: 0 auto; display: block; } </style>
</body>
</html>