{% extends "base.html" %}
{% block content %}

<div class="container-fluid">
    <h1 class="mb-4">{{ title }}</h1>
    
    <div class="card mb-4">
        <div class="card-body">
            <form method="POST">
                {{ form.hidden_tag() }}
                <div class="mb-3">{{ form.name.label(class="form-label") }}{{ form.name(class="form-control") }}</div>
                <div class="mb-3">{{ form.description.label(class="form-label") }}{{ form.description(class="form-control", rows=3) }}</div>
                <div class="mb-3">
                    <label class="form-label">{{ form.is_teaching.label.text }}</label>
                    <div class="form-check form-switch">
                        {{ form.is_teaching(class="form-check-input", role="switch", style="width: 3rem; height: 1.5rem; cursor: pointer;") }}
                        <label class="form-check-label" for="{{ form.is_teaching.id }}" style="cursor: pointer;">
                            <span id="isTeachingLabel">{{ 'Oui' if form.is_teaching.data else 'Non' }}</span>
                        </label>
                    </div>
                    <small class="text-muted">Salle utilisée pour l'enseignement (affichée dans les plannings Pronote)</small>
                </div>
                <div class="mb-3">{{ form.color.label(class="form-label") }}{{ form.color(class="form-select") }}</div>
                <div class="mt-4">
                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
                    <a href="{{ url_for('room_types.index') }}" class="btn btn-outline-secondary">Annuler</a>
                </div>
            </form>
        </div>
    </div>
    
    {% if room_type %}
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0"><i class="bi bi-door-open"></i> Salles de ce type</h5>
        </div>
        <div class="card-body">
            {% if rooms_in_type %}
            <div class="table-responsive">
                <table class="table table-sm table-hover">
                    <thead><tr><th>Nom</th><th>Bâtiment</th><th>Étage</th><th>Actions</th></tr></thead>
                    <tbody>
                    {% for room in rooms_in_type %}
                    <tr>
                        <td>{{ room.name }}</td>
                        <td>{{ room.building.name }}</td>
                        <td>{{ room.floor }}</td>
                        <td>
                            <form action="{{ url_for('room_types.remove_room', type_id=room_type.id, room_id=room.id) }}" method="POST" style="display:inline;">
                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Retirer du type">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="text-muted">Aucune salle associée à ce type.</p>
            {% endif %}
            
            <hr>
            
            <h6><i class="bi bi-plus-circle"></i> Ajouter des salles</h6>
            {% if rooms_without_type %}
            <form action="{{ url_for('room_types.add_rooms', id=room_type.id) }}" method="POST">
                <div class="mb-3">
                    <select name="room_ids" class="form-select" multiple size="8">
                        {% for room in rooms_without_type %}
                        <option value="{{ room.id }}">{{ room.name }} ({{ room.building.name }})</option>
                        {% endfor %}
                    </select>
                    <small class="text-muted">Maintenez Ctrl pour sélectionner plusieurs salles</small>
                </div>
                <button type="submit" class="btn btn-success"><i class="bi bi-plus-lg"></i> Ajouter les salles sélectionnées</button>
            </form>
            {% else %}
            <p class="text-muted">Toutes les salles sont déjà associées à un type.</p>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const switchElement = document.getElementById('is_teaching');
    const labelElement = document.getElementById('isTeachingLabel');
    
    if (switchElement && labelElement) {
        switchElement.addEventListener('change', function() {
            labelElement.textContent = this.checked ? 'Oui' : 'Non';
        });
    }
});
</script>

{% endblock %}