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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <div><h1 class="mb-1">{{ title }}</h1><p class="text-muted mb-0">Fiche détaillée d’un équipement unique ou d’un groupe d’équipements.</p></div>
    <a href="{{ url_for('wizard.equipment_wizard') }}" class="btn btn-outline-primary"><i class="bi bi-magic"></i> Création guidée en série</a>
</div>
<div class="alert alert-info"><i class="bi bi-info-circle"></i> Utilisez cette fiche pour un équipement précis (luminaire, prise, fenêtre…). Pour créer le même équipement dans plusieurs salles, utilisez la création guidée.</div>
<div class="card"><div class="card-body">
<form method="POST" id="equipmentForm">
    {{ form.hidden_tag() }}
    <div class="row">
        <div class="col-md-4 mb-3">{{ form.name.label(class="form-label") }}{{ form.name(class="form-control") }}</div>
        <div class="col-md-4 mb-3">{{ form.code.label(class="form-label") }}{{ form.code(class="form-control") }}</div>
        <div class="col-md-4 mb-3">{{ form.status.label(class="form-label") }}{{ form.status(class="form-select") }}</div>
    </div>
    <div class="row">
        <div class="col-md-4 mb-3">{{ form.category_id.label(class="form-label") }}{{ form.category_id(class="form-select") }}</div>
        <div class="col-md-4 mb-3">{{ form.room_id.label(class="form-label") }}{{ form.room_id(class="form-select") }}</div>
        <div class="col-md-4 mb-3">{{ form.parent_id.label(class="form-label") }}{{ form.parent_id(class="form-select") }}</div>
    </div>
    
    <h5 class="border-bottom pb-2">Organisation et quantité</h5>
    {# Gestion des groupes d'équipements #}
    <div class="card mb-3">
        <div class="card-header">
            <div class="form-check">
                {{ form.is_group(class="form-check-input") }}
                {{ form.is_group.label(class="form-check-label") }}
            </div>
        </div>
        <div class="card-body" id="groupOptions" style="display: none;">
            <div class="row">
                <div class="col-md-6 mb-3">
                    {{ form.quantity.label(class="form-label") }}
                    {{ form.quantity(class="form-control", min=1) }}
                    <small class="text-muted">Nombre d'unités dans ce groupe</small>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-check mt-4">
                        {{ form.tracked_individually(class="form-check-input") }}
                        {{ form.tracked_individually.label(class="form-check-label") }}
                    </div>
                    <small class="text-muted">Chaque unité sera suivie individuellement avec un numéro unique</small>
                </div>
            </div>
        </div>
    </div>
    
    {% if equipment and equipment.is_individual %}
    {# Position uniquement pour les éléments individuels #}
    <div class="mb-3">
        {{ form.position.label(class="form-label") }}
        {{ form.position(class="form-control", placeholder="Ex: Rang 1, Place 3") }}
        <small class="text-muted">Position de cet élément dans la salle</small>
    </div>
    {% endif %}
    
    <h5 class="border-bottom pb-2 mt-4">Dates et description</h5>
    <div class="row">
        <div class="col-md-6 mb-3">{{ form.install_date.label(class="form-label") }}{{ form.install_date(class="form-control", type="date") }}</div>
        <div class="col-md-6 mb-3">{{ form.warranty_end.label(class="form-label") }}{{ form.warranty_end(class="form-control", type="date") }}</div>
    </div>
    <div class="mb-3">{{ form.description.label(class="form-label") }}{{ form.description(class="form-control", rows=3) }}</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.index') }}" class="btn btn-outline-secondary">Annuler</a>
    </div>
</form>
</div></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const isGroupCheckbox = document.getElementById('is_group');
    const groupOptions = document.getElementById('groupOptions');
    const quantityField = document.getElementById('quantity');
    
    function toggleGroupOptions() {
        if (isGroupCheckbox.checked) {
            groupOptions.style.display = 'block';
            quantityField.value = quantityField.value || 1;
        } else {
            groupOptions.style.display = 'none';
        }
    }
    
    isGroupCheckbox.addEventListener('change', toggleGroupOptions);
    toggleGroupOptions(); // Initial state
});
</script>
{% endblock %}