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

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h1><i class="bi bi-building"></i> {{ title }}</h1>
        </div>
    </div>
    
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-info-circle"></i> Informations du bâtiment</h5>
                </div>
                <div class="card-body">
                    <form method="POST" id="buildingForm">
                        <div class="mb-3">
                            <label class="form-label">Nom *</label>
                            <input type="text" name="name" class="form-control" value="{{ building.name if building else '' }}" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea name="description" class="form-control" rows="3">{{ building.description if building else '' }}</textarea>
                        </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('equipments.buildings') }}" class="btn btn-outline-secondary">
                                Annuler
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        {% if building %}
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="bi bi-geo-alt"></i> Zones du bâtiment</h5>
                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addZoneModal">
                        <i class="bi bi-plus"></i> Ajouter une zone
                    </button>
                </div>
                <div class="card-body">
                    {% if zones %}
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Nom</th>
                                <th>Salles</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for zone in zones %}
                            <tr>
                                <td>{{ zone.name }}</td>
                                <td>{{ zone.rooms|length }}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-outline-danger" 
                                            onclick="deleteZone({{ zone.id }})">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <p class="text-muted">Aucune zone définie. Les zones permettent de grouper les salles.</p>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Modal Ajouter Zone -->
{% if building %}
<div class="modal fade" id="addZoneModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajouter une zone</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addZoneForm">
                    <div class="mb-3">
                        <label class="form-label">Nom de la zone *</label>
                        <input type="text" name="zone_name" class="form-control" required>
                        <small class="text-muted">Ex: RDC, Étage 1, Aile Nord...</small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" onclick="addZone()">Ajouter</button>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}

{% block extra_scripts %}
{% if building %}
<script>
function addZone() {
    const name = document.querySelector('input[name="zone_name"]').value;
    if (!name) {
        alert('Veuillez entrer un nom de zone');
        return;
    }
    
    const csrfToken = '{{ csrf_token() }}';
    
    fetch('/equipments/buildings/{{ building.id }}/zones', {
        method: 'POST',
        headers: { 
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken
        },
        body: JSON.stringify({ name: name })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erreur: ' + data.error);
        }
    })
    .catch(error => alert('Erreur: ' + error));
}

function deleteZone(zoneId) {
    if (!confirm('Supprimer cette zone ? Les salles associées seront sans zone.')) {
        return;
    }
    
    const csrfToken = '{{ csrf_token() }}';
    
    fetch('/equipments/zones/' + zoneId, {
        method: 'DELETE',
        headers: { 
            'X-CSRFToken': csrfToken
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erreur: ' + data.error);
        }
    })
    .catch(error => alert('Erreur: ' + error));
}
</script>
{% endif %}
{% endblock %}