{% extends 'base.html' %}

{% block title %}Personenzahl – {{ event.name }}{% endblock %}

{% block content %}
<h1 class="h3 mb-3">
    {% if people_count %}Personenzahl bearbeiten{% else %}Neue Personenzahl erfassen{% endif %}
    <small class="text-muted d-block">für {{ event.name }}</small>
</h1>

<a href="{{ url_for('events.list_people_counts', event_id=event.id) }}" class="btn btn-secondary btn-sm mb-3">Zurück zur Übersicht</a>

<form method="post" class="people-count-form" autocomplete="off">
    <div class="card mb-3">
        <div class="card-body">
            <div class="mb-3">
                <label for="day" class="form-label">Tag (optional)</label>
                <select class="form-select" id="day" name="day">
                    <option value="">– kein Tag –</option>
                    <option value="Freitag" {% if people_count and people_count.day == 'Freitag' %}selected{% endif %}>Freitag</option>
                    <option value="Samstag" {% if people_count and people_count.day == 'Samstag' %}selected{% endif %}>Samstag</option>
                </select>
            </div>

            <div class="mb-3">
                <label for="time" class="form-label">Zeit</label>
                <input type="time" class="form-control" id="time" name="time" required
                       value="{% if people_count and people_count.time %}{{ people_count.time.strftime('%H:%M') }}{% endif %}">
                <div class="form-text">Format HH:MM, z.B. 19:00 oder 23:30. Tab navigiert zum nächsten Feld.</div>
            </div>

            <div class="mb-3">
                <label for="place" class="form-label">Ort</label>
                <input type="text" class="form-control" id="place" name="place" required
                       value="{% if people_count %}{{ people_count.place }}{% endif %}">
            </div>

            <div class="mb-3">
                <label for="count" class="form-label">Anzahl Personen</label>
                <input type="number" min="0" class="form-control" id="count" name="count" required
                       value="{% if people_count %}{{ people_count.count }}{% endif %}">
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-body">
            <label class="form-label">Zugehöriger Talk (optional)</label>
            <div class="form-text mb-2">Tippen zum Filtern. Wenn nur noch ein Talk übrig bleibt, wird er automatisch ausgewählt.</div>
            
            <input type="hidden" id="talk_id" name="talk_id" value="{% if people_count and people_count.talk_id %}{{ people_count.talk_id }}{% elif selected_talk_id %}{{ selected_talk_id }}{% endif %}">
            <input type="text" id="talkFilter" class="form-control mb-2" placeholder="Talk suchen...">
            
            <div class="border rounded p-2" style="max-height: 240px; overflow-y: auto;" id="talkList">
                <button type="button" class="btn btn-sm w-100 text-start mb-1 talk-item btn-outline-secondary" data-talk-id="">
                    – kein spezifischer Talk –
                </button>
                {% for talk in talks %}
                <button type="button"
                        class="btn btn-sm w-100 text-start mb-1 talk-item{% if (people_count and people_count.talk_id == talk.id) or (not people_count and selected_talk_id and selected_talk_id == talk.id) %} btn-primary active{% else %} btn-outline-secondary{% endif %}"
                        data-talk-id="{{ talk.id }}">
                    {{ talk.title }}
                </button>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="d-flex gap-2">
        <button type="submit" name="action" value="save" class="btn btn-primary">Speichern</button>
        <button type="submit" name="action" value="save_next" class="btn btn-secondary" id="saveNextBtn">Speichern &amp; Nächste</button>
        <a href="{{ url_for('events.list_people_counts', event_id=event.id) }}" class="btn btn-outline-secondary">Abbrechen</a>
        <span class="ms-2 align-self-center text-muted small">Tastatur: Shift+Enter (oder Strg+Shift+S) = Speichern &amp; Nächste</span>
    </div>
</form>
{% endblock %}

{% block extra_js %}
<script>
(function() {
  const form = document.querySelector('.people-count-form');
  if (!form) return;

  const talkIdInput = document.getElementById('talk_id');
  const talkFilterInput = document.getElementById('talkFilter');
  const talkList = document.getElementById('talkList');
  const dayInput = document.getElementById('day');

  // Auto-focus the day input on page load
  if (dayInput) {
    dayInput.focus();
  }

  function selectTalkByElement(el) {
    if (!el || !talkIdInput) return;
    const id = el.getAttribute('data-talk-id');

    // Clear previous selection
    talkList.querySelectorAll('.talk-item').forEach(btn => {
      btn.classList.remove('btn-primary', 'active');
      btn.classList.add('btn-outline-secondary');
    });

    el.classList.remove('btn-outline-secondary');
    el.classList.add('btn-primary', 'active');
    talkIdInput.value = id;
  }

  if (talkList) {
    talkList.addEventListener('click', function(e) {
      const btn = e.target.closest('.talk-item');
      if (!btn) return;
      selectTalkByElement(btn);
    });
  }

  function applyTalkFilter(term) {
    if (!talkList) return;
    const lower = term.toLowerCase();
    let visibleCount = 0;
    let lastVisible = null;

    talkList.querySelectorAll('.talk-item').forEach(btn => {
      const text = btn.textContent.toLowerCase();
      const show = text.includes(lower);
      btn.style.display = show ? '' : 'none';
      if (show) {
        visibleCount += 1;
        lastVisible = btn;
      }
    });

    // Auto-select if only one visible
    if (visibleCount === 1 && lastVisible) {
      selectTalkByElement(lastVisible);
    }
  }

  if (talkFilterInput && talkList) {
    talkFilterInput.addEventListener('input', function() {
      applyTalkFilter(this.value || '');
    });
  }

  // Keyboard shortcuts for save & next
  document.addEventListener('keydown', function(e) {
    // Shift+Enter = Save & Next
    if (e.key === 'Enter' && e.shiftKey) {
      e.preventDefault();
      const btn = document.getElementById('saveNextBtn');
      if (btn) btn.click();
      return;
    }

    // Ctrl+Shift+S (or Cmd+Shift+S on Mac) = Save & Next
    if (e.key && e.key.toLowerCase() === 's' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
      e.preventDefault();
      const btn = document.getElementById('saveNextBtn');
      if (btn) btn.click();
      return;
    }
  });
})();
</script>
{% endblock %}