{% extends 'layout.html' %}
{% from 'macros.html' import common_styles, info_row %}
{% block title %}OT {{ ordre.num_or }}{% endblock %}
{% block page_title %}Ordre de travail{% endblock %}
{% block styles %}{{ common_styles() }}{% 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">ORDRE DE TRAVAIL</div>
      <div class="ph-num">N° {{ ordre.num_or }}</div>
      <div style="font-size:8pt;color:#888;margin-top:2px">Imprimé le {{ now.strftime('%d/%m/%Y à %H:%M') }}</div>
    </div>
  </div>

  <!-- Navigation écran -->
  <div class="d-flex align-items-center gap-3 mb-4 flex-wrap no-print">
    <a href="{{ url_for('liste_ordres') }}" 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">{{ ordre.num_or }}</span>
      {% if ordre.signature == 'oui' %}
        <span class="badge" style="background:#d1fae5;color:#065f46">✅ Clôturé</span>
      {% else %}
        <span class="badge" style="background:#fef3c7;color:#92400e">⏳ En cours</span>
      {% endif %}
    </div>
    <div class="ms-auto d-flex gap-2">
      {% if permissions.can_edit %}
      <a href="{{ url_for('modifier_ordre', id=ordre.id) }}" class="btn btn-sm btn-primary">
        <i class="fas fa-edit me-1"></i>Modifier
      </a>
      {% endif %}
      <button onclick="window.print()" class="btn btn-sm btn-outline-secondary">
        <i class="fas fa-print me-1"></i>Imprimer
      </button>
    </div>
  </div>

  <!-- Bandeau statut écran -->
  <div class="card border-0 shadow-sm mb-3 no-print" style="border-radius:12px">
    <div class="card-body py-3 px-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
      <div class="d-flex align-items-center gap-3">
        <div class="rounded-3 d-flex align-items-center justify-content-center"
             style="width:40px;height:40px;background:#f0fdf4;color:#16a34a;font-size:1rem">
          <i class="fas fa-tools"></i>
        </div>
        <div>
          <div class="fw-bold">{{ ordre.num_or }}</div>
          <div class="text-muted small">Créé par {{ ordre.nom_prenom_user }} — Reçu le {{ ordre.date_recep }} à {{ ordre.heure_recep }}</div>
        </div>
      </div>
      <div>
        {% if ordre.signature == 'oui' %}
          <span class="badge" style="background:#d1fae5;color:#065f46;font-size:.85rem;padding:6px 14px">✅ Clôturé</span>
        {% else %}
          <span class="badge" style="background:#fef3c7;color:#92400e;font-size:.85rem;padding:6px 14px">⏳ En cours</span>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="row g-3">

    <!-- Infos générales -->
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm h-100" style="border-radius:14px">
        <div class="card-header bg-white" style="border-radius:14px 14px 0 0;border-bottom:1px solid #f1f5f9;padding:14px 20px">
          <span class="fw-semibold"><i class="fas fa-info-circle text-primary me-2"></i>Informations générales</span>
        </div>
        <div class="card-body px-4 py-3">
          {{ info_row("N° d'ordre", ordre.num_or, 'fa-hashtag') }}
          {{ info_row('Date', ordre.date, 'fa-calendar') }}
          {{ info_row('Demande liée', ordre.num_dr, 'fa-link') }}
          {{ info_row('Description demande', ordre.demande_libelle, 'fa-align-left') }}
          {{ info_row('Bon de prélèvement', ordre.num_bp, 'fa-file-alt') }}
          {{ info_row('Constatation', ordre.constatation, 'fa-eye') }}
        </div>
      </div>
    </div>

    <!-- Équipement -->
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm h-100" style="border-radius:14px">
        <div class="card-header bg-white" style="border-radius:14px 14px 0 0;border-bottom:1px solid #f1f5f9;padding:14px 20px">
          <span class="fw-semibold"><i class="fas fa-industry text-info me-2"></i>Équipement concerné</span>
        </div>
        <div class="card-body px-4 py-3">
          {% if ordre.equipement_nom %}
            {{ info_row('Désignation', ordre.equipement_nom, 'fa-tag') }}
            {{ info_row('Code inventaire', ordre.code_inventaire, 'fa-barcode') }}
            {{ info_row('Localisation', ordre.localisation, 'fa-map-marker-alt') }}
          {% else %}
            <div class="text-center py-4 text-muted">
              <i class="fas fa-industry fa-2x mb-2 d-block opacity-25"></i>Aucun équipement associé
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Détails intervention -->
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm h-100" style="border-radius:14px">
        <div class="card-header bg-white" style="border-radius:14px 14px 0 0;border-bottom:1px solid #f1f5f9;padding:14px 20px">
          <span class="fw-semibold"><i class="fas fa-tools text-warning me-2"></i>Détails de l'intervention</span>
        </div>
        <div class="card-body px-4 py-3">
          {{ info_row('Diagnostic', ordre.diagnostic, 'fa-stethoscope') }}
          {{ info_row("Nature d'intervention", ordre.nature_intervention, 'fa-wrench') }}
          {{ info_row('Temps de diagnostic', ordre.temps_diagnostic, 'fa-stopwatch') }}
          {{ info_row("Temps d'intervention", ordre.temps_intervention, 'fa-clock') }}
        </div>
      </div>
    </div>

    <!-- Période -->
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm h-100" style="border-radius:14px">
        <div class="card-header bg-white" style="border-radius:14px 14px 0 0;border-bottom:1px solid #f1f5f9;padding:14px 20px">
          <span class="fw-semibold"><i class="fas fa-calendar-alt text-success me-2"></i>Période d'intervention</span>
        </div>
        <div class="card-body px-4 py-3">
          {{ info_row('Date de début', ordre.date_debut, 'fa-play-circle') }}
          {{ info_row('Heure de début', ordre.heure_debut, 'fa-clock') }}
          {{ info_row('Date de fin', ordre.date_fin, 'fa-stop-circle') }}
          {{ info_row('Heure de fin', ordre.heure_fin, 'fa-clock') }}
        </div>
      </div>
    </div>

    <!-- Opérateurs -->
    <div class="col-12">
      <div class="card border-0 shadow-sm" style="border-radius:14px">
        <div class="card-header bg-white" style="border-radius:14px 14px 0 0;border-bottom:1px solid #f1f5f9;padding:14px 20px">
          <span class="fw-semibold">
            <i class="fas fa-users text-primary me-2"></i>Opérateurs assignés
            <span class="badge bg-primary ms-1" style="font-size:.7rem">{{ operateurs|length }}</span>
          </span>
        </div>
        <div class="card-body p-0">
          {% if operateurs %}
          <div class="table-responsive">
            <table class="table gtable mb-0">
              <thead><tr><th>Code</th><th>Nom</th><th>Prénom</th><th>Spécialité</th><th>Fonction</th></tr></thead>
              <tbody>
                {% for op in operateurs %}
                <tr>
                  <td class="fw-semibold text-primary">{{ op.code }}</td>
                  <td class="fw-semibold">{{ op.nom }}</td>
                  <td>{{ op.prenom }}</td>
                  <td class="text-muted">{{ op.specialite or '—' }}</td>
                  <td class="text-muted">{{ op.fonction or '—' }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
          <div class="text-center py-4 text-muted">
            <i class="fas fa-users fa-2x mb-2 d-block opacity-25"></i>Aucun opérateur assigné
          </div>
          {% endif %}
        </div>

        <!-- Actions écran -->
        <div class="d-flex gap-2 px-4 py-3 no-print" style="border-top:1px solid #f1f5f9;background:#f8fafc;border-radius:0 0 14px 14px">
          {% if permissions.can_edit %}
          <a href="{{ url_for('modifier_ordre', id=ordre.id) }}" class="btn btn-sm btn-primary">
            <i class="fas fa-edit me-1"></i>Modifier
          </a>
          {% endif %}
          <button onclick="window.print()" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-print me-1"></i>Imprimer
          </button>
          {% if permissions.can_delete %}
          <a href="{{ url_for('supprimer_ordre', id=ordre.id) }}" class="btn btn-sm btn-danger ms-auto"
             onclick="return confirm('Supprimer cet ordre de travail ?')">
            <i class="fas fa-trash me-1"></i>Supprimer
          </a>
          {% endif %}
        </div>
      </div>
    </div>

  </div>

  <!-- ══ SIGNATURES (impression uniquement) ══ -->
  <div class="print-only" style="margin-top:40px">
    <div class="print-sign">
      <div class="print-sign-box">
        Demandeur<br>
        <small>{{ ordre.nom_prenom_user or '...' }}</small>
      </div>
      <div class="print-sign-box">
        Technicien responsable<br>
        <small>{% if operateurs %}{{ operateurs[0].nom }} {{ operateurs[0].prenom }}{% else %}...{% endif %}</small>
      </div>
      <div class="print-sign-box">
        Chef de département<br>
        <small>Visa &amp; Date</small>
      </div>
    </div>
  </div>

  <!-- Pied de page impression -->
  <div class="print-footer">
    BIOGALENIC – GMAO – Ordre de Travail N° {{ ordre.num_or }} – Document confidentiel – {{ now.strftime('%d/%m/%Y') }}
  </div>

</div>
{% endblock %}