{% 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>

<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" id="mail"><div class="card-body">
    <h2>E-mail koppelen</h2>
    <p class="hint" style="margin:-.4rem 0 1rem">Gebruik voor Gmail of Microsoft 365 een app-wachtwoord. Wachtwoorden staan in de database: houd de map <code>data/</code> privé.</p>
    <h3>Ontvangen (IMAP)</h3>
    <div class="row g-3">
      {{ field('imap_host', 'Server', placeholder='imap.gmail.com') }}
      {{ field('imap_port', 'Poort', 'number', '993') }}
      {{ field('imap_user', 'Gebruikersnaam', placeholder='info@vanemous.nl') }}
      <div class="col-md-6 col-xl-4"><label class="form-label" for="imap_pass">Wachtwoord</label><input class="form-control" id="imap_pass" type="password" name="imap_pass" placeholder="{{ '•••••••• (ingesteld)' if s.imap_pass else '' }}" autocomplete="new-password"></div>
      {{ field('imap_folder', 'Map', placeholder='INBOX') }}
      {{ field('imap_days', 'Aantal dagen terug ophalen', 'number', '30') }}
    </div>
    <h3>Versturen (SMTP)</h3>
    <div class="row g-3">
      {{ field('smtp_host', 'Server', placeholder='smtp.gmail.com') }}
      {{ field('smtp_port', 'Poort', 'number', '587') }}
      {{ field('smtp_user', 'Gebruikersnaam', placeholder='leeg = zelfde als IMAP') }}
      <div class="col-md-6 col-xl-4"><label class="form-label" for="smtp_pass">Wachtwoord</label><input class="form-control" id="smtp_pass" type="password" name="smtp_pass" placeholder="{{ '•••••••• (ingesteld)' if s.smtp_pass else 'leeg = zelfde als IMAP' }}" autocomplete="new-password"></div>
      {{ field('smtp_from', 'Afzender', placeholder='Van Emous <info@vanemous.nl>', full=true) }}
    </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 %}