{% extends "base.html" %}
{% block title %}{% if personne %}Modifier{% else %}Nouvelle{% endif %} personne{% endblock %}
{% block content %}
<h1>{% if personne %}Modifier{% else %}Nouvelle{% endif %} personne</h1>

<form method="post" class="card" id="personne-form">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

  <div class="form-row">
    <div class="form-group">
      <label for="civilite">Civilité</label>
      <select id="civilite" name="civilite">
        <option value="">—</option>
        {% for c in ['M.', 'Mme', 'Mlle', 'Mr', 'Mel'] %}
        <option value="{{ c }}" {% if personne and personne.civilite == c %}selected{% endif %}>{{ c }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group">
      <label for="nom">Nom</label>
      <input type="text" id="nom" name="nom" value="{{ personne.nom if personne else '' }}">
    </div>
    <div class="form-group">
      <label for="prenom">Prénom</label>
      <input type="text" id="prenom" name="prenom" value="{{ personne.prenom if personne else '' }}">
    </div>
  </div>

  <div class="form-group">
    <label for="raison_sociale">Raison sociale</label>
    <input type="text" id="raison_sociale" name="raison_sociale" value="{{ personne.raison_sociale if personne else '' }}" placeholder="SCI, cabinet, entreprise…">
    <p class="historique">Renseignez le nom ou la raison sociale (au moins l'un des deux).</p>
  </div>

  <h2>Téléphones</h2>
  <p class="historique">Saisie libre (06… ou +33…). Stockage toujours au format international.</p>
  <div id="telephones">
    {% if personne and personne.telephones %}
      {% for t in personne.telephones %}
      <div class="contact-block tel-row">
        <div class="form-row">
          <div class="form-group"><label>Libellé</label><input name="tel_libelle_{{ loop.index0 }}" value="{{ t.libelle }}"></div>
          <div class="form-group"><label>Numéro</label><input name="tel_numero_{{ loop.index0 }}" value="{{ t.numero | format_tel }}" placeholder="06… ou +33…"></div>
          <div class="form-group" style="align-self:flex-end">
            <button type="button" class="btn btn-secondary btn-sm" onclick="removeTel(this)">Supprimer</button>
          </div>
        </div>
      </div>
      {% endfor %}
    {% else %}
      <div class="contact-block tel-row">
        <div class="form-row">
          <div class="form-group"><label>Libellé</label><input name="tel_libelle_0" placeholder="Mobile"></div>
          <div class="form-group"><label>Numéro</label><input name="tel_numero_0" placeholder="06… ou +33…"></div>
          <div class="form-group" style="align-self:flex-end">
            <button type="button" class="btn btn-secondary btn-sm" onclick="removeTel(this)">Supprimer</button>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
  <input type="hidden" name="tel_count" id="tel_count" value="{{ personne.telephones|length if personne and personne.telephones else 1 }}">
  <button type="button" class="btn btn-secondary btn-sm" onclick="addTel()">+ Téléphone</button>

  <h2>Emails</h2>
  <div id="emails">
    {% if personne and personne.emails %}
      {% for e in personne.emails %}
      <div class="contact-block email-row">
        <div class="form-row">
          <div class="form-group"><label>Libellé</label><input name="email_libelle_{{ loop.index0 }}" value="{{ e.libelle }}"></div>
          <div class="form-group"><label>Email</label><input type="email" name="email_adresse_{{ loop.index0 }}" value="{{ e.adresse }}"></div>
          <div class="form-group" style="align-self:flex-end">
            <button type="button" class="btn btn-secondary btn-sm" onclick="removeEmail(this)">Supprimer</button>
          </div>
        </div>
      </div>
      {% endfor %}
    {% else %}
      <div class="contact-block email-row">
        <div class="form-row">
          <div class="form-group"><label>Libellé</label><input name="email_libelle_0" placeholder="Personnel"></div>
          <div class="form-group"><label>Email</label><input type="email" name="email_adresse_0"></div>
          <div class="form-group" style="align-self:flex-end">
            <button type="button" class="btn btn-secondary btn-sm" onclick="removeEmail(this)">Supprimer</button>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
  <input type="hidden" name="email_count" id="email_count" value="{{ personne.emails|length if personne and personne.emails else 1 }}">
  <button type="button" class="btn btn-secondary btn-sm" onclick="addEmail()">+ Email</button>

  <h2>Adresses</h2>
  <div id="adresses">
    {% if personne and personne.adresses %}
      {% for a in personne.adresses %}
      <div class="contact-block addr-row">
        <div class="form-group"><label>Libellé</label><input name="addr_libelle_{{ loop.index0 }}" value="{{ a.libelle }}"></div>
        <div class="form-group"><label>Ligne 1</label><input name="addr_ligne1_{{ loop.index0 }}" value="{{ a.ligne1 }}"></div>
        <div class="form-group"><label>Ligne 2</label><input name="addr_ligne2_{{ loop.index0 }}" value="{{ a.ligne2 }}"></div>
        <div class="form-row">
          <div class="form-group"><label>CP</label><input name="addr_cp_{{ loop.index0 }}" value="{{ a.code_postal }}"></div>
          <div class="form-group"><label>Ville</label><input name="addr_ville_{{ loop.index0 }}" value="{{ a.ville }}"></div>
          <div class="form-group" style="align-self:flex-end">
            <button type="button" class="btn btn-secondary btn-sm" onclick="removeAddr(this)">Supprimer</button>
          </div>
        </div>
      </div>
      {% endfor %}
    {% endif %}
  </div>
  <input type="hidden" name="addr_count" id="addr_count" value="{{ personne.adresses|length if personne and personne.adresses else 0 }}">
  <button type="button" class="btn btn-secondary btn-sm" onclick="addAddr()">+ Adresse</button>

  <div class="form-group" style="margin-top:1rem">
    <label for="notes">Notes</label>
    <textarea id="notes" name="notes">{{ personne.notes if personne else '' }}</textarea>
  </div>

  <div class="btn-group">
    <button type="submit" class="btn btn-primary">Enregistrer</button>
    <a href="{% if personne %}{{ url_for('personnes.detail', personne_id=personne.public_id) }}{% else %}{{ url_for('personnes.liste') }}{% endif %}" class="btn btn-secondary">Annuler</a>
  </div>
</form>
{% endblock %}

{% block scripts %}
<script>
let telIdx = parseInt(document.getElementById('tel_count').value);
let emailIdx = parseInt(document.getElementById('email_count').value);
let addrIdx = parseInt(document.getElementById('addr_count').value);

function reindexRows(containerId, countId, prefixes) {
  const rows = document.querySelectorAll(`#${containerId} .contact-block`);
  rows.forEach((row, i) => {
    row.querySelectorAll('input').forEach(input => {
      for (const prefix of prefixes) {
        if (input.name && input.name.startsWith(prefix)) {
          input.name = `${prefix}${i}`;
        }
      }
    });
  });
  document.getElementById(countId).value = rows.length;
  return rows.length;
}

function removeTel(btn) {
  btn.closest('.tel-row').remove();
  telIdx = reindexRows('telephones', 'tel_count', ['tel_libelle_', 'tel_numero_']);
}

function removeEmail(btn) {
  btn.closest('.email-row').remove();
  emailIdx = reindexRows('emails', 'email_count', ['email_libelle_', 'email_adresse_']);
}

function removeAddr(btn) {
  btn.closest('.addr-row').remove();
  addrIdx = reindexRows('adresses', 'addr_count', [
    'addr_libelle_', 'addr_ligne1_', 'addr_ligne2_', 'addr_cp_', 'addr_ville_'
  ]);
}

function addTel() {
  const div = document.createElement('div');
  div.className = 'contact-block tel-row';
  div.innerHTML = `<div class="form-row">
    <div class="form-group"><label>Libellé</label><input name="tel_libelle_${telIdx}"></div>
    <div class="form-group"><label>Numéro</label><input name="tel_numero_${telIdx}"></div>
    <div class="form-group" style="align-self:flex-end">
      <button type="button" class="btn btn-secondary btn-sm" onclick="removeTel(this)">Supprimer</button>
    </div>
  </div>`;
  document.getElementById('telephones').appendChild(div);
  telIdx++;
  document.getElementById('tel_count').value = telIdx;
}

function addEmail() {
  const div = document.createElement('div');
  div.className = 'contact-block email-row';
  div.innerHTML = `<div class="form-row">
    <div class="form-group"><label>Libellé</label><input name="email_libelle_${emailIdx}"></div>
    <div class="form-group"><label>Email</label><input type="email" name="email_adresse_${emailIdx}"></div>
    <div class="form-group" style="align-self:flex-end">
      <button type="button" class="btn btn-secondary btn-sm" onclick="removeEmail(this)">Supprimer</button>
    </div>
  </div>`;
  document.getElementById('emails').appendChild(div);
  emailIdx++;
  document.getElementById('email_count').value = emailIdx;
}

function addAddr() {
  const div = document.createElement('div');
  div.className = 'contact-block addr-row';
  div.innerHTML = `<div class="form-group"><label>Libellé</label><input name="addr_libelle_${addrIdx}"></div>
    <div class="form-group"><label>Ligne 1</label><input name="addr_ligne1_${addrIdx}"></div>
    <div class="form-group"><label>Ligne 2</label><input name="addr_ligne2_${addrIdx}"></div>
    <div class="form-row">
      <div class="form-group"><label>CP</label><input name="addr_cp_${addrIdx}"></div>
      <div class="form-group"><label>Ville</label><input name="addr_ville_${addrIdx}"></div>
      <div class="form-group" style="align-self:flex-end">
        <button type="button" class="btn btn-secondary btn-sm" onclick="removeAddr(this)">Supprimer</button>
      </div>
    </div>`;
  document.getElementById('adresses').appendChild(div);
  addrIdx++;
  document.getElementById('addr_count').value = addrIdx;
}
</script>
{% endblock %}