{% extends 'layout.html' %}

{% block title %}Modifier un Ordre de Travail{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- En-tête de page -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">Modifier l'Ordre de Travail {{ ordre.num_or }}</h1>
        <div>
            <a href="{{ url_for('liste_ordres') }}" class="btn btn-secondary me-2">
                <i class="fas fa-arrow-left me-2"></i>Retour à la liste
            </a>
            <a href="{{ url_for('voir_ordre', id=ordre.id) }}" class="btn btn-info">
                <i class="fas fa-eye me-2"></i>Voir les détails
            </a>
        </div>
    </div>

    <!-- Formulaire -->
    <div class="card shadow-sm">
        <div class="card-body">
            <form method="post" action="{{ url_for('modifier_ordre', id=ordre.id) }}">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="num_or" class="form-label">Numéro d'ordre <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="num_or" name="num_or" value="{{ ordre.num_or }}" readonly>
                        <small class="form-text text-muted">Le numéro d'ordre ne peut pas être modifié</small>
                    </div>
                    <div class="col-md-4">
                        <label for="num_dr" class="form-label">Demande d'intervention <span class="text-danger">*</span></label>
                        <select class="form-select" id="num_dr" name="num_dr" required>
                            <option value="">Sélectionner une demande</option>
                            {% for demande in demandes %}
                                <option value="{{ demande.numero }}" {% if demande.numero == ordre.num_dr %}selected{% endif %}>
                                    {{ demande.numero }} - {{ demande.description }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="date" class="form-label">Date <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="date" name="date" value="{{ ordre.date }}" required>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="operateurs" class="form-label">Opérateurs assignés</label>
                        <select class="form-select" id="operateurs" name="operateurs" multiple size="5">
                            {% for operateur in operateurs %}
                                <option value="{{ operateur.id }}" {% if operateur.id in operateurs_selectionnes %}selected{% endif %}>
                                    {{ operateur.nom }} {{ operateur.prenom }} - {{ operateur.specialite }}
                                </option>
                            {% endfor %}
                        </select>
                        <small class="form-text text-muted">Maintenez Ctrl pour sélectionner plusieurs opérateurs</small>
                    </div>
                    <div class="col-md-6">
                        <label for="constatation" class="form-label">Constatation</label>
                        <textarea class="form-control" id="constatation" name="constatation" rows="5">{{ ordre.constatation }}</textarea>
                    </div>
                </div>

                <h5 class="mt-4 mb-3">Dates et heures d'intervention</h5>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="date_debut" class="form-label">Date début</label>
                        <input type="date" class="form-control" id="date_debut" name="date_debut" value="{{ ordre.date_debut }}">
                    </div>
                    <div class="col-md-3">
                        <label for="heure_debut" class="form-label">Heure début</label>
                        <input type="time" class="form-control" id="heure_debut" name="heure_debut" value="{{ ordre.heure_debut }}">
                    </div>
                    <div class="col-md-3">
                        <label for="date_fin" class="form-label">Date fin</label>
                        <input type="date" class="form-control" id="date_fin" name="date_fin" value="{{ ordre.date_fin }}">
                    </div>
                    <div class="col-md-3">
                        <label for="heure_fin" class="form-label">Heure fin</label>
                        <input type="time" class="form-control" id="heure_fin" name="heure_fin" value="{{ ordre.heure_fin }}">
                    </div>
                </div>

                <h5 class="mt-4 mb-3">Détails de l'intervention</h5>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="diagnostic" class="form-label">Diagnostic</label>
                        <textarea class="form-control" id="diagnostic" name="diagnostic" rows="3">{{ ordre.diagnostic }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label for="nature_intervention" class="form-label">Nature de l'intervention</label>
                        <textarea class="form-control" id="nature_intervention" name="nature_intervention" rows="3">{{ ordre.nature_intervention }}</textarea>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="temps_diagnostic" class="form-label">Temps de diagnostic</label>
                        <input type="text" class="form-control" id="temps_diagnostic" name="temps_diagnostic" placeholder="hh:mm" value="{{ ordre.temps_diagnostic }}">
                    </div>
                    <div class="col-md-3">
                        <label for="temps_intervention" class="form-label">Temps d'intervention</label>
                        <input type="text" class="form-control" id="temps_intervention" name="temps_intervention" placeholder="hh:mm" value="{{ ordre.temps_intervention }}">
                    </div>
                    <div class="col-md-3">
                        <label for="num_bp" class="form-label">Numéro bon de prélèvement</label>
                        <input type="text" class="form-control" id="num_bp" name="num_bp" value="{{ ordre.num_bp }}">
                    </div>
                    <div class="col-md-3">
                        <label for="signature" class="form-label">Clôturé</label>
                        <div class="form-check form-switch mt-2">
                            <input class="form-check-input" type="checkbox" id="signature" name="signature" value="oui" {% if ordre.signature == 'oui' %}checked{% endif %}>
                            <label class="form-check-label" for="signature">Intervention terminée</label>
                        </div>
                    </div>
                </div>

                <div class="mt-4 d-flex justify-content-end">
                    <a href="{{ url_for('voir_ordre', id=ordre.id) }}" class="btn btn-outline-secondary me-2">Annuler</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Enregistrer les modifications
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Activer la sélection multiple dans le champ opérateurs
        const operateursSelect = document.getElementById('operateurs');
        if (operateursSelect) {
            $(operateursSelect).select2({
                placeholder: "Sélectionner un ou plusieurs opérateurs",
                allowClear: true
            });
        }
    });
</script>
{% endblock %}