{% extends "portal_base.html" %}
{% set active = 'inquiry' %}
{% block title %}Neue Anfrage{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Kunden-Portal · Neue Anfrage</p>{% endblock %}
{% block heading %}Neue Anfrage stellen{% endblock %}

{% block content %}
<p class="text-sm text-neutral-600 mb-4">
  Beschreiben Sie Ihr Anliegen — wir melden uns innerhalb von 1-2 Werktagen.
  {% if request.query_params.get('ref') %}
  <br><strong>Bezug:</strong> {{ request.query_params.get('ref') }}
  {% endif %}
</p>

<div class="card max-w-3xl">
  <form method="post" action="/portal/{{ token }}/inquiry/new" class="px-5 py-5 space-y-4"
        enctype="multipart/form-data">
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Betreff *</label>
      <input class="input mt-1 w-full" type="text" name="subject" required maxlength="200"
             value="{% if request.query_params.get('ref') %}Frage zu {{ request.query_params.get('ref') }}{% endif %}"
             placeholder="z.B. Frage zu Auftrag 2026-0042 / Neue Anfrage Edelstahl-Drehteile">
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Ihr Name (optional)</label>
        <input class="input mt-1 w-full" type="text" name="contact_name"
               value="{{ customer.contact_name or '' }}">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Ihre E-Mail (optional)</label>
        <input class="input mt-1 w-full" type="email" name="contact_email"
               value="{{ customer.email or '' }}"
               placeholder="für Rückfragen">
      </div>
    </div>

    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Beschreibung *</label>
      <textarea class="input mt-1 w-full" name="body" rows="10" required
                placeholder="Beschreiben Sie hier Material, Stückzahl, Maße, Toleranzen, Liefertermin …"></textarea>
    </div>

    {# v1.12.2: Drag&Drop für Zeichnungen direkt im Portal #}
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">
        Zeichnungen / Anhänge (optional)
      </label>
      <div id="portal-dz" style="margin-top: 6px; border: 2px dashed var(--card-border);
                                  border-radius: 8px; padding: 18px; text-align: center;
                                  background: rgba(255,255,255,0.02); cursor: pointer;
                                  transition: all 160ms;">
        <div style="font-size: 28px; opacity: 0.6;">📎</div>
        <div style="margin-top: 4px;"><b>Dateien hierher ziehen</b> oder klicken zum Auswählen</div>
        <div style="font-size: 12px; color: var(--card-text-muted); margin-top: 4px;">
          PDF · DXF · DWG · STEP · IGES · STL · PNG · JPG — max. 50 MB pro Datei
        </div>
        <input id="portal-fi" type="file" name="attachments" multiple style="display: none;"
               accept=".pdf,.dxf,.dwg,.step,.stp,.iges,.igs,.stl,.obj,.3mf,.png,.jpg,.jpeg,.gif,.bmp,.docx,.xlsx">
      </div>
      <div id="portal-files" style="margin-top: 8px; font-size: 13px;"></div>
    </div>

    <div class="flex gap-2 pt-2 border-t" style="border-color:var(--card-border-2);">
      <button type="submit" class="btn btn-primary">Anfrage absenden</button>
      <a href="/portal/{{ token }}" class="btn btn-secondary">Abbrechen</a>
    </div>
  </form>
</div>

<script>
(function () {
  const dz = document.getElementById('portal-dz');
  const fi = document.getElementById('portal-fi');
  const list = document.getElementById('portal-files');
  function render() {
    if (!fi.files || fi.files.length === 0) { list.innerHTML = ''; return; }
    list.innerHTML = '<b>' + fi.files.length + ' Datei(en) ausgewählt:</b><ul style="margin: 4px 0 0 18px;">' +
      [...fi.files].map(f => `<li>${f.name} (${Math.round(f.size/1024)} KB)</li>`).join('') +
      '</ul>';
  }
  dz.addEventListener('click', () => fi.click());
  fi.addEventListener('change', render);
  dz.addEventListener('dragover', e => { e.preventDefault(); dz.style.borderColor='#f2581b'; dz.style.background='rgba(242,88,27,0.08)'; });
  dz.addEventListener('dragleave', () => { dz.style.borderColor=''; dz.style.background=''; });
  dz.addEventListener('drop', e => {
    e.preventDefault(); dz.style.borderColor=''; dz.style.background='';
    fi.files = e.dataTransfer.files;
    render();
  });
})();
</script>
{% endblock %}