{% extends 'base.html' %}
{% block title %}Instellingen{% endblock %}
{% macro field(key, label, type='text', placeholder='', full=false) %}
  <div class="{{ 'col-12' if full else 'col-md-6 col-xl-4' }}"><label class="form-label" for="{{ key }}">{{ label }}</label><input class="form-control" id="{{ key }}" type="{{ type }}" name="{{ key }}" value="{{ s.get(key, '') }}" placeholder="{{ placeholder }}"></div>
{% endmacro %}
{% block content %}
<div class="head"><div><div class="kicker">Beheer</div><h1>Instellingen</h1></div></div>

<div class="card" id="mail"><div class="card-body">
  <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap">
    <div><h2>Mailboxen</h2>
      <p class="hint" style="margin:-.4rem 0 1rem">Elke mailbox (info@, facturen@, nieuwsbrief@ of een persoonlijke) heeft een eigen account. Een mailbox
        zonder gekozen gebruikers is gedeeld met iedereen. Ophalen gaat via de routine "E-mail ophalen" (<a href="{{ url_for('routines') }}">Routines</a>).</p></div>
    <a class="btn btn-primary" href="{{ url_for('mailbox_edit') }}">Mailbox toevoegen</a>
  </div>
  {% if mailboxes %}
  <div class="table-responsive"><table class="table table-hover table-stack">
    <thead><tr><th>Naam</th><th>Adres</th><th>Rol</th><th>Toegang</th><th>Laatst opgehaald</th><th>Status</th></tr></thead>
    <tbody>
    {% for m in mailboxes %}
      <tr class="link" onclick="location='{{ url_for('mailbox_edit', mbid=m.id) }}'">
        <td class="stack-title"><a href="{{ url_for('mailbox_edit', mbid=m.id) }}">{{ m.name }}</a></td>
        <td data-label="Adres">{{ m.imap_user or m.smtp_user }}</td>
        <td data-label="Rol">{{ PURPOSE.get(m.purpose, m.purpose) }}</td>
        <td data-label="Toegang">{{ m.access or 'Iedereen' }}</td>
        <td data-label="Laatst opgehaald" class="muted">{{ m.last_sync|dt if m.last_sync else '—' }}</td>
        <td data-label="Status">{% if not m.active %}<span class="chip verloren">Inactief</span>{% elif m.last_error %}<span class="chip nieuw" title="{{ m.last_error }}">Fout</span>{% endif %}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table></div>
  {% else %}<p class="empty">Nog geen mailbox.</p>{% endif %}
</div></div>

<form method="post">
  <div class="card"><div class="card-body">
    <h2>Bedrijfsgegevens</h2>
    <p class="hint" style="margin:-.4rem 0 1rem">Deze gegevens staan op de offertes.</p>
    <div class="row g-3">
      {{ field('company_name', 'Bedrijfsnaam', full=true) }}
      {{ field('company_address', 'Adres') }}
      {{ field('company_postcode_city', 'Postcode en plaats') }}
      {{ field('company_phone', 'Telefoon') }}
      {{ field('company_email', 'E-mail', 'email') }}
      {{ field('company_website', 'Website') }}
      {{ field('company_kvk', 'KvK-nummer') }}
      {{ field('company_btw', 'Btw-nummer') }}
      {{ field('company_iban', 'IBAN') }}
    </div>
  </div></div>

  <div class="card"><div class="card-body">
    <h2>Offertes</h2>
    <div class="row g-3">
      {{ field('quote_prefix', 'Voorvoegsel nummer', placeholder='OFF') }}
      {{ field('quote_valid_days', 'Standaard geldig (dagen)', 'number') }}
      <div class="col-12"><label class="form-label" for="quote_intro">Standaard inleiding</label><textarea class="form-control" id="quote_intro" name="quote_intro">{{ s.quote_intro }}</textarea></div>
      <div class="col-12"><label class="form-label" for="quote_footer">Voettekst (bijv. betalingsvoorwaarden)</label><textarea class="form-control" id="quote_footer" name="quote_footer">{{ s.quote_footer }}</textarea></div>
    </div>
  </div></div>

  <div class="card"><div class="card-body">
    <h2>Formulieren en API</h2>
    <div class="row g-3">
      {{ field('allowed_origins', 'Toegestane websites (komma-gescheiden)', placeholder='https://www.vanemous.nl', full=true) }}
      <div class="col-md-6 col-xl-4"><label class="form-label" for="api_assign_user">Nieuwe leads toewijzen aan</label>
        <select class="form-select" id="api_assign_user" name="api_assign_user">
          <option value="">— Niemand —</option>
          {% for u in USERS %}<option value="{{ u.id }}" {{ 'selected' if s.api_assign_user == u.id|string }}>{{ u.name }}</option>{% endfor %}
        </select>
      </div>
    </div>
  </div></div>

  <div class="card"><div class="card-body">
    <h2>Relatietypes</h2>
    <p class="hint" style="margin:-.4rem 0 1rem">Komma-gescheiden. Bestaande relaties houden hun type als je er een weghaalt.</p>
    <div class="row g-3">
      <div class="col-12"><label class="form-label" for="klant_types">Klanten (bundels)</label><input class="form-control" id="klant_types" name="klant_types" value="{{ s.klant_types or 'Huishouden / familie, Particulier, Zakelijk, Zorginstelling' }}"></div>
      <div class="col-12"><label class="form-label" for="partner_types">Partners</label><input class="form-control" id="partner_types" name="partner_types" value="{{ s.partner_types or 'Leverancier, Aannemer, Installateur, Architect / adviseur, Gemeente, Overig' }}"></div>
    </div>
  </div></div>

  <div class="actions" style="margin-bottom:1.5rem"><button class="btn btn-primary">Instellingen opslaan</button></div>
