{% extends "base.html" %}

{% block title %}Sections - Timetable Generator{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="fas fa-users me-2"></i>Manage Sections
    </h2>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Add New Section</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('add_section') }}">
                    <div class="mb-3">
                        <label for="name" class="form-label">Section Name</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="e.g., CME-2A" required>
                    </div>
                    <div class="mb-3">
                        <label for="year" class="form-label">Year/Level</label>
                        <input type="text" class="form-control" id="year" name="year" placeholder="e.g., 2nd Year" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Assign Subjects</label>
                        {% if subjects %}
                            <div class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
                                {% for subject in subjects %}
                                <div class="form-check mb-2">
                                    <input class="form-check-input subject-checkbox" type="checkbox" id="subject_{{ loop.index0 }}"
                                           name="subject_names" value="{{ subject.name }}" onchange="toggleTeacherDropdown('teacher_for_{{ subject.name }}', this.checked)">
                                    <label class="form-check-label" for="subject_{{ loop.index0 }}">
                                        <i class="fas {% if subject.is_lab %}fa-flask{% else %}fa-book{% endif %} me-1"></i>
                                        {{ subject.name }}
                                        <small class="text-muted">(Teacher assigned per section)</small>
                                        {% if subject.is_lab %}
                                            <span class="badge bg-warning text-dark ms-1">Lab</span>
                                        {% endif %}
                                        {% if subject.teachers %}
                                            <span class="badge bg-success ms-1">Assigned: {{ subject.teachers|join(', ') }}</span>
                                        {% else %}
                                            <span class="badge bg-secondary ms-1">No teachers assigned</span>
                                        {% endif %}
                                    </label>
                                    <select class="form-select mt-2" name="teacher_for_{{ subject.name }}" id="teacher_for_{{ subject.name|replace(' ', '_') }}">
                                        <option value="">-- Select Teacher --</option>
                                        {% for teacher_name in subject.teachers %}
                                            <option value="{{ teacher_name }}">{{ teacher_name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="alert alert-warning">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                No subjects available. Please add subjects first.
                            </div>
                        {% endif %}
                    </div>
                    <button type="submit" class="btn btn-info" {% if not subjects %}disabled{% endif %}>
                        <i class="fas fa-plus me-1"></i>Add Section
                    </button>
{% block scripts %}
<script>
function toggleTeacherDropdown(dropdownId, checked) {
    var dropdown = document.getElementById(dropdownId);
    if (dropdown) {
        dropdown.disabled = !checked;
        dropdown.required = checked;
        if (!checked) dropdown.value = '';
    }
}
</script>
{% endblock %}
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Current Sections</h5>
            </div>
            <div class="card-body">
                {% if sections %}
                    {% for section in sections %}
                    <div class="card mb-3">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">
                                    <i class="fas fa-users me-2"></i>{{ section.name }} ({{ section.year }})
                                </h6>
                                <a href="{{ url_for('delete_section', section_name=section.name) }}" 
                                   class="btn btn-sm btn-outline-danger"
                                   onclick="return confirm('Are you sure you want to delete {{ section.name }}?')">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </div>
                        </div>
                        <div class="card-body">
                            <h6>Assigned Subjects ({{ section.subjects|length }}):</h6>
                            <div class="row">
                                {% for subj in section.subjects %}
                                <div class="col-md-6 mb-2">
                                    <div class="d-flex align-items-center">
                                        <i class="fas {% if subj.subject.is_lab %}fa-flask text-warning{% else %}fa-book text-primary{% endif %} me-2"></i>
                                        <div>
                                            <strong>{{ subj.subject.name }}</strong>
                                            <small class="text-muted d-block">
                                                {% if subj.teacher %}
                                                    <span class="badge bg-success">{{ subj.teacher }}</span>
                                                    <form method="POST" action="{{ url_for('remove_teacher_from_section', section_name=section.name, subject_name=subj.subject.name) }}" style="display:inline;">
                                                        <button type="submit" class="btn btn-sm btn-outline-danger ms-2" title="Remove teacher" onclick="return confirm('Remove teacher from {{ subj.subject.name }}?')">
                                                            <i class="fas fa-user-times"></i>
                                                        </button>
                                                    </form>
                                                {% else %}
                                                    <span class="badge bg-secondary">No teacher assigned</span>
                                                {% endif %}
                                                • {{ subj.subject.periods_per_week }} periods/week
                                                {% if subj.subject.is_lab %}• Lab ({{ subj.subject.block_size }} block){% endif %}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-users fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No Sections Added</h5>
                        <p class="text-muted">Add your first section using the form on the left.</p>
                        {% if not subjects %}
                            <p class="text-warning">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                You need to add subjects first before creating sections.
                            </p>
                            <a href="{{ url_for('subjects') }}" class="btn btn-success">
                                <i class="fas fa-book me-1"></i>Add Subjects
                            </a>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}