{% extends "base.html" %}
{% block title %}{{ "ویرایش محصول" if product else "محصول جدید" }}{% endblock %}
{% block content %}
<div class="topbar" style="margin:-24px -28px 24px; border-radius:0;">
  <h1>{{ "ویرایش محصول" if product else "افزودن محصول جدید" }}</h1>
  <p>اطلاعات محصول رو کامل کن</p>
</div>

<div class="form-card">
  <form method="POST" enctype="multipart/form-data">

    <div class="field">
      <label>تصویر محصول</label>
      {% if product and product.image_filename %}
        <div class="image-preview" style="background-image:url('{{ url_for('uploaded_file', filename=product.image_filename) }}');"></div>
      {% else %}
        <div class="image-preview" id="imgPreview">بدون تصویر</div>
      {% endif %}
      <input type="file" name="image" accept="image/*" onchange="previewImage(event)">
      <div class="field-hint">فرمت‌های مجاز: jpg, png, webp — حداکثر ۵ مگابایت</div>
    </div>

    <div class="field">
      <label>نام محصول</label>
      <input type="text" name="name" required value="{{ product.name if product else '' }}">
    </div>

    <div class="field">
      <label>قیمت (تومان)</label>
      <input type="number" name="price" required min="0" value="{{ product.price if product else '' }}">
    </div>

    <div class="field">
      <label>دسته‌بندی</label>
      {% if categories %}
      <select name="category">
        <option value="">— بدون دسته‌بندی —</option>
        {% for c in categories %}
        <option value="{{ c.name }}" {% if product and product.category == c.name %}selected{% endif %}>{{ c.name }}</option>
        {% endfor %}
      </select>
      <div class="field-hint">دسته‌بندی جدید می‌خوای؟ از منوی «دسته‌بندی‌ها» اضافه‌ش کن.</div>
      {% else %}
      <input type="text" name="category" placeholder="مثلا: پوشاک، لوازم جانبی..." value="{{ product.category if product else '' }}">
      <div class="field-hint">هنوز دسته‌بندی‌ای نساختی؛ از منوی «دسته‌بندی‌ها» اول یکی بساز تا اینجا دراپ‌داون بشه.</div>
      {% endif %}
    </div>

    <div class="field">
      <label>موجودی (تعداد)</label>
      <input type="number" name="stock" min="0" value="{{ product.stock if product else 0 }}">
    </div>

    <div class="field">
      <label>توضیحات</label>
      <textarea name="description">{{ product.description if product else '' }}</textarea>
    </div>

    {% if product %}
    <div class="field">
      <label>
        <input type="checkbox" name="is_active" {% if product.is_active %}checked{% endif %} style="width:auto; display:inline-block;">
        محصول فعال باشه (در ربات نمایش داده بشه)
      </label>
    </div>
    {% endif %}

    <div style="display:flex; gap:10px; margin-top:22px;">
      <button class="btn btn-primary" type="submit">{{ "ذخیره تغییرات" if product else "افزودن محصول" }}</button>
      <a class="btn btn-outline" href="{{ url_for('products_list') }}">انصراف</a>
    </div>
  </form>
</div>

<script>
function previewImage(event) {
  const preview = document.getElementById('imgPreview');
  if (!preview) return;
  const file = event.target.files[0];
  if (file) {
    preview.style.backgroundImage = `url(${URL.createObjectURL(file)})`;
    preview.textContent = '';
  }
}
</script>
{% endblock %}