{% extends "base.html" %}
{% block titre %}{{ "Modifier" if reglement else "Nouveau" }} règlement{% endblock %}
{% block contenu %}
<h1 class="h3 mb-3">{{ "Modifier le règlement" if reglement else "Nouveau règlement" }}</h1>

{% if not fournisseurs %}
<div class="alert alert-warning">Veuillez d'abord créer un <a href="/comptable/fournisseurs/nouveau">fournisseur</a>.</div>
{% else %}
<form method="post" class="card p-4 bg-white" style="max-width: 640px;">
  <input type="hidden" name="csrf_token" value="{{ request.state.csrf_token }}">
  <div class="mb-3">
    <label class="form-label">Fournisseur *</label>
    <select name="fournisseur_id" id="selectFournisseur" class="form-select" required>
      {% for f in fournisseurs %}
      <option value="{{ f.id }}" {% if (reglement and reglement.fournisseur_id == f.id) or (not reglement and fournisseur_id_preselection == f.id) %}selected{% endif %}>{{ f.nom }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="mb-3">
    <label class="form-label">Facture réglée (optionnel)</label>
    <select name="achat_id" id="selectAchat" class="form-select">
      <option value="">— Règlement global (sans facture précise) —</option>
      {% for a in achats %}
      <option value="{{ a.id }}" data-fournisseur="{{ a.fournisseur_id }}" {% if reglement and reglement.achat_id == a.id %}selected{% endif %}>
        {{ a.date_achat }} — {{ a.numero_facture or a.designation_produit }} ({{ "%.2f"|format(a.montant_total) }} MAD, solde dû {{ "%.2f"|format(a.solde_du) }})
      </option>
      {% endfor %}
    </select>
    <div class="form-text">Si renseigné, le règlement sera rattaché à cette facture précise dans le grand livre.</div>
  </div>
  <div class="mb-3">
    <label class="form-label">Date *</label>
    <input type="date" name="date_reglement" class="form-control" required value="{{ reglement.date_reglement if reglement else '' }}">
  </div>
  <div class="row">
    <div class="col mb-3">
      <label class="form-label">Mode de paiement *</label>
      <select name="mode_paiement" class="form-select" required>
        {% for mode in ["Virement", "Chèque", "Espèces", "Traite", "Prélèvement", "Autre"] %}
        <option value="{{ mode }}" {% if reglement and reglement.mode_paiement == mode %}selected{% endif %}>{{ mode }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col mb-3">
      <label class="form-label">Référence (n° chèque/virement)</label>
      <input type="text" name="reference" class="form-control" value="{{ reglement.reference if reglement else '' }}">
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label">Montant (MAD) *</label>
    <input type="number" step="0.01" name="montant" class="form-control" required value="{{ reglement.montant if reglement else '' }}">
  </div>
  <div class="mb-3">
    <label class="form-label">Notes</label>
    <textarea name="notes" class="form-control" rows="2">{{ reglement.notes if reglement else '' }}</textarea>
  </div>
  <div class="d-flex gap-2">
    <button type="submit" class="btn btn-success">Enregistrer</button>
    <a href="/comptable#reglements" class="btn btn-outline-secondary">Annuler</a>
  </div>
</form>

<script>
  (function () {
    var selectFournisseur = document.getElementById('selectFournisseur');
    var selectAchat = document.getElementById('selectAchat');
    var achatSelectionne = "{{ reglement.achat_id if reglement and reglement.achat_id else '' }}";

    function filtrerAchats() {
      var fournisseurId = selectFournisseur.value;
      Array.prototype.forEach.call(selectAchat.options, function (option) {
        if (!option.value) { option.hidden = false; return; }
        option.hidden = option.dataset.fournisseur !== fournisseurId;
      });
      if (selectAchat.selectedOptions[0] && selectAchat.selectedOptions[0].hidden) {
        selectAchat.value = "";
      }
    }

    selectFournisseur.addEventListener('change', filtrerAchats);
    filtrerAchats();
    if (achatSelectionne) { selectAchat.value = achatSelectionne; }
  })();
</script>
{% endif %}
{% endblock %}