{% extends 'base.html' %}

{% block title %}Create Assignment - LXP{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="mb-0">Create New Assignment</h3>
                        <a href="{% url 'assignments' %}" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Assignments
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form method="post" id="assignmentForm">
                        {% csrf_token %}
                        
                        <!-- Title -->
                        <div class="mb-3">
                            <label for="{{ form.title.id_for_label }}" class="form-label">
                                Assignment Title *
                            </label>
                            {{ form.title }}
                            {% if form.title.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.title.errors %}
                                <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>

                        <!-- Description -->
                        <div class="mb-3">
                            <label for="{{ form.description.id_for_label }}" class="form-label">
                                Description *
                            </label>
                            {{ form.description }}
                            {% if form.description.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.description.errors %}
                                <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                            {% endif %}
                            <div class="form-text">Provide clear instructions for students.</div>
                        </div>

                        <!-- Assignment Type -->
                        <div class="mb-3">
                            <label for="{{ form.assignment_type.id_for_label }}" class="form-label">
                                Assignment Type *
                            </label>
                            {{ form.assignment_type }}
                            {% if form.assignment_type.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.assignment_type.errors %}
                                <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                            {% endif %}
                            <div class="form-text">
                                <ul class="mb-0 ps-3">
                                    <li><strong>Multiple Choice:</strong> Students select from predefined options</li>
                                    <li><strong>Text Input:</strong> Students type their answers</li>
                                    <li><strong>File Upload:</strong> Students upload files (coming soon)</li>
                                </ul>
                            </div>
                        </div>

                        <!-- Due Date -->
                        <div class="mb-3">
                            <label for="{{ form.due_date.id_for_label }}" class="form-label">
                                Due Date and Time *
                            </label>
                            {{ form.due_date }}
                            {% if form.due_date.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.due_date.errors %}
                                <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                            {% endif %}
                            <div class="form-text">Set the deadline for submission.</div>
                        </div>

                        <!-- Total Marks -->
                        <div class="mb-3">
                            <label for="{{ form.total_marks.id_for_label }}" class="form-label">
                                Total Marks *
                            </label>
                            {{ form.total_marks }}
                            {% if form.total_marks.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.total_marks.errors %}
                                <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                            {% endif %}
                            <div class="form-text">Maximum score for this assignment.</div>
                        </div>

                        <!-- Publish Status -->
                        <div class="mb-4">
                            <div class="form-check form-switch">
                                {{ form.is_published }}
                                <label class="form-check-label" for="{{ form.is_published.id_for_label }}">
                                    Publish Immediately
                                </label>
                            </div>
                            {% if form.is_published.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.is_published.errors %}
                                <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                            {% endif %}
                            <div class="form-text">
                                If published, students can see and access the assignment. 
                                You can always publish it later from the assignments list.
                            </div>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="reset" class="btn btn-secondary me-md-2">
                                <i class="fas fa-redo"></i> Reset
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Create Assignment
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Information Card -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0">Next Steps</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info mb-0">
                        <h6>After creating this assignment:</h6>
                        <ol class="mb-0">
                            <li>You'll be redirected to add questions</li>
                            <li>Add multiple choice options or leave text input fields open</li>
                            <li>Set marks for each question</li>
                            <li>Review and publish when ready</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Custom styling for form elements */
    #assignmentForm input, 
    #assignmentForm select, 
    #assignmentForm textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        font-size: 1rem;
    }

    #assignmentForm input:focus, 
    #assignmentForm select:focus, 
    #assignmentForm textarea:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    #assignmentForm textarea {
        min-height: 120px;
        resize: vertical;
    }

    .form-check-input:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    .form-label {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .form-text {
        font-size: 0.875rem;
        color: #6c757d;
    }

    /* Custom styling for the type selector */
    #id_assignment_type {
        padding: 10px;
        border-radius: 5px;
        background-color: white;
    }

    /* Style for the date time input */
    input[type="datetime-local"] {
        padding: 10px;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add Bootstrap classes to form elements
    const form = document.getElementById('assignmentForm');
    
    // Add form-control class to all inputs, selects, and textareas
    const formElements = form.querySelectorAll('input, select, textarea');
    formElements.forEach(element => {
        element.classList.add('form-control');
    });

    // Special handling for the switch
    const switchElement = document.getElementById('{{ form.is_published.id_for_label }}');
    if (switchElement) {
        switchElement.classList.add('form-check-input');
    }

    // Add real-time validation
    form.addEventListener('submit', function(e) {
        let isValid = true;
        const requiredFields = form.querySelectorAll('[required]');
        
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                isValid = false;
                field.classList.add('is-invalid');
            } else {
                field.classList.remove('is-invalid');
            }
        });

        // Validate due date is in the future
        const dueDateInput = document.getElementById('{{ form.due_date.id_for_label }}');
        if (dueDateInput && dueDateInput.value) {
            const dueDate = new Date(dueDateInput.value);
            const now = new Date();
            
            if (dueDate <= now) {
                isValid = false;
                dueDateInput.classList.add('is-invalid');
                alert('Due date must be in the future.');
            }
        }

        if (!isValid) {
            e.preventDefault();
            alert('Please fill in all required fields correctly.');
        }
    });

    // Clear validation on input
    form.addEventListener('input', function(e) {
        if (e.target.hasAttribute('required')) {
            e.target.classList.remove('is-invalid');
        }
    });
});
</script>
{% endblock %}