{% extends 'core/base/base.html' %}
{% load form_tags %}
{% load static %}
{% load jalali_tags %}
{% load jalali_extras %}
{% block content %}
<div x-data="{tab: 'general'}" class="mt-6">
  <div class="max-w-4xl mx-auto bg-white p-6 rounded-2xl shadow">
    <h1 class="text-2xl font-bold mb-6 text-gray-700">مدیریت تنظیمات سیستم</h1>

    {% if messages %}
      <div class="mb-4 space-y-2">
        {% for message in messages %}
          <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-2 rounded-lg">
            {{ message }}
          </div>
        {% endfor %}
      </div>
    {% endif %}

    <div class="flex border-b mb-6">
      <button @click="tab='general'" :class="tab==='general' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500'" class="px-4 py-2 font-medium">عمومی</button>
      <button @click="tab='email'" :class="tab==='email' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500'" class="px-4 py-2 font-medium">ایمیل</button>
      <button @click="tab='database'" :class="tab==='database' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500'" class="px-4 py-2 font-medium">دیتابیس</button>
      <button @click="tab='security'" :class="tab==='security' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500'" class="px-4 py-2 font-medium">امنیت</button>
    </div>

    <form method="post" class="space-y-6">
      {% csrf_token %}

      <!-- تب عمومی -->
      <div x-show="tab==='general'" class="space-y-4">
        <label class="block">
          <span class="font-semibold">فعال بودن Debug:</span>
          <input type="checkbox" name="DEBUG" class="ml-2" {% if config.DEBUG %}checked{% endif %}>
        </label>
        <div>
          <span class="font-semibold">دامنه اصلی:</span>
          <input type="text" name="ALLOWED_HOSTS" value="{{ config.ALLOWED_HOSTS }}" class="border p-2 w-full rounded mt-1">
        </div>
        <div>
          <span class="font-semibold">Cpanel User:</span>
          <input type="text" name="cpanel_user" value="{{ config.cpanel_user }}" class="border p-2 w-full rounded mt-1">
        </div>
      </div>

      <!-- تب ایمیل -->
      <div x-show="tab==='email'" class="space-y-4">
        <div>
          <span class="font-semibold">ایمیل هاست:</span>
          <input type="text" name="EMAIL_HOST" value="{{ config.EMAIL_HOST }}" class="border p-2 w-full rounded mt-1">
        </div>
        <div>
          <span class="font-semibold">ایمیل کاربری:</span>
          <input type="text" name="EMAIL_HOST_USER" value="{{ config.EMAIL_HOST_USER }}" class="border p-2 w-full rounded mt-1">
        </div>
        <div>
          <span class="font-semibold">ایمیل پسورد:</span>
          <input type="password" name="EMAIL_HOST_PASSWORD" value="{{ config.EMAIL_HOST_PASSWORD }}" class="border p-2 w-full rounded mt-1">
        </div>
      </div>

      <!-- تب دیتابیس -->
      <div x-show="tab==='database'" class="space-y-4">
        <div>
          <span class="font-semibold">نوع دیتابیس:</span>
          <select name="DB_KIND" class="border p-2 w-full rounded mt-1">
            <option value="sqlite" {% if config.DB_KIND == "sqlite" %}selected{% endif %}>SQLite</option>
            <option value="mysql" {% if config.DB_KIND == "mysql" %}selected{% endif %}>MySQL</option>
            <option value="postgres" {% if config.DB_KIND == "postgres" %}selected{% endif %}>PostgreSQL</option>
          </select>
        </div>
        <div>
          <span class="font-semibold">DB Name:</span>
          <input type="text" name="DB_NAME" value="{{ config.DB_NAME }}" class="border p-2 w-full rounded mt-1">
        </div>
        <div>
          <span class="font-semibold">DB User:</span>
          <input type="text" name="DB_USER" value="{{ config.DB_USER }}" class="border p-2 w-full rounded mt-1">
        </div>
        <div>
          <span class="font-semibold">DB Password:</span>
          <input type="password" name="DB_PASSWORD" value="{{ config.DB_PASSWORD }}" class="border p-2 w-full rounded mt-1">
        </div>
        <div>
          <span class="font-semibold">DB Host:</span>
          <input type="text" name="DB_HOST" value="{{ config.DB_HOST }}" class="border p-2 w-full rounded mt-1">
        </div>
        <div>
          <span class="font-semibold">DB Port:</span>
          <input type="text" name="DB_PORT" value="{{ config.DB_PORT }}" class="border p-2 w-full rounded mt-1">
        </div>
      </div>

      <!-- تب امنیت -->
      <div x-show="tab==='security'" class="space-y-4">
        <div class="p-4 bg-gray-50 border rounded-lg text-gray-600">
          تنظیمات امنیتی در فایل settings.py به‌صورت دستی مدیریت می‌شوند.
        </div>
      </div>

      <div class="pt-6 border-t">
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg">ذخیره تنظیمات</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}