{% extends 'layout.html' %}
{% from 'macros.html' import common_styles %}
{% block title %}Modifier — {{ utilisateur.username }}{% endblock %}
{% block page_title %}Modifier l'utilisateur{% 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; }

/* Notif toggle cards */
.notif-card {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border-radius:12px;
    border:1.5px solid #e2e8f0; background:#fff;
    transition:all .18s; cursor:pointer;
    margin-bottom:8px;
}
.notif-card:hover { border-color:#6366f1; background:#f5f3ff; }
.notif-card.active { border-color:#6366f1; background:#ede9fe; }
.notif-card-icon {
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.notif-card-info { flex:1; min-width:0; margin:0 12px; }
.notif-card-title { font-size:.85rem; font-weight:600; color:#1e293b; }
.notif-card-desc  { font-size:.72rem; color:#94a3b8; margin-top:1px; }

/* Toggle switch */
.toggle-switch { position:relative; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
    position:absolute; inset:0; border-radius:24px;
    background:#e2e8f0; cursor:pointer; transition:.2s;
}
.toggle-slider::before {
    content:''; position:absolute;
    width:18px; height:18px; border-radius:50%;
    left:3px; top:3px; background:#fff;
    transition:.2s; box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background:#6366f1; }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(20px); }

/* Role badge */
.role-pill {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 12px; border-radius:20px;
    font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
}
</style>
{% endblock %}

{% block content %}

{% set notif_defaults = {
    'nouvelle_intervention': '1',
    'intervention_urgente':  '1',
    'intervention_traitee':  '0',
    'stock_alerte':          '0',
    'maintenance_preventive':'0',
    'ordre_travail':         '0'
} %}

<div class="container-fluid">

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

  <form method="post" action="{{ url_for('modifier_utilisateur', id=utilisateur.id) }}">
  <div class="row g-4">

    <!-- Colonne gauche : aperçu -->
    <div class="col-lg-3">
      <div class="card form-card p-4 mb-3" style="background:linear-gradient(135deg,#0f1629,#1e1b4b)">
        <div class="d-flex align-items-center gap-3 mb-3">
          <div style="width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);
                      display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;color:#fff;
                      box-shadow:0 4px 12px rgba(99,102,241,.5)">
            {{ utilisateur.username[0]|upper }}
          </div>
          <div>
            <div class="fw-bold text-white" id="prev-username">{{ utilisateur.username }}</div>
            <div style="font-size:.68rem;color:#a5b4fc;text-transform:uppercase;letter-spacing:.8px" id="prev-role">{{ utilisateur.type }}</div>
          </div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
          {% if utilisateur.connect == 'oui' %}
            <span class="role-pill" style="background:rgba(16,185,129,.2);color:#6ee7b7">● Actif</span>
          {% else %}
            <span class="role-pill" style="background:rgba(239,68,68,.2);color:#fca5a5">● Inactif</span>
          {% endif %}
          <span class="role-pill" style="background:rgba(99,102,241,.2);color:#a5b4fc">#{{ utilisateur.id }}</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>Info
        </div>
        <ul class="mb-0 ps-3" style="font-size:.75rem;color:#64748b;line-height:1.9">
          <li>Laisser le mot de passe vide pour le conserver</li>
          <li>Les notifications s'appliquent aux toasts et sons</li>
          <li>L'admin peut personnaliser par utilisateur</li>
        </ul>
      </div>
    </div>

    <!-- Colonne droite -->
    <div class="col-lg-9">

      <!-- Compte -->
      <div class="card form-card mb-4">
        <div class="card-body p-4">
          <div class="section-badge"><i class="fas fa-user"></i>Informations du compte</div>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Nom d'utilisateur <span style="color:#6366f1">*</span></label>
              <input type="text" class="form-control" name="username" id="inp-username"
                     value="{{ utilisateur.username }}" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Nouveau mot de passe</label>
              <div class="input-group">
                <input type="password" class="form-control" name="password" id="inp-pwd"
                       placeholder="Laisser vide pour conserver">
                <button type="button" class="btn btn-outline-secondary"
                        onclick="var i=document.getElementById('inp-pwd');i.type=i.type==='password'?'text':'password'">
                  <i class="fas fa-eye"></i>
                </button>
              </div>
            </div>
            <div class="col-md-6">
              <label class="form-label">Rôle <span style="color:#6366f1">*</span></label>
              <select class="form-select" name="type" id="inp-role" required>
                {% for r in roles %}
                <option value="{{ r.name }}" {% if utilisateur.type == r.name %}selected{% endif %}>{{ r.name }}{% if r.is_builtin %} (Intégré){% endif %}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6 d-flex align-items-end">
              <div class="form-check form-switch mb-2">
                <input class="form-check-input" type="checkbox" name="connect" value="oui" id="inp-connect"
                       {% if utilisateur.connect == 'oui' %}checked{% endif %} style="width:2.5em;height:1.4em">
                <label class="form-check-label fw-semibold ms-2" for="inp-connect">Compte actif</label>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Notifications -->
      <div class="card form-card mb-4">
        <div class="card-body p-4">
          <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <div class="section-badge mb-0"><i class="fas fa-bell"></i>Notifications autorisées</div>
            <div class="d-flex gap-2">
              <button type="button" class="btn btn-xs btn-outline-warning py-0 px-2"
                      style="font-size:.72rem;border-radius:6px" onclick="resetNotifConfig()">
                Réinitialiser aux défauts
              </button>
              <button type="button" class="btn btn-xs btn-outline-primary py-0 px-2"
                      style="font-size:.72rem;border-radius:6px" onclick="toggleAll(true)">
                Tout activer
              </button>
              <button type="button" class="btn btn-xs btn-outline-secondary py-0 px-2"
                      style="font-size:.72rem;border-radius:6px" onclick="toggleAll(false)">
                Tout désactiver
              </button>
            </div>
          </div>

          {% set notifs = [
            ('nouvelle_intervention',  'fa-clipboard-list',      '#eff6ff', '#2563eb',
             'Nouvelle intervention',
             'Alerte a la creation d une demande d intervention'),
            ('intervention_urgente',   'fa-bolt',                '#fef3c7', '#d97706',
             'Intervention tres urgente',
             'Alerte immediate pour les interventions prioritaires'),
            ('intervention_traitee',   'fa-check-circle',        '#d1fae5', '#059669',
             'Intervention traitee',
             'Confirmation quand une intervention est cloturee'),
            ('intervention_annulee',   'fa-ban',                 '#f1f5f9', '#64748b',
             'Intervention annulee',
             'Notification quand une intervention est annulee'),
            ('stock_alerte',           'fa-exclamation-triangle','#fee2e2', '#dc2626',
             'Alerte stock pieces',
             'Notification quand le stock passe sous le seuil'),
            ('mouvement_stock',        'fa-exchange-alt',        '#ede9fe', '#7c3aed',
             'Mouvement de stock',
             'Entree ou sortie de pieces detachees'),
            ('maintenance_preventive', 'fa-calendar-check',      '#f0fdf4', '#16a34a',
             'Maintenance preventive',
             'Rappel des maintenances planifiees'),
            ('preventif_traite',       'fa-calendar-times',      '#d1fae5', '#059669',
             'Maintenance preventive traitee',
             'Confirmation quand une maintenance est realisee'),
            ('ordre_travail',          'fa-tools',               '#fff7ed', '#ea580c',
             'Ordre de travail cree',
             'Notification a la creation d un ordre de travail'),
            ('ordre_cloture',          'fa-clipboard-check',     '#d1fae5', '#059669',
             'Ordre de travail cloture',
             'Notification quand un OT est signe et cloture'),
            ('equipement_modifie',     'fa-industry',            '#e0f2fe', '#0284c7',
             'Equipement modifie',
             'Modification des informations d un equipement'),
            ('equipement_statut',      'fa-toggle-on',           '#fef3c7', '#d97706',
             'Statut equipement change',
             'Activation ou desactivation d un equipement'),
            ('utilisateur_ajoute',     'fa-user-plus',           '#ede9fe', '#7c3aed',
             'Nouvel utilisateur',
             'Creation d un nouveau compte utilisateur'),
            ('rapport_ajoute',         'fa-file-alt',            '#e0f2fe', '#0284c7',
             'Rapport de controle',
             'Ajout d un nouveau rapport de controle'),
          ] %}

          {% for key, icon, bg, color, title, desc in notifs %}
          {% set is_active = notif_config.get(key, notif_defaults.get(key, '0')) == '1' %}
          <label class="notif-card {% if is_active %}active{% endif %}" for="notif_{{ key }}">
            <div class="notif-card-icon" style="background:{{ bg }};color:{{ color }}">
              <i class="fas {{ icon }}"></i>
            </div>
            <div class="notif-card-info">
              <div class="notif-card-title">{{ title }}</div>
              <div class="notif-card-desc">{{ desc }}</div>
            </div>
            <label class="toggle-switch">
              <input type="checkbox" name="notif_{{ key }}" id="notif_{{ key }}"
                     value="1" {% if is_active %}checked{% endif %}
                     onchange="this.closest('.notif-card').classList.toggle('active', this.checked)">
              <span class="toggle-slider"></span>
            </label>
          </label>
          {% endfor %}

        </div>
      </div>

      <!-- Actions -->
      <div class="d-flex justify-content-between">
        <a href="{{ url_for('voir_utilisateur', id=utilisateur.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
        </button>
      </div>

    </div>
  </div>
  </form>
  <form id="resetNotifForm" method="post" action="{{ url_for('reset_notif_utilisateur', id=utilisateur.id) }}" style="display:none;"></form>
</div>
{% endblock %}

{% block scripts %}
<script>
/* Aperçu dynamique */
document.getElementById('inp-username').addEventListener('input', function(){
  document.getElementById('prev-username').textContent = this.value || '—';
});
document.getElementById('inp-role').addEventListener('change', function(){
  document.getElementById('prev-role').textContent = this.value;
});

/* Tout activer / désactiver */
function toggleAll(state) {
  document.querySelectorAll('.notif-card input[type=checkbox]').forEach(cb => {
    cb.checked = state;
    cb.closest('.notif-card').classList.toggle('active', state);
  });
}

/* Réinitialiser aux notifications par défaut du rôle */
function resetNotifConfig() {
  if (confirm("Réinitialiser les préférences de notification aux valeurs par défaut de ce rôle ?")) {
    document.getElementById('resetNotifForm').submit();
  }
}
</script>
{% endblock %}