{% extends "base.html" %}
{% from "_macros.html" import field %}

{% block title %}{% if mode=='new' %}Neuer Kunde{% else %}{{ customer.name }} bearbeiten{% endif %}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/customers" class="hover:underline">Kunden</a> / {% if mode=='new' %}Neu{% else %}Bearbeiten{% endif %}</p>{% endblock %}
{% block heading %}{% if mode=='new' %}Neuer Kunde{% else %}{{ customer.name }}{% endif %}{% endblock %}

{% block content %}
<style>
  #dup-hint { display: none; margin-top: 6px; padding: 8px 12px;
              background: rgba(245, 158, 11, 0.10); border: 1.5px solid #f59e0b;
              border-radius: 8px; font-size: 12px; }
  #dup-hint .dup-title { font-weight: 700; color: #b45309; margin-bottom: 4px; }
  #dup-hint a { color: #1a1a1a; text-decoration: underline; }
</style>
<form method="post" action="{% if mode=='new' %}/customers/new{% else %}/customers/{{ customer.id }}/edit{% endif %}" class="max-w-3xl space-y-4"
      data-autosave="customer_{% if mode=='new' %}new{% else %}edit_{{ customer.id }}{% endif %}">

  {# ---------- Stammdaten ---------- #}
  <div class="card">
    <div class="card-header"><div><h2>Stammdaten</h2></div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      {{ field("Kunden-Code", "company_code", customer.company_code if customer else "", placeholder="ABZ-001") }}
      <div>
        {{ field("Firmenname", "name", customer.name if customer else "", required=true) }}
        <div id="dup-hint" role="alert"></div>
      </div>

      <div class="col-span-2">
        {{ field("Adresse", "address", customer.address if customer else "", placeholder="Hauptstraße 12") }}
      </div>
      <div class="col-span-2">
        {{ field("Adresszusatz", "address_line2", customer.address_line2 if customer else "", placeholder="z.B. Gebäude 4 / c/o ...") }}
      </div>
      {{ field("PLZ", "postcode", customer.postcode if customer else "") }}
      {{ field("Stadt", "city", customer.city if customer else "") }}

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Land</label>
        <select name="country_iso" class="select mt-1 w-full">
          {% set sel = (customer.country_iso if customer else 'DE') or 'DE' %}
          {% for iso, name in countries %}
          <option value="{{ iso }}" {% if iso == sel %}selected{% endif %}>{{ name }} ({{ iso }})</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Geschäftsart</label>
        <div class="mt-1 flex gap-3 text-sm">
          <label class="flex items-center gap-1.5">
            <input type="radio" name="is_business" value="1" {% if not customer or customer.is_business %}checked{% endif %}>
            <span>B2B (Geschäftskunde)</span>
          </label>
          <label class="flex items-center gap-1.5">
            <input type="radio" name="is_business" value="0" {% if customer and not customer.is_business %}checked{% endif %}>
            <span>B2C (Privatkunde)</span>
          </label>
        </div>
      </div>

      {{ field("Website", "website", customer.website if customer else "") }}
      {{ field("Telefon", "phone", customer.phone if customer else "") }}
      {{ field("E-Mail", "email", customer.email if customer else "", type="email") }}
      {{ field("Ansprechpartner", "contact_name", customer.contact_name if customer else "") }}
    </div>
  </div>

  {# ---------- Steuer & Rechnung ---------- #}
  <div class="card">
    <div class="card-header"><div>
      <h2>Steuer &amp; Rechnung</h2>
      <p class="sub">USt-IdNr für Reverse-Charge bei EU-B2B · Leitweg-ID für Behörden</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      {{ field("USt-IdNr / VAT-ID", "vat_id", customer.vat_id if customer else "", placeholder="DE123456789 · ATU12345678") }}
      {{ field("Steuer-Nr.", "tax_id", customer.tax_id if customer else "", placeholder="optional · z.B. 123/456/78901") }}

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Zahlungsziel (Tage)</label>
        <input class="input mt-1 w-full nums" type="number" min="0" max="120"
               name="payment_terms_days" value="{{ customer.payment_terms_days if customer else 14 }}">
      </div>

    </div>

    {# v1.12.0: Erweiterte Beleg-Optionen + Notizen eingeklappt #}
    <details class="form-advanced" style="margin: 0 14px 14px;">
      <summary>Erweiterte Optionen (Rechnungsformat, Sprache, Leitweg-ID, Notizen)</summary>
      <div class="form-advanced-body">
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Rechnungsformat</label>
          <select name="preferred_invoice_format" class="select mt-1 w-full">
            {% set fmt = (customer.preferred_invoice_format if customer else 'zugferd') or 'zugferd' %}
            <option value="zugferd"   {% if fmt=='zugferd'   %}selected{% endif %}>ZUGFeRD (PDF + XML, EU-Standard)</option>
            <option value="xrechnung" {% if fmt=='xrechnung' %}selected{% endif %}>XRechnung (XML only — Behörden)</option>
            <option value="pdf"       {% if fmt=='pdf'       %}selected{% endif %}>Klassisches PDF (ohne XML)</option>
          </select>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Beleg-Sprache (PDF)</label>
          <select name="default_language" class="select mt-1 w-full">
            {% set dl = (customer.default_language if customer else 'de') or 'de' %}
            <option value="de" {% if dl=='de' %}selected{% endif %}>Deutsch</option>
            <option value="en" {% if dl=='en' %}selected{% endif %}>English</option>
            <option value="fr" {% if dl=='fr' %}selected{% endif %}>Français</option>
          </select>
        </div>
        <div style="grid-column: span 2;">
          {{ field("Leitweg-ID (B2G)", "leitweg_id", customer.leitweg_id if customer else "", placeholder="z.B. 04011000-12345-67 · nur für deutsche Behörden") }}
        </div>
        <div style="grid-column: span 2;">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notizen (intern)</label>
          <textarea name="notes" class="input mt-1 w-full" rows="2" placeholder="z.B. Lieferadresse abweichend · Sonderkonditionen ...">{{ customer.notes if customer else "" }}</textarea>
        </div>
      </div>
    </details>
  </div>

  {# ---------- Weitere Ansprechpartner ---------- #}
  <div class="card">
    <div class="card-header"><div>
      <h2>Weitere Ansprechpartner</h2>
      <p class="sub">Z.B. Einkauf, Geschäftsführung, Buchhaltung, Konstruktion · beliebig viele</p>
    </div></div>
    <div class="p-5">
      <div id="contacts-list" class="space-y-3">
        {% for ct in contacts %}
        <div class="contact-row grid grid-cols-12 gap-2 items-end" data-idx="{{ loop.index0 }}">
          <div class="col-span-3">
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Name</label>
            <input class="input mt-1 w-full" type="text" name="c_name" value="{{ ct.name }}" placeholder="z.B. Andreas Bayer">
          </div>
          <div class="col-span-2">
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Funktion</label>
            <input class="input mt-1 w-full" type="text" name="c_role" value="{{ ct.role or '' }}" placeholder="Einkauf">
          </div>
          <div class="col-span-3">
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">E-Mail</label>
            <input class="input mt-1 w-full" type="email" name="c_email" value="{{ ct.email or '' }}">
          </div>
          <div class="col-span-2">
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Telefon</label>
            <input class="input mt-1 w-full" type="text" name="c_phone" value="{{ ct.phone or '' }}">
          </div>
          <div class="col-span-1 flex items-center justify-center">
            <label class="flex flex-col items-center gap-1 text-[10px] cursor-pointer" title="Hauptkontakt">
              <input type="checkbox" name="c_is_primary" value="{{ loop.index0 }}" {% if ct.is_primary %}checked{% endif %}>
              <span>Haupt</span>
            </label>
          </div>
          <div class="col-span-1 flex items-center justify-center">
            <button type="button" class="btn btn-sm btn-secondary contact-remove" title="Entfernen">×</button>
          </div>
        </div>
        {% endfor %}
      </div>
      <div class="mt-3 flex items-center gap-3">
        <button type="button" id="add-contact" class="btn btn-sm btn-primary">+ Ansprechpartner hinzufügen</button>
        <span class="text-[11px] text-neutral-500">Mit dem ×-Button rechts entfernen</span>
      </div>
    </div>
  </div>

  <div class="flex items-center justify-between max-w-3xl">
    <a class="btn btn-secondary" href="/customers">Abbrechen</a>
    <button class="btn btn-primary" type="submit">{% if mode=='new' %}Anlegen{% else %}Speichern{% endif %}</button>
  </div>
</form>

<script>
(function () {
  const list = document.getElementById('contacts-list');
  const addBtn = document.getElementById('add-contact');
  if (!list || !addBtn) return;

  function rowHTML(idx) {
    return `
      <div class="contact-row grid grid-cols-12 gap-2 items-end" data-idx="${idx}">
        <div class="col-span-3">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Name</label>
          <input class="input mt-1 w-full" type="text" name="c_name" placeholder="z.B. Andreas Bayer">
        </div>
        <div class="col-span-2">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Funktion</label>
          <input class="input mt-1 w-full" type="text" name="c_role" placeholder="Einkauf">
        </div>
        <div class="col-span-3">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">E-Mail</label>
          <input class="input mt-1 w-full" type="email" name="c_email">
        </div>
        <div class="col-span-2">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Telefon</label>
          <input class="input mt-1 w-full" type="text" name="c_phone">
        </div>
        <div class="col-span-1 flex items-center justify-center">
          <label class="flex flex-col items-center gap-1 text-[10px] cursor-pointer" title="Hauptkontakt">
            <input type="checkbox" name="c_is_primary" value="${idx}">
            <span>Haupt</span>
          </label>
        </div>
        <div class="col-span-1 flex items-center justify-center">
          <button type="button" class="btn btn-sm btn-secondary contact-remove" title="Entfernen">×</button>
        </div>
      </div>`;
  }

  function reindex() {
    [...list.children].forEach((row, i) => {
      row.dataset.idx = i;
      const cb = row.querySelector('input[name="c_is_primary"]');
      if (cb) cb.value = i;
    });
  }

  addBtn.addEventListener('click', () => {
    const idx = list.children.length;
    list.insertAdjacentHTML('beforeend', rowHTML(idx));
    reindex();
  });

  list.addEventListener('click', e => {
    if (e.target.classList.contains('contact-remove')) {
      e.target.closest('.contact-row').remove();
      reindex();
    }
  });
})();
</script>

{% if mode == 'new' %}
<script>
(function () {
  const nameInput = document.querySelector('input[name="name"]');
  const vatInput  = document.querySelector('input[name="vat_id"]');
  const hint      = document.getElementById('dup-hint');
  if (!nameInput || !hint) return;

  let timer = null;
  function check() {
    const name = nameInput.value.trim();
    const vat  = (vatInput && vatInput.value || '').trim();
    if (name.length < 3 && vat.length < 4) { hint.style.display = 'none'; return; }
    fetch('/api/customers/duplicate-check?name=' + encodeURIComponent(name) + '&vat_id=' + encodeURIComponent(vat))
      .then(r => r.ok ? r.json() : null)
      .then(j => {
        if (!j || !j.matches || !j.matches.length) { hint.style.display = 'none'; return; }
        hint.innerHTML = '<div class="dup-title">⚠ Möglicher Duplikat — diese Kunden existieren bereits:</div>' +
          j.matches.map(m =>
            '<div>· <a href="/customers/' + m.id + '">' + m.name.replace(/[<>]/g, '') + '</a>'
            + (m.city ? ' · ' + m.city.replace(/[<>]/g, '') : '')
            + (m.vat_id ? ' · ' + m.vat_id.replace(/[<>]/g, '') : '')
            + (m.match === 'vat' ? ' <b style="color:#b91c1c">(USt-IdNr identisch)</b>' : '')
            + '</div>'
          ).join('');
        hint.style.display = 'block';
      })
      .catch(() => {});
  }
  function debounce() {
    clearTimeout(timer);
    timer = setTimeout(check, 350);
  }
  nameInput.addEventListener('input', debounce);
  if (vatInput) vatInput.addEventListener('input', debounce);
})();
</script>
{% endif %}

{% if mode == 'edit' %}
<form method="post" action="/customers/{{ customer.id }}/delete" class="max-w-3xl mt-6"
      onsubmit="return confirm('Kunde wirklich löschen?')">
  <button class="btn btn-danger btn-sm" type="submit">Kunde löschen</button>
</form>
{% endif %}
{% endblock %}