{% extends "base.html" %}
{% set active = 'kader' %}
{% block title %}Kader-Editor{% endblock %}
{% block content %}

<style>
  .team-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
  .team-item { display: flex; align-items: center; justify-content: space-between;
               padding: 9px 12px; background: var(--bg); border: 1px solid var(--border);
               border-radius: 6px; text-decoration: none; color: var(--text);
               transition: border-color .15s; }
  .team-item:hover { border-color: var(--accent); }
  .team-item.active-team { border-color: var(--accent); background: rgba(56,139,253,.08); }
  .team-meta { font-size: 12px; color: var(--muted); }
  .slot-badge { font-size: 11px; padding: 2px 7px; border-radius: 10px;
                background: rgba(56,139,253,.15); color: var(--accent); }
  .slot-badge.full { background: rgba(63,185,80,.15); color: var(--success); }

  /* Kader-Tabelle */
  .kader-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .kader-table th { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border);
                    color: var(--muted); font-size: 11px; text-transform: uppercase;
                    letter-spacing: .05em; white-space: nowrap; }
  .kader-table td { padding: 5px 4px; border-bottom: 1px solid rgba(48,54,61,.4); vertical-align: middle; }
  .kader-table tr:last-child td { border-bottom: none; }
  .kader-table input[type=text], .kader-table input[type=number] {
    width: 100%; padding: 5px 7px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text); font-size: 12px; font-family: inherit; }
  .kader-table input:focus, .kader-table select:focus {
    outline: none; border-color: var(--accent); }
  .kader-table select {
    width: 100%; padding: 5px 7px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text); font-size: 12px; font-family: inherit; }
  .kader-table .del-btn { background: none; border: none; cursor: pointer;
                          color: var(--muted); font-size: 16px; padding: 2px 6px;
                          border-radius: 4px; transition: color .15s; }
  .kader-table .del-btn:hover { color: var(--danger); }

  /* Layout: links Team-Liste, rechts Editor */
  .kader-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
  @media (max-width: 900px) { .kader-layout { grid-template-columns: 1fr; } }

  .csv-upload { margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .csv-upload input[type=file] { font-size: 12px; color: var(--muted); }
</style>

<h1>Kader-Editor</h1>

<div class="kader-layout">

  <!-- ── Team-Liste ───────────────────────────────────────────────────── -->
  <div>
    <div class="card" style="padding:14px;">
      <div class="card-title">Teams</div>
      <div class="team-list">
        {% for t in teams %}
        <a href="{{ url_for('admin.kader_team', team_id=t.team_id) }}"
           class="team-item {% if team and team.team_id == t.team_id %}active-team{% endif %}">
          <span style="font-weight:500;">{{ t.name }}</span>
          <span class="slot-badge {% if t.anzahl > 0 %}full{% endif %}">
            {{ t.anzahl }}&thinsp;/&thinsp;{{ t.slots }}
          </span>
        </a>
        {% endfor %}
      </div>
    </div>
  </div>

  <!-- ── Editor ───────────────────────────────────────────────────────── -->
  {% if team %}
  <div>
    <div class="card">
      <div class="card-title">{{ team.name }}</div>

      <!-- Rollen-Slots laut Konfiguration -->
      {% if team.rollen %}
      <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;">
        {% for r in team.rollen %}
        <span class="badge badge-info">{{ r.rolle }}&thinsp;&times;&thinsp;{{ r.anzahl }}</span>
        {% endfor %}
      </div>
      {% endif %}

      <!-- Spieler-Formular -->
      {% set spieler_liste = preview_spieler if preview_spieler is defined else team.spieler %}
      <form method="post" action="{{ url_for('admin.kader_speichern', team_id=team.team_id) }}"
            id="kaderForm">
        <input type="hidden" name="count" id="countField" value="{{ spieler_liste|length }}">

        <div style="overflow-x:auto;">
          <table class="kader-table">
            <thead>
              <tr>
                <th style="width:32px;">#</th>
                <th style="min-width:130px;">Rolle</th>
                <th style="min-width:180px;">Name</th>
                <th style="min-width:120px;">Kurzname</th>
                <th style="min-width:60px;">Nr.</th>
                <th style="min-width:120px;">Geburtstag</th>
                <th style="width:36px;"></th>
              </tr>
            </thead>
            <tbody id="spielerBody">
              {% for s in spieler_liste %}
              <tr data-idx="{{ loop.index0 }}">
                <td style="color:var(--muted);text-align:center;font-size:12px;">{{ loop.index }}</td>
                <td>
                  <select name="rolle_{{ loop.index0 }}">
                    {% for r in rollen %}
                    <option value="{{ r }}" {% if s.rolle == r %}selected{% endif %}>{{ r }}</option>
                    {% endfor %}
                  </select>
                </td>
                <td><input type="text" name="name_{{ loop.index0 }}" value="{{ s.name }}" placeholder="Vorname Nachname" required></td>
                <td><input type="text" name="kurzname_{{ loop.index0 }}" value="{{ s.kurzname or '' }}" placeholder="Nachname"></td>
                <td><input type="number" name="rueckennummer_{{ loop.index0 }}" value="{{ s.rueckennummer or '' }}" min="1" max="99" placeholder="—"></td>
                <td><input type="text" name="geburtstag_{{ loop.index0 }}" value="{{ s.geburtstag or '' }}" placeholder="JJJJ-MM-TT" pattern="\d{4}-\d{2}-\d{2}"></td>
                <td><button type="button" class="del-btn" onclick="removeRow(this)" title="Zeile entfernen">&times;</button></td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <div class="btn-row">
          <button type="button" class="btn btn-secondary btn-sm" onclick="addRow()">+ Zeile hinzufügen</button>
          <button type="submit" class="btn btn-primary">Speichern</button>
          {% if spieler_liste %}
          <span style="color:var(--muted);font-size:12px;">{{ spieler_liste|length }} Einträge</span>
          {% endif %}
        </div>
      </form>
    </div>

    <!-- ── CSV-Upload ──────────────────────────────────────────────────── -->
    <div class="card">
      <div class="card-title">dfbnet CSV importieren</div>
      <p style="color:var(--muted);font-size:13px;margin-bottom:12px;">
        CSV-Export aus dfbnet hochladen. Die Spieler werden mit Rolle &bdquo;Spieler&ldquo; in den Editor geladen &mdash;
        Daten prüfen und speichern.
      </p>
      <form method="post"
            action="{{ url_for('admin.kader_csv', team_id=team.team_id) }}"
            enctype="multipart/form-data">
        <div class="csv-upload">
          <input type="file" name="csv_datei" accept=".csv,.CSV">
          <button type="submit" class="btn btn-secondary btn-sm">CSV einlesen</button>
        </div>
        <p class="form-hint" style="margin-top:8px;">
          Erwartet: Semikolon-getrennt, Spalten Nachname&thinsp;;&thinsp;Vorname&thinsp;;&thinsp;Geb.&thinsp;;&thinsp;…
          (dfbnet-Standard-Export, Latin-1)
        </p>
      </form>
    </div>
  </div>
  {% else %}
  <div class="card" style="display:flex;align-items:center;justify-content:center;
                            min-height:180px;color:var(--muted);">
    <span>Team aus der Liste auswählen</span>
  </div>
  {% endif %}

</div>

<script>
  const ROLLEN = {{ rollen | tojson if rollen is defined else '[]' }};

  function updateCount() {
    const rows = document.querySelectorAll('#spielerBody tr');
    document.getElementById('countField').value = rows.length;
    // Zeilennummern aktualisieren
    rows.forEach((row, i) => {
      row.querySelector('td:first-child').textContent = i + 1;
      // Input-Namen umnummerieren
      row.querySelectorAll('input, select').forEach(el => {
        el.name = el.name.replace(/_\d+$/, `_${i}`);
      });
    });
  }

  function addRow() {
    const body  = document.getElementById('spielerBody');
    const idx   = body.querySelectorAll('tr').length;
    const opts  = ROLLEN.map(r => `<option value="${r}">${r}</option>`).join('');
    const tr    = document.createElement('tr');
    tr.innerHTML = `
      <td style="color:var(--muted);text-align:center;font-size:12px;">${idx + 1}</td>
      <td><select name="rolle_${idx}">${opts}</select></td>
      <td><input type="text"   name="name_${idx}"          placeholder="Vorname Nachname" required></td>
      <td><input type="text"   name="kurzname_${idx}"       placeholder="Nachname"></td>
      <td><input type="number" name="rueckennummer_${idx}"  min="1" max="99" placeholder="—"></td>
      <td><input type="text"   name="geburtstag_${idx}"     placeholder="JJJJ-MM-TT" pattern="\\d{4}-\\d{2}-\\d{2}"></td>
      <td><button type="button" class="del-btn" onclick="removeRow(this)" title="Zeile entfernen">&times;</button></td>`;
    body.appendChild(tr);
    updateCount();
    tr.querySelector('input[type=text]').focus();
  }

  function removeRow(btn) {
    btn.closest('tr').remove();
    updateCount();
  }
</script>

{% endblock %}