{% extends "base.html" %}
{% block content %}
<h2>📚 Question Bank</h2>

<!-- Search and filter -->
<div class="row mb-4">
  <div class="col-md-8">
    <form method="get" class="row g-3" id="search-form">
      <div class="col-auto" style="position: relative;">
        <input type="text" id="search-input" name="search" value="{{ search }}"
               class="form-control" placeholder="Search all fields..."
               autocomplete="off">
        <!-- Suggestions dropdown -->
        <div id="suggestions" class="list-group" style="position: absolute; z-index: 1000; width: 100%; max-height: 200px; overflow-y: auto; display: none;">
        </div>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i> Search</button>
      </div>
      <div class="col-auto">
        <a href="{{ url_for('question_list') }}" class="btn btn-secondary">Clear</a>
      </div>
    </form>
  </div>
  <div class="col-md-4 text-end">
    <a href="{{ url_for('question_paper') }}" class="btn btn-outline-success"><i class="bi bi-file-text"></i> View Whole Paper</a>
    <a href="{{ url_for('browse_chapters') }}" class="btn btn-outline-info">
      <i class="bi bi-book"></i> Browse by Chapter
    </a>
  </div>
</div>

<!-- Table (unchanged) -->
<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th><a href="{{ url_for('question_list', sort='question_date', order='asc') }}">Date</a></th>
        <th><a href="{{ url_for('question_list', sort='institution', order='asc') }}">Institution</a></th>
        <th><a href="{{ url_for('question_list', sort='level', order='asc') }}">Level</a></th>
        <th><a href="{{ url_for('question_list', sort='subject', order='asc') }}">Subject</a></th>
        <th><a href="{{ url_for('question_list', sort='paper', order='asc') }}">Paper</a></th>
        <th>Group</th>
        <th>Q.No.</th>
        <th>Marks</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for q in questions %}
      <tr>
        <td>{{ q.question_date }}</td>
        <td>{{ q.institution }}</td>
        <td>{{ q.level }}</td>
        <td>{{ q.subject }}</td>
        <td>{{ q.paper or '' }}</td>
        <td>{{ q.group or '' }}</td>
        <td>{{ q.question_number }}</td>
        <td>{{ q.marks if q.marks else '' }}</td>
        <td>
          <a href="{{ url_for('question_detail', id=q.id) }}" class="btn btn-sm btn-info"><i class="bi bi-eye"></i></a>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="9" class="text-center text-muted">No questions found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- JavaScript for autocomplete -->
<script>
  const searchInput = document.getElementById('search-input');
  const suggestionsBox = document.getElementById('suggestions');

  searchInput.addEventListener('input', function() {
    const query = this.value.trim();
    if (query.length < 2) {
      suggestionsBox.style.display = 'none';
      return;
    }

    fetch('/question/suggestions?q=' + encodeURIComponent(query))
      .then(response => response.json())
      .then(data => {
        suggestionsBox.innerHTML = '';
        if (data.length === 0) {
          suggestionsBox.style.display = 'none';
          return;
        }
        data.forEach(item => {
          const div = document.createElement('div');
          div.className = 'list-group-item list-group-item-action';
          div.textContent = item;
          div.style.cursor = 'pointer';
          div.addEventListener('click', function() {
            searchInput.value = this.textContent;
            suggestionsBox.style.display = 'none';
            document.getElementById('search-form').submit();
          });
          suggestionsBox.appendChild(div);
        });
        suggestionsBox.style.display = 'block';
      });
  });

  // Hide suggestions when clicking outside
  document.addEventListener('click', function(e) {
    if (!suggestionsBox.contains(e.target) && e.target !== searchInput) {
      suggestionsBox.style.display = 'none';
    }
  });
</script>
{% endblock %}