{% extends "base.html" %}
{% block title %}{{ title }} — GMAO Collège{% endblock %}

{% block content %}
<h1 class="mb-4">{{ title }}</h1>
<div class="card mb-4">
    <div class="card-body">
        <form method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Nom *</label>
                    <input type="text" name="name" class="form-control" value="{{ room.name if room else '' }}" required>
                </div>
                <div class="col-md-2 mb-3">
                    <label class="form-label">Code</label>
                    <input type="text" name="code" class="form-control" value="{{ room.code if room else '' }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Bâtiment *</label>
                    <select name="building_id" class="form-select" required id="building-select">
                        {% for b in buildings %}
                        <option value="{{ b.id }}" {% if room and room.building_id == b.id %}selected{% endif %}>{{ b.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Zone</label>
                    <select name="zone_id" class="form-select" id="zone-select">
                        <option value="">— Aucune —</option>
                        {% for z in zones %}
                        <option value="{{ z.id }}" data-building="{{ z.building_id }}" {% if room and room.zone_id == z.id %}selected{% endif %}>{{ z.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Étage</label>
                    <select name="floor" class="form-select">
                        <option value="-1" {% if room and room.floor == -1 %}selected{% endif %}>Sous-sol</option>
                        <option value="0" {% if room and room.floor == 0 %}selected{% endif %}>RDC</option>
                        <option value="1" {% if room and room.floor == 1 %}selected{% endif %}>1er étage</option>
                        <option value="2" {% if room and room.floor == 2 %}selected{% endif %}>2ème étage</option>
                        <option value="3" {% if room and room.floor == 3 %}selected{% endif %}>3ème étage</option>
                    </select>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Type de salle</label>
                    <select name="room_type_id" class="form-select">
                        <option value="">— Aucun —</option>
                        {% for rt in room_types %}
                        <option value="{{ rt.id }}" {% if room and room.room_type_id == rt.id %}selected{% endif %}>{{ rt.name }}{% if rt.is_teaching %} (enseignement){% endif %}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
                <a href="{{ url_for('rooms.index') }}" class="btn btn-outline-secondary">Annuler</a>
            </div>
        </form>
    </div>
</div>

{% if room and equipments %}
<div class="card">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-hdd"></i> Équipements dans cette salle ({{ equipments|length }})</h5>
    </div>
    <div class="card-body">
        {% if equipments|length > 0 %}
        <div class="table-responsive">
            <table class="table table-sm table-hover">
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Catégorie</th>
                        <th>État</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for eq in equipments %}
                <tr>
                    <td>{{ eq.name }}</td>
                    <td>{{ eq.category.name if eq.category else '—' }}</td>
                    <td>
                        {% if eq.state == 'operationnel' %}
                        <span class="badge bg-success">Opérationnel</span>
                        {% elif eq.state == 'en_panne' %}
                        <span class="badge bg-danger">En panne</span>
                        {% elif eq.state == 'en_maintenance' %}
                        <span class="badge bg-warning">En maintenance</span>
                        {% else %}
                        <span class="badge bg-secondary">{{ eq.state }}</span>
                        {% endif %}
                    </td>
                    <td>
                        <a href="{{ url_for('equipments.edit', id=eq.id) }}" class="btn btn-sm btn-outline-primary" title="Modifier l'équipement">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <a href="{{ url_for('interventions.create', equipment_id=eq.id) }}" class="btn btn-sm btn-outline-success" title="Créer une intervention">
                            <i class="bi bi-tools"></i>
                        </a>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-muted">Aucun équipement dans cette salle.</p>
        {% endif %}
    </div>
</div>
{% endif %}

<script>
// Filtrer les zones selon le bâtiment sélectionné
document.getElementById('building-select').addEventListener('change', function() {
    var buildingId = this.value;
    var zoneSelect = document.getElementById('zone-select');
    var options = zoneSelect.querySelectorAll('option[data-building]');
    var currentZone = zoneSelect.value;
    
    // Filtrer
    options.forEach(function(opt) {
        if (opt.dataset.building === buildingId) {
            opt.style.display = '';
        } else {
            opt.style.display = 'none';
        }
    });
    
    // Ne réinitialiser que si la zone actuelle n'appartient pas au bâtiment
    var selectedOption = zoneSelect.querySelector('option[value="' + currentZone + '"]');
    if (selectedOption && selectedOption.dataset.building !== buildingId) {
        zoneSelect.value = '';
    }
});

// Déclencher le filtre au chargement
document.getElementById('building-select').dispatchEvent(new Event('change'));
</script>
{% endblock %}