{% extends 'base.html' %}
{% block content %}
<div class="container py-3">
  <h3 class="mb-3">Manage Feedback Questions</h3>

  <form class="row g-2 mb-4" method="post" action="{{ url_for('feedback_admin.create_question') }}">
    <div class="col-md-6">
      <input name="question_text" class="form-control" placeholder="New question..." required>
    </div>
    <div class="col-md-3">
      <select name="qtype" class="form-select">
        <option value="text">Text</option>
        <option value="single">Single-choice</option>
        <option value="multi">Multi-choice</option>
      </select>
    </div>
    <div class="col-md-3">
      <button class="btn btn-primary w-100">Add Question</button>
    </div>
  </form>

  {% if questions %}
  <div class="table-responsive">
    <table class="table table-hover align-middle">
      <thead class="table-light">
        <tr>
          <th>Question</th>
          <th>Type</th>
          <th>Active</th>
          <th>Options (for MCQ)</th>
          <th class="text-end">Actions</th>
        </tr>
      </thead>
      <tbody>
      {% for q in questions %}
        <tr>
          <td style="min-width: 320px;">
            <form method="post" action="{{ url_for('feedback_admin.update_question', q_id=q.id) }}" class="d-flex gap-2">
              <input name="question_text" class="form-control" value="{{ q.question_text }}">
              <select name="qtype" class="form-select" style="max-width: 160px;">
                <option value="text"  {{ 'selected' if q.qtype=='text'  else '' }}>Text</option>
                <option value="single"{{ 'selected' if q.qtype=='single' else '' }}>Single</option>
                <option value="multi" {{ 'selected' if q.qtype=='multi'  else '' }}>Multi</option>
              </select>
              <div class="form-check d-flex align-items-center">
                <input class="form-check-input" type="checkbox" name="is_active" value="1" {{ 'checked' if q.is_active else '' }}>
              </div>
              <button class="btn btn-sm btn-success">Save</button>
            </form>
          </td>
          <td>{{ q.qtype|capitalize }}</td>
          <td>{{ 'Yes' if q.is_active else 'No' }}</td>
          <td>
            {% if q.qtype in ['single','multi'] %}
              <ul class="list-unstyled mb-2">
                {% for opt in q.options %}
                  <li class="d-flex align-items-center justify-content-between border rounded p-1 mb-1">
                    <span>{{ opt.label }} <small class="text-muted">({{ opt.value }})</small></span>
                    <form method="post" action="{{ url_for('feedback_admin.delete_option', opt_id=opt.id) }}">
                      <button class="btn btn-sm btn-outline-danger">Delete</button>
                    </form>
                  </li>
                {% endfor %}
              </ul>
              <form class="row g-2" method="post" action="{{ url_for('feedback_admin.add_option', q_id=q.id) }}">
                <div class="col-md-5"><input name="label" class="form-control" placeholder="Label" required></div>
                <div class="col-md-5"><input name="value" class="form-control" placeholder="Value (optional)"></div>
                <div class="col-md-2"><button class="btn btn-outline-primary w-100">Add</button></div>
              </form>
            {% else %}
              <em class="text-muted">N/A</em>
            {% endif %}
          </td>
          <td class="text-end">
            <form method="post" action="{{ url_for('feedback_admin.delete_question', q_id=q.id) }}" onsubmit="return confirm('Delete this question?')">
              <button class="btn btn-sm btn-outline-danger">Delete</button>
            </form>
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
    <div class="alert alert-info">No questions yet.</div>
  {% endif %}
</div>
{% endblock %}