{% extends "layout.html" %}
{% block content %}

<div class="container main-panel content-wrapper">
    <div class="text-center">
        <h1 class="h4 mb-2 fw-normal">{{ 'Edit' if mode == 'edit' else 'Add' }} a Question</h1>
    </div>

    <div class="form-container">
        <p class="text-center">{{ 'Update the question below.' if mode == 'edit' else 'Add a new question in the form below.' }}</p>
        <form action="{{ url_for('routes.editFIB', id=fib.id) if mode == 'edit' else url_for('routes.addFIB') }}" method="POST" class="row g-2" id="questionform">
            <!-- Hidden ID for edit mode -->
            {% if mode == 'edit' %}
            <input type="hidden" name="question_id" value="{{ fib.id }}">
            {% endif %}

            <!-- Question type -->
            <div class="form-group mb-3 col-md-3">
                <label for="q-type" class="form-label">Question type</label>
                <select name="q-type" id="q-type" class="form-select" required>
                    <option value="FIB" selected>Fill in the blanks</option>
                    <option value="MCQ">Multiple-choice Question</option>
                </select>
            </div>

            <!-- Difficulty -->
            <div class="form-group mb-3 col-md-3">
                <label for="difficulty" class="form-label">Difficulty</label>
                <select name="difficulty" class="form-select" required>
                    <option value="Easy" {% if fib and fib.difficulty == 'Easy' %}selected{% endif %}>Easy</option>
                    <option value="Intermediate" {% if fib and fib.difficulty == 'Intermediate' %}selected{% endif %}>Intermediate</option>
                    <option value="Hard" {% if fib and fib.difficulty == 'Hard' %}selected{% endif %}>Hard</option>
                </select>
            </div>

            <!-- Learning Objective -->
            <div class="form-group mb-3 col-md-3">
                <label for="learning_obj" class="form-label">Learning Objective</label>
                <select name="learning_obj" class="form-select" required>
                    {% for obj in ['Remember', 'Understand', 'Apply', 'Analyse', 'Evaluate', 'Create'] %}
                    <option value="{{ obj }}" {% if fib and fib.learning_obj == obj %}selected{% endif %}>{{ obj }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Module -->
            <div class="form-group mb-3 col-md-3">
                <label for="module" class="form-label">Module</label>
                <select name="module" class="form-select" required>
                    {% for module in modules %}
                    <option value="{{ module.module_id }}" {% if fib and fib.module_id == module.module_id %}selected{% endif %}>{{ module.code }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Question -->
            <div class="form-group mb-3 col-md-12">
                <label for="Question" class="form-label">Question</label>
                <div id="editor">{{ fib.question if mode == 'edit' else '' }}</div>
                <input type="hidden" name="new_question" id="new_question">
            </div>

            <!-- Answer -->
            <div class="form-group mb-3">
                <label for="answer" class="form-label">Answer</label>
                <input type="text" name="answer" class="form-control" placeholder="Enter the correct answer" required value="{{ fib.answer if mode == 'edit' else '' }}">
            </div>

            <!-- Feedback -->
            <div class="form-group mb-3">
                <label for="feedback" class="form-label">Feedback</label>
                <textarea id="feedback" name="feedback" class="form-control" rows="3" placeholder="Question Feedback">{{ fib.feedback if mode == 'edit' else '' }}</textarea>
            </div>

            <!-- Submit Button -->
            <div class="form-group d-grid gap-2">
                <button type="submit" class="btn btn-primary">{{ 'Update' if mode == 'edit' else 'Add' }} Question</button>
            </div>
        </form>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('#q-type').on('change', function () {
            const questionType = $(this).val();
            if (questionType === 'MCQ') {
                window.location.href = "{{ url_for('routes.addMCQ') }}";
            } else if (questionType === 'FIB') {
                window.location.href = "{{ url_for('routes.addFIB') }}";
            }
        });
    });
</script>
{% endblock content %}