{% extends "base.html" %}
{% set active_page = "index" %}
{% block page_title %}Neues Ticket{% endblock %}
{% block page_sub %}<div class="topbar-sub">Berechtigung eines Kunden auf eine Lizenz mit festen Eckdaten anlegen</div>{% endblock %}

{% block content %}
{% import "_hint_icon.html" as hi %}
<div class="settings-grid">

  <div class="card card-pad">
    <div class="hint" style="margin-bottom:16px;">
      Legt nur die Berechtigung an (Typ/Module/Laufzeit) — die eigentliche signierte Lizenzdatei wird danach auf der
      Ticket-Seite erzeugt, durch dich oder direkt durch den Kunden selbst über seinen Self-Service-Link.
    </div>

    <form method="post">
      <div class="field">
        <label for="customer_id">Kunde</label>
        <select name="customer_id" id="customer_id" onchange="toggleNewCustomerFields()" required>
          <option value="__new__" {% if not preselect_customer_id %}selected{% endif %}>+ Neuer Kunde…</option>
          {% for c in customers %}
          <option value="{{ c.id }}" {% if preselect_customer_id == c.id %}selected{% endif %}>{{ c.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div id="newCustomerFields" class="field-group">
        <div class="field">
          <label for="new_customer_name">Name (neuer Kunde)</label>
          <input type="text" name="new_customer_name" id="new_customer_name" placeholder="z.B. Musterfirma GmbH">
        </div>
        <div class="field">
          <label for="new_customer_email">E-Mail (neuer Kunde)</label>
          <input type="email" name="new_customer_email" id="new_customer_email">
        </div>
      </div>

      <div class="field">
        <label for="license_type">Lizenztyp {{ hi.hint_icon("Trial: zeitlich begrenzt, voller Zugriff. Standard: alle lizenzpflichtigen Basis-Funktionen, keine Zusatzmodule. Custom: Standard + einzeln wählbare Module. Enterprise: alles. Unabhängig vom hier gewählten Typ kann aus jedem Ticket zusätzlich jederzeit eine separate Trial-Lizenz erzeugt werden.", "Lizenztyp") }}</label>
        <select name="license_type" id="license_type" onchange="toggleModuleFields()" required>
          {% for t in license_types %}
          <option value="{{ t }}" {% if t == 'standard' %}selected{% endif %}>{{ type_labels.get(t, t) }}</option>
          {% endfor %}
        </select>
      </div>

      <div id="moduleFields" class="field hidden">
        <label>Module</label>
        <div class="check-list">
          {% for m in all_modules %}
          <label class="check-row">
            <input type="checkbox" name="modules" value="{{ m }}">
            {{ module_labels.get(m, m) }}
          </label>
          {% endfor %}
        </div>
      </div>

      <div class="field">
        <label for="valid_days">Gültigkeitsdauer (Tage)</label>
        <input type="number" name="valid_days" id="valid_days" value="365" min="1" required>
        <div class="field-hint">
          <button type="button" class="btn btn-sm btn-secondary" onclick="document.getElementById('valid_days').value=365">1 Jahr</button>
          <button type="button" class="btn btn-sm btn-secondary" onclick="document.getElementById('valid_days').value=730">2 Jahre</button>
        </div>
      </div>

      <button type="submit" class="btn btn-primary btn-block">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
        Ticket anlegen
      </button>
    </form>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function toggleNewCustomerFields() {
    const isNew = document.getElementById("customer_id").value === "__new__";
    document.getElementById("newCustomerFields").classList.toggle("hidden", !isNew);
}
function toggleModuleFields() {
    const type = document.getElementById("license_type").value;
    document.getElementById("moduleFields").classList.toggle("hidden", type !== "custom");
}
document.addEventListener("DOMContentLoaded", function () {
    toggleNewCustomerFields();
    toggleModuleFields();
});
</script>
{% endblock %}