{% extends "base.html" %}
{% set libelles = {"devis": "Devis", "facture": "Facture", "avoir": "Avoir"} %}
{% block titre %}{{ libelles[vente.type_document] }} {{ vente.numero_facture or vente.id }}{% endblock %}
{% block contenu %}
<p class="mb-2"><a href="/commercial#ventes" class="text-decoration-none">← Toutes les ventes</a></p>

<div class="d-flex justify-content-between align-items-start mb-3">
  <div>
    <h1 class="h3 mb-1">
      <span class="badge {{ 'bg-secondary' if vente.type_document == 'devis' else ('bg-warning text-dark' if vente.type_document == 'avoir' else 'bg-success') }}">{{ libelles[vente.type_document] }}</span>
      {{ vente.numero_facture or ("#" ~ vente.id) }}
    </h1>
    <p class="text-muted mb-0">
      {{ vente.client.nom }} — {{ vente.date_vente }}
      {% if vente.type_document == "facture" %}
        — <span class="badge {{ 'bg-success' if vente.statut_paiement == 'Payée' else ('bg-danger' if vente.en_retard else 'bg-warning text-dark') }}">{{ vente.statut_paiement }}{% if vente.en_retard %} — en retard{% endif %}</span>
      {% endif %}
      {% if vente.facture_origine %}— avoir sur <a href="/commercial/ventes/{{ vente.facture_origine.id }}">{{ vente.facture_origine.numero_facture or ("#" ~ vente.facture_origine.id) }}</a>{% endif %}
    </p>
  </div>
  <div class="d-flex gap-2 flex-wrap">
    <a href="/commercial/ventes/{{ vente.id }}/imprimer" target="_blank" class="btn btn-outline-success">🖨️ Imprimer</a>
    {% if vente.type_document == "devis" %}
    <form method="post" action="/commercial/ventes/{{ vente.id }}/transformer-en-facture" onsubmit="return confirm('Transformer ce devis en facture ?');">
      <input type="hidden" name="csrf_token" value="{{ request.state.csrf_token }}">
      <button type="submit" class="btn btn-outline-primary">Transformer en facture</button>
    </form>
    {% endif %}
    {% if vente.type_document == "facture" %}
    <form method="post" action="/commercial/ventes/{{ vente.id }}/creer-avoir" onsubmit="return confirm('Créer une facture d\'avoir liée à cette facture ?');">
      <input type="hidden" name="csrf_token" value="{{ request.state.csrf_token }}">
      <button type="submit" class="btn btn-outline-warning">Créer un avoir</button>
    </form>
    {% endif %}
    <form method="post" action="/commercial/ventes/{{ vente.id }}/dupliquer">
      <input type="hidden" name="csrf_token" value="{{ request.state.csrf_token }}">
      <button type="submit" class="btn btn-outline-secondary">Dupliquer</button>
    </form>
    <a href="/commercial/ventes/{{ vente.id }}/modifier" class="btn btn-outline-secondary">Modifier</a>
    <form method="post" action="/commercial/ventes/{{ vente.id }}/supprimer" onsubmit="return confirm('Supprimer définitivement ce document ?');">
      <input type="hidden" name="csrf_token" value="{{ request.state.csrf_token }}">
      <button type="submit" class="btn btn-outline-danger">Supprimer</button>
    </form>
  </div>
</div>

{% if request.query_params.get('erreur') %}<div class="alert alert-danger">{{ request.query_params.get('erreur') }}</div>{% endif %}

<div class="row mb-4">
  <div class="col-md-3"><strong>Montant total :</strong> {{ "%.2f"|format(vente.montant) }} MAD</div>
  {% if vente.type_document == "facture" %}
  <div class="col-md-3"><strong>Encaissé :</strong> {{ "%.2f"|format(vente.montant_encaisse) }} MAD</div>
  <div class="col-md-3"><strong>Solde dû :</strong> <span class="{{ 'text-danger fw-semibold' if vente.solde_du > 0 else 'text-success' }}">{{ "%.2f"|format(vente.solde_du) }} MAD</span></div>
  {% endif %}
  <div class="col-md-3"><strong>Document joint :</strong> {% if vente.facture_vente_path %}<a href="/fichiers/{{ vente.facture_vente_path }}" target="_blank">Voir</a>{% else %}—{% endif %}</div>
