<?php
// test-theme2.php - تست با مسیر مطلق

$selectedTheme = $_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">
    
    <!-- ===== استفاده از مسیر مطلق ===== -->
    <link rel="stylesheet" href="/teacher/assets/css/themes.css">
    
    <style>
        body {
            font-family: 'Vazirmatn', sans-serif;
            background: #f8fafc;
            padding: 40px;
            direction: rtl;
            transition: all 0.3s ease;
        }
        .container { max-width: 900px; margin: 0 auto; }
        .card {
            background: white;
            border-radius: 18px;
            padding: 24px 28px;
            border: 1px solid #e5e7eb;
            margin-bottom: 20px;
        }
        .btn {
            padding: 10px 24px;
            border: none;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Vazirmatn', sans-serif;
            display: inline-block;
            margin: 4px;
        }
        .btn-primary {
            background: var(--primary);
            color: #fff;
        }
        .btn-secondary {
            background: var(--secondary);
            color: #fff;
        }
        .btn-accent {
            background: var(--accent);
            color: #1f2937;
        }
        .color-box {
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 12px;
            margin: 4px;
        }
        .theme-dot {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 3px solid #e5e7eb;
            cursor: pointer;
            transition: all 0.2s;
            margin: 4px;
            text-decoration: none;
        }
        .theme-dot:hover { transform: scale(1.1); }
        .theme-dot.active { border-color: #1f2937; }
    </style>
</head>
<body class="theme-<?= $selectedTheme ?>">

<div class="container">

    <div class="card" style="text-align:center;">
        <h1>🎨 تست تم‌های رنگی</h1>
        <p>تم فعلی: <strong><?= ucfirst($selectedTheme) ?></strong></p>

        <div style="margin:16px 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;">
            <?php
            $themes = ['blue', 'green', 'purple', 'orange', 'red', 'gold', 'corporate', 'dark', 'light'];
            $colors = [
                'blue' => '#355C9C',
                'green' => '#059669',
                'purple' => '#7C3AED',
                'orange' => '#EA580C',
                'red' => '#DC2626',
                'gold' => '#D4A747',
                'corporate' => '#1E293B',
                'dark' => '#0F172A',
                'light' => '#F8FAFC'
            ];
            foreach ($themes as $t):
                $active = ($t == $selectedTheme) ? 'active' : '';
            ?>
                <a href="?theme=<?= $t ?>" class="theme-dot <?= $active ?>" style="background:<?= $colors[$t] ?>;"></a>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- ===== دکمه‌ها ===== -->
    <div class="card">
        <h3>دکمه‌ها</h3>
        <div>
            <button class="btn btn-primary">دکمه اصلی</button>
            <button class="btn btn-secondary">دکمه ثانویه</button>
            <button class="btn btn-accent">دکمه تاکیدی</button>
        </div>
    </div>

    <!-- ===== رنگ‌ها ===== -->
    <div class="card">
        <h3>رنگ‌های اصلی</h3>
        <div>
            <div><span class="color-box" style="background:var(--primary);"></span> Primary</div>
            <div><span class="color-box" style="background:var(--secondary);"></span> Secondary</div>
            <div><span class="color-box" style="background:var(--accent);"></span> Accent</div>
        </div>
    </div>

</div>

</body>
</html>