{% extends "base.html" %}
{% load static %}

{% block content %}
<style>
    body {
        background-color: #f0f2f5;
    }
    .assignment-container {
        padding: 40px;
        max-width: 900px;
        margin: auto;
    }
    .assignment-header {
        margin-bottom: 32px;
        padding-bottom: 24px;
        border-bottom: 1px solid #dee2e6;
    }
    .assignment-header h2 {
        font-weight: bold;
    }
    .exercise-card {
        background: white;
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    }
    .exercise-question {
        font-size: 1.1rem;
        margin-bottom: 16px;
    }
    .btn-primary {
        background-color: #6a11cb;
        border-color: #6a11cb;
    }
    .btn-secondary {
        background-color: #566573;
        border-color: #566573;
    }
    .hint-container {
        background-color: #eaf2f8;
        border-left: 4px solid #3498db;
        padding: 16px;
        margin-top: 16px;
        border-radius: 4px;
    }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
    <div class="container-fluid">
        <a class="navbar-brand" href="{% url 'core:student_dashboard' %}">Student Dashboard</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'core:student_dashboard' %}">Back to Dashboard</a>
                </li>
                 <li class="nav-item">
                    <a class="nav-link" href="{% url 'core:logout' %}">Logout</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="assignment-container">
    <header class="assignment-header">
        <h2>{{ assignment.title }}</h2>
        <p class="text-muted">{{ assignment.description }}</p>
    </header>

    {% for exercise in assignment.exercises.all %}
    <div class="exercise-card">
        <h4 class="border-bottom pb-2 mb-3">Exercise {{ forloop.counter }}</h4>
        <p class="exercise-question">{{ 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 mb-3">
                <textarea class="form-control" name="answer" rows="4" placeholder="Write your answer here..."></textarea>
            </div>
            <div class="d-flex justify-content-between align-items-center">
                <button type="submit" class="btn btn-primary">Submit Answer</button>
                <div>
                    <button type="button" class="btn btn-outline-secondary get-hint" data-exercise-id="{{ exercise.id }}"><i class="fas fa-lightbulb me-1"></i> Get a Hint</button>
                    <button type="button" class="btn btn-outline-danger call-teacher"><i class="fas fa-phone me-1"></i> Call Teacher</button>
                </div>
            </div>
        </form>
        
        <div class="hint-container mt-3" id="hint-for-{{ exercise.id }}" style="display: none;">
            <div class="hint-text"></div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% 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 %}
