{% extends "compta/base.html" %}
{% block titre %}Saisir{% endblock %}

{% block extrastyle %}
<style>
  .sp label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
  .sp input, .sp select { width:100%; background:var(--panel); }
  .sp .card { margin-bottom:16px; }
  .sp .head { display:grid; grid-template-columns:1fr 1fr 2fr 1fr; gap:12px; }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media(max-width:700px){ .sp .head,.grid2{grid-template-columns:1fr;} }
  .sp table { font-size:13px; margin-top:8px; }
  .sp th, .sp td { padding:6px; text-align:left; vertical-align:top; }
  .sp td input, .sp td select { padding:6px 8px; }
  .sp .num { text-align:right; }
  button.mini { padding:4px 10px; }
  .totaux { display:flex; gap:24px; align-items:center; margin-top:12px; flex-wrap:wrap; }
  .totaux b { font-size:18px; }
  .sp .actions { display:flex; gap:12px; margin-top:16px; }
  .badge { display:inline-block; padding:2px 10px; border-radius:99px; font-size:12px; }
  .badge.dep { background:#7f1d1d; } .badge.ven { background:#064e3b; }
  .hidden { display:none; }
  .hint { color:var(--muted); font-size:12px; margin-top:6px; }
</style>
{% endblock %}

{% block topbar %}
  <h1>Saisie d'une opération</h1>
  <div class="sub">Montant <b>négatif</b> = dépense · <b>positif</b> = vente / encaissement.</div>
  {% if messages %}{% for m in messages %}<div class="msg {{ m.tags }}">{{ m }}</div>{% endfor %}{% endif %}
{% endblock %}

{% block content %}
<div class="sp">
  <form method="post" id="frm">
    {% csrf_token %}
    <div class="card">
      <div class="head">
        <div>
          <label>Entreprise</label>
          <select name="entreprise" required>
            {% for e in entreprises %}<option value="{{ e.pk }}">{{ e.nom }}</option>{% endfor %}
          </select>
        </div>
        <div>
          <label>Date</label>
          <input type="date" name="date" value="{{ today }}">
        </div>
        <div>
          <label>Libellé bancaire</label>
          <input type="text" name="libelle" placeholder="ex. AMAZON / ALTISSIMO" required>
        </div>
        <div>
          <label>Montant signé (€) <span id="badge"></span></label>
          <input type="number" step="0.01" name="montant_total" id="total"
                 placeholder="-150 ou 168.40" oninput="toggle()">
        </div>
      </div>
    </div>

    <!-- PANEL DÉPENSE (montant négatif) -->
    <div class="card hidden" id="panel-depense">
      <div class="sub" style="margin:0 0 8px">Dépense — éclate en une ou plusieurs lignes.</div>
      <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th style="width:24%">Libellé / vendeur</th>
            <th style="width:16%">Catégorie</th>
            <th style="width:15%">Activité</th>
            <th style="width:16%">Régime TVA</th>
            <th style="width:9%">Taux TVA</th>
            <th style="width:13%">Montant €</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="lignes"></tbody>
      </table>
      </div>
      <div class="actions"><button type="button" onclick="addRow()">+ Ajouter une ligne</button></div>
      <div class="totaux">
        <span>Réparti : <b id="repartis">0.00</b> €</span>
        <span>Reste : <b id="reste" class="bad">0.00</b> €</span>
      </div>
    </div>

    <!-- PANEL VENTE (montant positif) -->
    <div class="card hidden" id="panel-vente">
      <div class="sub" style="margin:0 0 8px">Vente — crée une facture encaissée (ou un mouvement neutre).</div>
      <div class="grid2">
        <div>
          <label>Client existant</label>
          <select name="v_client">
            <option value="">—</option>
            {% for c in clients %}<option value="{{ c.pk }}">{{ c.nom }} ({{ c.entreprise.nom }})</option>{% endfor %}
          </select>
        </div>
        <div>
          <label>…ou nouveau client</label>
          <input type="text" name="v_client_nouveau" placeholder="Nom du nouveau client">
        </div>
        <div>
          <label>Activité</label>
          <select name="v_activite">
            {% for val,lab in activites %}<option value="{{ val }}">{{ lab }}</option>{% endfor %}
          </select>
        </div>
        <div>
          <label>Taux TVA (%)</label>
          <select name="v_taux">
            <option value="20">20 %</option><option value="10">10 %</option>
            <option value="5.5">5,5 %</option><option value="0">0 %</option>
          </select>
        </div>
        <div>
          <label>Désignation</label>
          <input type="text" name="v_designation" placeholder="ex. Vente de produits finis">
        </div>
        <div>
          <label>Ou catégorie neutre (ex. remboursement TVA)</label>
          <select name="v_categorie">
            <option value="">— (vente normale)</option>
            {% for c in categories_vente %}<option value="{{ c.pk }}">{{ c.nom }}{% if c.exclure_calculs %} (neutre){% endif %}</option>{% endfor %}
          </select>
        </div>
      </div>
      <div class="hint">Le montant TTC encaissé = le montant signé saisi plus haut.
        Une catégorie <b>neutre</b> n'enregistre pas de vente (mouvement de trésorerie).</div>
    </div>

    <div class="actions">
      <button type="submit" class="btn-primary">Enregistrer</button>
    </div>
  </form>

  <template id="rowtpl">
    <tr>
      <td><input type="text" name="l_libelle" placeholder="Vendeur / objet"></td>
      <td>
        <select name="l_categorie">
          <option value="">—</option>
          {% for c in categories_depense %}<option value="{{ c.pk }}">{{ c.nom }}</option>{% endfor %}
        </select>
      </td>
      <td>
        <select name="l_activite">
          <option value="">—</option>
          {% for val,lab in activites %}<option value="{{ val }}">{{ lab }}</option>{% endfor %}
        </select>
      </td>
      <td>
        <select name="l_regime">
          {% for val,lab in regimes %}<option value="{{ val }}">{{ lab }}</option>{% endfor %}
        </select>
      </td>
      <td>
        <select name="l_taux">
          <option value="20">20 %</option><option value="10">10 %</option>
          <option value="5.5">5,5 %</option><option value="0">0 %</option>
        </select>
      </td>
      <td><input type="number" step="0.01" name="l_montant" class="num montant" oninput="recalc()"></td>
      <td><button type="button" class="mini" onclick="this.closest('tr').remove();recalc()">✕</button></td>
    </tr>
  </template>
</div>
{% endblock %}

{% block scripts %}
<script>
  function addRow(){
    document.getElementById('lignes').appendChild(
      document.getElementById('rowtpl').content.cloneNode(true));
  }
  function recalc(){
    let s = 0;
    document.querySelectorAll('.montant').forEach(i => s += parseFloat(i.value||0));
    const total = Math.abs(parseFloat(document.getElementById('total').value||0));
    document.getElementById('repartis').textContent = s.toFixed(2);
    const reste = (total - s);
    const el = document.getElementById('reste');
    el.textContent = reste.toFixed(2);
    el.className = Math.abs(reste) < 0.01 ? 'ok' : 'bad';
  }
  function toggle(){
    const v = parseFloat(document.getElementById('total').value||0);
    const dep = document.getElementById('panel-depense');
    const ven = document.getElementById('panel-vente');
    const badge = document.getElementById('badge');
    if (v < 0){ dep.classList.remove('hidden'); ven.classList.add('hidden');
                badge.className='badge dep'; badge.textContent='Dépense';
                if(!document.querySelector('#lignes tr')){addRow();addRow();}
                recalc(); }
    else if (v > 0){ ven.classList.remove('hidden'); dep.classList.add('hidden');
                     badge.className='badge ven'; badge.textContent='Vente'; }
    else { dep.classList.add('hidden'); ven.classList.add('hidden'); badge.textContent=''; }
  }
</script>
{% endblock %}