{% extends 'layout.html' %}

{% block title %}Ajouter une gamme de maintenance{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <h2 class="border-bottom pb-2">
            <i class="fas fa-plus-circle me-2"></i>Ajouter une gamme de maintenance
        </h2>
    </div>
    <div class="col-md-4 text-end">
        <a href="{{ url_for('liste_gammes') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Retour à la liste
        </a>
    </div>
</div>

<div class="card">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="fas fa-edit me-2"></i>Formulaire d'ajout</h5>
    </div>
    <div class="card-body">
        <form method="post" action="{{ url_for('ajouter_gamme') }}">
            <div class="row">
                <!-- Informations de base -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">Informations de base</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="mei_ident" class="form-label">Équipement *</label>
                                <select class="form-select" id="mei_ident" name="mei_ident" required>
                                    <option value="">Sélectionner un équipement</option>
                                    {% for equipement in equipements %}
                                    <option value="{{ equipement.id }}">{{ equipement.designation }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="element" class="form-label">Élément *</label>
                                <input type="text" class="form-control" id="element" name="element" required>
                                <small class="form-text text-muted">Partie ou composant spécifique de l'équipement</small>
                            </div>
                            
                            <div class="mb-3">
                                <label for="id_operation" class="form-label">Opération *</label>
                                <select class="form-select" id="id_operation" name="id_operation" required>
                                    <option value="">Sélectionner une opération</option>
                                    {% for operation in operations %}
                                    <option value="{{ operation.id }}">{{ operation.designation }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Planification -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">Planification</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="executant" class="form-label">Exécutant *</label>
                                <select class="form-select" id="executant" name="executant" required>
                                    <option value="">Sélectionner un exécutant</option>
                                    {% for executant in executants %}
                                    <option value="{{ executant.id }}">{{ executant.nom }} {{ executant.prenom }} ({{ executant.fonction }})</option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="duree" class="form-label">Durée estimée (min) *</label>
                                <input type="text" class="form-control" id="duree" name="duree" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="periodicite" class="form-label">Périodicité *</label>
                                <select class="form-select" id="periodicite" name="periodicite" required>
                                    <option value="Quotidienne">Quotidienne</option>
                                    <option value="Hebdomadaire">Hebdomadaire</option>
                                    <option value="Mensuelle">Mensuelle</option>
                                    <option value="Trimestrielle">Trimestrielle</option>
                                    <option value="Semestrielle">Semestrielle</option>
                                    <option value="Annuelle">Annuelle</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="marche" class="form-label">Mode opératoire *</label>
                                <textarea class="form-control" id="marche" name="marche" rows="3" required></textarea>
                                <small class="form-text text-muted">Instructions détaillées pour réaliser l'opération</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Outillages -->
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Outillages nécessaires</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Sélectionner les outillages</label>
                        <div class="form-text mb-2">Cochez tous les outillages nécessaires pour cette opération.</div>
                        
                        <div class="border p-3 bg-light" style="max-height: 200px; overflow-y: auto;">
                            {% for outillage in outillages %}
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="{{ outillage.id }}" id="out{{ outillage.id }}" name="outillages">
                                <label class="form-check-label" for="out{{ outillage.id }}">
                                    {{ outillage.designation }}
                                </label>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-end">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-2"></i>Enregistrer
                </button>
                <a href="{{ url_for('liste_gammes') }}" class="btn btn-secondary">
                    <i class="fas fa-times me-2"></i>Annuler
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}