{% extends 'layout.html' %}

{% block title %}Ajouter 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">Nouvel Ordre de Travail</h1>
        <a href="{{ url_for('liste_ordres') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Retour à la liste
        </a>
    </div>

    <!-- Formulaire -->
    <div class="card shadow-sm">
        <div class="card-body">
            <form method="post" action="{{ url_for('ajouter_ordre') }}">
                <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="{{ new_num }}" required>
                    </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 }}">{{ 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="{{ now.strftime('%d/%m/%Y') }}" 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 }}">{{ 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"></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">
                    </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">
                    </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">
                    </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">
                    </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"></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"></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">
                    </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">
                    </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">
                    </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">
                            <label class="form-check-label" for="signature">Intervention terminée</label>
                        </div>
                    </div>
                </div>

                <div class="mt-4 d-flex justify-content-end">
                    <button type="reset" class="btn btn-outline-secondary me-2">Réinitialiser</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Enregistrer
                    </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 %}