{% extends 'layout.html' %}
{% from 'macros.html' import common_styles %}
{% block title %}Nouvel équipement{% endblock %}
{% block page_title %}Ajouter un é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; }

.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); }

.eq-preview {
    background:linear-gradient(135deg,#0f1629,#1e1b4b);
    border-radius:14px; padding:20px; color:#fff; margin-bottom:20px;
}
.eq-preview-name { font-size:1rem; font-weight:700; margin-bottom:4px; color:#e2e8f0; }
.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">

  <div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
    <a href="{{ url_for('liste_equipements') }}" class="back-btn">
      <i class="fas fa-arrow-left"></i>Retour
    </a>
    <div>
      <h5 class="fw-bold mb-0">Nouvel équipement</h5>
      <div class="text-muted small">Remplissez les informations de l'équipement</div>
    </div>
  </div>

  <div class="row g-4">

    <!-- Colonne gauche -->
    <div class="col-lg-3">

      <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">
            <i class="fas fa-industry text-white"></i>
          </div>
          <div>
            <div class="eq-preview-name" id="prev-name">Nouvel équipement</div>
            <div class="eq-preview-code" id="prev-code">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">Marque —</span>
          <span class="eq-preview-badge" id="prev-type"   style="background:rgba(6,182,212,.15);color:#67e8f9">Type —</span>
        </div>
      </div>

      <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>Le code doit être unique</li>
          <li>La sensibilité indique le niveau de criticité</li>
          <li>Le temps moyen est en heures/jour</li>
        </ul>
      </div>

    </div>

    <!-- Formulaire -->
    <div class="col-lg-9">
      <form action="{{ url_for('ajouter_equipement') }}" method="post">

        <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"
                         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"
                         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" 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" 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" 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">
                </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" 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" 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" 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">
              <div>
                <input type="radio" class="sens-option" name="sensibilite" id="s1" value="Faible" checked>
                <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">
                <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">
                <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">
                <label class="sens-label sens-critique" for="s4"><span class="sens-dot"></span>Critique</label>
              </div>
            </div>
          </div>
        </div>

        <div class="d-flex justify-content-between align-items-center">
          <button type="reset" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-undo me-1"></i>Réinitialiser
          </button>
          <button type="submit" class="btn btn-primary px-4">
            <i class="fas fa-plus me-2"></i>Ajouter l'équipement
          </button>
        </div>

      </form>
    </div>

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

{% block scripts %}
<script>
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 %}