{% extends "base.html" %}
{% set libelles = {"devis": "devis", "facture": "vente / facture", "avoir": "facture d'avoir"} %}
{% set type_actuel = vente.type_document if vente else type_document %}
{% block titre %}{{ "Modifier" if vente else "Nouveau" }} {{ libelles[type_actuel] }}{% endblock %}
{% block contenu %}
<h1 class="h3 mb-3">{{ "Modifier le" if vente else "Nouveau" }} {{ libelles[type_actuel] }}</h1>

{% if erreur %}<div class="alert alert-danger">{{ erreur }}</div>{% endif %}
{% if origine %}
<div class="alert alert-info">Avoir sur la facture <strong>{{ origine.numero_facture or ("#" ~ origine.id) }}</strong> ({{ origine.client.nom }}).</div>
{% endif %}

{% if not clients %}
<div class="alert alert-warning">Veuillez d'abord créer un <a href="/commercial/clients/nouveau">client</a>.</div>
{% elif vente %}
<!-- ============================= MODIFICATION (formulaire simple) ============================= -->
<form method="post" enctype="multipart/form-data" 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="selectClientModif" class="form-select" required>
      {% for c in clients %}
      <option value="{{ c.id }}" data-devise="{{ c.devise }}" {% if vente.client_id == c.id %}selected{% endif %}>{{ c.nom }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="mb-3">
    <label class="form-label">Vendeur (entité de facturation)</label>
    <select name="vendeur_id" class="form-select">
      <option value="">— Aucun —</option>
      {% for v in vendeurs %}
      <option value="{{ v.id }}" {% if vente.vendeur_id == v.id %}selected{% endif %}>{{ v.nom_societe }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="row">
    <div class="col mb-3">
      <label class="form-label">Date *</label>
      <input type="date" name="date_vente" class="form-control" required value="{{ vente.date_vente }}">
    </div>
    <div class="col mb-3">
      <label class="form-label">N° {{ "de devis" if type_actuel == "devis" else ("d'avoir" if type_actuel == "avoir" else "de facture") }}</label>
      <input type="text" name="numero_facture" class="form-control" value="{{ vente.numero_facture or numero_suggere }}">
    </div>
  </div>
  <div class="row">
    {% if type_actuel == "facture" %}
    <div class="col mb-3">
      <label class="form-label">Date d'échéance</label>
      <input type="date" name="date_echeance" class="form-control" value="{{ vente.date_echeance if vente.date_echeance else '' }}">
    </div>
    {% endif %}
    <div class="col mb-3">
      <label class="form-label">Mode de règlement</label>
      <input type="text" name="mode_reglement" class="form-control" list="modesReglement" value="{{ vente.mode_reglement or '' }}">
      <datalist id="modesReglement">
        <option value="Virement bancaire"><option value="Chèque"><option value="Espèces">
        <option value="Traite"><option value="Compensation">
      </datalist>
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label">Produit *</label>
    <input type="text" name="produit" class="form-control" required value="{{ vente.produit }}">
    <div class="form-text">Résumé rapide. Le détail des lignes se gère ci-dessous, sur la fiche du document.</div>
  </div>
  <div class="row">
    <div class="col mb-3">
      <label class="form-label">Quantité</label>
      <input type="number" step="0.01" name="quantite" class="form-control" value="{{ vente.quantite if vente.quantite is not none else '' }}">
    </div>
    <div class="col mb-3">
      <label class="form-label">Montant (<span id="deviseModif">{{ vente.client.devise }}</span>) *</label>
      <input type="number" step="0.01" name="montant" class="form-control" required
             {% if vente.lignes %}readonly{% endif %}
             value="{{ vente.montant }}">
      {% if vente.lignes %}<div class="form-text">Calculé automatiquement à partir des lignes.</div>
      {% elif type_actuel == "avoir" %}<div class="form-text">Montant crédité au client (saisir un nombre positif).</div>{% endif %}
    </div>
  </div>

  <script>
    document.getElementById('selectClientModif').addEventListener('change', function () {
      var option = this.selectedOptions[0];
      document.getElementById('deviseModif').textContent = (option && option.dataset.devise) || 'MAD';
    });
  </script>

  <h2 class="h6 mt-4 mb-2">Informations transport (optionnel, export)</h2>
  <div class="row">
    <div class="col mb-3">
      <label class="form-label">Transporteur</label>
      <input type="text" name="transporteur" class="form-control" value="{{ vente.transporteur or '' }}">
    </div>
    <div class="col mb-3">
      <label class="form-label">Matricule camion</label>
      <input type="text" name="matricule_camion" class="form-control" value="{{ vente.matricule_camion or '' }}">
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label">Incoterm</label>
    <input type="text" name="incoterm" class="form-control" placeholder="FCA - Agadir - Paris Rungis" value="{{ vente.incoterm or '' }}">
  </div>

  <div class="mb-3">
    <label class="form-label">Document joint (PDF ou image, optionnel)</label>
    <input type="file" name="facture_vente" class="form-control" accept=".pdf,.jpg,.jpeg,.png,.webp">
    {% if vente.facture_vente_path %}
      <div class="form-text">Fichier actuel : <a href="/fichiers/{{ vente.facture_vente_path }}" target="_blank">voir</a></div>
    {% endif %}
  </div>
  <div class="d-flex gap-2">
    <button type="submit" class="btn btn-success">Enregistrer</button>
    <a href="/commercial/ventes/{{ vente.id }}" class="btn btn-outline-secondary">Annuler</a>
  </div>
</form>

{% else %}
<!-- ============================= CRÉATION (tout-en-un) ============================= -->
<form method="post" enctype="multipart/form-data" class="card p-4 bg-white" id="formVente" style="max-width: 980px;">
  <input type="hidden" name="csrf_token" value="{{ request.state.csrf_token }}">
  {% if origine %}<input type="hidden" name="facture_origine_id" value="{{ origine.id }}">{% endif %}

  <div class="mb-3">
    <label class="form-label d-block">Type de document</label>
    {% if origine %}
      <span class="badge bg-warning text-dark">Facture d'avoir</span>
      <input type="hidden" name="type_document" value="avoir">
    {% else %}
      <div class="btn-group" role="group" id="groupeTypeDocument">
        {% for t, libelle in {"devis": "Devis", "facture": "Facture", "avoir": "Avoir"}.items() %}
        <input type="radio" class="btn-check" name="type_document" id="type_{{ t }}" value="{{ t }}"
               data-numero="{{ numeros_suggeres[t] }}" {% if type_document == t %}checked{% endif %}>
        <label class="btn btn-outline-success btn-sm" for="type_{{ t }}">{{ libelle }}</label>
        {% endfor %}
      </div>
    {% endif %}
  </div>

  <div class="row">
    <div class="col-md-6 mb-3">
      <label class="form-label">Client *</label>
      <select name="client_id" id="selectClient" class="form-select" required {% if origine %}disabled{% endif %}>
        {% for c in clients %}
        <option value="{{ c.id }}" data-devise="{{ c.devise }}" {% if origine and origine.client_id == c.id %}selected{% endif %}>{{ c.nom }}</option>
        {% endfor %}
      </select>
      {% if origine %}<input type="hidden" name="client_id" value="{{ origine.client_id }}">{% endif %}
    </div>
    <div class="col-md-6 mb-3">
      <label class="form-label">Vendeur <span class="text-muted small">(entité de facturation)</span></label>
      <select name="vendeur_id" id="selectVendeur" class="form-select">
        <option value="">— Aucun —</option>
        {% for v in vendeurs %}
        <option value="{{ v.id }}"
                data-adresse="{{ [v.adresse_ligne1, v.adresse_ligne2] | select | join(', ') }}"
                data-rc="{{ v.rc or '' }}" data-ice="{{ v.ice or '' }}">{{ v.nom_societe }}</option>
        {% endfor %}
      </select>
      <div id="apercuVendeur" class="form-text"></div>
      {% if not vendeurs %}<div class="form-text">Aucun vendeur configuré — <a href="/commercial/vendeurs/nouveau" target="_blank">en créer un</a>.</div>{% endif %}
    </div>
  </div>

  <div class="row">
    <div class="col-md-3 mb-3">
      <label class="form-label">Date *</label>
      <input type="date" name="date_vente" id="champDateVente" class="form-control" required>
    </div>
    <div class="col-md-3 mb-3">
      <label class="form-label" id="labelNumero">N° {{ "de devis" if type_document == "devis" else ("d'avoir" if type_document == "avoir" else "de facture") }}</label>
      <input type="text" name="numero_facture" id="champNumero" class="form-control" value="{{ numero_suggere }}">
    </div>
    <div class="col-md-3 mb-3" id="blocEcheance" {% if type_document != "facture" %}style="display:none;"{% endif %}>
      <label class="form-label">Date d'échéance</label>
      <input type="date" name="date_echeance" id="champEcheance" class="form-control">
    </div>
    <div class="col-md-3 mb-3">
      <label class="form-label">Mode de règlement</label>
      <input type="text" name="mode_reglement" class="form-control" list="modesReglement">
      <datalist id="modesReglement">
        <option value="Virement bancaire"><option value="Chèque"><option value="Espèces">
        <option value="Traite"><option value="Compensation">
      </datalist>
    </div>
  </div>

  <h2 class="h6 mt-3 mb-2">Lignes de produit</h2>
  <datalist id="catalogueProduits">
    {% for p in produits %}
    <option value="{{ p.nom }}" data-emballage="{{ p.type_emballage_defaut or '' }}" data-prix="{{ p.prix_unitaire_defaut if p.prix_unitaire_defaut is not none else '' }}" data-poids-colis="{{ p.poids_colis_kg_defaut if p.poids_colis_kg_defaut is not none else '' }}">
    {% endfor %}
  </datalist>
  <div class="table-responsive mb-2">
    <table class="table table-sm bg-white align-middle" id="tableLignes">
      <thead>
        <tr>
          <th style="min-width:160px;">Produit *</th><th style="width:80px;">Nb/Pal</th><th style="width:110px;">Type EMB</th>
          <th style="width:90px;">Nbr Colis</th><th style="width:90px;">Kg/Colis</th><th style="width:90px;">P. Brut</th><th style="width:90px;">P. Net</th>
          <th style="width:90px;">Prix</th><th style="width:110px;">Montant (<span class="devise-affichee">MAD</span>) *</th><th style="width:40px;"></th>
        </tr>
      </thead>
      <tbody id="corpsLignes"></tbody>
      <tfoot>
        <tr class="fw-bold table-light">
          <td colspan="8" class="text-end">Total :</td>
          <td><span id="montantTotalAffiche">0.00</span> <span class="devise-affichee">MAD</span></td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>
  <button type="button" class="btn btn-outline-success btn-sm mb-3" id="btnAjouterLigne">+ Ajouter une ligne</button>

  <h2 class="h6 mt-2 mb-2">Informations transport (optionnel, export)</h2>
  <div class="row">
    <div class="col mb-3">
      <label class="form-label">Transporteur</label>
      <input type="text" name="transporteur" class="form-control">
    </div>
    <div class="col mb-3">
      <label class="form-label">Matricule camion</label>
      <input type="text" name="matricule_camion" class="form-control">
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label">Incoterm</label>
    <input type="text" name="incoterm" class="form-control" placeholder="FCA - Agadir - Paris Rungis">
  </div>

  <div class="mb-3">
    <label class="form-label">Document joint (PDF ou image, optionnel)</label>
    <input type="file" name="facture_vente" class="form-control" accept=".pdf,.jpg,.jpeg,.png,.webp">
  </div>

  <div class="d-flex gap-2">
    <button type="submit" class="btn btn-success">Enregistrer</button>
    <a href="/commercial" class="btn btn-outline-secondary">Annuler</a>
  </div>
</form>

<template id="modeleLigne">
  <tr>
    <td><input type="text" name="ligne_produit" class="form-control form-control-sm ligne-produit" list="catalogueProduits"></td>
    <td><input type="number" name="ligne_nb_palettes" class="form-control form-control-sm"></td>
    <td><input type="text" name="ligne_type_emballage" class="form-control form-control-sm ligne-emballage"></td>
    <td><input type="number" name="ligne_nombre_colis" class="form-control form-control-sm ligne-nb-colis"></td>
    <td><input type="number" step="0.01" class="form-control form-control-sm ligne-kg-colis" title="Kg par colis (aide au calcul, non enregistré séparément)"></td>
    <td><input type="number" step="0.01" name="ligne_poids_brut_kg" class="form-control form-control-sm"></td>
    <td><input type="number" step="0.01" name="ligne_poids_net_kg" class="form-control form-control-sm ligne-poids-net"></td>
    <td><input type="number" step="0.01" name="ligne_prix_unitaire" class="form-control form-control-sm ligne-prix"></td>
    <td><input type="number" step="0.01" name="ligne_montant" class="form-control form-control-sm ligne-montant"></td>
    <td><button type="button" class="btn btn-sm btn-outline-danger btn-suppr-ligne">✕</button></td>
  </tr>
</template>

<script>
(function () {
  var corps = document.getElementById('corpsLignes');
  var modele = document.getElementById('modeleLigne');
  var totalAffiche = document.getElementById('montantTotalAffiche');

  function recalculerTotal() {
    var total = 0;
    corps.querySelectorAll('.ligne-montant').forEach(function (input) {
      total += parseFloat(input.value) || 0;
    });
    totalAffiche.textContent = total.toFixed(2);
  }

  function autoFillLigne(inputProduit) {
    var datalist = document.getElementById('catalogueProduits');
    var option = Array.prototype.find.call(datalist.options, function (o) { return o.value === inputProduit.value; });
    if (!option) { return; }
    var ligne = inputProduit.closest('tr');
    var champEmballage = ligne.querySelector('.ligne-emballage');
    var champPrix = ligne.querySelector('.ligne-prix');
    var champKgColis = ligne.querySelector('.ligne-kg-colis');
    if (champEmballage && !champEmballage.value) { champEmballage.value = option.dataset.emballage || ''; }
    if (champPrix && !champPrix.value) { champPrix.value = option.dataset.prix || ''; }
    if (champKgColis && !champKgColis.value) { champKgColis.value = option.dataset.poidsColis || ''; }
    recalculerPoidsLigne(ligne);
  }

  // Kg/Colis × Nbr Colis -> P. Net, puis P. Net × Prix -> Montant (auto, reste modifiable à la main)
  function recalculerMontantLigne(ligne) {
    var poidsNet = parseFloat(ligne.querySelector('.ligne-poids-net').value);
    var prix = parseFloat(ligne.querySelector('.ligne-prix').value);
    if (!isNaN(poidsNet) && !isNaN(prix)) {
      ligne.querySelector('.ligne-montant').value = (poidsNet * prix).toFixed(2);
    }
    recalculerTotal();
  }

  function recalculerPoidsLigne(ligne) {
    var kgColis = parseFloat(ligne.querySelector('.ligne-kg-colis').value);
    var nbColis = parseFloat(ligne.querySelector('.ligne-nb-colis').value);
    if (!isNaN(kgColis) && !isNaN(nbColis)) {
      ligne.querySelector('.ligne-poids-net').value = (kgColis * nbColis).toFixed(2);
    }
    recalculerMontantLigne(ligne);
  }

  function ajouterLigne(requise) {
    var fragment = modele.content.cloneNode(true);
    var ligne = fragment.querySelector('tr');
    ligne.querySelector('.ligne-produit').addEventListener('input', function () { autoFillLigne(this); });
    ligne.querySelectorAll('input').forEach(function (input) {
      input.addEventListener('input', recalculerTotal);
    });
    ligne.querySelector('.ligne-kg-colis').addEventListener('input', function () { recalculerPoidsLigne(ligne); });
    ligne.querySelector('.ligne-nb-colis').addEventListener('input', function () { recalculerPoidsLigne(ligne); });
    ligne.querySelector('.ligne-poids-net').addEventListener('input', function () { recalculerMontantLigne(ligne); });
    ligne.querySelector('.ligne-prix').addEventListener('input', function () { recalculerMontantLigne(ligne); });
    ligne.querySelector('.btn-suppr-ligne').addEventListener('click', function () {
      ligne.remove();
      recalculerTotal();
    });
    if (requise) {
      ligne.querySelector('.ligne-produit').required = true;
      ligne.querySelector('.ligne-montant').required = true;
    }
    corps.appendChild(fragment);
    return ligne;
  }

  document.getElementById('btnAjouterLigne').addEventListener('click', function () { ajouterLigne(false); });
  ajouterLigne(true); // une ligne de départ, obligatoire

  document.getElementById('champDateVente').value = new Date().toISOString().slice(0, 10);

  // Devise adaptée automatiquement au client sélectionné
  var selectClient = document.getElementById('selectClient');
  function actualiserDevise() {
    var option = selectClient.selectedOptions[0];
    var devise = (option && option.dataset.devise) || 'MAD';
    document.querySelectorAll('.devise-affichee').forEach(function (span) { span.textContent = devise; });
  }
  selectClient.addEventListener('change', actualiserDevise);
  actualiserDevise();

  // Sélecteur de type de document : swap du numéro suggéré + libellé + échéance
  var groupeType = document.getElementById('groupeTypeDocument');
  if (groupeType) {
    var champNumero = document.getElementById('champNumero');
    var numeroModifieManuel = false;
    champNumero.addEventListener('input', function () { numeroModifieManuel = true; });
    var libelles = {"devis": "N° de devis", "facture": "N° de facture", "avoir": "N° d'avoir"};
    groupeType.querySelectorAll('input[name="type_document"]').forEach(function (radio) {
      radio.addEventListener('change', function () {
        document.getElementById('labelNumero').textContent = libelles[this.value];
        document.getElementById('blocEcheance').style.display = (this.value === 'facture') ? '' : 'none';
        if (!numeroModifieManuel) {
          champNumero.value = this.dataset.numero || '';
        }
      });
    });
  }

  // Aperçu des coordonnées du vendeur sélectionné
  var selectVendeur = document.getElementById('selectVendeur');
  var apercuVendeur = document.getElementById('apercuVendeur');
  function afficherApercuVendeur() {
    var option = selectVendeur.selectedOptions[0];
    if (!option || !option.value) { apercuVendeur.textContent = ''; return; }
    var parties = [];
    if (option.dataset.adresse) { parties.push(option.dataset.adresse); }
    if (option.dataset.rc) { parties.push('RC ' + option.dataset.rc); }
    if (option.dataset.ice) { parties.push('ICE ' + option.dataset.ice); }
    apercuVendeur.textContent = parties.join(' — ');
  }
  selectVendeur.addEventListener('change', afficherApercuVendeur);
})();
</script>
{% endif %}
{% endblock %}