{% extends 'base.html' %}

{% block title %}Subjects{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <h1 class="h3 card-header">Subjects</h1>
                <div class="card-body bg-secondary bg-opacity-10">
                    <p class="text-muted">Manage subjects for assessments.</p>

                    <form method="post" enctype="multipart/form-data" class="mt-4">
                        {% csrf_token %}

                        {% if form.non_field_errors %}
                            <div class="alert alert-danger">{{ form.non_field_errors }}</div>
                        {% endif %}

                        <div class="mb-3">
                            {{ form.assessment.label_tag }}
                            {{ form.assessment }}
                            {% if form.assessment.errors %}<div class="text-danger small">{{ form.assessment.errors }}</div>{% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="id_subject_type" class="form-label">Subject type</label>
                            <div class="input-group">
                                {{ form.subject_type }}
                                <button type="button" class="btn btn-outline-secondary" id="toggle-subject-type-form">
                                    Add new type
                                </button>
                            </div>
                            {% if form.subject_type.errors %}<div class="text-danger small">{{ form.subject_type.errors }}</div>{% endif %}
                        </div>

                        <div class="mb-3 d-none" id="new-subject-type-wrapper">
                            {{ form.new_subject_type_name.label_tag }}
                            {{ form.new_subject_type_name }}
                            {% if form.new_subject_type_name.errors %}<div class="text-danger small">{{ form.new_subject_type_name.errors }}</div>{% endif %}
                        </div>

                        <div class="mb-3">
                            {{ form.description.label_tag }}
                            {{ form.description }}
                            {% if form.description.errors %}<div class="text-danger small">{{ form.description.errors }}</div>{% endif %}
                        </div>

                        <div class="form-check mb-3">
                            {{ form.is_active }}
                            <label class="form-check-label" for="id_is_active">{{ form.is_active.label }}</label>
                        </div>

                        <div class="d-flex flex-wrap gap-2 mt-4">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const toggleButton = document.getElementById('toggle-subject-type-form');
        const subjectTypeSelect = document.getElementById('id_subject_type');
        const newTypeWrapper = document.getElementById('new-subject-type-wrapper');
        const newTypeInput = document.getElementById('id_new_subject_type_name');

        if (!toggleButton || !subjectTypeSelect || !newTypeWrapper || !newTypeInput) return;

        const updateTypeMode = () => {
            const showNewType = toggleButton.dataset.active === 'true';
            newTypeWrapper.classList.toggle('d-none', !showNewType);
            subjectTypeSelect.disabled = showNewType;
            subjectTypeSelect.setAttribute('aria-disabled', showNewType ? 'true' : 'false');
            if (showNewType) {
                newTypeInput.required = true;
                subjectTypeSelect.value = '';
            } else {
                newTypeInput.required = false;
                newTypeInput.value = '';
            }
        };

        toggleButton.addEventListener('click', function () {
            const isActive = toggleButton.dataset.active === 'true';
            toggleButton.dataset.active = String(!isActive);
            toggleButton.textContent = isActive ? 'Add new type' : 'Use existing type';
            updateTypeMode();
        });

        updateTypeMode();
    });
</script>
{% endblock %}