{% extends 'layout.html' %}
{% from 'macros.html' import common_styles %}
{% block title %}Nouvelle intervention{% endblock %}
{% block page_title %}Nouvelle intervention{% endblock %}
{% block styles %}{{ common_styles() }}{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-xl-8 col-lg-10">

      <div class="d-flex align-items-center gap-3 mb-4">
        <a href="{{ url_for('liste_interventions') }}" class="back-btn">
          <i class="fas fa-arrow-left"></i>Retour
        </a>
        <h5 class="fw-bold mb-0">Nouvelle demande d'intervention</h5>
      </div>

      <div class="card border-0 shadow-sm" style="border-radius:14px">
        <div class="card-body p-4">
          <form method="POST" action="{{ url_for('ajouter_intervention') }}" id="interventionForm">

            <div class="section-hdr"><i class="fas fa-info-circle text-primary"></i>Identification</div>
            <div class="row g-3 mb-4">
              <div class="col-md-6">
                <label class="form-label">Numéro d'intervention <span class="text-danger">*</span></label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text"><i class="fas fa-hashtag"></i></span>
                  <input type="text" class="form-control" name="numero" id="numero" required placeholder="P/0001/2025">
                </div>
                <div class="form-text">Format : P/XXX/AAAA</div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Équipement <span class="text-danger">*</span></label>
                <select class="form-select form-select-sm" name="id_mei" required>
                  <option value="">— Sélectionner —</option>
                  {% for e in equipements %}
                  <option value="{{ e.id }}">{{ e.designation }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>

            <div class="section-hdr"><i class="fas fa-exclamation-triangle text-warning"></i>Caractéristiques</div>
            <div class="row g-3 mb-4">
              <div class="col-md-6">
                <label class="form-label">Type de panne <span class="text-danger">*</span></label>
                <div class="d-flex gap-3 mt-1">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="panne" id="p_totale" value="totale" checked>
                    <label class="form-check-label" for="p_totale">
                      <span class="badge" style="background:#fde8e6;color:#b91c1c">Totale</span>
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="panne" id="p_partielle" value="partielle">
                    <label class="form-check-label" for="p_partielle">
                      <span class="badge" style="background:#fef3c7;color:#92400e">Partielle</span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Degré d'urgence <span class="text-danger">*</span></label>
                <div class="d-flex gap-3 mt-1 flex-wrap">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="degre" id="d_tres" value="Trés urgent">
                    <label class="form-check-label" for="d_tres">
                      <span class="badge" style="background:#fde8e6;color:#b91c1c">🔴 Très urgent</span>
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="degre" id="d_urgent" value="Urgent">
                    <label class="form-check-label" for="d_urgent">
                      <span class="badge" style="background:#fef3c7;color:#92400e">🟡 Urgent</span>
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="degre" id="d_normal" value="Normal" checked>
                    <label class="form-check-label" for="d_normal">
                      <span class="badge" style="background:#dce8ff;color:#1d4ed8">🔵 Normal</span>
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="section-hdr"><i class="fas fa-align-left text-info"></i>Description</div>
            <div class="mb-4">
              <textarea class="form-control" name="description" rows="4" required
                        placeholder="Décrivez clairement le problème constaté…"></textarea>
              <div class="form-text">Soyez précis pour faciliter le diagnostic du technicien.</div>
            </div>

            <div class="d-flex justify-content-end gap-2">
              <a href="{{ url_for('liste_interventions') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-times me-1"></i>Annuler
              </a>
              <button type="submit" class="btn btn-primary btn-sm px-4">
                <i class="fas fa-save me-1"></i>Enregistrer
              </button>
            </div>

          </form>
        </div>
      </div>

    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function(){
  if(!document.getElementById('numero').value){
    const d = new Date();
    const n = String(Math.floor(Math.random()*9000)+1000);
    document.getElementById('numero').value = `P/${n}/${d.getFullYear()}`;
  }
});
</script>
{% endblock %}