{% extends "base.html" %}

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

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

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Add New Subject</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('add_subject') }}">
                    <div class="mb-3">
                        <label for="name" class="form-label">Subject Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-1"></i>
                        <strong>Note:</strong> Teachers will be assigned to subjects when creating sections.
                    </div>
                    <div class="mb-3">
                        <label for="periods_per_week" class="form-label">Periods per Week</label>
                        <input type="number" class="form-control" id="periods_per_week" name="periods_per_week" min="1" max="10" required>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_lab" name="is_lab" onchange="toggleBlockSize()">
                            <label class="form-check-label" for="is_lab">
                                Lab Subject
                            </label>
                        </div>
                        <div class="form-text">Lab subjects require consecutive periods</div>
                    </div>
                    <div class="mb-3" id="block_size_group" style="display: none;">
                        <label for="block_size" class="form-label">Block Size (consecutive periods)</label>
                        <input type="number" class="form-control" id="block_size" name="block_size" min="2" max="7">
                        <div class="form-text">Number of consecutive periods for this lab</div>
                    </div>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-plus me-1"></i>Add Subject
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Current Subjects</h5>
            </div>
            <div class="card-body">
                {% if subjects %}
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Subject</th>
                                    <th>Periods/Week</th>
                                    <th>Type</th>
                                    <th>Block Size</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for subject in subjects %}
                                <tr>
                                    <td>
                                        <i class="fas {% if subject.is_lab %}fa-flask{% else %}fa-book{% endif %} me-2"></i>
                                        {{ subject.name }}
                                    </td>
                                    <td>{{ subject.periods_per_week }}</td>
                                    <td>
                                        {% if subject.is_lab %}
                                            <span class="badge bg-warning text-dark">Lab</span>
                                        {% else %}
                                            <span class="badge bg-primary">Theory</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if subject.is_lab %}
                                            {{ subject.block_size }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <div class="d-flex flex-column align-items-end gap-2">
                                            <!-- Assigned Teachers -->
                                            <div class="assigned-teachers">
                                                {% if subject.teachers and subject.teachers|length > 0 %}
                                                    {% for teacher_name in subject.teachers %}
                                                        {% set teacher_obj = teachers | selectattr('name', 'equalto', teacher_name) | list | first %}
                                                        {% if teacher_obj %}
                                                            <div class="d-flex align-items-center gap-2 mb-1">
                                                                <span class="text-info fw-semibold">{{ teacher_obj.name }}</span>
                                                                <form method="POST" action="{{ url_for('remove_teacher_from_subject', subject_name=subject.name, teacher_name=teacher_obj.name) }}" class="d-inline">
                                                                    <button type="submit" class="btn btn-sm btn-outline-danger" 
                                                                            title="Remove {{ teacher_obj.name }} from {{ subject.name }}"
                                                                            onclick="return confirm('Remove {{ teacher_obj.name }} from {{ subject.name }}?')">
                                                                        remove
                                                                    </button>
                                                                </form>
                                                            </div>
                                                        {% else %}
                                                            <div class="mb-1">
                                                                <span class="text-warning fw-semibold">{{ teacher_name }}</span>
                                                            </div>
                                                        {% endif %}
                                                    {% endfor %}
                                                {% else %}
                                                    <div class="mb-1">
                                                        <span class="text-muted fst-italic">No teachers assigned</span>
                                                    </div>
                                                {% endif %}
                                            </div>
                                            
                                            <!-- Action Buttons -->
                                            <div class="d-flex gap-2">
                                                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#assignTeachersModal{{ subject.name|replace(' ', '_') }}">
                                                    <i class="fas fa-user-plus"></i> Assign Teachers
                                                </button>
                                                <a href="{{ url_for('delete_subject', subject_name=subject.name) }}" 
                                                   class="btn btn-sm btn-outline-danger"
                                                   onclick="return confirm('Are you sure you want to delete {{ subject.name }}?')">
                                                    <i class="fas fa-trash"></i>
                                                </a>
                                            </div>
                                        </div>
                                                                                                                    <!-- Modal for assigning teachers -->
                                                                                                                    <div class="modal fade" id="assignTeachersModal{{ subject.name|replace(' ', '_') }}" tabindex="-1" aria-labelledby="assignTeachersLabel{{ subject.name|replace(' ', '_') }}" aria-hidden="true">
                                                                                                                        <div class="modal-dialog">
                                                                                                                            <div class="modal-content">
                                                                                                                                <form method="POST" action="{{ url_for('assign_teachers_to_subject', subject_name=subject.name) }}">
                                                                                                                                    <div class="modal-header">
                                                                                                                                        <h5 class="modal-title" id="assignTeachersLabel{{ subject.name|replace(' ', '_') }}">Assign Teachers to {{ subject.name }}</h5>
                                                                                                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                                                                                    </div>
                                                                                                                                    <div class="modal-body">
                                                                                                                                        <div class="mb-3">
                                                                                                                                            <label for="teachers" class="form-label">Select Teachers</label>
                                                                                                                                            <select class="form-select" id="teachers" name="teachers" multiple required>
                                                                                                                                                {% for teacher in teachers %}
                                                                                                                                                    <option value="{{ teacher.name }}" {% if teacher.name in subject.teachers %}selected{% endif %}>{{ teacher.name }}</option>
                                                                                                                                                {% endfor %}
                                                                                                                                            </select>
                                                                                                                                            <div class="form-text">Hold Ctrl (Windows) or Cmd (Mac) to select multiple teachers.</div>
                                                                                                                                        </div>
                                                                                                                                    </div>
                                                                                                                                    <div class="modal-footer">
                                                                                                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                                                                                                        <button type="submit" class="btn btn-primary">Save</button>
                                                                                                                                    </div>
                                                                                                                                </form>
                                                                                                                            </div>
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                            </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-book fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No Subjects Added</h5>
                        <p class="text-muted">Add your first subject using the form on the left.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function toggleBlockSize() {
    const isLabCheckbox = document.getElementById('is_lab');
    const blockSizeGroup = document.getElementById('block_size_group');
    const blockSizeInput = document.getElementById('block_size');
    
    if (isLabCheckbox.checked) {
        blockSizeGroup.style.display = 'block';
        blockSizeInput.required = true;
        if (!blockSizeInput.value) {
            blockSizeInput.value = 2;
        }
    } else {
        blockSizeGroup.style.display = 'none';
        blockSizeInput.required = false;
        blockSizeInput.value = '';
    }
}
</script>
{% endblock %}