{% extends 'layout.html' %}
{% from 'macros.html' import common_styles, badge_urgence, badge_etat, badge_panne, info_row %}
{% block title %}{{ equipement.designation }}{% endblock %}
{% block page_title %}Fiche équipement{% 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">FICHE ÉQUIPEMENT</div>
      <div class="ph-num">{{ equipement.designation }}</div>
      <div style="font-size:8pt;color:#888;margin-top:2px">Imprimé le {{ now.strftime('%d/%m/%Y à %H:%M') }}</div>
    </div>
  </div>

  <div class="d-flex align-items-center gap-3 mb-4 flex-wrap no-print">
    <a href="{{ url_for('liste_equipements') }}" class="back-btn"><i class="fas fa-arrow-left"></i>Retour</a>
    <h5 class="fw-bold mb-0">{{ equipement.designation }}</h5>
    {% if equipement.activee == '1' %}
      <span class="badge" style="background:#d1fae5;color:#065f46">Actif</span>
    {% else %}
      <span class="badge" style="background:#fde8e6;color:#b91c1c">Inactif</span>
    {% endif %}
    <button onclick="window.print()" class="btn btn-sm btn-outline-secondary ms-auto">
      <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 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('Désignation', equipement.designation, 'fa-tag') }}
          {{ info_row('Code identification', equipement.code_identification, 'fa-barcode') }}
          {{ info_row('Marque', equipement.marque, 'fa-trademark') }}
          {{ info_row('Type', equipement.type, 'fa-cube') }}
          {{ info_row('N° de série', equipement.serie, 'fa-hashtag') }}
          {{ info_row('Date mise en marche', equipement.date_marche, 'fa-calendar') }}
          {{ info_row('Position / Localisation', equipement.position, 'fa-map-marker-alt') }}
          {{ info_row('Sensibilité', equipement.sensibilite, 'fa-tachometer-alt') }}
        </div>
      </div>
    </div>

    <!-- Caractéristiques techniques -->
    <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-cogs text-info me-2"></i>Caractéristiques techniques</span>
        </div>
        <div class="card-body px-4 py-3">
          {{ info_row('Charge', equipement.charge, 'fa-weight') }}
          {{ info_row('Temps moyen fonctionnement', equipement.temps_moyen, 'fa-clock') }}
          <div class="d-flex align-items-start py-2">
            <div class="text-muted small fw-semibold" style="min-width:180px">
              <i class="fas fa-toggle-on me-2 text-primary" style="width:14px"></i>État
            </div>
            <div>
              {% if equipement.activee == '1' %}
                <span class="badge" style="background:#d1fae5;color:#065f46">✅ Actif</span>
              {% else %}
                <span class="badge" style="background:#fde8e6;color:#b91c1c">❌ Inactif</span>
              {% endif %}
            </div>
          </div>
        </div>
        <!-- Actions -->
        <div class="d-flex gap-2 px-4 pb-4 flex-wrap no-print">
          {% if permissions.can_edit %}
          <a href="{{ url_for('modifier_equipement', id=equipement.id) }}" class="btn btn-sm btn-primary">
            <i class="fas fa-edit me-1"></i>Modifier
          </a>
          <!-- Bouton toggle statut -->
          <a href="{{ url_for('toggle_statut_equipement', id=equipement.id) }}"
             class="btn btn-sm {% if equipement.activee == '1' %}btn-outline-danger{% else %}btn-outline-success{% endif %}"
             onclick="return confirm('{% if equipement.activee == '1' %}Désactiver cet équipement ?{% else %}Activer cet équipement ?{% endif %}')">
            {% if equipement.activee == '1' %}
              <i class="fas fa-toggle-off me-1"></i>Désactiver
            {% else %}
              <i class="fas fa-toggle-on me-1"></i>Activer
            {% endif %}
          </a>
          {% endif %}
          <a href="{{ url_for('ajouter_intervention') }}" class="btn btn-sm btn-outline-warning">
            <i class="fas fa-plus me-1"></i>Nouvelle intervention
          </a>
          <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_equipement', id=equipement.id) }}" class="btn btn-sm btn-danger ms-auto"
             onclick="return confirm('Supprimer cet équipement ?')">
            <i class="fas fa-trash me-1"></i>Supprimer
          </a>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Historique interventions -->
    <div class="col-12">
      <div class="card border-0 shadow-sm" style="border-radius:14px">
        <div class="card-header bg-white d-flex justify-content-between align-items-center"
             style="border-radius:14px 14px 0 0;border-bottom:1px solid #f1f5f9;padding:14px 20px">
          <span class="fw-semibold"><i class="fas fa-history text-warning me-2"></i>Historique des interventions
            <span class="badge bg-warning text-dark ms-1" style="font-size:.7rem">{{ interventions|length }}</span>
          </span>
          <a href="{{ url_for('liste_interventions') }}?id_mei={{ equipement.id }}" class="btn btn-sm btn-outline-primary" style="font-size:.75rem">
            Voir tout <i class="fas fa-arrow-right ms-1"></i>
          </a>
        </div>
        <div class="card-body p-0">
          {% if interventions %}
          <div class="table-responsive">
            <table class="table gtable mb-0">
              <thead><tr><th>N°</th><th>Date</th><th>Description</th><th>Panne</th><th>Urgence</th><th>État</th><th></th></tr></thead>
              <tbody>
                {% for i in interventions %}
                <tr>
                  <td class="fw-semibold text-primary">{{ i.numero }}</td>
                  <td class="text-muted">{{ i.date }}</td>
                  <td class="text-muted">{{ i.description[:50] }}{% if i.description|length>50 %}…{% endif %}</td>
                  <td>{{ badge_panne(i.panne) }}</td>
                  <td>{{ badge_urgence(i.degre) }}</td>
                  <td>{{ badge_etat(i.est_traiter, i.annuler) }}</td>
                  <td>
                    <a href="{{ url_for('voir_intervention', id=i.id) }}"
                       style="background:#eff6ff;color:#2563eb;border:none;border-radius:6px;padding:4px 8px;font-size:.75rem" class="btn btn-xs">
                      <i class="fas fa-eye"></i>
                    </a>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
          <div class="text-center py-5 text-muted">
            <i class="fas fa-history fa-2x mb-2 d-block opacity-25"></i>Aucune intervention enregistrée
          </div>
          {% endif %}
        </div>
      </div>
    </div>

  </div>

  <!-- Pied de page impression -->
  <div class="print-footer">
    BIOGALENIC – GMAO – Fiche Équipement : {{ equipement.designation }} – Document confidentiel – {{ now.strftime('%d/%m/%Y') }}
  </div>

</div>
{% endblock %}