</form>

<div class="card"><div class="card-body">
  <h2>API-koppeling</h2>
  <dl class="props">
    <dt>Endpoint</dt><dd><code>POST {{ api_url }}</code></dd>
    <dt>API-sleutel</dt><dd><code>{{ s.api_key }}</code></dd>
    <dt>Klantportaal</dt><dd><code>{{ portal_url }}</code></dd>
  </dl>
  <p>Stuur de sleutel mee als header <code>X-API-Key</code> of als <code>?key=</code> in de URL. Herkende velden (ook in het Nederlands): naam, voornaam, achternaam, email, telefoon, bedrijf, adres, postcode, plaats, bericht, bron, waarde. Andere velden worden bewaard als extra gegevens. Bestanden (bijv. foto's) gaan mee als <code>multipart/form-data</code>. Een ontwerp uit de configurator (een object met <code>"type": "house-design"</code>) wordt als bestand bij de lead opgeslagen. Leads met een bekend e-mailadres worden bij het bestaande contact gezet.</p>

  <h3>Gewoon HTML-formulier</h3>
<pre>{% filter forceescape %}<form action="{{ api_url }}?key={{ s.api_key }}" method="post" enctype="multipart/form-data">
  <input name="naam" required>
  <input name="email" type="email">
  <input name="telefoon">
  <textarea name="bericht"></textarea>
  <input type="file" name="foto" multiple>
  <input type="hidden" name="bron" value="Contactformulier">
  <input type="hidden" name="redirect" value="https://www.vanemous.nl/bedankt">
  <input name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
  <button>Versturen</button>
</form>{% endfilter %}</pre>

  <h3>JavaScript (fetch)</h3>
<pre>{% filter forceescape %}const res = await fetch('{{ api_url }}', {
  method: 'POST',
  headers: { 'X-API-Key': '{{ s.api_key }}' },
  body: new FormData(document.querySelector('form'))
});
const { ok, id } = await res.json();{% endfilter %}</pre>

  <h3>Vanaf een server (aanbevolen: de sleutel blijft geheim)</h3>
<pre>{% filter forceescape %}curl -X POST {{ api_url }} \
  -H 'X-API-Key: {{ s.api_key }}' -H 'Content-Type: application/json' \
  -d '{"naam": "Jan Jansen", "email": "jan@example.nl", "bericht": "Graag info", "model": "Amstel"}'{% endfilter %}</pre>

  <h3>Producten bijwerken (prijsmutaties)</h3>
  <p>Werkt producten bij op SKU, bijvoorbeeld vanuit een prijsscript van een leverancier. Veldnamen zoals bij de import. <code>?deactivate_missing=1</code> zet producten die niet in de lijst staan op inactief.</p>
<pre>{% filter forceescape %}curl -X POST '{{ url_for('api_products', _external=True) }}?source=Leverancier%20X' \
  -H 'X-API-Key: {{ s.api_key }}' -H 'Content-Type: application/json' \
  -d '[{"sku": "plaat.osbM2", "naam": "OSB", "prijs": "12,50", "eenheid": "m²", "leverancier": "Houthandel Y"}]'{% endfilter %}</pre>

  <form method="post" onsubmit="return confirm('Nieuwe sleutel maken? Bestaande formulieren werken dan niet meer.')">
    <input type="hidden" name="action" value="apikey">
    <button class="btn btn-outline-secondary btn-sm">Nieuwe API-sleutel maken</button>
  </form>
</div></div>
{% endblock %}