{% extends "base.html" %}
{% block titre %}{{ "Modifier" if client else "Nouveau" }} client{% endblock %}
{% block contenu %}
<h1 class="h3 mb-3">{{ "Modifier le client" if client else "Nouveau client" }}</h1>
<form method="post" class="card p-4 bg-white" style="max-width: 700px;">
  <input type="hidden" name="csrf_token" value="{{ request.state.csrf_token }}">
  <div class="mb-3">
    <label class="form-label">Nom *</label>
    <input type="text" name="nom" class="form-control" required value="{{ client.nom if client else '' }}">
  </div>
  <div class="mb-3">
    <label class="form-label">Contact (personne à contacter)</label>
    <input type="text" name="contact" class="form-control" value="{{ client.contact if client else '' }}">
  </div>

  <div class="row">
    <div class="col-md-6 mb-3">
      <label class="form-label">Téléphone bureau</label>
      <div class="input-group">
        <select id="selectIndicatifBureau" class="form-select" style="max-width: 40%;">
          <option value="">Indicatif...</option>
          {% for nom, code in indicatifs %}
          <option value="{{ code }}">{{ nom }} ({{ code }})</option>
          {% endfor %}
        </select>
        <input type="text" id="champTelephoneBureau" name="telephone" class="form-control" placeholder="5XX XXXXXX" value="{{ client.telephone if client else '' }}">
      </div>
      <div class="form-text">Choisissez l'indicatif puis complétez le numéro.</div>
    </div>
    <div class="col-md-6 mb-3">
      <label class="form-label">Téléphone portable</label>
      <div class="input-group">
        <select id="selectIndicatif" class="form-select" style="max-width: 40%;">
          <option value="">Indicatif...</option>
          {% for nom, code in indicatifs %}
          <option value="{{ code }}">{{ nom }} ({{ code }})</option>
          {% endfor %}
        </select>
        <input type="text" id="champTelephonePortable" name="telephone_portable" class="form-control" placeholder="6XX XXXXXX" value="{{ client.telephone_portable if client else '' }}">
      </div>
      <div class="form-text">Choisissez l'indicatif puis complétez le numéro.</div>
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" name="email" class="form-control" value="{{ client.email if client else '' }}">
  </div>

  <hr>
  <p class="text-muted small mb-2">Adresse :</p>
  <div class="row">
    <div class="col-md-3 mb-3">
      <label class="form-label">N° de rue</label>
      <input type="text" name="numero_rue" class="form-control" value="{{ client.numero_rue if client else '' }}">
    </div>
    <div class="col-md-9 mb-3">
      <label class="form-label">Adresse</label>
      <input type="text" name="adresse" class="form-control" value="{{ client.adresse if client else '' }}">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 mb-3">
      <label class="form-label">Code postal</label>
      <input type="text" name="code_postal" class="form-control" value="{{ client.code_postal if client else '' }}">
    </div>
    <div class="col-md-8 mb-3">
      <label class="form-label">Pays</label>
      <select name="pays" class="form-select">
        <option value="">— Sélectionner —</option>
        {% for p in pays_disponibles %}
        <option value="{{ p }}" {% if client and client.pays == p %}selected{% endif %}>{{ p }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <hr>
  <p class="text-muted small mb-2">Facturation et informations légales :</p>
  <div class="row">
    <div class="col-md-4 mb-3">
      <label class="form-label">Devise de facturation</label>
      <select id="selectDevise" name="devise" class="form-select">
        {% for code, nom in devises %}
        <option value="{{ code }}" {% if (client.devise if client else "MAD") == code %}selected{% endif %}>{{ code }} — {{ nom }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-8 mb-3">
      <label class="form-label">Registre du commerce (RC)</label>
      <input type="text" name="registre_commerce" class="form-control" value="{{ client.registre_commerce if client else '' }}">
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label">Autres informations légales (TVA, etc.)</label>
    <textarea name="autres_infos_legales" class="form-control" rows="2">{{ client.autres_infos_legales if client else '' }}</textarea>
  </div>

  <div class="mb-3">
    <label class="form-label d-block">Éléments à afficher sur les factures de ce client</label>
    <div class="form-check form-check-inline">
      <input type="checkbox" name="afficher_telephone_bureau" value="on" class="form-check-input" id="chkTelBureau" {% if not client or client.afficher_telephone_bureau %}checked{% endif %}>
      <label class="form-check-label" for="chkTelBureau">Téléphone bureau</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" name="afficher_telephone_portable" value="on" class="form-check-input" id="chkTelPortable" {% if not client or client.afficher_telephone_portable %}checked{% endif %}>
      <label class="form-check-label" for="chkTelPortable">Téléphone portable</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" name="afficher_email" value="on" class="form-check-input" id="chkEmail" {% if not client or client.afficher_email %}checked{% endif %}>
      <label class="form-check-label" for="chkEmail">Email</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" name="afficher_registre_commerce" value="on" class="form-check-input" id="chkRC" {% if not client or client.afficher_registre_commerce %}checked{% endif %}>
      <label class="form-check-label" for="chkRC">Registre de commerce</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" name="afficher_autres_infos" value="on" class="form-check-input" id="chkAutres" {% if not client or client.afficher_autres_infos %}checked{% endif %}>
      <label class="form-check-label" for="chkAutres">Autres informations légales</label>
    </div>
  </div>

  <hr>
  <p class="text-muted small">Solde à nouveau (report d'un solde dû avant la mise en place du suivi dans ELFIRMA) :</p>
  <div class="row">
    <div class="col mb-3">
      <label class="form-label">Solde initial (<span id="labelDeviseSolde">{{ client.devise if client else "MAD" }}</span>)</label>
      <input type="number" step="0.01" name="solde_initial" class="form-control" value="{{ client.solde_initial if client else 0 }}">
    </div>
    <div class="col mb-3">
      <label class="form-label">Date du solde initial</label>
      <input type="date" name="date_solde_initial" class="form-control" value="{{ client.date_solde_initial if client and client.date_solde_initial else '' }}">
    </div>
  </div>
  <div class="d-flex gap-2">
    <button type="submit" class="btn btn-success">Enregistrer</button>
    <a href="/commercial#clients" class="btn btn-outline-secondary">Annuler</a>
  </div>
</form>

<script>
  (function () {
    var selectDevise = document.getElementById('selectDevise');
    var labelDeviseSolde = document.getElementById('labelDeviseSolde');
    selectDevise.addEventListener('change', function () {
      labelDeviseSolde.textContent = selectDevise.value;
    });

    function brancherIndicatif(selectId, champId) {
      var select = document.getElementById(selectId);
      var champ = document.getElementById(champId);
      select.addEventListener('change', function () {
        if (!select.value) { return; }
        var valeurActuelle = champ.value.trim();
        // Retire un indicatif déjà présent en tête (ex. "+212 6..." -> "6...") avant d'appliquer le nouveau.
        var sansIndicatif = valeurActuelle.replace(/^\+\d{1,4}\s*/, '');
        champ.value = (select.value + ' ' + sansIndicatif).trim();
      });
    }
    brancherIndicatif('selectIndicatifBureau', 'champTelephoneBureau');
    brancherIndicatif('selectIndicatif', 'champTelephonePortable');
  })();
</script>
{% endblock %}