{% extends "base.html" %}

{% block title %}Webformular-Snippet{% endblock %}
{% block heading %}Webformular für eure Webseite{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header">
    <div>
      <h2>Anfrage-Formular für eure Website</h2>
      <p class="sub">
        Kopiert den HTML-Code unten und fügt ihn auf eurer Webseite ein.
        Anfragen die darüber reinkommen, erscheinen automatisch in Takoma
        unter <strong>Anfragen</strong>.
      </p>
    </div>
  </div>

  {% if not api_enabled %}
  <div style="margin: 24px;
              padding: 20px;
              background: rgba(239, 68, 68, 0.15);
              border-left: 4px solid #ef4444;
              border-radius: 8px;">
    <strong>⚠️ API ist deaktiviert.</strong>
    <p style="margin-top: 8px; color: var(--card-text-muted);">
      Bevor das Formular funktioniert, müsst ihr die API in den
      <a href="/settings#api" style="color: #f2581b; text-decoration: underline;">Einstellungen</a>
      aktivieren und einen API-Token generieren.
    </p>
  </div>
  {% endif %}

  {% if not base_url %}
  <div style="margin: 24px;
              padding: 20px;
              background: rgba(245, 158, 11, 0.15);
              border-left: 4px solid #f59e0b;
              border-radius: 8px;">
    <strong>⚠️ Public-API-URL nicht gesetzt.</strong>
    <p style="margin-top: 8px; color: var(--card-text-muted);">
      Setzt das Feld <code>public_api_url</code> in den
      <a href="/settings" style="color: #f2581b; text-decoration: underline;">Einstellungen</a>
      auf die öffentliche URL eurer Takoma-Installation
      (z.B. <code>https://takoma.werkstatt-x.de</code>).
      Im Tailscale-Modus könnt ihr das Tailscale-MagicDNS verwenden, aber das
      ist nur intern erreichbar — für ein Webseite-Formular braucht ihr
      eine öffentliche HTTPS-URL.
    </p>
    <p style="margin-top: 8px; color: var(--card-text-muted);">
      Alternative: Anfragen kommen weiterhin per E-Mail rein, Takoma
      pollt das Postfach via IMAP (siehe Einstellungen → IMAP).
    </p>
  </div>
  {% endif %}

  <div class="card-body" style="padding: 24px;">

    <h3 style="margin-bottom: 16px;">📋 HTML-Code zum Einbauen</h3>

    <p style="color: var(--card-text-muted); margin-bottom: 16px;">
      Diesen Code in eure Webseite einfügen — er enthält ein vollständiges,
      DSGVO-konformes Anfrage-Formular mit Honeypot-Spam-Schutz.
    </p>

    <div style="position: relative;">
      <textarea id="snippet-code"
                readonly
                style="width: 100%; min-height: 360px;
                       background: rgba(0,0,0,0.4); color: #c4d8e6;
                       font-family: 'Monaco','Menlo','Courier New',monospace;
                       font-size: 11px; line-height: 1.6;
                       padding: 16px; border-radius: 8px;
                       border: 1px solid var(--card-border-2);
                       resize: vertical;">{% raw %}<!-- Takoma Anfrage-Formular — von takoma-digital.com generiert -->
<form id="takoma-anfrage-form" method="POST"
      action="{{ BASE_URL }}/api/inbound/inquiry"
      style="max-width: 640px; margin: 0 auto; font-family: system-ui, -apple-system, sans-serif;">
  <input type="hidden" name="api_token" value="{{ API_TOKEN }}">
  <input type="text" name="_hp" tabindex="-1" autocomplete="off"
         style="position:absolute; left:-9999px;" aria-hidden="true">

  <h2 style="font-size: 24px; margin-bottom: 16px;">Anfrage stellen</h2>

  <div style="margin-bottom: 16px;">
    <label style="display:block; margin-bottom:6px; font-weight:600;">Name *</label>
    <input type="text" name="customer_name" required
           style="width:100%; padding:10px; border:1px solid #d1d5db; border-radius:6px;">
  </div>

  <div style="margin-bottom: 16px;">
    <label style="display:block; margin-bottom:6px; font-weight:600;">Firma</label>
    <input type="text" name="customer_company"
           style="width:100%; padding:10px; border:1px solid #d1d5db; border-radius:6px;">
  </div>

  <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom: 16px;">
    <div>
      <label style="display:block; margin-bottom:6px; font-weight:600;">E-Mail *</label>
      <input type="email" name="customer_email" required
             style="width:100%; padding:10px; border:1px solid #d1d5db; border-radius:6px;">
    </div>
    <div>
      <label style="display:block; margin-bottom:6px; font-weight:600;">Telefon</label>
      <input type="tel" name="customer_phone"
             style="width:100%; padding:10px; border:1px solid #d1d5db; border-radius:6px;">
    </div>
  </div>

  <div style="margin-bottom: 16px;">
    <label style="display:block; margin-bottom:6px; font-weight:600;">Betreff *</label>
    <input type="text" name="subject" required
           placeholder="z.B. Drehteile aus 1.4571"
           style="width:100%; padding:10px; border:1px solid #d1d5db; border-radius:6px;">
  </div>

  <div style="margin-bottom: 16px;">
    <label style="display:block; margin-bottom:6px; font-weight:600;">Ihre Anfrage *</label>
    <textarea name="message" required rows="5"
              placeholder="Material, Stückzahl, Liefertermin, Zeichnung beifügen..."
              style="width:100%; padding:10px; border:1px solid #d1d5db; border-radius:6px;
                     resize:vertical;"></textarea>
  </div>

  <div style="margin-bottom: 16px; font-size: 13px; color: #6b7280;">
    <label>
      <input type="checkbox" name="dsgvo_ok" required value="1" style="margin-right:6px;">
      Ich stimme der Verarbeitung meiner Daten zur Bearbeitung dieser Anfrage zu
      (<a href="/datenschutz" target="_blank" style="color:inherit; text-decoration:underline;">Datenschutz</a>).
    </label>
  </div>

  <button type="submit"
          style="background:#e85d2f; color:white; padding:12px 32px;
                 border:none; border-radius:8px; font-weight:600; font-size:15px;
                 cursor:pointer;">
    Anfrage senden
  </button>

  <div id="takoma-anfrage-status" style="margin-top:16px;"></div>
</form>

<script>
(function() {
  var form = document.getElementById('takoma-anfrage-form');
  var status = document.getElementById('takoma-anfrage-status');
  if (!form) return;
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    if (form._hp && form._hp.value) return;  // Honeypot
    status.innerHTML = '<span style="color:#6b7280;">Wird gesendet...</span>';
    var fd = new FormData(form);
    var data = {};
    fd.forEach(function(v, k) { data[k] = v; });
    fetch(form.action, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + data.api_token
      },
      body: JSON.stringify({
        customer_name: data.customer_name,
        customer_company: data.customer_company || '',
        customer_email: data.customer_email,
        customer_phone: data.customer_phone || '',
        subject: data.subject,
        message: data.message
      })
    })
    .then(function(r) { return r.ok ? r.json() : Promise.reject(r); })
    .then(function() {
      status.innerHTML = '<span style="color:#10b981; font-weight:600;">' +
        '✓ Vielen Dank! Ihre Anfrage ist eingegangen. Wir melden uns binnen 24 Stunden.</span>';
      form.reset();
    })
    .catch(function() {
      status.innerHTML = '<span style="color:#ef4444;">' +
        'Fehler beim Senden. Bitte rufen Sie uns an oder schreiben Sie eine E-Mail an info@{{ COMPANY }}.</span>';
    });
  });
})();
</script>
<!-- /Takoma Anfrage-Formular -->{% endraw %}</textarea>

      <button type="button"
              onclick="copySnippet()"
              style="position: absolute; top: 8px; right: 8px;
                     background: #e85d2f; color: white;
                     padding: 6px 16px; border: none; border-radius: 6px;
                     font-size: 12px; font-weight: 600; cursor: pointer;">
        📋 Kopieren
      </button>
    </div>

    <div id="copy-msg" style="margin-top: 12px; color: #10b981; font-weight: 600;
                              opacity: 0; transition: opacity 0.3s;">
      ✓ In die Zwischenablage kopiert
    </div>

    <h3 style="margin-top: 32px; margin-bottom: 16px;">🛠 So bauen Sie es ein</h3>

    <ol style="padding-left: 24px; line-height: 1.9; color: var(--card-text-muted);">
      <li><strong>Code kopieren</strong> (Knopf oben rechts)</li>
      <li>In eurer Webseite die Stelle wählen, wo das Formular erscheinen soll —
        z.B. die Seite <code>kontakt.html</code> oder eine WordPress-Seite</li>
      <li>Den kopierten HTML-Code einfügen
        <ul style="margin-top:6px;">
          <li>WordPress: Block-Typ <strong>„Eigenes HTML"</strong></li>
          <li>WIX: <strong>„HTML einbetten"</strong></li>
          <li>Webflow: <strong>„HTML Embed"</strong></li>
          <li>Statisches HTML: einfach in den Quellcode der Seite einfügen</li>
        </ul>
      </li>
      <li><strong>Speichern und veröffentlichen</strong></li>
      <li>Test-Anfrage senden — sollte binnen 30 Sekunden in Takoma unter
        <a href="/inquiries" style="color: #f2581b; text-decoration: underline;">Anfragen</a>
        erscheinen</li>
    </ol>

    <h3 style="margin-top: 32px; margin-bottom: 16px;">🔒 Sicherheits-Hinweise</h3>

    <ul style="padding-left: 24px; line-height: 1.9; color: var(--card-text-muted);">
      <li>Der API-Token im Snippet ist <strong>nur zum Anlegen von Anfragen</strong>
        berechtigt — er kann keine bestehenden Daten lesen oder ändern</li>
      <li>Der Honeypot-Schutz (verstecktes Feld <code>_hp</code>) blockt 95 %
        der Spam-Bots ohne Captcha</li>
      <li>Falls der Token kompromittiert wird:
        <a href="/settings#api" style="color: #f2581b; text-decoration: underline;">in Einstellungen</a>
        einen neuen Token generieren — der alte wird sofort ungültig</li>
      <li>Bei Spam-Welle: API in Einstellungen <strong>kurzzeitig deaktivieren</strong> —
        Anfragen kommen dann weiter per E-Mail rein (IMAP-Polling)</li>
    </ul>

    <h3 style="margin-top: 32px; margin-bottom: 16px;">🎨 Anpassen</h3>

    <p style="color: var(--card-text-muted); line-height: 1.7;">
      Der Code ist mit Inline-CSS gestaltet, damit er auch ohne extra
      Stylesheet ordentlich aussieht. Ihr könnt:
    </p>
    <ul style="padding-left: 24px; line-height: 1.9; color: var(--card-text-muted);">
      <li><strong>Brand-Farbe ändern:</strong> sucht <code>#e85d2f</code> im Code
        und ersetzt es durch eure Farbe</li>
      <li><strong>Felder hinzufügen:</strong> z.B. „Zeichnung als Datei hochladen" —
        muss aber per Multipart-Upload statt JSON gesendet werden</li>
      <li><strong>Pflichtfelder ändern:</strong> entfernt das <code>required</code>-Attribut
        bei den optionalen Feldern</li>
      <li><strong>Datenschutz-Link anpassen:</strong> der Link <code>/datenschutz</code>
        zeigt aktuell auf eure Seite — passt ihn an</li>
    </ul>

  </div>
</div>

<script>
function copySnippet() {
  var ta = document.getElementById('snippet-code');
  ta.select();
  document.execCommand('copy');
  var msg = document.getElementById('copy-msg');
  msg.style.opacity = '1';
  setTimeout(function() { msg.style.opacity = '0'; }, 2000);
}

// Platzhalter im Snippet ersetzen
document.addEventListener('DOMContentLoaded', function() {
  var ta = document.getElementById('snippet-code');
  if (!ta) return;
  ta.value = ta.value
    .replace(/\{\{ BASE_URL \}\}/g, '{{ base_url or "https://takoma.eure-werkstatt.de" }}')
    .replace(/\{\{ API_TOKEN \}\}/g, '{{ api_token or "API-TOKEN-HIER-EINSETZEN" }}')
    .replace(/\{\{ COMPANY \}\}/g, '{{ company|lower|replace(" ", "-") }}.de');
});
</script>
{% endblock %}