{% extends "base.html" %}

{% block title %}Edit NeetPrep Questions{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="card bg-dark text-white">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h2>Edit NeetPrep Questions</h2>
            <a href="/neetprep" class="btn btn-outline-light">Back to NeetPrep Home</a>
        </div>
        <div class="card-body">
            <!-- Filter Form -->
            <div class="row mb-3">
                <div class="col-md-6">
                    <input type="text" id="search-input" class="form-control bg-dark text-white" placeholder="Search questions...">
                </div>
                <div class="col-md-4">
                    <select id="topic-filter" class="form-select bg-dark text-white">
                        <option value="all">All Topics</option>
                        {% for topic in topics %}
                        <option value="{{ topic }}">{{ topic }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <!-- Questions Table -->
            <div class="table-responsive">
                <table class="table table-dark table-hover">
                    <thead>
                        <tr>
                            <th>Question Text</th>
                            <th>Topic</th>
                            <th>Subject</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="questions-table-body">
                        {% for q in questions %}
                        <tr data-topic="{{ q.topic }}">
                            <td>{{ q.question_text_plain }}</td>
                            <td class="topic-cell">{{ q.topic }}</td>
                            <td class="subject-cell">{{ q.subject }}</td>
                            <td>
                                <button class="btn btn-sm btn-primary edit-btn" 
                                        data-id="{{ q.id }}" 
                                        data-topic="{{ q.topic }}" 
                                        data-subject="{{ q.subject }}" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#editModal">
                                    Edit
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content bg-dark text-white">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Edit Question Metadata</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="edit-form">
                    <input type="hidden" id="edit-question-id">
                    <div class="mb-3">
                        <label for="edit-topic" class="form-label">Topic</label>
                        <input type="text" class="form-control bg-secondary text-white" id="edit-topic" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-subject" class="form-label">Subject</label>
                        <input type="text" class="form-control bg-secondary text-white" id="edit-subject" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="save-changes-btn">Save changes</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const editModal = new bootstrap.Modal(document.getElementById('editModal'));
    const editQuestionId = document.getElementById('edit-question-id');
    const editTopic = document.getElementById('edit-topic');
    const editSubject = document.getElementById('edit-subject');

    document.querySelectorAll('.edit-btn').forEach(button => {
        button.addEventListener('click', () => {
            editQuestionId.value = button.dataset.id;
            editTopic.value = button.dataset.topic;
            editSubject.value = button.dataset.subject;
        });
    });

    document.getElementById('save-changes-btn').addEventListener('click', async () => {
        const id = editQuestionId.value;
        const topic = editTopic.value;
        const subject = editSubject.value;

        try {
            const response = await fetch(`/neetprep/update_question/${id}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ topic: topic, subject: subject })
            });
            const result = await response.json();

            if (result.success) {
                // Update the table row
                const row = document.querySelector(`button[data-id='${id}']`).closest('tr');
                row.querySelector('.topic-cell').textContent = topic;
                row.querySelector('.subject-cell').textContent = subject;
                // Update the button's data attributes as well
                const editBtn = row.querySelector('.edit-btn');
                editBtn.dataset.topic = topic;
                editBtn.dataset.subject = subject;

                editModal.hide();
            } else {
                alert(`Error: ${result.error}`);
            }
        } catch (error) {
            alert(`Request failed: ${error}`);
        }
    });

    // --- Filtering Logic ---
    const searchInput = document.getElementById('search-input');
    const topicFilter = document.getElementById('topic-filter');
    const tableBody = document.getElementById('questions-table-body');
    const rows = tableBody.getElementsByTagName('tr');

    function filterTable() {
        const searchText = searchInput.value.toLowerCase();
        const selectedTopic = topicFilter.value;

        for (let i = 0; i < rows.length; i++) {
            const row = rows[i];
            const topic = row.dataset.topic;
            const text = row.textContent || row.innerText;
            
            const topicMatch = (selectedTopic === 'all' || topic === selectedTopic);
            const searchMatch = (text.toLowerCase().indexOf(searchText) > -1);

            if (topicMatch && searchMatch) {
                row.style.display = "";
            } else {
                row.style.display = "none";
            }
        }
    }

    searchInput.addEventListener('keyup', filterTable);
    topicFilter.addEventListener('change', filterTable);
});
</script>
{% endblock %}