</div>
{% if vente.date_echeance or vente.mode_reglement or vente.vendeur %}
<div class="row mb-4 text-muted small">
  {% if vente.vendeur %}<div class="col-md-4">Vendeur : {{ vente.vendeur.nom_societe }}</div>{% endif %}
  {% if vente.date_echeance %}<div class="col-md-4">Échéance : {{ vente.date_echeance }}</div>{% endif %}
  {% if vente.mode_reglement %}<div class="col-md-4">Règlement : {{ vente.mode_reglement }}</div>{% endif %}
</div>
{% endif %}
{% if vente.transporteur or vente.matricule_camion or vente.incoterm %}
<div class="row mb-4 text-muted small">
  {% if vente.transporteur %}<div class="col-md-4">Transporteur : {{ vente.transporteur }}</div>{% endif %}
  {% if vente.matricule_camion %}<div class="col-md-4">Matricule camion : {{ vente.matricule_camion }}</div>{% endif %}
  {% if vente.incoterm %}<div class="col-md-4">Incoterm : {{ vente.incoterm }}</div>{% endif %}
</div>
{% endif %}

<h2 class="h5 mb-3">Lignes</h2>
{% if vente.lignes %}
<div class="table-responsive mb-3">
  <table class="table table-sm table-hover bg-white align-middle">
    <thead>
      <tr>
        <th>Produit</th><th>Nb/Pal</th><th>Type EMB</th><th>Nbr Colis</th>
        <th>P. Brut (kg)</th><th>P. Net (kg)</th><th>Prix</th><th>Montant (MAD)</th><th></th>
      </tr>
    </thead>
    <tbody>
      {% for l in vente.lignes %}
      <tr>
        <td>{{ l.produit }}</td>
        <td>{{ l.nb_palettes or "—" }}</td>
        <td>{{ l.type_emballage or "—" }}</td>
        <td>{{ l.nombre_colis or "—" }}</td>
        <td>{{ l.poids_brut_kg or "—" }}</td>
        <td>{{ l.poids_net_kg or "—" }}</td>
        <td>{{ l.prix_unitaire or "—" }}</td>
        <td>{{ "%.2f"|format(l.montant) }}</td>
        <td class="text-end">
          <form method="post" action="/commercial/lignes/{{ l.id }}/supprimer" onsubmit="return confirm('Supprimer cette ligne ?');">
            <input type="hidden" name="csrf_token" value="{{ request.state.csrf_token }}">
            <button type="submit" class="btn btn-sm btn-outline-danger">Supprimer</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
    <tfoot>
      <tr class="fw-bold">
        <td colspan="7" class="text-end">Total :</td>
        <td>{{ "%.2f"|format(vente.montant) }}</td>
        <td></td>
      </tr>
    </tfoot>
  </table>
</div>
{% else %}
<p class="text-muted">Aucune ligne détaillée pour le moment — le montant global du formulaire fait foi.</p>
{% endif %}

