{% extends 'base.html' %}

{% block title %}Event Feedback - {{ event.name }}{% endblock %}

{% block content %}
<h1 class="h3 mb-3">Event Feedback: {{ event.name }}</h1>

<form method="post" class="feedback-form" autocomplete="off">
    <input type="hidden" name="event_id" value="{{ event.id }}">

    <div class="mb-4 feedback-question" data-question-index="0">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label class="form-label fw-bold mb-0">Hat dir die NooK gefallen?</label>
                <div class="form-text">Tasten 1–4 wählen, Shift+↓ vor, Shift+↑ zurück, Enter bestätigt.</div>
            </div>
            <div class="col-md-8">
                <div class="d-flex flex-wrap gap-2" role="group" aria-label="Like scale">
                    {% for value, label in [(1, 'auf jeden Fall'), (2, 'eher ja'), (3, 'eher nein'), (4, 'auf keinen Fall')] %}
                    <div>
                        <input type="radio" class="btn-check" name="like_scale" id="like_{{ value }}" value="{{ value }}" autocomplete="off">
                        <label class="btn btn-outline-primary" for="like_{{ value }}">{{ value }} – {{ label }}</label>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="1">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label class="form-label fw-bold mb-0">Würdest du noch einmal wieder kommen?</label>
            </div>
            <div class="col-md-8">
                <div class="d-flex flex-wrap gap-2" role="group" aria-label="Return scale">
                    {% for value, label in [(1, 'auf jeden Fall'), (2, 'eher ja'), (3, 'eher nein'), (4, 'auf keinen Fall')] %}
                    <div>
                        <input type="radio" class="btn-check" name="return_scale" id="return_{{ value }}" value="{{ value }}" autocomplete="off">
                        <label class="btn btn-outline-primary" for="return_{{ value }}">{{ value }} – {{ label }}</label>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="2">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label class="form-label fw-bold mb-0">Würdest du dich gern an der nächsten NooK beteiligen (Vortrag o.ä.)?</label>
            </div>
            <div class="col-md-8">
                <div class="d-flex flex-wrap gap-2" role="group" aria-label="Participate scale">
                    {% for value, label in [(1, 'auf jeden Fall'), (2, 'eher ja'), (3, 'eher nein'), (4, 'auf keinen Fall')] %}
                    <div>
                        <input type="radio" class="btn-check" name="participate_scale" id="participate_{{ value }}" value="{{ value }}" autocomplete="off">
                        <label class="btn btn-outline-primary" for="participate_{{ value }}">{{ value }} – {{ label }}</label>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="3">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label class="form-label fw-bold mb-0">Wie hast du von der NooK gehört?</label>
            </div>
            <div class="col-md-8">
        <input type="text" class="form-control mb-2" id="howHeardFilter" placeholder="Filtern...">

        <div class="border rounded p-2" style="max-height: 240px; overflow-y: auto;" id="howHeardList">
            {% for option in how_heard_options %}
            <div class="form-check how-heard-item">
                <input class="form-check-input" type="checkbox" value="{{ option.id }}" id="how_{{ option.id }}" name="how_heard_ids">
                <label class="form-check-label" for="how_{{ option.id }}">{{ option.label }}</label>
            </div>
            {% endfor %}
        </div>

        <div class="mt-2 d-flex gap-2">
            <input type="text" class="form-control" id="newHowHeard" placeholder="Weitere Quelle hinzufügen...">
            <button type="button" class="btn btn-outline-secondary" id="addHowHeardBtn">Hinzufügen</button>
        </div>
        <div class="form-text">Neue Quelle wird gespeichert und für dieses Feedback direkt ausgewählt.</div>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="4">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label for="do_more" class="form-label fw-bold mb-0">Was sollten wir nochmal machen, mehr machen, wieder machen?</label>
            </div>
            <div class="col-md-8">
                <textarea class="form-control" id="do_more" name="do_more" rows="3">{{ (feedback.do_more if feedback else '') or '' }}</textarea>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="5">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label for="do_less" class="form-label fw-bold mb-0">Was sollen wir anders machen, weniger machen, nie wieder tun?</label>
            </div>
            <div class="col-md-8">
                <textarea class="form-control" id="do_less" name="do_less" rows="3">{{ (feedback.do_less if feedback else '') or '' }}</textarea>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="6">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label for="topics" class="form-label fw-bold mb-0">An welchen anderen Themen oder weiterführenden Vorträgen wärst du interessiert?</label>
            </div>
            <div class="col-md-8">
                <textarea class="form-control" id="topics" name="topics" rows="3">{{ (feedback.topics if feedback else '') or '' }}</textarea>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="7">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label for="free_text" class="form-label fw-bold mb-0">Freitext</label>
            </div>
            <div class="col-md-8">
                <textarea class="form-control" id="free_text" name="free_text" rows="3">{{ (feedback.free_text if feedback else '') or '' }}</textarea>
            </div>
        </div>
    </div>

    <div class="d-flex gap-2 mt-4">
        <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>
        <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('.feedback-form');
  if (!form) return;

  const questions = Array.from(document.querySelectorAll('.feedback-question'));
  let currentIndex = 0;

  function setActiveQuestion(index) {
    currentIndex = Math.max(0, Math.min(index, questions.length - 1));
    questions.forEach((q, i) => {
      q.classList.toggle('border', i === currentIndex);
      q.classList.toggle('border-primary', i === currentIndex);
      q.classList.toggle('rounded', i === currentIndex);
      if (i === currentIndex) {
        const firstInput = q.querySelector('input,select,textarea,button');
        if (firstInput) firstInput.focus();
      }
    });
  }

  function handleScaleKey(value) {
    const q = questions[currentIndex];
    if (!q) return;
    const name = q.querySelector('input[type="radio"]')?.name;
    if (!name) return;
    const radio = form.querySelector(`input[name="${name}"][value="${value}"]`);
    if (radio) {
      radio.checked = true;
    }
    setActiveQuestion(currentIndex + 1);
  }

  function skipQuestion() {
    setActiveQuestion(currentIndex + 1);
  }

  function previousQuestion() {
    setActiveQuestion(currentIndex - 1);
  }

  document.addEventListener('keydown', function(e) {
    // Check if user is typing in a text field
    const isTyping = e.target && (
      e.target.tagName === 'TEXTAREA' ||
      (e.target.tagName === 'INPUT' && e.target.type === 'text')
    );

    if (isTyping) {
      // Allow typing, but still intercept navigation shortcuts
      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;
      }
      if (e.key === 'Enter' && e.shiftKey) {
        e.preventDefault();
        const btn = document.getElementById('saveNextBtn');
        if (btn) btn.click();
        return;
      }
      if (e.key === 'ArrowDown' && e.shiftKey) {
        e.preventDefault();
        skipQuestion();
        return;
      }
      if (e.key === 'ArrowUp' && e.shiftKey) {
        e.preventDefault();
        previousQuestion();
        return;
      }
      // Allow normal typing (including 1-4 keys)
      return;
    }

    // Number shortcuts only work when NOT typing in text fields
    if (e.key === '1' || e.key === '2' || e.key === '3' || e.key === '4') {
      e.preventDefault();
      handleScaleKey(parseInt(e.key, 10));
      return;
    }

    if (e.key === 'ArrowDown' && e.shiftKey) {
      e.preventDefault();
      skipQuestion();
      return;
    }

    if (e.key === 'ArrowUp' && e.shiftKey) {
      e.preventDefault();
      previousQuestion();
      return;
    }

    if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
      // Confirm current question and go to next
      const q = questions[currentIndex];
      if (q) {
        const focused = document.activeElement;
        // For checkboxes, just move on
        if (focused && (focused.type === 'checkbox' || focused.type === 'radio')) {
          e.preventDefault();
          setActiveQuestion(currentIndex + 1);
          return;
        }
      }
    }

    if (e.key && e.key.toLowerCase() === 's' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
      e.preventDefault();
      const btn = document.getElementById('saveNextBtn');
      if (btn) btn.click();
    }

    if (e.key === 'Enter' && e.shiftKey) {
      e.preventDefault();
      const btn = document.getElementById('saveNextBtn');
      if (btn) btn.click();
    }
  });

  // Filter for how-heard list
  const filterInput = document.getElementById('howHeardFilter');
  const howHeardList = document.getElementById('howHeardList');
  if (filterInput && howHeardList) {
    filterInput.addEventListener('input', function() {
      const term = this.value.toLowerCase();
      howHeardList.querySelectorAll('.how-heard-item').forEach(function(item) {
        const label = item.querySelector('label');
        const text = label ? label.textContent.toLowerCase() : '';
        item.style.display = text.includes(term) ? '' : 'none';
      });
    });
  }

  // Add new how-heard option
  const newInput = document.getElementById('newHowHeard');
  const addBtn = document.getElementById('addHowHeardBtn');
  if (newInput && addBtn && howHeardList) {
    addBtn.addEventListener('click', function() {
      const label = newInput.value.trim();
      if (!label) return;

      // Create a temporary checkbox with a special name so backend can create it
      const wrapper = document.createElement('div');
      wrapper.className = 'form-check how-heard-item';
      const id = 'new_' + Date.now();
      wrapper.innerHTML = `
        <input class="form-check-input" type="checkbox" value="${label}" id="${id}" name="new_how_heard_labels">
        <label class="form-check-label" for="${id}">${label}</label>
      `;
      howHeardList.appendChild(wrapper);
      const checkbox = wrapper.querySelector('input');
      if (checkbox) checkbox.checked = true;
      newInput.value = '';
    });
  }

  setActiveQuestion(0);
})();
</script>
{% endblock %}