{% extends "base.html" %}
{% block title %}مدیریت محصولات{% endblock %}
{% block page_title %}مدیریت محصولات{% endblock %}
{% block content %}

<div style="display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start">

<!-- لیست محصولات -->
<div>
  {% set services = {} %}
  {% for p in products %}
    {% if p.service not in services %}{% set _ = services.update({p.service: []}) %}{% endif %}
  {% endfor %}

  {% set grouped = namespace(data={}) %}
  {% for p in products %}
    <!-- group by service -->
  {% endfor %}

  <div class="table-wrap">
    <div class="table-header">
      <h3>📦 محصولات ({{ products|length }})</h3>
      <span style="color:var(--muted);font-size:12px">{{ products|selectattr('is_active','equalto',1)|list|length }} فعال</span>
    </div>
    <table>
      <thead>
        <tr><th>سرویس</th><th>مدت</th><th>قیمت</th><th>قیمت عمده</th><th>وضعیت</th><th>عملیات</th></tr>
      </thead>
      <tbody>
      {% set current_service = namespace(name='') %}
      {% for p in products %}
        {% if p.service != current_service.name %}
          {% set current_service.name = p.service %}
          <tr>
            <td colspan="6" style="background:rgba(79,142,247,.06);padding:10px 16px;font-weight:700;color:var(--blue);font-size:13px">
              🗂 {{ p.service }}
            </td>
          </tr>
        {% endif %}
        <tr>
          <td style="color:var(--muted);padding-right:32px">└─</td>
          <td style="font-weight:600">{{ p.duration }}</td>
          <td style="color:var(--green);font-weight:600">{{ "{:,}".format(p.price) }} ت</td>
          <td style="color:var(--orange)">{{ "{:,}".format(p.bulk_price or 0) }} ت</td>
          <td>
            {% if p.is_active %}
              <span class="badge badge-confirmed">✅ فعال</span>
            {% else %}
              <span class="badge badge-rejected">❌ غیرفعال</span>
            {% endif %}
          </td>
          <td>
            <div style="display:flex;gap:6px;flex-wrap:wrap">
              <button class="btn btn-blue" onclick="openEdit({{ p.id }}, '{{ p.service }}', '{{ p.duration }}', {{ p.price }}, {{ p.bulk_price or 0 }}, '{{ p.description or '' }}')">✏️</button>
              <form method="POST" action="/product/{{ p.id }}/toggle" style="display:inline">
                <button class="btn {{ 'btn-orange' if p.is_active else 'btn-green' }}" type="submit">{{ '⏸' if p.is_active else '▶️' }}</button>
              </form>
              <form method="POST" action="/product/{{ p.id }}/delete" style="display:inline" onsubmit="return confirm('حذف شود؟')">
                <button class="btn btn-red" type="submit">🗑</button>
              </form>
            </div>
          </td>
        </tr>
      {% endfor %}
      {% if not products %}
        <tr><td colspan="6" style="text-align:center;color:var(--muted);padding:40px">محصولی وجود ندارد</td></tr>
      {% endif %}
      </tbody>
    </table>
  </div>
</div>

<!-- فرم افزودن -->
<div style="display:flex;flex-direction:column;gap:16px">
  <div class="chart-wrap">
    <h3>➕ افزودن محصول جدید</h3>
    <form method="POST" action="{{ url_for('add_product') }}">
      <div class="form-group" style="margin-bottom:12px">
        <label>نام سرویس</label>
        <input type="text" name="service" placeholder="مثلاً: یوتیوب پرمیوم" required list="services_list">
        <datalist id="services_list">
          {% for p in products %}
          <option value="{{ p.service }}">
          {% endfor %}
        </datalist>
      </div>
      <div class="form-group" style="margin-bottom:12px">
        <label>مدت زمان</label>
        <input type="text" name="duration" placeholder="مثلاً: 1 ماهه" required list="durations_list">
        <datalist id="durations_list">
          <option value="1 ماهه"><option value="3 ماهه"><option value="6 ماهه"><option value="12 ماهه"><option value="1 ساله">
        </datalist>
      </div>
      <div class="form-group" style="margin-bottom:12px">
        <label>قیمت (تومان)</label>
        <input type="number" name="price" placeholder="مثلاً: 85000" required>
      </div>
      <div class="form-group" style="margin-bottom:12px">
        <label>قیمت عمده (تومان)</label>
        <input type="number" name="bulk_price" placeholder="اختیاری — برای ریسلرها">
      </div>
      <div class="form-group" style="margin-bottom:20px">
        <label>توضیح (اختیاری)</label>
        <input type="text" name="description" placeholder="توضیح کوتاه">
      </div>
      <button class="btn btn-primary" type="submit" style="width:100%">➕ افزودن</button>
    </form>
  </div>

  <!-- راهنما -->
  <div class="chart-wrap" style="font-size:13px;color:var(--muted);line-height:1.8">
    <h3 style="margin-bottom:12px">💡 راهنما</h3>
    <p>✏️ ویرایش قیمت و اطلاعات</p>
    <p>⏸ غیرفعال کردن (از ربات پنهان میشه)</p>
    <p>▶️ فعال کردن مجدد</p>
    <p>🗑 حذف کامل</p>
    <br>
    <p style="color:var(--blue)">برای افزودن چند مدت به یه سرویس، نام سرویس را یکسان بنویس.</p>
  </div>
</div>
</div>

<!-- Modal ویرایش -->
<div class="modal-overlay" id="editModal">
  <div class="modal">
    <h3>✏️ ویرایش محصول</h3>
    <form method="POST" id="editForm">
      <div class="form-group" style="margin-bottom:12px">
        <label>نام سرویس</label>
        <input type="text" name="service" id="edit_service" required>
      </div>
      <div class="form-group" style="margin-bottom:12px">
        <label>مدت زمان</label>
        <input type="text" name="duration" id="edit_duration" required>
      </div>
      <div class="form-group" style="margin-bottom:12px">
        <label>قیمت (تومان)</label>
        <input type="number" name="price" id="edit_price" required>
      </div>
      <div class="form-group" style="margin-bottom:12px">
        <label>قیمت عمده</label>
        <input type="number" name="bulk_price" id="edit_bulk">
      </div>
      <div class="form-group" style="margin-bottom:20px">
        <label>توضیح</label>
        <input type="text" name="description" id="edit_desc">
      </div>
      <div class="modal-btns">
        <button type="submit" class="btn btn-primary">💾 ذخیره</button>
        <button type="button" class="btn btn-red" onclick="document.getElementById('editModal').classList.remove('open')">لغو</button>
      </div>
    </form>
  </div>
</div>

<script>
function openEdit(id, service, duration, price, bulk, desc) {
  document.getElementById('edit_service').value = service;
  document.getElementById('edit_duration').value = duration;
  document.getElementById('edit_price').value = price;
  document.getElementById('edit_bulk').value = bulk;
  document.getElementById('edit_desc').value = desc;
  document.getElementById('editForm').action = '/product/' + id + '/edit';
  document.getElementById('editModal').classList.add('open');
}
</script>
{% endblock %}