<?php
// test-theme-final.php - تست نهایی تم‌ها

$theme = $_GET['theme'] ?? 'blue';
?>
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تست نهایی تم‌ها</title>
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <!-- ===== بارگذاری themes.css ===== -->
    <link rel="stylesheet" href="assets/css/themes.css">
    
    <style>
        body {
            font-family: 'Vazirmatn', sans-serif;
            padding: 40px;
            direction: rtl;
            background: var(--background, #f8fafc);
            transition: all 0.3s ease;
        }
        .box {
            background: var(--surface, white);
            padding: 30px;
            border-radius: 18px;
            border: 1px solid var(--border, #e5e7eb);
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Vazirmatn', sans-serif;
            background: var(--primary, #355C9C);
            color: white;
            margin: 5px;
        }
        .btn-secondary {
            background: var(--secondary, #2FA7A3);
        }
        .theme-dot {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 3px solid #e5e7eb;
            cursor: pointer;
            margin: 5px;
            text-decoration: none;
        }
        .theme-dot.active { border-color: #1f2937; }
        .color-box {
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 12px;
            margin: 5px;
        }
    </style>
</head>
<body class="theme-<?= $theme ?>">

<div class="box">
    <h1 style="color:var(--text);">🎨 تست نهایی</h1>
    <p style="color:var(--text-secondary);">تم فعلی: <strong id="themeName"><?= ucfirst($theme) ?></strong></p>

    <div style="margin:20px 0;">
        <?php
        $colors = [
            'blue' => '#355C9C',
            'red' => '#DC2626',
            'gold' => '#D4A747',
            'green' => '#059669',
            'purple' => '#7C3AED',
        ];
        foreach ($colors as $key => $color):
            $active = ($key == $theme) ? 'active' : '';
        ?>
            <a href="?theme=<?= $key ?>" class="theme-dot <?= $active ?>" style="background:<?= $color ?>;"></a>
        <?php endforeach; ?>
    </div>

    <div>
        <button class="btn">دکمه اصلی</button>
        <button class="btn btn-secondary">دکمه ثانویه</button>
    </div>

    <div style="margin-top:20px;">
        <span class="color-box" style="background:var(--primary);"></span>
        <span class="color-box" style="background:var(--secondary);"></span>
        <span class="color-box" style="background:var(--accent);"></span>
        <span class="color-box" style="background:var(--background);border:1px solid #ddd;"></span>
        <span class="color-box" style="background:var(--surface);border:1px solid #ddd;"></span>
    </div>
</div>

<script>
    document.querySelectorAll('.theme-dot').forEach(dot => {
        dot.addEventListener('click', function(e) {
            document.querySelectorAll('.theme-dot').forEach(d => d.classList.remove('active'));
            this.classList.add('active');
            const name = this.title || this.style.background;
            document.getElementById('themeName').textContent = name;
        });
    });
</script>

</body>
</html>