<form method="post" action="/commercial/ventes/{{ vente.id }}/lignes" class="card p-3 bg-white mb-4">
  <input type="hidden" name="csrf_token" value="{{ request.state.csrf_token }}">
  {% if produits %}
  <div class="mb-2">
    <label class="form-label small mb-1">Produit du catalogue (optionnel, pré-remplit la ligne)</label>
    <select id="selectProduitCatalogue" class="form-select form-select-sm">
      <option value="">— Saisie libre —</option>
      {% for p in produits %}
      <option value="{{ p.id }}" data-nom="{{ 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 '' }}">{{ p.nom }}</option>
      {% endfor %}
    </select>
  </div>
  {% endif %}
  <div class="row g-2">
    <div class="col-md-2">
      <label class="form-label small mb-1">Produit *</label>
      <input type="text" id="champProduit" name="produit" class="form-control form-control-sm" required>
    </div>
    <div class="col-md-1">
      <label class="form-label small mb-1">Nb/Pal</label>
      <input type="number" name="nb_palettes" class="form-control form-control-sm">
    </div>
    <div class="col-md-1">
      <label class="form-label small mb-1">Type EMB</label>
      <input type="text" id="champEmballage" name="type_emballage" class="form-control form-control-sm" placeholder="PCB 222">
    </div>
    <div class="col-md-1">
      <label class="form-label small mb-1">Nbr Colis</label>
      <input type="number" id="champNbColis" name="nombre_colis" class="form-control form-control-sm">
    </div>
    <div class="col-md-1">
      <label class="form-label small mb-1">Kg/Colis</label>
      <input type="number" step="0.01" id="champKgColis" class="form-control form-control-sm" title="Aide au calcul, non enregistré séparément">
    </div>
    <div class="col-md-1">
      <label class="form-label small mb-1">P. Brut</label>
      <input type="number" step="0.01" name="poids_brut_kg" class="form-control form-control-sm">
    </div>
    <div class="col-md-1">
      <label class="form-label small mb-1">P. Net</label>
      <input type="number" step="0.01" id="champPoidsNet" name="poids_net_kg" class="form-control form-control-sm">
    </div>
    <div class="col-md-1">
      <label class="form-label small mb-1">Prix</label>
      <input type="number" step="0.01" id="champPrix" name="prix_unitaire" class="form-control form-control-sm">
    </div>
    <div class="col-md-1">
      <label class="form-label small mb-1">Montant *</label>
      <input type="number" step="0.01" id="champMontant" name="montant" class="form-control form-control-sm" required>
    </div>
    <div class="col-md-2 d-flex align-items-end">
      <button type="submit" class="btn btn-success btn-sm w-100">+ Ajouter la ligne</button>
    </div>
  </div>
</form>

<script>
  (function () {
    var champKgColis = document.getElementById('champKgColis');
    var champNbColis = document.getElementById('champNbColis');
    var champPoidsNet = document.getElementById('champPoidsNet');
    var champPrix = document.getElementById('champPrix');
    var champMontant = document.getElementById('champMontant');

    function recalculerMontant() {
      var poidsNet = parseFloat(champPoidsNet.value);
      var prix = parseFloat(champPrix.value);
      if (!isNaN(poidsNet) && !isNaN(prix)) {
        champMontant.value = (poidsNet * prix).toFixed(2);
      }
    }

    function recalculerPoids() {
      var kgColis = parseFloat(champKgColis.value);
      var nbColis = parseFloat(champNbColis.value);
      if (!isNaN(kgColis) && !isNaN(nbColis)) {
        champPoidsNet.value = (kgColis * nbColis).toFixed(2);
      }
      recalculerMontant();
    }

    champKgColis.addEventListener('input', recalculerPoids);
    champNbColis.addEventListener('input', recalculerPoids);
    champPoidsNet.addEventListener('input', recalculerMontant);
    champPrix.addEventListener('input', recalculerMontant);

    var select = document.getElementById('selectProduitCatalogue');
    if (select) {
      select.addEventListener('change', function () {
        var option = select.selectedOptions[0];
        if (!option || !option.value) { return; }
        document.getElementById('champProduit').value = option.dataset.nom || '';
        document.getElementById('champEmballage').value = option.dataset.emballage || '';
        champPrix.value = option.dataset.prix || '';
        champKgColis.value = option.dataset.poidsColis || '';
        recalculerPoids();
      });
    }
  })();
</script>

{% if vente.type_document == "facture" %}
<h2 class="h5 mb-3">Encaissements liés</h2>
{% if vente.encaissements %}
<div class="table-responsive mb-3">
  <table class="table table-sm table-hover bg-white align-middle">
    <thead><tr><th>Date</th><th>Mode</th><th>Référence</th><th>Montant (MAD)</th></tr></thead>
    <tbody>
      {% for e in vente.encaissements %}
      <tr>
        <td>{{ e.date_encaissement }}</td>
        <td>{{ e.mode_paiement }}</td>
        <td>{{ e.reference or "—" }}</td>
        <td>{{ "%.2f"|format(e.montant) }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<p class="text-muted">Aucun encaissement enregistré pour cette facture.</p>
{% endif %}
<a href="/commercial/encaissements/nouveau?client_id={{ vente.client_id }}" class="btn btn-success btn-sm">+ Enregistrer un encaissement</a>
{% endif %}
{% endblock %}