{% extends "base.html" %}
{% block title %}Nouveau compteur — GMAO{% endblock %}
{% block content %}
<div class="container-fluid">
  <h1 class="h3 mb-3">Nouveau compteur</h1>
  <form method="post" class="card">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="card-body row g-3">
      <div class="col-md-6"><label class="form-label" for="name">Nom *</label><input class="form-control" id="name" name="name" required></div>
      <div class="col-md-3"><label class="form-label" for="meter_type">Type</label><input class="form-control" id="meter_type" name="meter_type" value="eau" required></div>
      <div class="col-md-3"><label class="form-label" for="unit">Unité physique</label><input class="form-control" id="unit" name="unit" value="m³" required></div>
      <div class="col-12"><label class="form-label" for="usage">Usage mesuré</label><input class="form-control" id="usage" name="usage" placeholder="Ex. alimentation générale"></div>
      <div class="col-md-6"><label class="form-label" for="scope_type">Rattachement *</label><select class="form-select" id="scope_type" name="scope_type" required><option value="">Choisir…</option><option value="equipment">Équipement</option><option value="building">Bâtiment</option><option value="zone">Zone</option><option value="room">Local</option><option value="housing_unit">Logement</option></select></div>
      <div class="col-md-6"><label class="form-label" for="scope_id">Élément patrimoine *</label><select class="form-select" id="scope_id" name="scope_id" required><option value="">Choisir…</option>{% for item in equipments %}<option data-scope="equipment" value="{{ item.id }}">Équipement — {{ item.name }}</option>{% endfor %}{% for item in buildings %}<option data-scope="building" value="{{ item.id }}">Bâtiment — {{ item.name }}</option>{% endfor %}{% for item in zones %}<option data-scope="zone" value="{{ item.id }}">Zone — {{ item.name }}</option>{% endfor %}{% for item in rooms %}<option data-scope="room" value="{{ item.id }}">Local — {{ item.name }}</option>{% endfor %}{% for item in housing_units %}<option data-scope="housing_unit" value="{{ item.id }}">Logement — {{ item.name }}</option>{% endfor %}</select></div>
      <div class="col-md-4"><label class="form-label" for="initial_value">Index initial</label><input class="form-control" type="number" step="0.01" id="initial_value" name="initial_value" value="0"></div>
      <div class="col-md-4"><label class="form-label" for="parent_id">Compteur parent (facultatif)</label><select class="form-select" id="parent_id" name="parent_id"><option value="">Aucun</option>{% for parent in parents %}<option value="{{ parent.id }}">{{ parent.name }}</option>{% endfor %}</select></div>
      <div class="col-md-4"><label class="form-label" for="remainder_label">Libellé du reste (facultatif)</label><input class="form-control" id="remainder_label" name="remainder_label" placeholder="Ex. Parties communes"></div>
    </div>
    <div class="card-footer"><button class="btn btn-primary">Créer</button> <a class="btn btn-outline-secondary" href="{{ url_for('meters.index') }}">Annuler</a></div>
  </form>
</div>
<script>
const type = document.getElementById('scope_type'), target = document.getElementById('scope_id');
function filterScopes() { const value = type.value; [...target.options].forEach(o => { o.hidden = o.value && o.dataset.scope !== value; }); if (target.selectedOptions[0]?.hidden) target.value = ''; }
type.addEventListener('change', filterScopes); filterScopes();
</script>
{% endblock %}