{% extends "base.html" %}

{% block title %}Add Provenance — {{ artwork.title }} — ArtNode{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <a href="{{ url_for('artworks.detail', id=artwork.id) }}" style="font-size:0.75rem;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;">&larr; {{ artwork.title }}</a>
    <div class="page-title" style="margin-top:4px;">Add Provenance Record</div>
    <div class="page-subtitle">Append-only — records cannot be edited after saving</div>
  </div>
</div>

<div class="page-body">
  <form method="POST" action="" enctype="multipart/form-data">
    {{ form.hidden_tag() }}

    <div style="max-width:680px;">
      <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
        <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Provenance Event</div>

        <div class="form-group">
          {{ form.event_type.label(class="form-label") }}
          {{ form.event_type(class="form-control") }}
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);">
          <div class="form-group">
            {{ form.event_date.label(class="form-label") }}
            {{ form.event_date(class="form-control") }}
          </div>
          <div class="form-group">
            {{ form.event_date_end.label(class="form-label") }}
            {{ form.event_date_end(class="form-control") }}
          </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 80px;gap:var(--space-md);">
          <div class="form-group">
            {{ form.source_name.label(class="form-label") }}
            {{ form.source_name(class="form-control", placeholder="Previous owner, dealer, or institution") }}
          </div>
          <div class="form-group">
            <label class="form-label">Country</label>
            {{ form.source_country(class="form-control", placeholder="CH") }}
          </div>
        </div>

        <div class="form-group">
          {{ form.description.label(class="form-label") }}
          {{ form.description(class="form-control", rows=4,
             placeholder="Describe the provenance event in detail. This record is permanent and cannot be edited.") }}
        </div>

        <!-- Art. 24a MWSTG acquisition fields -->
        <div id="acquisitionFields" style="display:none;border-top:1px solid var(--border);margin-top:var(--space-lg);padding-top:var(--space-lg);">
          <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Art. 24a MWSTG — Acquisition Details</div>
          <div class="form-group">
            {{ form.purchase_invoice_number.label(class="form-label") }}
            {{ form.purchase_invoice_number(class="form-control", placeholder="e.g. RE-2026-001") }}
          </div>
          <div class="form-group">
            {{ form.supplier_address.label(class="form-label") }}
            {{ form.supplier_address(class="form-control", rows=3, placeholder="Full name and postal address of seller") }}
          </div>
          <div class="form-group">
            {{ form.supplier_vat_status.label(class="form-label") }}
            {{ form.supplier_vat_status(class="form-control") }}
            <p style="font-size:0.72rem;color:var(--text-muted);margin-top:4px;">Margin tax only applies when seller is a private individual or non-VAT registered entity.</p>
          </div>
          <div class="form-group">
            {{ form.purchase_price.label(class="form-label") }}
            {{ form.purchase_price(class="form-control", placeholder="0.00") }}
            <p style="font-size:0.72rem;color:var(--text-muted);margin-top:4px;">Gross = Net (no input VAT deductible). Stored internally, never shown on customer invoices.</p>
          </div>
          <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.85rem;margin-bottom:var(--space-md);">
            {{ form.right_of_disposal(style="width:16px;height:16px;") }}
            {{ form.right_of_disposal.label.text }}
          </label>
          <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.85rem;">
            {{ form.retention_30yr(style="width:16px;height:16px;") }}
            {{ form.retention_30yr.label.text }}
          </label>
        </div>

        <div style="background:var(--status-reserved-bg);border-left:3px solid var(--status-reserved-fg);padding:12px 16px;font-size:0.82rem;color:var(--status-reserved-fg);margin-top:var(--space-md);">
          This record will be permanently appended to the provenance log. It cannot be edited or deleted after saving (KGTG compliance).
        </div>
      </div>

      <div style="display:flex;gap:var(--space-md);justify-content:flex-end;">
        <a href="{{ url_for('artworks.detail', id=artwork.id) }}" class="btn btn-secondary">Cancel</a>
      <div class="form-group" style="margin-bottom:var(--space-lg);">
        <label class="form-label">Attach Documents</label>
        <input type="file" name="attached_files" multiple accept=".pdf,.jpg,.jpeg,.png,.xlsx" class="form-control">
        <p style="font-size:0.75rem;color:var(--text-muted);margin-top:4px;">PDF, JPG, PNG, XLSX · Max 10MB per file · Multiple files allowed</p>
      </div>
        <button type="submit" class="btn btn-primary">Add Record</button>
      </div>
    </div>
  </form>
</div>
{% block extra_js %}
<script>
function toggleAcquisitionFields() {
  const val = document.querySelector('[name=event_type]').value;
  document.getElementById('acquisitionFields').style.display = val === 'acquisition' ? '' : 'none';
}
document.querySelector('[name=event_type]').addEventListener('change', toggleAcquisitionFields);
toggleAcquisitionFields();
</script>
{% endblock %}
{% endblock %}