{% extends "base.html" %}
{% block content %}
<div class="row justify-content-center">
  <div class="col-md-6">
    <div class="card shadow border-0">
      <div class="card-header bg-success text-white">
        <h4><i class="bi bi-file-text"></i> View Whole Paper</h4>
      </div>
      <div class="card-body">
        <form method="get" action="{{ url_for('question_paper') }}" id="paper-form">
          <div class="mb-3" style="position: relative;">
            <label for="date" class="form-label">Date (YYYY-MM-DD)</label>
            <input type="text" class="form-control" id="date" name="date" value="{{ date or '' }}" placeholder="e.g. 2081-01-25" autocomplete="off">
            <div id="suggestions-date" class="list-group" style="position: absolute; z-index: 1000; width: 100%; max-height: 200px; overflow-y: auto; display: none;"></div>
          </div>
          <div class="mb-3" style="position: relative;">
            <label for="institution" class="form-label">Institution</label>
            <input type="text" class="form-control" id="institution" name="institution" value="{{ institution or '' }}" placeholder="e.g. NRB" autocomplete="off">
            <div id="suggestions-institution" class="list-group" style="position: absolute; z-index: 1000; width: 100%; max-height: 200px; overflow-y: auto; display: none;"></div>
          </div>
          <div class="mb-3" style="position: relative;">
            <label for="level" class="form-label">Level</label>
            <input type="text" class="form-control" id="level" name="level" value="{{ level or '' }}" placeholder="e.g. Officer Level" autocomplete="off">
            <div id="suggestions-level" class="list-group" style="position: absolute; z-index: 1000; width: 100%; max-height: 200px; overflow-y: auto; display: none;"></div>
          </div>
          <div class="mb-3" style="position: relative;">
            <label for="paper" class="form-label">Paper (optional)</label>
            <input type="text" class="form-control" id="paper" name="paper" value="{{ paper or '' }}" placeholder="e.g. First Paper" autocomplete="off">
            <div id="suggestions-paper" class="list-group" style="position: absolute; z-index: 1000; width: 100%; max-height: 200px; overflow-y: auto; display: none;"></div>
          </div>
          <button type="submit" class="btn btn-success w-100"><i class="bi bi-search"></i> Show Paper</button>
        </form>
        <p class="mt-3 text-muted small">At least one field is required.</p>
      </div>
    </div>
  </div>
</div>

<script>
  function setupAutocomplete(inputId, suggestionsId, fieldName) {
    const input = document.getElementById(inputId);
    const suggestionsBox = document.getElementById(suggestionsId);
    if (!input || !suggestionsBox) return;

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

        fetch('/question/suggestions?q=' + encodeURIComponent(query) + '&field=' + encodeURIComponent(fieldName))
            .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() {
                        input.value = this.textContent;
                        suggestionsBox.style.display = 'none';
                    });
                    suggestionsBox.appendChild(div);
                });
                suggestionsBox.style.display = 'block';
            });
    });

    document.addEventListener('click', function(e) {
        if (!suggestionsBox.contains(e.target) && e.target !== input) {
            suggestionsBox.style.display = 'none';
        }
    });
}

// Setup for each field with the correct column name
setupAutocomplete('date', 'suggestions-date', 'question_date');
setupAutocomplete('institution', 'suggestions-institution', 'institution');
setupAutocomplete('level', 'suggestions-level', 'level');
setupAutocomplete('paper', 'suggestions-paper', 'paper');
</script>
{% endblock %}