{% extends 'base.html' %}
{% block content %}
<h2>Add Listing</h2>
<p><a href="{{ url_for('seller_listings') }}">← Back to seller dashboard</a></p>

<form method="post" enctype="multipart/form-data">
  <label>Title
    <input name="title" required>
  </label>
  <label>Description
    <textarea name="description" rows="4" required></textarea>
  </label>
  <div class="grid">
    <label>Category
      <select name="category_id">
        <option value="">Uncategorized</option>
        {% for c in categories %}<option value="{{ c.id }}">{{ c.name }}</option>{% endfor %}
      </select>
    </label>
    <label>Price mode
      <select name="price_currency">
        <option value="XMR">XMR fixed</option>
        <option value="USD">USD fixed → convert to XMR</option>
        <option value="EUR">EUR fixed → convert to XMR</option>
      </select>
    </label>
  </div>
  <div class="grid">
    <label>Base price XMR
      <input type="number" name="price_xmr" step="0.0001" min="0.0001" value="0.1000" required>
    </label>
    <label>Price Fiat (USD/EUR mode)
      <input type="number" name="price_fiat" step="0.01" min="0.01" value="100.00">
    </label>
    <label>Fallback shipping price (uses selected price mode)
      <input type="number" name="shipping_price_value" step="0.0001" min="0" value="0.0000" required>
    </label>
  </div>
  <div class="grid">
    <label>Shipping type for this listing
      <select name="shipping_type_id">
        <option value="">Use fallback shipping only</option>
        {% for s in shipping_types %}<option value="{{ s.id }}">{{ s.name }}</option>{% endfor %}
      </select>
    </label>
    <label>Assigned shipping price (uses selected price mode)
      <input type="number" name="shipping_type_price_value" step="0.0001" min="0" value="0.0000">
    </label>
  </div>
  <label>Bulk prices (one per line, format: <code>min_qty:unit_price</code> in the selected price mode)
    <textarea rows="3" placeholder="5:0.0900&#10;10:0.0800" oninput="syncBulkRows(this)"></textarea>
  </label>
  <div id="bulkRows"></div>
  <label>Product image (auto-scaled to 480x480)
    <input type="file" name="product_image" accept="image/*" required>
  </label>
  <button type="submit">Publish Listing</button>
</form>

<script>
function syncBulkRows(el){
  const target = document.getElementById('bulkRows');
  target.innerHTML = '';
  const rows = (el.value || '').split('\n').map(r=>r.trim()).filter(Boolean);
  rows.forEach(r=>{
    const hidden = document.createElement('input');
    hidden.type = 'hidden';
    hidden.name = 'bulk_price_row';
    hidden.value = r;
    target.appendChild(hidden);
  });
}
</script>
{% endblock %}