{% extends "admin/onboarding/base.html" %}
{% block title %}Verein{% endblock %}

{% block content %}
<h1>Dein Verein</h1>
<p class="lead">
  Gib die Club-ID deines Vereins von fussball.de ein und trage die
  Vereinsstammdaten ein. Diese Daten erscheinen später in der App.
</p>

{% if error %}
  <div class="alert alert-error">{{ error }}</div>
{% endif %}

<form method="post">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

  <h2 style="font-size:15px;margin:0 0 12px;">fussball.de</h2>

  <label for="club_id">Club-ID <span style="color:var(--danger)">*</span></label>
  <p style="font-size:12px;color:var(--muted);margin:-8px 0 6px;">
    Zu finden in der URL deiner Vereinsseite auf fussball.de —
    z.&nbsp;B. <code style="font-size:11px">.../id/00ES8GN9KS0000O</code>
  </p>
  <div style="display:flex; gap:8px; align-items:center;">
    <input type="text" id="club_id" name="club_id"
           value="{{ club_id }}" placeholder="00ES8GN9KS0000O"
           style="flex:1" autocomplete="off" spellcheck="false">
    <button type="button" class="btn btn-ghost" onclick="checkClub()" id="check-btn">
      Prüfen
    </button>
  </div>
  <div id="club-result" style="margin-top:10px; display:none;"></div>

  <label for="heim_keywords" style="margin-top:20px;">
    Heim-Standorte (kommagetrennt, optional)
  </label>
  <input type="text" id="heim_keywords" name="heim_keywords"
         value="{{ heim_keywords }}"
         placeholder="Musterstadt,Sportpark West">
  <p style="font-size:12px;color:var(--muted);margin-top:4px;">
    Begriffe aus Spielortadressen, die als Heimspiel erkannt werden sollen.
  </p>

  <hr style="margin:28px 0;border:none;border-top:1px solid var(--border);">
  <h2 style="font-size:15px;margin:0 0 16px;">Vereinsstammdaten</h2>

  <label for="verein_name">Vereinsname <span style="color:var(--danger)">*</span></label>
  <input type="text" id="verein_name" name="verein_name"
         value="{{ verein_name }}" placeholder="TSV Musterstadt 1912 e.V."
         autocomplete="off">

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;">
    <div>
      <label for="verein_kurz">Kurzname / Kürzel</label>
      <input type="text" id="verein_kurz" name="verein_kurz"
             value="{{ verein_kurz }}" placeholder="TSV"
             autocomplete="off">
    </div>
    <div>
      <label for="verein_gruendungsjahr">Gründungsjahr</label>
      <input type="number" id="verein_gruendungsjahr" name="verein_gruendungsjahr"
             value="{{ verein_gruendungsjahr }}" placeholder="1912"
             min="1800" max="2099">
    </div>
  </div>

  <label for="verein_adresse" style="margin-top:16px;">Adresse</label>
  <input type="text" id="verein_adresse" name="verein_adresse"
         value="{{ verein_adresse }}" placeholder="Sportplatzweg 1, 12345 Musterstadt"
         autocomplete="off">

  <label for="verein_website" style="margin-top:16px;">Website</label>
  <input type="url" id="verein_website" name="verein_website"
         value="{{ verein_website }}" placeholder="https://tsv-musterstadt.de"
         autocomplete="off">

  <label for="verein_base_color" style="margin-top:16px;">Vereinsfarbe</label>
  <div style="display:flex;gap:10px;align-items:center;">
    <input type="color" id="verein_base_color" name="verein_base_color"
           value="{{ verein_base_color }}"
           style="width:48px;height:36px;padding:2px;cursor:pointer;border:1px solid var(--border);border-radius:6px;">
    <span id="color-label" style="font-size:13px;color:var(--muted);">{{ verein_base_color }}</span>
  </div>

  <div class="btn-row" style="margin-top:28px;">
    <a href="{{ url_for('onboarding.step_2') }}" class="btn btn-ghost">&larr; Zurück</a>
    <button type="submit" class="btn btn-primary">Weiter &rarr;</button>
  </div>
</form>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('verein_base_color').addEventListener('input', function() {
  document.getElementById('color-label').textContent = this.value;
});

async function checkClub() {
  const clubId = document.getElementById('club_id').value.trim();
  const result = document.getElementById('club-result');
  const btn    = document.getElementById('check-btn');

  if (!clubId) {
    result.innerHTML = '<div class="alert alert-warn">Bitte Club-ID eingeben.</div>';
    result.style.display = 'block';
    return;
  }

  btn.disabled = true;
  btn.textContent = '…';

  try {
    const resp = await fetch('/onboarding/ajax/verein_check', {
      method: 'POST',
      headers: {'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('meta[name=csrf-token]')?.content || ''},
      body: JSON.stringify({ club_id: clubId }),
    });
    const data = await resp.json();
    if (data.ok) {
      result.innerHTML = '<div class="alert alert-success">&#10003; ' + data.msg + '</div>';
    } else {
      result.innerHTML = '<div class="alert alert-error">&#10008; ' + data.error + '</div>';
    }
  } catch (e) {
    result.innerHTML = '<div class="alert alert-error">Verbindungsfehler: ' + e.message + '</div>';
  }

  result.style.display = 'block';
  btn.disabled = false;
  btn.textContent = 'Prüfen';
}
</script>
{% endblock %}