{% extends 'layout.html' %}
{% from 'macros.html' import common_styles %}
{% block title %}Modifier — {{ equipement.designation }}{% endblock %}
{% block page_title %}Modifier l'équipement{% endblock %}
{% block styles %}{{ common_styles() }}
<style>
.form-card { border:none; border-radius:16px; box-shadow:0 2px 16px rgba(0,0,0,.07); }
.section-badge {
    display:inline-flex; align-items:center; gap:8px;
    font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
    color:#6366f1; margin-bottom:14px;
}
.section-badge::after { content:''; display:inline-block; width:40px; height:2px; background:linear-gradient(90deg,#6366f1,transparent); border-radius:2px; }
.field-group { margin-bottom:18px; }
.field-group .form-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#64748b; margin-bottom:5px; }
.field-group .form-control,
.field-group .form-select {
    border:1.5px solid #e2e8f0; border-radius:10px;
    padding:9px 14px; font-size:.875rem; color:#1e293b;
    transition:border-color .2s, box-shadow .2s;
    background:#fff;
}
.field-group .form-control:focus,
.field-group .form-select:focus {
    border-color:#6366f1;
    box-shadow:0 0 0 3px rgba(99,102,241,.12);
    outline:none;
}
.field-group .form-control.required-field { border-left:3px solid #6366f1; }
.field-hint { font-size:.72rem; color:#94a3b8; margin-top:4px; }

/* Sensibilité visuelle */
.sens-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.sens-option { display:none; }
.sens-label {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:10px 6px; border-radius:10px; border:1.5px solid #e2e8f0;
    cursor:pointer; transition:all .18s; text-align:center;
    font-size:.72rem; font-weight:600; color:#64748b;
}
.sens-label:hover { border-color:#6366f1; background:#f5f3ff; color:#6366f1; }
.sens-option:checked + .sens-label { border-color:#6366f1; background:#ede9fe; color:#6366f1; }
.sens-dot { width:10px; height:10px; border-radius:50%; }
.sens-faible   .sens-dot { background:#22c55e; }
.sens-moyenne  .sens-dot { background:#f59e0b; }
.sens-elevee   .sens-dot { background:#f97316; }
.sens-critique .sens-dot { background:#ef4444; box-shadow:0 0 6px rgba(239,68,68,.5); }

/* Aperçu équipement */
.eq-preview {
    background:linear-gradient(135deg,#0f1629,#1e1b4b);
    border-radius:14px; padding:20px; color:#fff; margin-bottom:20px;
}
.eq-preview-name { font-size:1.1rem; font-weight:700; margin-bottom:4px; }
.eq-preview-code { font-size:.75rem; color:#a5b4fc; }
.eq-preview-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.eq-preview-badge { font-size:.68rem; padding:3px 10px; border-radius:20px; font-weight:600; }
</style>
{% endblock %}

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

  <!-- Retour -->
  <div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
    <a href="{{ url_for('voir_equipement', id=equipement.id) }}" class="back-btn">
      <i class="fas fa-arrow-left"></i>Retour
    </a>
    <div>
      <h5 class="fw-bold mb-0">Modifier l'équipement</h5>
      <div class="text-muted small">{{ equipement.designation }}</div>
    </div>
  </div>

  <div class="row g-4">

    <!-- Colonne gauche : aperçu + infos rapides -->
    <div class="col-lg-3">

      <!-- Aperçu dynamique -->
      <div class="eq-preview mb-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <div style="width:36px;height:36px;border-radius:10px;background:rgba(99,102,241,.3);display:flex;align-items:center;justify-content:center;font-size:1rem">
            <i class="fas fa-industry text-white"></i>
          </div>
          <div>
            <div class="eq-preview-name" id="prev-name">{{ equipement.designation }}</div>
            <div class="eq-preview-code" id="prev-code">{{ equipement.code_identification or 'Code non défini' }}</div>
          </div>
        </div>
        <div class="eq-preview-badges">
          <span class="eq-preview-badge" id="prev-marque"
                style="background:rgba(99,102,241,.2);color:#a5b4fc">
            {{ equipement.marque or 'Marque —' }}
          </span>
          <span class="eq-preview-badge" id="prev-type"
                style="background:rgba(6,182,212,.15);color:#67e8f9">
            {{ equipement.type or 'Type —' }}
          </span>
        </div>
      </div>

      <!-- Infos non modifiables -->
      <div class="card form-card p-3 mb-3">
        <div class="small fw-bold text-muted mb-2" style="text-transform:uppercase;letter-spacing:.5px;font-size:.68rem">Informations système</div>
        <div class="d-flex justify-content-between py-1" style="border-bottom:1px solid #f1f5f9;font-size:.8rem">
          <span class="text-muted">ID</span>
          <span class="fw-semibold">#{{ equipement.id }}</span>
        </div>
        <div class="d-flex justify-content-between py-1" style="font-size:.8rem">
          <span class="text-muted">Statut</span>
          {% if equipement.activee == '1' %}
            <span class="badge" style="background:#d1fae5;color:#065f46;font-size:.68rem">Actif</span>
          {% else %}
            <span class="badge" style="background:#fee2e2;color:#991b1b;font-size:.68rem">Inactif</span>
          {% endif %}
        </div>
      </div>

      <!-- Aide -->
      <div class="card form-card p-3" style="background:#f5f3ff;border:1px solid #ede9fe">
        <div class="small fw-bold mb-2" style="color:#6366f1;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px">
          <i class="fas fa-info-circle me-1"></i>Aide
        </div>
        <ul class="mb-0 ps-3" style="font-size:.75rem;color:#64748b;line-height:1.8">
          <li>Les champs <span style="color:#6366f1">*</span> sont obligatoires</li>
          <li>La sensibilité indique le niveau de criticité</li>
          <li>Le temps moyen est en heures/jour</li>
        </ul>
      </div>

    </div>

    <!-- Colonne droite : formulaire -->
    <div class="col-lg-9">
      <form action="{{ url_for('modifier_equipement', id=equipement.id) }}" method="post" id="equipForm">

        <div class="card form-card mb-4">
          <div class="card-body p-4">

            <div class="section-badge"><i class="fas fa-tag"></i>Identification</div>

            <div class="row g-3">
              <div class="col-md-8">
                <div class="field-group">
                  <label class="form-label">Désignation <span style="color:#6366f1">*</span></label>
                  <input type="text" class="form-control required-field" name="designation" id="inp-name"
                         value="{{ equipement.designation }}" required placeholder="Nom de l'équipement">
                </div>
              </div>
              <div class="col-md-4">
                <div class="field-group">
                  <label class="form-label">Code identification <span style="color:#6366f1">*</span></label>
                  <input type="text" class="form-control required-field" name="code_identification" id="inp-code"
                         value="{{ equipement.code_identification }}" required placeholder="EQ-001">
                </div>
              </div>
              <div class="col-md-4">
                <div class="field-group">
                  <label class="form-label">Marque</label>
                  <input type="text" class="form-control" name="marque" id="inp-marque"
                         value="{{ equipement.marque }}" placeholder="Ex: Mettler Toledo">
                </div>
              </div>
              <div class="col-md-4">
                <div class="field-group">
                  <label class="form-label">Type / Modèle</label>
                  <input type="text" class="form-control" name="type" id="inp-type"
                         value="{{ equipement.type }}" placeholder="Ex: Balance analytique">
                </div>
              </div>
              <div class="col-md-4">
                <div class="field-group">
                  <label class="form-label">N° de série</label>
                  <div class="input-group">
                    <span class="input-group-text" style="border-radius:10px 0 0 10px"><i class="fas fa-barcode"></i></span>
                    <input type="text" class="form-control" name="serie" value="{{ equipement.serie }}"
                           placeholder="SN-XXXXXXXX" style="border-radius:0 10px 10px 0">
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        <div class="card form-card mb-4">
          <div class="card-body p-4">

            <div class="section-badge"><i class="fas fa-cogs"></i>Caractéristiques techniques</div>

            <div class="row g-3">
              <div class="col-md-4">
                <div class="field-group">
                  <label class="form-label">Date de mise en marche</label>
                  <input type="date" class="form-control" name="date_marche"
                         value="{{ equipement.date_marche }}">
                </div>
              </div>
              <div class="col-md-4">
                <div class="field-group">
                  <label class="form-label">Position / Localisation</label>
                  <div class="input-group">
                    <span class="input-group-text" style="border-radius:10px 0 0 10px"><i class="fas fa-map-marker-alt"></i></span>
                    <input type="text" class="form-control" name="position" value="{{ equipement.position }}"
                           placeholder="Salle, zone…" style="border-radius:0 10px 10px 0">
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="field-group">
                  <label class="form-label">Charge</label>
                  <input type="text" class="form-control" name="charge"
                         value="{{ equipement.charge }}" placeholder="Ex: 200 kg">
                </div>
              </div>
              <div class="col-md-4">
                <div class="field-group">
                  <label class="form-label">Temps moyen fonctionnement</label>
                  <div class="input-group">
                    <input type="number" class="form-control" name="temps_moyen"
                           value="{{ equipement.temps_moyen }}" placeholder="0"
                           style="border-radius:10px 0 0 10px">
                    <span class="input-group-text" style="border-radius:0 10px 10px 0">h/j</span>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        <div class="card form-card mb-4">
          <div class="card-body p-4">

            <div class="section-badge"><i class="fas fa-shield-alt"></i>Criticité</div>
            <div class="field-hint mb-3">Définit le niveau de priorité lors des interventions de maintenance.</div>

            <div class="sens-grid">
              {% set sens_val = equipement.sensibilite %}
              <div>
                <input type="radio" class="sens-option" name="sensibilite" id="s1" value="Faible"
                       {% if sens_val == 'Faible' %}checked{% endif %}>
                <label class="sens-label sens-faible" for="s1">
                  <span class="sens-dot"></span>Faible
                </label>
              </div>
              <div>
                <input type="radio" class="sens-option" name="sensibilite" id="s2" value="Moyenne"
                       {% if sens_val == 'Moyenne' %}checked{% endif %}>
                <label class="sens-label sens-moyenne" for="s2">
                  <span class="sens-dot"></span>Moyenne
                </label>
              </div>
              <div>
                <input type="radio" class="sens-option" name="sensibilite" id="s3" value="Elevee"
                       {% if sens_val in ['Élevée','Elevee'] %}checked{% endif %}>
                <label class="sens-label sens-elevee" for="s3">
                  <span class="sens-dot"></span>Élevée
                </label>
              </div>
              <div>
                <input type="radio" class="sens-option" name="sensibilite" id="s4" value="Critique"
                       {% if sens_val == 'Critique' %}checked{% endif %}>
                <label class="sens-label sens-critique" for="s4">
                  <span class="sens-dot"></span>Critique
                </label>
              </div>
            </div>

          </div>
        </div>

        <!-- Actions -->
        <div class="d-flex justify-content-between align-items-center">
          <a href="{{ url_for('voir_equipement', id=equipement.id) }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-times me-1"></i>Annuler
          </a>
          <button type="submit" class="btn btn-primary px-4">
            <i class="fas fa-save me-2"></i>Enregistrer les modifications
          </button>
        </div>

      </form>
    </div>

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

{% block scripts %}
<script>
/* Aperçu dynamique */
const map = {
  'inp-name':   'prev-name',
  'inp-code':   'prev-code',
  'inp-marque': 'prev-marque',
  'inp-type':   'prev-type',
};
Object.entries(map).forEach(([inp, out]) => {
  const el = document.getElementById(inp);
  if (el) el.addEventListener('input', () => {
    document.getElementById(out).textContent = el.value || '—';
  });
});
</script>
{% endblock %}