<?php
    // تفعيل عرض الأخطاء للتشخيص
ini_set('display_errors', 1);
error_reporting(E_ALL);
// =====================================================
// Neo Link — Theme Customizer Admin Page
// File: admin/theme-customizer.php
// =====================================================
require_once __DIR__ . '/../db.php';

// ── SAVE ─────────────────────────────────────────────
$saved = false;
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'save_theme') {
    $allowed_radii = ['rounded', 'square', 'pill'];
    $settings = [
        'primary_color' => preg_match('/^#[0-9A-Fa-f]{6}$/', $_POST['primary_color'] ?? '') ? $_POST['primary_color'] : '#0F172A',
        'accent_color'  => preg_match('/^#[0-9A-Fa-f]{6}$/', $_POST['accent_color']  ?? '') ? $_POST['accent_color']  : '#6C63FF',
        'bg_color'      => preg_match('/^#[0-9A-Fa-f]{6}$/', $_POST['bg_color']      ?? '') ? $_POST['bg_color']      : '#F7F8FA',
        'btn_radius'    => in_array($_POST['btn_radius'] ?? 'rounded', $allowed_radii) ? $_POST['btn_radius'] : 'rounded',
        'updated_at'    => date('Y-m-d H:i:s'),
    ];

    try {
        $stmt = $pdo->prepare("UPDATE stores SET theme_settings = :ts WHERE id = 1");
        $stmt->execute([':ts' => json_encode($settings)]);
        $saved = true;
        // Return JSON for AJAX save
        if (!empty($_SERVER['HTTP_X_REQUESTED_WITH'])) {
            header('Content-Type: application/json');
            echo json_encode(['ok' => true]);
            exit;
        }
    } catch (PDOException $e) {
        $error = $e->getMessage();
    }
}

// ── LOAD current settings ─────────────────────────────
$row = $pdo->query("SELECT theme_settings FROM stores WHERE id = 1")->fetch(PDO::FETCH_ASSOC);
$theme = [];
if (!empty($row['theme_settings'])) {
    $theme = json_decode($row['theme_settings'], true) ?? [];
}

$defaults = [
    'primary_color' => '#0F172A',
    'accent_color'  => '#6C63FF',
    'bg_color'      => '#F7F8FA',
    'btn_radius'    => 'rounded',
];
$theme = array_merge($defaults, $theme);

