{% extends "base.html" %}
{% set new_label = t('Neue Gutschrift') if kind == 'gutschrift' else t('Neue Rechnung') %}
{% set edit_label = t('Gutschrift bearbeiten') if kind == 'gutschrift' else t('Rechnung bearbeiten') %}
{% set doc_label = t('Gutschrift') if kind == 'gutschrift' else t('Rechnung') %}
{% block title %}{{ edit_label if inv else new_label }}{% endblock %}
{% block content %}
<div class="page-head"><h1>{{ doc_label + ' ' + inv.number + ' – ' + edit_label if inv else new_label }}</h1></div>

<form method="post" class="form-card">
  <input type="hidden" name="kind" value="{{ kind }}">
  <div class="form-row">
    <label>{{ t('Kunde aus Stamm') }}
      <select name="customer_id" id="customer-select">
        <option value="">{{ t('– manuell –') }}</option>
        {% for c in customers %}
        <option value="{{ c.id }}"
                data-name="{{ c.name }}" data-address="{{ c.address }}" data-email="{{ c.email }}"
                data-lang="{{ c.language or 'de' }}"
                {{ 'selected' if inv and inv.customer_id == c.id }}>{{ c.name }}</option>
        {% endfor %}
      </select>
    </label>
    <label class="grow">{{ t('Kunde (Name auf der Rechnung)') }}
      <input type="text" name="customer" id="f-customer" value="{{ inv.customer if inv }}" placeholder="{{ t('Firma / Name') }}">
    </label>
    <label>{{ t('Rechnungsdatum') }}
      <input type="date" name="date" value="{{ inv.date if inv else today }}">
    </label>
    <label>{{ t('Fällig am') }}
      <input type="date" name="due_date" value="{{ inv.due_date if inv }}">
    </label>
    <label>{{ t('Sprache') }} <span class="muted">({{ t('Rechnung & E-Mail') }})</span>
      <select name="language" id="f-language">
        {% for l in LANGS %}
        <option value="{{ l }}" {{ 'selected' if (inv.language if inv else 'de') == l }}>{{ LANG_NAMES[l] }}</option>
        {% endfor %}
      </select>
    </label>
  </div>
  <div class="form-row">
    <label class="grow">{{ t('Adresse (für die Rechnung)') }}
      <textarea name="address" id="f-address" rows="3" placeholder="{{ t('Strasse Nr.') }}&#10;{{ t('PLZ Ort') }}">{{ inv.address if inv }}</textarea>
    </label>
    <label class="grow">{{ t('E-Mail (für Versand)') }}
      <input type="text" name="email" id="f-email" value="{{ inv.email if inv }}">
    </label>
    <label class="grow">{{ t('Bemerkungen (intern)') }}
      <textarea name="notes" rows="3">{{ inv.notes if inv }}</textarea>
    </label>
  </div>

  <h2>{{ t('Positionen') }}</h2>
  <table id="items">
    <thead>
      <tr><th>{{ t('Beschreibung') }}</th><th style="width:8rem">{{ t('Menge') }}</th><th style="width:10rem">{{ t('Preis CHF') }}</th><th style="width:3rem"></th></tr>
    </thead>
    <tbody>
      {% for it in items %}
      <tr>
        <td><input type="text" name="item_desc" value="{{ it.description }}"></td>
        <td><input type="text" name="item_qty" value="{{ it.qty|qty }}"></td>
        <td><input type="text" name="item_price" class="chf" value="{{ it.unit_price_rp|chf_input }}"></td>
        <td><button type="button" class="btn btn-small btn-danger" onclick="this.closest('tr').remove()">×</button></td>
      </tr>
      {% endfor %}
      {% if not items %}
      <tr>
        <td><input type="text" name="item_desc" placeholder="{{ t('Leistung / Produkt') }}"></td>
        <td><input type="text" name="item_qty" value="1"></td>
        <td><input type="text" name="item_price" class="chf" placeholder="0.00"></td>
        <td><button type="button" class="btn btn-small btn-danger" onclick="this.closest('tr').remove()">×</button></td>
      </tr>
      {% endif %}
    </tbody>
  </table>
  <p><button type="button" class="btn" onclick="addRow()">+ {{ t('Position') }}</button></p>

  <div class="form-actions">
    <button class="btn btn-primary" type="submit">{{ t('Speichern') }}</button>
    <a class="btn" href="{{ url_for('invoice_view', invoice_id=inv.id) if inv else url_for('invoices_page') }}">{{ t('Abbrechen') }}</a>
  </div>
</form>

<script>
function addRow() {
  const tbody = document.querySelector('#items tbody');
  const tr = document.createElement('tr');
  tr.innerHTML = `
    <td><input type="text" name="item_desc" placeholder="{{ t('Leistung / Produkt') }}"></td>
    <td><input type="text" name="item_qty" value="1"></td>
    <td><input type="text" name="item_price" class="chf" placeholder="0.00"></td>
    <td><button type="button" class="btn btn-small btn-danger" onclick="this.closest('tr').remove()">×</button></td>`;
  tbody.appendChild(tr);
}
document.getElementById('customer-select').addEventListener('change', function () {
  const opt = this.selectedOptions[0];
  if (!opt || !opt.value) return;
  document.getElementById('f-customer').value = opt.dataset.name || '';
  document.getElementById('f-address').value = opt.dataset.address || '';
  document.getElementById('f-email').value = opt.dataset.email || '';
  document.getElementById('f-language').value = opt.dataset.lang || 'de';
});
</script>
{% endblock %}