{% extends 'base.html' %}
{% block title %}{{ p.name or 'Nieuw product' }}{% endblock %}
{% block content %}
<div class="head">
  <div><a class="label" href="{{ url_for('products') }}">← Producten</a><h1>{{ 'Product bewerken' if p.id else 'Nieuw product' }}</h1></div>
</div>
<form method="post" enctype="multipart/form-data" class="card"><div class="card-body">
  <div class="row g-3">
    <div class="col-12"><label class="form-label" for="name">Naam *</label><input class="form-control" id="name" name="name" value="{{ p.name }}" required></div>
    <div class="col-md-6"><label class="form-label" for="sku">SKU / artikelnummer</label><input class="form-control" id="sku" name="sku" value="{{ p.sku }}">
      <p class="hint">Vaste sleutel: imports en de API werken het product met deze SKU bij.</p></div>
    <div class="col-md-6"><label class="form-label" for="supplier">Leverancier</label><input class="form-control" id="supplier" name="supplier" value="{{ p.supplier }}" list="suppliers" autocomplete="off">
      <datalist id="suppliers">{% for r in suppliers %}<option value="{{ r.name }}">{% endfor %}</datalist>
      <p class="hint">{% if p.supplier_id %}<a href="{{ url_for('relation_view', rid=p.supplier_id) }}">Naar partner</a> · {% endif %}Een nieuwe naam wordt een partner van het type Leverancier.</p></div>
    <div class="col-sm-4"><label class="form-label" for="unit">Eenheid</label><input class="form-control" id="unit" name="unit" value="{{ p.unit }}" placeholder="stuk, m², uur"></div>
    <div class="col-sm-4"><label class="form-label" for="price">Prijs excl. btw (€)</label><input class="form-control" id="price" type="number" step="0.01" name="price" value="{{ p.price }}" required inputmode="decimal"></div>
    <div class="col-sm-4"><label class="form-label" for="vat">Btw %</label>
      <select class="form-select" id="vat" name="vat">
        {% for v in [21, 9, 0] %}<option value="{{ v }}" {{ 'selected' if p.vat == v }}>{{ v }}%</option>{% endfor %}
      </select>
    </div>
    <div class="col-12"><label class="form-label" for="description">Omschrijving</label><textarea class="form-control" id="description" name="description">{{ p.description }}</textarea>
      <p class="hint">Wordt standaard onder de productnaam op de offerte gezet.</p></div>
    <div class="col-12">
      <label class="form-label" for="image">Afbeelding</label>
      {% if p.image %}<img src="{{ url_for('upload_file', name=p.image) }}" alt="" class="d-block mb-3 img-fluid" style="max-width:220px;border-radius:var(--radius-md)">{% endif %}
      <input class="form-control" id="image" type="file" name="image" accept="image/*">
    </div>
    <div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" id="active" name="active" value="1" {{ 'checked' if p.active }}><label class="form-check-label" for="active">Actief (beschikbaar in offertes)</label></div></div>
  </div>
  <div class="actions">
    <button class="btn btn-primary">Opslaan</button>
    <a class="btn btn-outline-secondary" href="{{ url_for('products') }}">Annuleren</a>
  </div>
</div></form>
{% if p.id %}
<div class="card"><div class="card-body">
  <h2>Mutaties</h2>
  <p class="hint" style="margin:-.4rem 0 1rem">Bestaande offertes houden hun eigen prijs; wijzigingen gelden voor nieuwe offerteregels.{% if used %} Gebruikt in {{ used }} offerte(s).{% endif %}</p>
  {% if history %}
  <div class="table-responsive"><table class="table table-stack">
    <thead><tr><th>Datum</th><th>Veld</th><th>Oud</th><th>Nieuw</th><th>Bron</th></tr></thead>
    <tbody>
    {% for h in history %}
      <tr>
        <td class="stack-title muted">{{ h.created_at|dt }}</td>
        <td data-label="Veld">{{ LABELS.get(h.field, h.field) }}</td>
        {% if h.field == 'price' %}<td data-label="Oud" class="num">{{ h.old_value|float|euro }}</td><td data-label="Nieuw" class="num"><span>{{ h.new_value|float|euro }}
          {% set diff = h.new_value|float - h.old_value|float %}{% if h.old_value|float %}<span class="muted">({{ '+' if diff > 0 }}{{ (diff / h.old_value|float * 100)|round(1)|nr }}%)</span>{% endif %}</span></td>
        {% elif h.field == 'created' %}<td data-label="Oud"></td><td data-label="Nieuw" class="num">{{ h.new_value|float|euro }}</td>
        {% elif h.field == 'active' %}<td data-label="Oud">{{ 'ja' if h.old_value == '1' else 'nee' }}</td><td data-label="Nieuw">{{ 'ja' if h.new_value == '1' else 'nee' }}</td>
        {% else %}<td data-label="Oud">{{ h.old_value|truncate(60) }}</td><td data-label="Nieuw">{{ h.new_value|truncate(60) }}</td>{% endif %}
        <td data-label="Bron" class="muted">{{ h.source }}{% if h.user_name %} · {{ h.user_name }}{% endif %}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table></div>
  {% else %}<p class="empty">Nog geen mutaties.</p>{% endif %}
</div></div>
<form method="post" action="{{ url_for('product_delete', pid=p.id) }}" onsubmit="return confirm('{{ 'Dit product staat in offertes en wordt op inactief gezet.' if used else 'Product verwijderen?' }}')">
  <button class="btn btn-outline-secondary btn-sm">{{ 'Archiveren' if used else 'Product verwijderen' }}</button>
</form>
{% endif %}
{% endblock %}