// Radius map
$radiusMap = [
    'rounded' => '14px',
    'square'  => '4px',
    'pill'    => '100px',
];
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مخصص الثيم — Neo Link</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
    --panel-w: 300px;
    --top-h:   56px;
    --bg:      #F1F3F5;
    --surface: #FFFFFF;
    --border:  #E2E8F0;
    --text:    #1E293B;
    --muted:   #64748B;
    --accent:  #6C63FF;
    --radius:  10px;
    --font:    'IBM Plex Sans Arabic', sans-serif;
    --shadow:  0 2px 8px rgba(0,0,0,.08);
}
body { font-family: var(--font); background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

/* ── TOP BAR ── */
.topbar {
    height: var(--top-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 16px;
    flex-shrink: 0;
    z-index: 100;
}
.topbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.topbar-brand i { color: var(--accent); font-size: 18px; }
.topbar-center { display: flex; align-items: center; gap: 8px; }
.device-btn {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    transition: all .2s;
}
.device-btn:hover, .device-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.btn-save {
    display: flex; align-items: center; gap: 8px;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 9px 22px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.btn-save:hover { background: #5751D6; transform: translateY(-1px); }
.btn-save.saving { opacity: .7; pointer-events: none; }
.btn-back {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: transparent;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
}
.btn-back:hover { border-color: var(--text); color: var(--text); }
.save-toast {
    display: flex; align-items: center; gap: 6px;
    background: #ECFDF5;
    color: #16A34A;
    border: 1px solid #BBF7D0;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-4px);
    transition: all .3s;
    pointer-events: none;
}
.save-toast.show { opacity: 1; transform: translateY(0); }

/* ── MAIN LAYOUT ── */
.main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── PANEL ── */
.panel {
    width: var(--panel-w);
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}
.panel-scroll { flex: 1; overflow-y: auto; padding: 20px; }
.panel-scroll::-webkit-scrollbar { width: 4px; }
.panel-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.panel-section { margin-bottom: 28px; }
.panel-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.panel-section-title i { color: var(--accent); font-size: 12px; }

/* Color pickers */
.color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    margin-bottom: 10px;
    background: #FAFBFC;
    transition: border-color .2s;
}
.color-row:hover { border-color: var(--accent); }
.color-row-label { font-size: 13.5px; font-weight: 500; }
.color-swatch-wrap { display: flex; align-items: center; gap: 8px; }
.color-hex {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    font-family: monospace;
    min-width: 58px;
    text-align: left;
}
.color-swatch {
    width: 30px; height: 30px;
    border-radius: 6px;
    border: 2px solid rgba(0,0,0,.1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .2s;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch input[type="color"] {
    position: absolute;
    inset: -4px;
    width: 140%;
    height: 140%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* Radius selector */
.radius-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.radius-option { display: none; }
.radius-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all .2s;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}
.radius-label:hover { border-color: var(--accent); color: var(--accent); }
.radius-option:checked + .radius-label {
    border-color: var(--accent);
    background: #EEF0FF;
    color: var(--accent);
}
.radius-preview {
    width: 100%;
    height: 28px;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.rp-rounded { border-radius: 8px; }
.rp-square   { border-radius: 2px; }
.rp-pill     { border-radius: 100px; }

/* Presets */
.presets-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    cursor: pointer;
    background: #fff;
    transition: all .2s;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}
.preset-btn:hover { border-color: var(--accent); }
.preset-swatch {
    width: 36px; height: 28px;
    border-radius: 6px;
    display: flex; gap: 2px; overflow: hidden;
}
.preset-swatch span { flex: 1; display: block; }

/* ── PREVIEW AREA ── */
.preview-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
    overflow: auto;
    background: var(--bg);
}
.preview-frame-wrap {
    transition: all .35s cubic-bezier(.4,0,.2,1);
    width: 100%;
    max-width: 1200px;
}
.preview-frame-wrap.tablet { max-width: 768px; }
.preview-frame-wrap.mobile { max-width: 390px; }
.preview-frame-wrap.mobile .preview-device-bar,
.preview-frame-wrap.tablet .preview-device-bar { display: flex; }
.preview-device-bar {
    display: none;
    background: #1E293B;
    border-radius: 16px 16px 0 0;
    height: 28px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
}
.preview-device-bar span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
}
.preview-device-bar span:nth-child(2) { width: 50px; height: 6px; border-radius: 4px; }
iframe {
    width: 100%;
    border: none;
    background: #fff;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow);
    transition: all .35s;
    display: block;
    min-height: 700px;
}
.preview-frame-wrap:not(.mobile):not(.tablet) iframe {
    border-radius: 12px;
}
.preview-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.preview-label i { color: var(--accent); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .main-layout { flex-direction: column-reverse; }
    .panel { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 260px; }
    .preview-wrap { padding: 12px; }
}
</style>
</head>
<body>
<button onclick="toggleSidebar()" style="position:fixed;top:15px;right:15px;z-index:900;background:var(--primary);color:white;border:none;padding:10px 13px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
<div class="sidebar-overlay" onclick="toggleSidebar()"></div>
<?php include 'sidebar.php'; ?>

<!-- TOP BAR -->
<div class="topbar">
    <div class="topbar-brand">
        <i class="fas fa-paint-brush"></i>
        مخصص الثيم
    </div>

    <div class="topbar-center">
        <button class="device-btn active" data-device="desktop" title="سطح المكتب"><i class="fas fa-desktop"></i></button>
        <button class="device-btn" data-device="tablet"  title="تابلت"><i class="fas fa-tablet-alt"></i></button>
        <button class="device-btn" data-device="mobile"  title="موبايل"><i class="fas fa-mobile-alt"></i></button>
    </div>

    <div class="topbar-actions">
        <div class="save-toast" id="saveToast"><i class="fas fa-check-circle"></i> تم الحفظ!</div>
        <a href="index.php" class="btn-back"><i class="fas fa-arrow-right"></i> رجوع</a>
        <button class="btn-save" id="saveBtn">
            <i class="fas fa-save"></i> حفظ التغييرات
        </button>
    </div>
</div>

<!-- MAIN -->
<div class="main-layout">

    <!-- PREVIEW -->
    <div class="preview-wrap">
        <div class="preview-label"><i class="fas fa-eye"></i> معاينة مباشرة للمتجر</div>
        <div class="preview-frame-wrap" id="previewWrap">
            <div class="preview-device-bar">
                <span></span><span></span><span></span>
            </div>
            <iframe id="previewFrame" src="../index.php?preview=1" title="معاينة المتجر"></iframe>
        </div>
    </div>

    <!-- PANEL -->
    <div class="panel">
        <form id="themeForm" method="POST">
            <input type="hidden" name="action" value="save_theme">
            <input type="hidden" name="primary_color" id="inp_primary" value="<?php echo htmlspecialchars($theme['primary_color']); ?>">
            <input type="hidden" name="accent_color"  id="inp_accent"  value="<?php echo htmlspecialchars($theme['accent_color']); ?>">
            <input type="hidden" name="bg_color"      id="inp_bg"      value="<?php echo htmlspecialchars($theme['bg_color']); ?>">
            <input type="hidden" name="btn_radius"    id="inp_radius"  value="<?php echo htmlspecialchars($theme['btn_radius']); ?>">

            <div class="panel-scroll">

                <!-- PRESETS -->
                <div class="panel-section">
                    <div class="panel-section-title"><i class="fas fa-swatchbook"></i> ثيمات جاهزة</div>
                    <div class="presets-grid">
                        <button type="button" class="preset-btn" data-primary="#0F172A" data-accent="#6C63FF" data-bg="#F7F8FA">
                            <div class="preset-swatch">
                                <span style="background:#0F172A"></span>
                                <span style="background:#6C63FF"></span>
                                <span style="background:#F7F8FA"></span>
                            </div>
                            افتراضي
                        </button>
                        <button type="button" class="preset-btn" data-primary="#065F46" data-accent="#10B981" data-bg="#F0FDF4">
                            <div class="preset-swatch">
                                <span style="background:#065F46"></span>
                                <span style="background:#10B981"></span>
                                <span style="background:#F0FDF4"></span>
                            </div>
                            أخضر
                        </button>
                        <button type="button" class="preset-btn" data-primary="#7C2D12" data-accent="#F97316" data-bg="#FFF7ED">
                            <div class="preset-swatch">
                                <span style="background:#7C2D12"></span>
                                <span style="background:#F97316"></span>
                                <span style="background:#FFF7ED"></span>
                            </div>
                            برتقالي
                        </button>
                        <button type="button" class="preset-btn" data-primary="#1E1B4B" data-accent="#EC4899" data-bg="#FDF2F8">
                            <div class="preset-swatch">
                                <span style="background:#1E1B4B"></span>
                                <span style="background:#EC4899"></span>
                                <span style="background:#FDF2F8"></span>
                            </div>
                            وردي
                        </button>
                        <button type="button" class="preset-btn" data-primary="#1E3A5F" data-accent="#3B82F6" data-bg="#EFF6FF">
                            <div class="preset-swatch">
                                <span style="background:#1E3A5F"></span>
                                <span style="background:#3B82F6"></span>
                                <span style="background:#EFF6FF"></span>
                            </div>
                            أزرق
                        </button>
                        <button type="button" class="preset-btn" data-primary="#4C0519" data-accent="#E11D48" data-bg="#FFF1F2">
                            <div class="preset-swatch">
                                <span style="background:#4C0519"></span>
                                <span style="background:#E11D48"></span>
                                <span style="background:#FFF1F2"></span>
                            </div>
                            أحمر
                        </button>
                        <button type="button" class="preset-btn" data-primary="#1C1917" data-accent="#A855F7" data-bg="#FAF5FF">
                            <div class="preset-swatch">
                                <span style="background:#1C1917"></span>
                                <span style="background:#A855F7"></span>
                                <span style="background:#FAF5FF"></span>
                            </div>
                            بنفسجي
                        </button>
                        <button type="button" class="preset-btn" data-primary="#0C4A6E" data-accent="#06B6D4" data-bg="#ECFEFF">
                            <div class="preset-swatch">
                                <span style="background:#0C4A6E"></span>
                                <span style="background:#06B6D4"></span>
                                <span style="background:#ECFEFF"></span>
                            </div>
                            سماوي
                        </button>
                    </div>
                </div>

                <!-- COLORS -->
                <div class="panel-section">
                    <div class="panel-section-title"><i class="fas fa-palette"></i> الألوان</div>

                    <div class="color-row" id="row_primary">
                        <span class="color-row-label">اللون الأساسي</span>
                        <div class="color-swatch-wrap">
                            <span class="color-hex" id="hex_primary"><?php echo $theme['primary_color']; ?></span>
                            <div class="color-swatch" id="swatch_primary" style="background:<?php echo $theme['primary_color']; ?>">
                                <input type="color" id="pick_primary" value="<?php echo $theme['primary_color']; ?>">
                            </div>
                        </div>
                    </div>

                    <div class="color-row" id="row_accent">
                        <span class="color-row-label">لون التمييز</span>
                        <div class="color-swatch-wrap">
                            <span class="color-hex" id="hex_accent"><?php echo $theme['accent_color']; ?></span>
                            <div class="color-swatch" id="swatch_accent" style="background:<?php echo $theme['accent_color']; ?>">
                                <input type="color" id="pick_accent" value="<?php echo $theme['accent_color']; ?>">
                            </div>
                        </div>
                    </div>

                    <div class="color-row" id="row_bg">
                        <span class="color-row-label">لون الخلفية</span>
                        <div class="color-swatch-wrap">
                            <span class="color-hex" id="hex_bg"><?php echo $theme['bg_color']; ?></span>
                            <div class="color-swatch" id="swatch_bg" style="background:<?php echo $theme['bg_color']; ?>">
                                <input type="color" id="pick_bg" value="<?php echo $theme['bg_color']; ?>">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- BUTTON RADIUS -->
                <div class="panel-section">
                    <div class="panel-section-title"><i class="fas fa-vector-square"></i> شكل الأزرار</div>
                    <div class="radius-grid">
                        <div>
                            <input type="radio" name="btn_radius_ui" id="r_rounded" class="radius-option" value="rounded"
                                   <?php echo $theme['btn_radius']==='rounded' ? 'checked' : ''; ?>>
                            <label for="r_rounded" class="radius-label">
                                <div class="radius-preview rp-rounded">زر</div>
                                مستدير
                            </label>
                        </div>
                        <div>
                            <input type="radio" name="btn_radius_ui" id="r_square" class="radius-option" value="square"
                                   <?php echo $theme['btn_radius']==='square' ? 'checked' : ''; ?>>
                            <label for="r_square" class="radius-label">
                                <div class="radius-preview rp-square">زر</div>
                                مربع
                            </label>
                        </div>
                        <div>
                            <input type="radio" name="btn_radius_ui" id="r_pill" class="radius-option" value="pill"
                                   <?php echo $theme['btn_radius']==='pill' ? 'checked' : ''; ?>>
                            <label for="r_pill" class="radius-label">
                                <div class="radius-preview rp-pill">زر</div>
                                بيضاوي
                            </label>
                        </div>
                    </div>
                </div>

            </div><!-- /panel-scroll -->
        </form>
    </div><!-- /panel -->

</div><!-- /main-layout -->

<script>
(function(){

// ── State ──────────────────────────────────────────
const state = {
    primary_color: <?php echo json_encode($theme['primary_color']); ?>,
    accent_color:  <?php echo json_encode($theme['accent_color']); ?>,
    bg_color:      <?php echo json_encode($theme['bg_color']); ?>,
    btn_radius:    <?php echo json_encode($theme['btn_radius']); ?>,
};

const radiusMap = { rounded:'14px', square:'4px', pill:'100px' };

// ── Sync hidden inputs ─────────────────────────────
function syncInputs(){
    document.getElementById('inp_primary').value = state.primary_color;
    document.getElementById('inp_accent').value  = state.accent_color;
    document.getElementById('inp_bg').value      = state.bg_color;
    document.getElementById('inp_radius').value  = state.btn_radius;
}

// ── Update preview via postMessage ────────────────
function pushToPreview(){
    const frame = document.getElementById('previewFrame');
    if(frame && frame.contentWindow){
        frame.contentWindow.postMessage({
            type: 'THEME_UPDATE',
            theme: {
                primary_color: state.primary_color,
                accent_color:  state.accent_color,
                bg_color:      state.bg_color,
                btn_radius:    radiusMap[state.btn_radius] || '14px',
            }
        }, '*');
    }
}

// ── Color pickers ──────────────────────────────────
function bindColor(pickId, swatchId, hexId, key){
    const pick   = document.getElementById(pickId);
    const swatch = document.getElementById(swatchId);
    const hex    = document.getElementById(hexId);

    pick.addEventListener('input', ()=>{
        const val = pick.value;
        state[key] = val;
        swatch.style.background = val;
        hex.textContent = val.toUpperCase();
        syncInputs();
        pushToPreview();
    });
}
bindColor('pick_primary','swatch_primary','hex_primary','primary_color');
bindColor('pick_accent', 'swatch_accent', 'hex_accent', 'accent_color');
bindColor('pick_bg',     'swatch_bg',     'hex_bg',     'bg_color');

// ── Radius ─────────────────────────────────────────
document.querySelectorAll('input[name="btn_radius_ui"]').forEach(radio => {
    radio.addEventListener('change', ()=>{
        state.btn_radius = radio.value;
        syncInputs();
        pushToPreview();
    });
});

// ── Presets ────────────────────────────────────────
document.querySelectorAll('.preset-btn').forEach(btn=>{
    btn.addEventListener('click', ()=>{
        const primary = btn.dataset.primary;
        const accent  = btn.dataset.accent;
        const bg      = btn.dataset.bg;

        state.primary_color = primary;
        state.accent_color  = accent;
        state.bg_color      = bg;

        // Update pickers + swatches
        ['primary','accent','bg'].forEach(k => {
            const colorKey = k === 'bg' ? 'bg_color' : k + '_color';
            const val = state[colorKey];
            document.getElementById('pick_'   + k).value  = val;
            document.getElementById('swatch_' + k).style.background = val;
            document.getElementById('hex_'    + k).textContent = val.toUpperCase();
        });

        syncInputs();
        pushToPreview();
    });
});

// ── Device switcher ────────────────────────────────
const wrap = document.getElementById('previewWrap');
document.querySelectorAll('.device-btn').forEach(btn=>{
    btn.addEventListener('click', ()=>{
        document.querySelectorAll('.device-btn').forEach(b=>b.classList.remove('active'));
        btn.classList.add('active');
        const device = btn.dataset.device;
        wrap.className = 'preview-frame-wrap ' + (device !== 'desktop' ? device : '');
    });
});

// ── Save ───────────────────────────────────────────
const saveBtn  = document.getElementById('saveBtn');
const toast    = document.getElementById('saveToast');

saveBtn.addEventListener('click', async ()=>{
    syncInputs();
    saveBtn.classList.add('saving');
    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الحفظ...';

    const form = document.getElementById('themeForm');
    const data = new FormData(form);

    try {
        const res  = await fetch(window.location.href, {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            body: data,
        });
        const json = await res.json();
        if(json.ok){
            toast.classList.add('show');
            setTimeout(()=> toast.classList.remove('show'), 3000);
        }
    } catch(e){ console.error(e); }

    saveBtn.classList.remove('saving');
    saveBtn.innerHTML = '<i class="fas fa-save"></i> حفظ التغييرات';
});

// ── Push initial theme on iframe load ─────────────
document.getElementById('previewFrame').addEventListener('load', pushToPreview);

})();
</script>
</body>
</html>