{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block title %}Subjects{% endblock %}

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

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

                       
                        <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 class="col-lg-6">
            <div class="card shadow-sm">
                <h1 class="h3 card-header">Available Subject Types</h1>
                <div class="card-body bg-secondary bg-opacity-10">
                    <p class="text-muted">List of available subject types.</p>

                    <div class="table-responsive mt-4">
                        <table class="table table-bordered table-hover table-striped">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for subject_type in available_subject_types %}
                                <tr>
                                    <td>{{ subject_type.id }}</td>
                                    <td>{{ subject_type.name }}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="2" class="text-center">No subject types available.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </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 %}