{% extends "base.html" %}
{% block title %}{{ 'Salles — ' + building.name if building else 'Salles — GMAO Collège' }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>
        <i class="bi bi-door-open"></i> 
        {{ 'Salles — ' + building.name if building else 'Salles' }}
    </h1>
    <div>
        {% if building %}
        <a href="{{ url_for('rooms.index') }}" class="btn btn-outline-secondary me-2">
            <i class="bi bi-arrow-left"></i> Toutes les salles
        </a>
        {% endif %}
        <a href="{{ url_for('rooms.create') }}" class="btn btn-primary"><i class="bi bi-plus-lg"></i> Nouvelle salle</a>
    </div>
</div>

<!-- Filtres -->
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">Bâtiments</label>
                <select name="building_ids" class="form-select select2-multiple" id="filter-building" multiple>
                    {% for b in all_buildings %}
                    <option value="{{ b.id }}" {% if b.id in filter_buildings %}selected{% endif %}>{{ b.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Zones</label>
                <select name="zone_ids" class="form-select select2-multiple" id="filter-zone" multiple>
                    {% for z in all_zones %}
                    <option value="{{ z.id }}" {% if z.id in filter_zones %}selected{% endif %}>{{ z.full_name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Types</label>
                <select name="type_ids" class="form-select select2-multiple" id="filter-type" multiple>
                    {% for t in all_types %}
                    <option value="{{ t.id }}" {% if t.id in filter_types %}selected{% endif %}>{{ t.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Étages</label>
                <select name="floors" class="form-select select2-multiple" id="filter-floor" multiple>
                    <option value="-1" {% if -1 in filter_floors %}selected{% endif %}>Sous-sol</option>
                    <option value="0" {% if 0 in filter_floors %}selected{% endif %}>RDC</option>
                    <option value="1" {% if 1 in filter_floors %}selected{% endif %}>1er étage</option>
                    <option value="2" {% if 2 in filter_floors %}selected{% endif %}>2ème étage</option>
                    <option value="3" {% if 3 in filter_floors %}selected{% endif %}>3ème étage</option>
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-primary me-2"><i class="bi bi-funnel"></i> Filtrer</button>
                <a href="{{ url_for('rooms.index') }}" class="btn btn-outline-secondary"><i class="bi bi-x-lg"></i></a>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover table-sm">
                <thead><tr><th>Code</th><th>Nom</th><th>Bâtiment</th><th>Zone</th><th>Type</th><th>Étage</th><th>Actions</th></tr></thead>
                <tbody>
                {% for room in rooms %}
                <tr>
                    <td><code>{{ room.code or '—' }}</code></td>
                    <td>{{ room.name }}</td>
                    <td>{{ room.building.name }}</td>
                    <td>
                        {% if room.zone %}
                        <span class="badge bg-info">{{ room.zone.name }}</span>
                        {% else %}
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if room.room_type %}
                        <span class="badge" style="background-color: {{ room.room_type.color|hex_color }}; color: {{ room.room_type.color|text_color }};">{{ room.room_type.name }}</span>
                        {% else %}
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if room.floor == -1 %}Sous-sol
                        {% elif room.floor == 0 %}RDC
                        {% elif room.floor == 1 %}1er
                        {% elif room.floor == 2 %}2ème
                        {% elif room.floor == 3 %}3ème
                        {% else %}{{ room.floor }}
                        {% endif %}
                    </td>
                    <td>
                        <a href="{{ url_for('rooms.detail', id=room.id) }}" class="btn btn-sm btn-outline-info" title="Voir">
                            <i class="bi bi-eye"></i>
                        </a>
                        <a href="{{ url_for('rooms.edit', id=room.id) }}" class="btn btn-sm btn-outline-primary" title="Modifier">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <form action="{{ url_for('rooms.delete', id=room.id) }}" method="POST" style="display:inline;" onsubmit="return confirm('Supprimer cette salle ?')">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Supprimer">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% if rooms|length == 0 %}
        <p class="text-muted text-center mt-3">Aucune salle ne correspond aux filtres.</p>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script>
$(document).ready(function() {
    $('.select2-multiple').select2({
        placeholder: '— Tous —',
        allowClear: true,
        width: '100%',
        language: {
            noResults: function() { return 'Aucun résultat'; },
            searching: function() { return 'Recherche...'; }
        }
    });
});
</script>
{% endblock %}