{% extends "base.html" %}

{% block title %}{{ title }} — GMAO{% endblock %}

{% block content %}
<div class="py-2 py-md-4" style="max-width:900px;">

  <h2 class="mb-3 h5"><i class="bi bi-wrench"></i> {{ title }}</h2>

  {# Informations du groupe #}
  <div class="card border-0 shadow-sm mb-3">
    <div class="card-header bg-info text-white py-2" style="font-size:0.9rem;">
      <i class="bi bi-box-seam"></i> Groupe : {{ group.name }}
    </div>
    <div class="card-body py-2">
      <div class="row">
        <div class="col-md-6">
          <strong>Localisation :</strong> {{ group.full_path }}<br>
          <strong>Éléments :</strong> {{ group.children_count }} actifs / {{ group.total_children }} dans le groupe
        </div>
        <div class="col-md-6">
          {% if group.tracked_individually %}
          <span class="badge bg-success">Suivi individuel obligatoire</span>
          {% else %}
          <span class="badge bg-secondary">Suivi groupé</span>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <form method="POST" action="{{ url_for('interventions.create_for_group', equipment_id=group.id) }}">
    {{ form.hidden_tag() }}

    {# Sélection des unités #}
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-warning py-2" style="font-size:0.9rem;">
        <i class="bi bi-check2-square"></i> Sélection des unités concernées
      </div>
      <div class="card-body py-2">
        <div class="mb-2">
          <button type="button" class="btn btn-sm btn-outline-primary" onclick="selectAll()">Tout sélectionner</button>
          <button type="button" class="btn btn-sm btn-outline-secondary" onclick="selectNone()">Tout désélectionner</button>
          <span class="ms-3 text-muted" id="selected_count">0 unité(s) sélectionnée(s)</span>
        </div>
        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
          <table class="table table-sm table-hover mb-0">
            <thead>
              <tr>
                <th style="width: 40px;"><input type="checkbox" id="select_all"></th>
                <th>N°</th>
                <th>Code</th>
                <th>Position</th>
                <th>Statut</th>
                <th>Interventions</th>
              </tr>
            </thead>
            <tbody>
              {% for child in children %}
              <tr>
                <td>
                  <input type="checkbox" name="selected_units" value="{{ child.individual_number }}" 
                         class="unit-checkbox" onchange="updateCount()"
                         {% if child.status in ['a_jeter', 'jete'] %}disabled{% endif %}>
                </td>
                <td>{{ child.individual_number }}</td>
                <td>{{ child.code or '—' }}</td>
                <td>{{ child.position or '—' }}</td>
                <td>
                  <span class="badge {{ child.status|status_badge }}">{{ child.status|format_status }}</span>
                  {% if child.has_active_curative %}
                  <span class="badge bg-warning text-dark ms-1" title="Intervention curative en cours">
                    <i class="bi bi-wrench"></i>
                  </span>
                  {% endif %}
                </td>
                <td>{{ child.interventions.count() }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    {# Informations générales #}
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-primary text-white py-2" style="font-size:0.9rem;"><i class="bi bi-file-text"></i> Informations de l'intervention</div>
      <div class="card-body py-2">
        <div class="row g-2 g-md-3">
          <div class="col-md-8">
            {{ form.title.label(class="form-label fw-bold mb-1") }}
            {{ form.title(class="form-control", placeholder="Ex: Panne sur plusieurs chaises") }}
            {% for error in form.title.errors %}<div class="text-danger small">{{ error }}</div>{% endfor %}
          </div>
          <div class="col-md-4">
            {{ form.priority.label(class="form-label fw-bold mb-1") }}
            {{ form.priority(class="form-select") }}
          </div>
          <div class="col-md-6">
            {{ form.type.label(class="form-label fw-bold mb-1") }}
            {{ form.type(class="form-select") }}
          </div>
          <div class="col-md-6">
            {{ form.preventive_type.label(class="form-label fw-bold mb-1") }}
            {{ form.preventive_type(class="form-select") }}
          </div>
          <div class="col-12">
            {{ form.description.label(class="form-label mb-1") }}
            {{ form.description(class="form-control", rows=3, placeholder="Description du problème...") }}
          </div>
        </div>
      </div>
    </div>

    {# GIMA & Budget #}
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-info text-white py-2" style="font-size:0.9rem;"><i class="bi bi-building"></i> GIMA & Budget</div>
      <div class="card-body py-2">
        <div class="row g-2 g-md-3">
          <div class="col-md-4">
            {{ form.gima_number.label(class="form-label mb-1") }}
            {{ form.gima_number(class="form-control", placeholder="N° demande GIMA") }}
          </div>
          <div class="col-md-4">
            {{ form.budget_amount.label(class="form-label mb-1") }}
            {{ form.budget_amount(class="form-control", placeholder="0.00") }}
          </div>
          <div class="col-md-6">
            <div class="form-check mt-2">
              {{ form.needs_budget(class="form-check-input") }}
              {{ form.needs_budget.label(class="form-check-label") }}
            </div>
          </div>
        </div>
      </div>
    </div>

    {# Assignation #}
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-secondary text-white py-2" style="font-size:0.9rem;"><i class="bi bi-person"></i> Assignation</div>
      <div class="card-body py-2">
        <div class="row g-2 g-md-3">
          <div class="col-md-6">
            {{ form.technician_id.label(class="form-label mb-1") }}
            {{ form.technician_id(class="form-select") }}
          </div>
          <div class="col-md-6">
            {{ form.assigned_to_id.label(class="form-label mb-1") }}
            {{ form.assigned_to_id(class="form-select") }}
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex gap-2 mb-3">
      <button type="submit" class="btn btn-primary">
        <i class="bi bi-check-lg"></i> Créer l'intervention
      </button>
      <a href="{{ url_for('equipments.detail', id=group.id) }}" class="btn btn-outline-secondary">Annuler</a>
    </div>
  </form>
</div>

<script>
function updateCount() {
  const checkboxes = document.querySelectorAll('.unit-checkbox:checked');
  document.getElementById('selected_count').textContent = checkboxes.length + ' unité(s) sélectionnée(s)';
}

function selectAll() {
  document.querySelectorAll('.unit-checkbox:not(:disabled)').forEach(cb => cb.checked = true);
  updateCount();
}

function selectNone() {
  document.querySelectorAll('.unit-checkbox').forEach(cb => cb.checked = false);
  updateCount();
}

document.getElementById('select_all').addEventListener('change', function() {
  if (this.checked) {
    selectAll();
  } else {
    selectNone();
  }
});

// Initialiser le compteur
updateCount();
</script>
{% endblock %}