{% extends "base.html" %}
{% block title %}Standorte{% endblock %}
{% block heading %}🏢 Standorte / Filialen{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Einstellungen / Standorte</p>{% endblock %}

{% block topbar_actions %}
  <button class="btn btn-primary btn-sm"
          onclick="document.getElementById('new-loc').classList.toggle('hidden')">+ Standort</button>
{% endblock %}

{% block content %}
<p style="font-size:13px;color:var(--card-text-muted);margin-bottom:14px;">
  Mehrere Standorte / Filialen unter einem System. Belegnummern können pro Standort
  ein eigenes Präfix bekommen (z.B. <code>B-2026-0042</code> für Berlin).
  Konsolidierte Reports laufen über alle Standorte gleichzeitig.
</p>

<div id="new-loc" class="card hidden" style="margin-bottom:14px;">
  <div class="card-header"><h3>Neuer Standort</h3></div>
  <form method="post" action="/company-locations/save" class="card-body" style="padding:18px;">
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;">
      <div><label class="text-[10px] uppercase font-semibold text-neutral-500">Code *</label>
        <input class="input mt-1 w-full" name="code" required placeholder="z.B. BERLIN, MUC"></div>
      <div><label class="text-[10px] uppercase font-semibold text-neutral-500">Name *</label>
        <input class="input mt-1 w-full" name="name" required placeholder="Werk Berlin"></div>
      <div><label class="text-[10px] uppercase font-semibold text-neutral-500">Beleg-Präfix</label>
        <input class="input mt-1 w-full" name="number_prefix" placeholder="B-"></div>
      <div><label class="text-[10px] uppercase font-semibold text-neutral-500">Land</label>
        <input class="input mt-1 w-full" name="country_iso" value="DE" maxlength="2"></div>
      <div><label class="text-[10px] uppercase font-semibold text-neutral-500">PLZ</label>
        <input class="input mt-1 w-full" name="postcode"></div>
      <div><label class="text-[10px] uppercase font-semibold text-neutral-500">Stadt</label>
        <input class="input mt-1 w-full" name="city"></div>
      <div style="grid-column:span 2;"><label class="text-[10px] uppercase font-semibold text-neutral-500">Adresse</label>
        <input class="input mt-1 w-full" name="address"></div>
      <div><label class="text-[10px] uppercase font-semibold text-neutral-500">Telefon</label>
        <input class="input mt-1 w-full" name="phone"></div>
      <div><label class="text-[10px] uppercase font-semibold text-neutral-500">E-Mail</label>
        <input class="input mt-1 w-full" name="email" type="email"></div>
      <div><label class="text-[10px] uppercase font-semibold text-neutral-500">IBAN</label>
        <input class="input mt-1 w-full" name="iban"></div>
      <div><label class="text-[10px] uppercase font-semibold text-neutral-500">BIC</label>
        <input class="input mt-1 w-full" name="bic"></div>
    </div>
    <div style="margin-top:14px;display:flex;gap:8px;">
      <label><input type="checkbox" name="is_default" value="1"> Als Standard-Standort</label>
      <label style="margin-left:auto;"><input type="checkbox" name="active" value="1" checked> Aktiv</label>
    </div>
    <div style="margin-top:12px;display:flex;gap:8px;">
      <button class="btn btn-primary" type="submit">Anlegen</button>
      <button class="btn btn-secondary" type="button"
              onclick="document.getElementById('new-loc').classList.add('hidden')">Abbrechen</button>
    </div>
  </form>
</div>

<div class="card">
  <table class="data-table">
    <thead>
      <tr>
        <th>Code</th><th>Name</th><th>Adresse</th><th>Beleg-Präfix</th>
        <th>Telefon / Mail</th><th>Default</th><th>Aktiv</th>
      </tr>
    </thead>
    <tbody>
      {% for l in locations %}
      <tr>
        <td><strong>{{ l.code }}</strong></td>
        <td>{{ l.name }}</td>
        <td class="text-xs">
          {% if l.address %}{{ l.address }}, {% endif %}
          {{ l.postcode or '' }} {{ l.city or '' }} {{ l.country_iso or '' }}
        </td>
        <td><code>{{ l.number_prefix or '—' }}</code></td>
        <td class="text-xs">
          {% if l.phone %}{{ l.phone }}<br>{% endif %}
          {% if l.email %}{{ l.email }}{% endif %}
        </td>
        <td>{% if l.is_default %}<span class="badge badge-blue">Default</span>{% endif %}</td>
        <td>{% if l.active %}✓{% else %}—{% endif %}</td>
      </tr>
      {% else %}
      <tr><td colspan="7" style="text-align:center;padding:24px;color:var(--card-text-muted);">Keine Standorte angelegt.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<style>.hidden{display:none;}</style>
{% endblock %}