{% extends "base.html" %}
{% block titre %}{{ "Modifier" if encaissement else "Nouvel" }} encaissement{% endblock %}
{% block contenu %}
<h1 class="h3 mb-3">{{ "Modifier l'encaissement" if encaissement else "Nouvel encaissement" }}</h1>

{% if not clients %}
<div class="alert alert-warning">Veuillez d'abord créer un <a href="/commercial/clients/nouveau">client</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">Client *</label>
    <select name="client_id" id="selectClient" class="form-select" required>
      {% for c in clients %}
      <option value="{{ c.id }}" {% if (encaissement and encaissement.client_id == c.id) or (not encaissement and client_id_preselection == c.id) %}selected{% endif %}>{{ c.nom }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="mb-3">
    <label class="form-label">Facture réglée (optionnel)</label>
    <select name="vente_id" id="selectVente" class="form-select">
      <option value="">— Encaissement global (sans facture précise) —</option>
      {% for v in ventes %}
      <option value="{{ v.id }}" data-client="{{ v.client_id }}" {% if encaissement and encaissement.vente_id == v.id %}selected{% endif %}>
        {{ v.date_vente }} — {{ v.numero_facture or v.produit }} ({{ "%.2f"|format(v.montant) }} MAD, solde dû {{ "%.2f"|format(v.solde_du) }})
      </option>
      {% endfor %}
    </select>
    <div class="form-text">Si renseigné, l'encaissement 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_encaissement" class="form-control" required value="{{ encaissement.date_encaissement if encaissement 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 encaissement and encaissement.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="{{ encaissement.reference if encaissement 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="{{ encaissement.montant if encaissement else '' }}">
  </div>
  <div class="mb-3">
    <label class="form-label">Notes</label>
    <textarea name="notes" class="form-control" rows="2">{{ encaissement.notes if encaissement else '' }}</textarea>
  </div>
  <div class="d-flex gap-2">
    <button type="submit" class="btn btn-success">Enregistrer</button>
    <a href="/commercial#encaissements" class="btn btn-outline-secondary">Annuler</a>
  </div>
</form>

<script>
  (function () {
    var selectClient = document.getElementById('selectClient');
    var selectVente = document.getElementById('selectVente');
    var venteSelectionnee = "{{ encaissement.vente_id if encaissement and encaissement.vente_id else '' }}";

    function filtrerVentes() {
      var clientId = selectClient.value;
      Array.prototype.forEach.call(selectVente.options, function (option) {
        if (!option.value) { option.hidden = false; return; }
        option.hidden = option.dataset.client !== clientId;
      });
      if (selectVente.selectedOptions[0] && selectVente.selectedOptions[0].hidden) {
        selectVente.value = "";
      }
    }

    selectClient.addEventListener('change', filtrerVentes);
    filtrerVentes();
    if (venteSelectionnee) { selectVente.value = venteSelectionnee; }
  })();
</script>
{% endif %}
{% endblock %}