{% extends 'base.html' %}

{% block content %}
<div class="container">
    <h1 class="my-4">{{ assignment.title }}</h1>
    <p>{{ assignment.description }}</p>
    <hr>
    <h3>Exercises</h3>
    {% for exercise in assignment.exercises.all %}
        <div class="card my-3">
            <div class="card-body">
                <p class="card-text">{{ exercise.question }}</p>
                <form method="post" action="{% url 'core:assignment_detail' assignment.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="exercise_id" value="{{ exercise.id }}">
                    <div class="form-group">
                        <textarea class="form-control" name="answer" rows="3" placeholder="Your answer"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <button type="button" class="btn btn-info get-hint" data-exercise-id="{{ exercise.id }}">Get Hint</button>
                    <button type="button" class="btn btn-danger call-teacher">Call Teacher</button>
                </form>
                <div class="hint-container mt-3" id="hint-for-{{ exercise.id }}" style="display: none;">
                    <div class="alert alert-info hint-text"></div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const hintButtons = document.querySelectorAll('.get-hint');
        hintButtons.forEach(button => {
            button.addEventListener('click', function() {
                const exerciseId = this.dataset.exerciseId;
                fetch(`/hint/${exerciseId}/`)
                    .then(response => response.json())
                    .then(data => {
                        const hintContainer = document.querySelector(`#hint-for-${exerciseId}`);
                        const hintText = hintContainer.querySelector('.hint-text');
                        hintText.textContent = data.hint;
                        hintContainer.style.display = 'block';
                    });
            });
        });

        const callTeacherButtons = document.querySelectorAll('.call-teacher');
        callTeacherButtons.forEach(button => {
            button.addEventListener('click', function() {
                fetch(`/call-teacher/`)
                    .then(response => response.json())
                    .then(data => {
                        alert(data.message);
                    });
            });
        });
    });
</script>
{% endblock %}

{% endblock %}
