{% extends 'layout.html' %}
{% from 'macros.html' import common_styles, badge_urgence, badge_etat, badge_panne, info_row %}
{% block title %}Intervention {{ intervention.numero }}{% endblock %}
{% block page_title %}Détail intervention{% endblock %}
{% block styles %}{{ common_styles() }}
<style>
.detail-card { border:none; border-radius:14px; }
.detail-card .card-header { background:#fff; border-bottom:1px solid #f1f5f9; border-radius:14px 14px 0 0; padding:14px 20px; }
.action-bar { display:flex; gap:8px; flex-wrap:wrap; padding:16px 20px; background:#f8fafc; border-radius:0 0 14px 14px; border-top:1px solid #f1f5f9; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

  <!-- EN-TÊTE IMPRESSION -->
  <div class="print-header">
    <div>
      <div class="ph-logo">BIOGALENIC</div>
      <div class="ph-sub">Gestion de Maintenance Assistée par Ordinateur</div>
    </div>
    <div class="ph-doc">
      <div class="ph-title">DEMANDE D'INTERVENTION</div>
      <div class="ph-num">N° {{ intervention.numero }}</div>
      <div style="font-size:8pt;color:#888;margin-top:2px">Imprimé le {{ now.strftime('%d/%m/%Y à %H:%M') }}</div>
    </div>
  </div>

  <!-- Retour + titre -->
  <div class="d-flex align-items-center gap-3 mb-4 flex-wrap no-print">
    <a href="{{ url_for('liste_interventions') }}" class="back-btn">
      <i class="fas fa-arrow-left"></i>Retour
    </a>
    <div class="d-flex align-items-center gap-2">
      <span class="fw-bold text-dark">{{ intervention.numero }}</span>
      {{ badge_urgence(intervention.degre) }}
      {{ badge_etat(intervention.est_traiter, intervention.annuler) }}
    </div>
    <button onclick="window.print()" class="btn btn-sm btn-outline-secondary ms-auto no-print">
      <i class="fas fa-print me-1"></i>Imprimer
    </button>
  </div>

  <div class="row g-3">

    <!-- Infos générales -->
    <div class="col-lg-6">
      <div class="card detail-card shadow-sm h-100">
        <div class="card-header d-flex align-items-center gap-2">
          <i class="fas fa-info-circle text-primary"></i>
          <span class="fw-semibold">Informations générales</span>
        </div>
        <div class="card-body px-4 py-3">
          {{ info_row('Numéro', intervention.numero, 'fa-hashtag') }}
          {{ info_row('Date de demande', intervention.date, 'fa-calendar') }}
          {{ info_row("Date d'arrêt", intervention.date_arret, 'fa-calendar-times') }}
          {{ info_row("Heure d'arrêt", intervention.heure, 'fa-clock') }}
          {{ info_row('Demandeur', intervention.username, 'fa-user') }}
          {{ info_row('Technicien', intervention.user_mei, 'fa-hard-hat') }}
          {{ info_row('Responsable', intervention.resp_user, 'fa-user-tie') }}
          <div class="d-flex align-items-start py-2" style="border-bottom:1px solid #f1f5f9">
            <div class="text-muted small fw-semibold" style="min-width:180px">
              <i class="fas fa-bolt me-2 text-primary" style="width:14px"></i>Type de panne
            </div>
            <div>{{ badge_panne(intervention.panne) }}</div>
          </div>
          <div class="d-flex align-items-start py-2">
            <div class="text-muted small fw-semibold" style="min-width:180px">
              <i class="fas fa-exclamation-triangle me-2 text-primary" style="width:14px"></i>Urgence
            </div>
            <div>{{ badge_urgence(intervention.degre) }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Équipement -->
    <div class="col-lg-6">
      <div class="card detail-card shadow-sm h-100">
        <div class="card-header d-flex align-items-center gap-2">
          <i class="fas fa-industry text-primary"></i>
          <span class="fw-semibold">Équipement concerné</span>
        </div>
        <div class="card-body px-4 py-3">
          {{ info_row('Désignation', intervention.designation, 'fa-tag') }}
          {{ info_row('Marque', intervention.marque, 'fa-trademark') }}
          {{ info_row('Modèle', intervention.modele, 'fa-cube') }}
          {{ info_row('N° de série', intervention.n_serie, 'fa-barcode') }}
        </div>
      </div>
    </div>

    <!-- Description -->
    <div class="col-12">
      <div class="card detail-card shadow-sm">
        <div class="card-header d-flex align-items-center gap-2">
          <i class="fas fa-align-left text-warning"></i>
          <span class="fw-semibold">Description de la panne</span>
        </div>
        <div class="card-body px-4 py-3">
          <p class="mb-0" style="line-height:1.7;color:#374151">{{ intervention.description }}</p>
        </div>
      </div>
    </div>

    <!-- Pièces utilisées -->
    <div class="col-12">
      <div class="card detail-card shadow-sm">
        <div class="card-header d-flex align-items-center gap-2">
          <i class="fas fa-cogs text-success"></i>
          <span class="fw-semibold">Pièces de rechange utilisées</span>
          <span class="badge bg-success ms-1" style="font-size:.7rem">{{ pieces|length }}</span>
        </div>
        <div class="card-body p-0">
          {% if pieces %}
          <div class="table-responsive">
            <table class="table gtable mb-0">
              <thead><tr><th>Référence</th><th>Désignation</th><th>Quantité</th><th>Motif</th></tr></thead>
              <tbody>
                {% for p in pieces %}
                <tr>
                  <td class="fw-semibold text-primary">{{ p.reference }}</td>
                  <td>{{ p.designation }}</td>
                  <td><span class="badge bg-primary">{{ p.qte_av }}</span></td>
                  <td class="text-muted">{{ p.motif or '—' }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
          <div class="text-center py-4 text-muted">
            <i class="fas fa-cogs fa-2x mb-2 d-block opacity-25"></i>
            Aucune pièce utilisée
          </div>
          {% endif %}
        </div>

        <!-- Barre d'actions -->
        <div class="action-bar no-print">
          {% if intervention.est_traiter=='non' and intervention.annuler=='non' and permissions.can_edit %}
          <a href="{{ url_for('traiter_intervention', id=intervention.id) }}"
             class="btn btn-sm btn-success" onclick="return confirm('Marquer comme traitée ?')">
            <i class="fas fa-check me-1"></i>Marquer traitée
          </a>
          <a href="{{ url_for('annuler_intervention', id=intervention.id) }}"
             class="btn btn-sm btn-warning" onclick="return confirm('Annuler cette intervention ?')">
            <i class="fas fa-ban me-1"></i>Annuler
          </a>
          {% endif %}
          {% if permissions.can_delete %}
          <a href="{{ url_for('supprimer_intervention', id=intervention.id) }}"
             class="btn btn-sm btn-danger ms-auto" onclick="return confirm('Supprimer cette intervention ?')">
            <i class="fas fa-trash me-1"></i>Supprimer
          </a>
          {% endif %}
        </div>
      </div>
    </div>

  </div>

  <!-- SIGNATURES impression -->
  <div class="print-only" style="margin-top:30px">
    <div class="print-sign">
      <div class="print-sign-box">Demandeur<br><small>{{ intervention.username }}</small></div>
      <div class="print-sign-box">Technicien<br><small>{{ intervention.user_mei or '...' }}</small></div>
      <div class="print-sign-box">Responsable<br><small>{{ intervention.resp_user or '...' }}</small></div>
    </div>
  </div>

  <div class="print-footer">
    BIOGALENIC – GMAO – Document confidentiel – {{ now.strftime('%d/%m/%Y') }}
  </div>

</div>
{% endblock %}