{% extends "base.html" %}

{% block title %}{{ 'Nouvel équipement' if not equipment else 'Modifier l\'équipement' }} — GMAO{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h1 class="h3">
                <i class="fas fa-tools me-2"></i>
                {{ 'Nouvel équipement' if not equipment else 'Modifier l\'équipement' }}
            </h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <!-- Étape 1: Choix du type (uniquement pour création) -->
                    {% if not equipment %}
                    <div class="mb-4" id="type-selector">
                        <label class="form-label fw-bold">Type d'équipement</label>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="card h-100 type-card" data-type="parent" style="cursor: pointer; transition: all 0.2s;">
                                    <div class="card-body text-center">
                                        <i class="bi bi-collection fs-1 text-primary"></i>
                                        <h5 class="mt-2">Groupe parent</h5>
                                        <small class="text-muted">Ex: Lot de 60 chaises</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card h-100 type-card" data-type="child" style="cursor: pointer; transition: all 0.2s;">
                                    <div class="card-body text-center">
                                        <i class="bi bi-diagram-3 fs-1 text-success"></i>
                                        <h5 class="mt-2">Groupe enfant</h5>
                                        <small class="text-muted">Ex: 30 chaises salle B101</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card h-100 type-card" data-type="individual" style="cursor: pointer; transition: all 0.2s;">
                                    <div class="card-body text-center">
                                        <i class="bi bi-box fs-1 text-warning"></i>
                                        <h5 class="mt-2">Individuel</h5>
                                        <small class="text-muted">Ex: Vidéo-projecteur #1</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    
                    <form method="POST" id="equipment-form">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="is_group" id="is_group_input" value="{{ '1' if equipment and equipment.is_group else '0' }}">
                        <input type="hidden" name="parent_id" id="parent_id_input" value="{{ equipment.parent_id if equipment else '' }}">
                        
                        <!-- Champs communs -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="name" class="form-label">Nom *</label>
                                <input type="text" class="form-control" id="name" name="name" 
                                       value="{{ equipment.name if equipment else '' }}" required>
                            </div>
                            <div class="col-md-6" id="code_field">
                                {% if not equipment or equipment.is_individual %}
                                <label for="code" class="form-label">Code / Numéro de série</label>
                                <input type="text" class="form-control" id="code" name="code"
                                       value="{{ equipment.code if equipment else '' }}"
                                       placeholder="Ex: CHAISE-001">
                                <small class="text-muted">Uniquement pour les éléments individuels</small>
                                {% else %}
                                <label class="form-label">Code</label>
                                <input type="text" class="form-control" value="Non applicable (groupe)" disabled>
                                <small class="text-muted">Les groupes n'ont pas de numéro de série</small>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="category_id" class="form-label">Catégorie</label>
                                <select class="form-select" id="category_id" name="category_id">
                                    <option value="">-- Sélectionner --</option>
                                    {% for cat in categories %}
                                    <option value="{{ cat.id }}" {{ 'selected' if equipment and equipment.category_id == cat.id else '' }}>
                                        {{ cat.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6" id="room_field">
                                <label for="room_id" class="form-label">Salle <span id="room_required">*</span></label>
                                <select class="form-select" id="room_id" name="room_id">
                                    <option value="">-- Sélectionner --</option>
                                    {% for building in buildings %}
                                        <optgroup label="{{ building.name }}">
                                            {% for room in building.rooms %}
                                            <option value="{{ room.id }}" {{ 'selected' if equipment and equipment.room_id == room.id else '' }}>
                                                {{ room.name }}
                                            </option>
                                            {% endfor %}
                                        </optgroup>
                                    {% endfor %}
                                </select>
                                <small class="text-muted" id="room_hint">Obligatoire pour les éléments individuels</small>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="lot_id" class="form-label">Lot</label>
                                <select class="form-select" id="lot_id" name="lot_id">
                                    <option value="">-- Aucun lot --</option>
                                    {% for lot in lots %}
                                    <option value="{{ lot.id }}" {{ 'selected' if equipment and equipment.lot_id == lot.id else '' }}>
                                        {{ lot.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted">Associe les tâches préventives du lot à l'équipement</small>
                            </div>
                            <div class="col-md-6">
                                <label for="status" class="form-label">Statut</label>
                                <select class="form-select" id="status" name="status">
                                    <option value="en_service" {{ 'selected' if equipment and equipment.status == 'en_service' else '' }}>En service</option>
                                    <option value="en_panne" {{ 'selected' if equipment and equipment.status == 'en_panne' else '' }}>En panne</option>
                                    <option value="en_maintenance" {{ 'selected' if equipment and equipment.status == 'en_maintenance' else '' }}>En maintenance</option>
                                    <option value="hs" {{ 'selected' if equipment and equipment.status == 'hs' else '' }}>Hors service</option>
                                </select>
                            </div>
                            <div class="col-md-6" id="quantity_field">
                                <label for="quantity" class="form-label">Quantité</label>
                                <input type="number" class="form-control" id="quantity" name="quantity"
                                       value="{{ equipment.quantity if equipment else 1 }}" min="1">
                                <small class="text-muted">Nombre d'unités dans le groupe</small>
                            </div>
                        </div>
                        
                        <div class="row mb-3" id="parent_selector" style="display: none;">
                            <div class="col-md-12">
                                <label for="parent_select" class="form-label">Équipement parent *</label>
                                <select class="form-select" id="parent_select" name="parent_select">
                                    <option value="">-- Sélectionner un parent --</option>
                                    {% for eq in parent_equipments %}
                                    <option value="{{ eq.id }}" data-quantity="{{ eq.quantity }}" data-category="{{ eq.category_id }}" {{ 'selected' if preselected_parent_id == eq.id|string else '' }}>
                                        {{ eq.name }} ({{ eq.quantity }} unités)
                                    </option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted">L'enfant héritera de la catégorie du parent</small>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="3">{{ equipment.description if equipment else '' }}</textarea>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('equipments.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-1"></i>Retour
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Enregistrer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Aide</h5>
                </div>
                <div class="card-body" id="help-panel">
                    <p class="text-muted">Sélectionnez un type d'équipement pour voir les détails.</p>
                    
                    <div id="help-parent" style="display:none;">
                        <h6><i class="bi bi-collection text-primary me-2"></i>Groupe parent</h6>
                        <ul class="small">
                            <li>Équipement principal (ex: Lot de 60 chaises)</li>
                            <li>Pas de salle assignée</li>
                            <li>Peut contenir des enfants</li>
                            <li>Quantité déclarée</li>
                        </ul>
                    </div>
                    
                    <div id="help-child" style="display:none;">
                        <h6><i class="bi bi-diagram-3 text-success me-2"></i>Groupe enfant</h6>
                        <ul class="small">
                            <li>Sous-ensemble localisé (ex: 30 chaises salle B101)</li>
                            <li>Salle optionnelle</li>
                            <li>Lié à un parent</li>
                            <li>Hérite de la catégorie du parent</li>
                        </ul>
                    </div>
                    
                    <div id="help-individual" style="display:none;">
                        <h6><i class="bi bi-box text-warning me-2"></i>Individuel</h6>
                        <ul class="small">
                            <li>Unité unique suivie individuellement</li>
                            <li>Numéro de série requis</li>
                            <li>Salle obligatoire</li>
                            <li>Peut être déplacé entre salles</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.type-card {
    border: 2px solid #dee2e6;
}
.type-card:hover {
    border-color: #0d6efd;
    transform: translateY(-2px);
}
.type-card.selected {
    border-color: #0d6efd;
    background-color: #f8f9fa;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const typeCards = document.querySelectorAll('.type-card');
    const isGroupInput = document.getElementById('is_group_input');
    const parentIdInput = document.getElementById('parent_id_input');
    const parentSelector = document.getElementById('parent_selector');
    const quantityField = document.getElementById('quantity_field');
    const roomField = document.getElementById('room_field');
    const codeField = document.getElementById('code_field');
    const roomRequired = document.getElementById('room_required');
    const roomHint = document.getElementById('room_hint');
    
    // Vérifier si on a un parent_id dans l'URL (via template)
    const preselectedParentId = "{{ preselected_parent_id or '' }}";
    
    // Masquer les champs conditionnels au départ (création uniquement)
    {% if not equipment %}
    parentSelector.style.display = 'none';
    quantityField.style.display = 'none';
    {% endif %}
    
    // Gestion du changement de parent
    const parentSelect = document.getElementById('parent_select');
    if (parentSelect) {
        parentSelect.addEventListener('change', function() {
            parentIdInput.value = this.value;
            
            // Hériter de la catégorie du parent
            if (this.selectedOptions[0]) {
                const categoryId = this.selectedOptions[0].dataset.category;
                document.getElementById('category_id').value = categoryId;
            }
        });
    }
    
    // Fonction pour sélectionner un type
    function selectType(type) {
        // Retirer la sélection précédente
        typeCards.forEach(c => c.classList.remove('selected'));
        
        // Trouver et ajouter la classe selected
        const card = document.querySelector('.type-card[data-type="' + type + '"]');
        if (card) {
            card.classList.add('selected');
        }
        
        // Masquer tous les panneaux d'aide
        document.getElementById('help-parent').style.display = 'none';
        document.getElementById('help-child').style.display = 'none';
        document.getElementById('help-individual').style.display = 'none';
        
        // Afficher le panneau d'aide correspondant
        document.getElementById('help-' + type).style.display = 'block';
        
        // Ajuster les champs selon le type
        if (type === 'parent') {
            isGroupInput.value = '1';
            parentIdInput.value = '';
            parentSelector.style.display = 'none';
            quantityField.style.display = 'block';
            roomField.style.display = 'block';
            roomRequired.textContent = '';
            roomHint.textContent = 'Optionnel pour un groupe parent';
            codeField.querySelector('input').disabled = true;
            codeField.querySelector('input').value = '';
            codeField.querySelector('small').textContent = 'Les groupes n\'ont pas de numéro de série';
        } else if (type === 'child') {
            isGroupInput.value = '1';
            parentSelector.style.display = 'block';
            quantityField.style.display = 'block';
            roomField.style.display = 'block';
            roomRequired.textContent = '';
            roomHint.textContent = 'Optionnel pour un groupe enfant';
            codeField.querySelector('input').disabled = true;
            codeField.querySelector('small').textContent = 'Les groupes n\'ont pas de numéro de série';
        } else if (type === 'individual') {
            isGroupInput.value = '0';
            parentIdInput.value = '';
            parentSelector.style.display = 'none';
            quantityField.style.display = 'none';
            roomField.style.display = 'block';
            roomRequired.textContent = '*';
            roomHint.textContent = 'Obligatoire pour un élément individuel';
            codeField.querySelector('input').disabled = false;
            codeField.querySelector('input').placeholder = 'Ex: CHAISE-001';
            codeField.querySelector('small').textContent = 'Uniquement pour les éléments individuels';
        }
    }
    
    // Gestion du clic sur les cartes de type
    typeCards.forEach(card => {
        card.addEventListener('click', function() {
            selectType(this.dataset.type);
        });
    });
    
    // Si parent_id pré-sélectionné, activer le mode "enfant"
    {% if preselected_parent_id %}
    selectType('child');
    if (parentSelect) {
        parentSelect.value = '{{ preselected_parent_id }}';
        parentSelect.dispatchEvent(new Event('change'));
    }
    {% endif %}
});
</script>
{% endblock %}