{% extends "base.html" %}
{% block title %}{{ title }} — ERP WaterSurf{% endblock %}
{% block content %}
<h2>{% if object %}Редактировать{% else %}Создать{% endif %} {{ title }}</h2>
<form method="post">
  {% csrf_token %}
  {{ form.as_p }}
  <h3>Товары</h3>
  {{ formset.management_form }}
  <table class="table" id="order-items">
    <thead>
      <tr>
        <th>Товар</th>
        <th>Цена</th>
        <th>Валюта</th>
        <th>Количество</th>
        <th>Стоимость</th>
        <th>Удалить</th>
      </tr>
    </thead>
    <tbody>
      {% for f in formset %}
      <tr class="item-row">
        <td>{{ f.id }}{{ f.product }}</td>
        <td>{{ f.price }}</td>
        <td>{{ f.currency }}</td>
        <td>{{ f.quantity }}</td>
        <td class="row-amount">—</td>
        <td>{% if f.DELETE %}{{ f.DELETE }}{% endif %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <button type="submit" class="btn btn-primary">Сохранить</button>
  <a href="{% url 'documents:customer_order_list' %}" class="btn btn-secondary">Отмена</a>
</form>
{% block extra_js %}
<script>
document.querySelector('form').addEventListener('input', function() {
  document.querySelectorAll('#order-items .item-row').forEach(function(row) {
    var price = parseFloat(row.querySelector('input[name$="-price"]')?.value) || 0;
    var qty = parseFloat(row.querySelector('input[name$="-quantity"]')?.value) || 0;
    row.querySelector('.row-amount').textContent = (price * qty).toFixed(2);
  });
});
</script>
{% endblock %}
{% endblock %}