<%
const layout = '../admin/layout';
const body = `
<div class="space-y-6">
  <!-- Header -->
  <div>
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">تنظیمات سیستم</h2>
    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">مدیریت تنظیمات عمومی و پیکربندی سیستم</p>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Settings Navigation -->
    <div class="lg:col-span-1">
      <div class="card">
        <nav class="space-y-1">
          <button class="w-full flex items-center px-3 py-2 text-sm font-medium text-primary-700 dark:text-primary-300 bg-primary-50 dark:bg-primary-900/30 rounded-md">
            <i class="fas fa-cog ml-3"></i>
            تنظیمات عمومی
          </button>
          <button class="w-full flex items-center px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-md">
            <i class="fas fa-bell ml-3"></i>
            اعلان‌ها
          </button>
          <button class="w-full flex items-center px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-md">
            <i class="fas fa-dollar-sign ml-3"></i>
            قیمت‌گذاری
          </button>
          <button class="w-full flex items-center px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-md">
            <i class="fas fa-shield-alt ml-3"></i>
            امنیت
          </button>
          <button class="w-full flex items-center px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-md">
            <i class="fas fa-database ml-3"></i>
            پشتیبان‌گیری
          </button>
        </nav>
      </div>
    </div>

    <!-- Settings Content -->
    <div class="lg:col-span-2 space-y-6">
      <!-- General Settings -->
      <div class="card">
        <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white flex items-center">
            <i class="fas fa-cog ml-2 text-primary-600 dark:text-primary-400"></i>
            تنظیمات عمومی
          </h3>
        </div>

        <form class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">نام سایت</label>
              <input type="text" value="مایا اسلامی" class="input-field">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">ایمیل مدیریت</label>
              <input type="email" value="admin@mayaeslami.com" class="input-field">
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">توضیحات سایت</label>
            <textarea rows="3" class="input-field">پلتفرم تخصصی آموزش و ارائه سیگنال‌های معاملاتی بازارهای مالی</textarea>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">زبان پیش‌فرض</label>
              <select class="input-field">
                <option selected>فارسی</option>
                <option>English</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">منطقه زمانی</label>
              <select class="input-field">
                <option selected>تهران (GMT+3:30)</option>
                <option>Dubai (GMT+4:00)</option>
                <option>London (GMT+0:00)</option>
              </select>
            </div>
          </div>

          <div class="space-y-4">
            <h4 class="text-md font-medium text-gray-900 dark:text-white">تنظیمات عضویت</h4>
            <div class="space-y-3">
              <label class="flex items-center">
                <input type="checkbox" checked class="rounded border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500">
                <span class="mr-2 text-sm text-gray-700 dark:text-gray-300">اجازه ثبت‌نام عمومی</span>
              </label>
              <label class="flex items-center">
                <input type="checkbox" class="rounded border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500">
                <span class="mr-2 text-sm text-gray-700 dark:text-gray-300">تأیید ایمیل اجباری</span>
              </label>
              <label class="flex items-center">
                <input type="checkbox" checked class="rounded border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500">
                <span class="mr-2 text-sm text-gray-700 dark:text-gray-300">تأیید دستی کاربران</span>
              </label>
            </div>
          </div>
        </form>
      </div>

      <!-- Subscription Pricing Settings -->
      <div class="card">
        <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white flex items-center">
            <i class="fas fa-dollar-sign ml-2 text-primary-600 dark:text-primary-400"></i>
            تنظیمات قیمت‌گذاری اشتراک
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">تنظیم قیمت برای دوره‌های مختلف اشتراک</p>
        </div>

        <div class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- 1 Month Plan -->
            <div class="border border-blue-200 dark:border-blue-700 rounded-lg p-6 bg-blue-50 dark:bg-blue-900/20">
              <div class="flex items-center justify-between mb-4">
                <h4 class="text-lg font-medium text-gray-900 dark:text-white">اشتراک ۱ ماهه</h4>
                <span class="text-xs bg-blue-200 dark:bg-blue-800 text-blue-700 dark:text-blue-300 px-2 py-1 rounded">پایه</span>
              </div>
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">قیمت (تومان)</label>
                  <input type="number" value="500000" class="input-field">
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">مدت دسترسی</label>
                  <input type="text" value="۳۰ روز" readonly class="input-field bg-gray-100 dark:bg-gray-800">
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">وضعیت</label>
                  <select class="input-field">
                    <option value="active" selected>فعال</option>
                    <option value="inactive">غیرفعال</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- 3 Month Plan -->
            <div class="border border-green-200 dark:border-green-700 rounded-lg p-6 bg-green-50 dark:bg-green-900/20">
              <div class="flex items-center justify-between mb-4">
                <h4 class="text-lg font-medium text-gray-900 dark:text-white">اشتراک ۳ ماهه</h4>
                <span class="text-xs bg-green-200 dark:bg-green-800 text-green-700 dark:text-green-300 px-2 py-1 rounded">محبوب</span>
              </div>
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">قیمت (تومان)</label>
                  <input type="number" value="1350000" class="input-field">
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">مدت دسترسی</label>
                  <input type="text" value="۹۰ روز" readonly class="input-field bg-gray-100 dark:bg-gray-800">
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">تخفیف</label>
                  <input type="text" value="۱۰٪ تخفیف" readonly class="input-field bg-green-100 dark:bg-green-900/50">
                </div>
              </div>
            </div>

            <!-- 1 Year Plan -->
            <div class="border border-purple-200 dark:border-purple-700 rounded-lg p-6 bg-purple-50 dark:bg-purple-900/20">
              <div class="flex items-center justify-between mb-4">
                <h4 class="text-lg font-medium text-gray-900 dark:text-white">اشتراک ۱ ساله</h4>
                <span class="text-xs bg-purple-200 dark:bg-purple-800 text-purple-700 dark:text-purple-300 px-2 py-1 rounded">بهترین قیمت</span>
              </div>
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">قیمت (تومان)</label>
                  <input type="number" value="4800000" class="input-field">
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">مدت دسترسی</label>
                  <input type="text" value="۳۶۵ روز" readonly class="input-field bg-gray-100 dark:bg-gray-800">
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">تخفیف</label>
                  <input type="text" value="۲۰٪ تخفیف" readonly class="input-field bg-purple-100 dark:bg-purple-900/50">
                </div>
              </div>
            </div>
          </div>

          <!-- Additional Settings -->
          <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
            <h4 class="text-md font-medium text-gray-900 dark:text-white mb-4">تنظیمات عمومی</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">لینک کانال تلگرام</label>
                <input type="text" value="https://t.me/mayaeslami_signals" class="input-field">
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">دوره آزمایشی (روز)</label>
                <input type="number" value="7" class="input-field">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- System Status -->
      <div class="card">
        <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white flex items-center">
            <i class="fas fa-server ml-2 text-primary-600 dark:text-primary-400"></i>
            وضعیت سیستم
          </h3>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded-lg p-4">
            <div class="flex items-center">
              <div class="h-3 w-3 bg-green-500 rounded-full ml-3"></div>
              <span class="text-sm font-medium text-green-800 dark:text-green-200">سرور</span>
            </div>
            <p class="text-xs text-green-600 dark:text-green-400 mt-1">آنلاین</p>
          </div>

          <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded-lg p-4">
            <div class="flex items-center">
              <div class="h-3 w-3 bg-green-500 rounded-full ml-3"></div>
              <span class="text-sm font-medium text-green-800 dark:text-green-200">دیتابیس</span>
            </div>
            <p class="text-xs text-green-600 dark:text-green-400 mt-1">متصل</p>
          </div>

          <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4">
            <div class="flex items-center">
              <div class="h-3 w-3 bg-yellow-500 rounded-full ml-3"></div>
              <span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">API خارجی</span>
            </div>
            <p class="text-xs text-yellow-600 dark:text-yellow-400 mt-1">کند</p>
          </div>

          <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded-lg p-4">
            <div class="flex items-center">
              <div class="h-3 w-3 bg-green-500 rounded-full ml-3"></div>
              <span class="text-sm font-medium text-green-800 dark:text-green-200">پشتیبان‌گیری</span>
            </div>
            <p class="text-xs text-green-600 dark:text-green-400 mt-1">به‌روز</p>
          </div>
        </div>
      </div>

      <!-- Save Changes -->
      <div class="flex justify-end space-x-3 space-x-reverse">
        <button type="button" class="btn-secondary">بازگردانی</button>
        <button type="submit" class="btn-primary">ذخیره تغییرات</button>
      </div>
    </div>
  </div>
</div>
`;
%>

<%- include(layout, { body: body, title: title, currentPage: currentPage }) %>