{% extends "compta/base.html" %}
{% load l10n %}
{% block titre %}Entrées / sorties{% endblock %}

{% block extrastyle %}
<style>
  .tag { font-size:11px; padding:2px 8px; border-radius:99px; border:1px solid var(--line); white-space:nowrap; }
  .tag.recette { color:var(--ok); border-color:#2f6b52; }
  .tag.depense { color:var(--warn); border-color:#7a5f1f; }
  .tag.operation { color:var(--accent); border-color:#25566e; }
  .neutre-badge { font-size:10px; color:var(--muted); border:1px dashed var(--line); border-radius:6px; padding:1px 5px; margin-left:6px; }
  .ventile-badge { font-size:10px; color:var(--accent); border:1px solid #25566e; border-radius:6px; padding:1px 5px; margin-left:6px; }
  .regime-badge { font-size:11px; font-weight:600; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:2px 7px; }
  .regime-badge.autoliq { color:var(--warn); border-color:#7a5f1f; }
  .autoliq-badge { display:inline-block; margin-top:3px; font-size:10px; font-weight:600; color:#04263a;
                   background:var(--warn); border-radius:6px; padding:1px 6px; white-space:nowrap; }
  .ht { color:var(--muted); font-size:11.5px; margin-top:1px; }
  .sub2 { color:var(--muted); font-size:10px; margin-left:4px; }
  .btn-mini { padding:5px 11px; font-size:12.5px; border-radius:8px; }
  #gtable td, #gtable th { border-bottom:1px solid var(--line); }
  #gtable tbody tr:hover td { background:#243247; }
  .chkcol { width:34px; text-align:center !important; }
  .chkcol input { width:16px; height:16px; accent-color:var(--accent); }
  .empty { color:var(--muted); padding:28px; text-align:center; }

  .bulkbar { position:sticky; bottom:0; margin-top:14px; display:none; gap:12px; align-items:center;
             background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 16px; }
  .bulkbar.on { display:flex; }
  .bulkbar .count { font-weight:600; }

  /* modal */
  .overlay { position:fixed; inset:0; background:#020617d0; display:none; align-items:center;
             justify-content:center; padding:16px; z-index:100; }
  .overlay.on { display:flex; }
  .modal { background:var(--card); border:1px solid var(--line); border-radius:16px;
           width:min(560px,100%); max-height:92vh; overflow:auto; padding:22px; }
  .modal h3 { margin:0 0 16px; font-size:18px; }
  .modal .field { display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
  .modal .field label { font-size:13px; color:var(--muted); }
  .modal .field input, .modal .field select { width:100%; }
  .modal .actions { display:flex; gap:10px; justify-content:space-between; margin-top:20px; flex-wrap:wrap; }
  .explic { background:#0b1220; border:1px solid var(--line); border-radius:10px;
            padding:11px 13px; font-size:13px; color:var(--muted); }
  .explic b { color:var(--txt); }
  .hidegroup { display:none; }
</style>
{% endblock %}

{% block topbar %}
  <h1>Entrées / sorties</h1>
  <div class="sub">{{ entreprise.nom }} — vue unifiée de toutes les opérations (recettes, dépenses, mouvements)</div>

  {% for m in messages %}<div class="msg {{ m.tags }}">{{ m }}</div>{% endfor %}

  <div class="grid">
    <div class="card"><div class="label">Opérations</div><div class="value">{{ nb }}</div></div>
    <div class="card"><div class="label">Entrées</div><div class="value pos">{{ entrees|floatformat:2|unlocalize }} €</div></div>
    <div class="card"><div class="label">Sorties</div><div class="value neg">{{ sorties|floatformat:2|unlocalize }} €</div></div>
    <div class="card"><div class="label">Solde</div><div class="value {% if total >= 0 %}pos{% else %}neg{% endif %}">{{ total|floatformat:2|unlocalize }} €</div></div>
  </div>

  <form class="filters" method="get">
    <label>Entreprise
      <select name="entreprise" onchange="this.form.submit()">
        {% for e in entreprises %}<option value="{{ e.pk }}" {% if e.pk == entreprise.pk %}selected{% endif %}>{{ e.nom }}</option>{% endfor %}
      </select></label>
    <label>Recherche<input type="text" name="q" value="{{ filtres.q }}" placeholder="libellé, catégorie…"></label>
    <label>Type<select name="type">
      <option value="">Tous</option>
      <option value="recette" {% if filtres.type == 'recette' %}selected{% endif %}>Recettes</option>
      <option value="depense" {% if filtres.type == 'depense' %}selected{% endif %}>Dépenses</option>
      <option value="operation" {% if filtres.type == 'operation' %}selected{% endif %}>Opérations</option>
    </select></label>
    <label>Catégorie<select name="cat">
      <option value="">Toutes</option>
      {% for c in categories %}<option value="{{ c.pk }}" {% if filtres.cat == c.pk|stringformat:'s' %}selected{% endif %}>{{ c.nom }}</option>{% endfor %}
    </select></label>
    <label>Régime<select name="regime">
      <option value="">Tous</option>
      {% for v,l in regimes %}<option value="{{ v }}" {% if filtres.regime == v %}selected{% endif %}>{{ l }}</option>{% endfor %}
    </select></label>
    <label>Du<input type="date" name="du" value="{{ filtres.du }}"></label>
    <label>Au<input type="date" name="au" value="{{ filtres.au }}"></label>
    <label>Trier<select name="tri">
      <option value="date" {% if filtres.tri == 'date' %}selected{% endif %}>Date</option>
      <option value="montant" {% if filtres.tri == 'montant' %}selected{% endif %}>Montant</option>
      <option value="libelle" {% if filtres.tri == 'libelle' %}selected{% endif %}>Libellé</option>
    </select></label>
    <label>Sens<select name="sens">
      <option value="desc" {% if filtres.sens == 'desc' %}selected{% endif %}>↓ décroissant</option>
      <option value="asc" {% if filtres.sens == 'asc' %}selected{% endif %}>↑ croissant</option>
    </select></label>
    <button type="submit" class="btn-primary">Filtrer</button>
    <a class="btn-mini" href="/gestion/?entreprise={{ entreprise.pk }}" style="padding:9px 12px;border:1px solid var(--line);border-radius:9px;">Réinitialiser</a>
  </form>
{% endblock %}

{% block content %}
{% if entreprise %}
  {% if rows %}
  <div class="table-wrap">
  <table id="gtable">
    <thead><tr>
      <th class="chkcol"><input type="checkbox" id="chkall" title="Tout sélectionner"></th>
      <th>Date</th><th>Type</th><th>Libellé</th><th>Catégorie</th>
      <th>Régime</th><th>Montant</th><th>Taux / TVA</th><th></th>
    </tr></thead>
    <tbody>
    {% for r in rows %}
      <tr>
        <td class="chkcol"><input type="checkbox" class="rowchk" name="sel" value="{{ r.type }}:{{ r.id }}" form="bulkform"></td>
        <td>{{ r.date|date:"d/m/Y" }}</td>
        <td><span class="tag {{ r.type }}">{{ r.type_label }}</span></td>
        <td>{{ r.libelle }}</td>
        <td>{{ r.categorie }}{% if r.neutre %}<span class="neutre-badge">neutre</span>{% endif %}{% if r.ventile %}<span class="ventile-badge" title="Part d'une dépense ventilée (plusieurs taux de TVA)">ventilé</span>{% endif %}</td>
        <td>{% if r.regime_court %}<span class="regime-badge {% if r.autoliq %}autoliq{% endif %}">{{ r.regime_court }}</span>{% if r.autoliq %}<br><span class="autoliq-badge" title="Autoliquidation : TVA collectée ET déductible sur cet achat (impact net nul)">autoliq. TVA</span>{% endif %}{% else %}—{% endif %}</td>
        <td class="num {% if r.montant >= 0 %}pos{% else %}neg{% endif %}">
          {{ r.montant|floatformat:2|unlocalize }} €<span class="sub2">TTC</span>
          {% if r.ht is not None %}<div class="ht">{{ r.ht|floatformat:2|unlocalize }} € HT</div>{% endif %}
        </td>
        <td class="num">
          {% if r.tva is not None %}{{ r.taux|floatformat:"-2"|unlocalize }} %<div class="ht">{{ r.tva|floatformat:2|unlocalize }} €</div>{% else %}—{% endif %}
        </td>
        <td>
          <button type="button" class="btn-mini"
            data-edit
            data-type="{{ r.type }}" data-id="{{ r.id }}"
            data-libelle="{{ r.libelle }}"
            data-date="{{ r.date|date:'Y-m-d' }}"
            data-montant="{{ r.montant|unlocalize }}"
            data-cat="{{ r.categorie_id }}"
            data-activite="{{ r.activite }}"
            data-regime="{{ r.regime }}"
            data-taux="{{ r.taux|unlocalize }}"
            data-statut="{{ r.statut }}"
            data-sens="{{ r.sens }}"
            data-encaissement="{{ r.date_encaissement|date:'Y-m-d' }}"
            data-emission="{{ r.date_emission|date:'Y-m-d' }}"
            data-editmontant="{{ r.editable_montant|yesno:'1,0' }}"
          >Modifier</button>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  </div>

  <form class="bulkbar" id="bulkform" method="post" action="/gestion/"
        onsubmit="return confirm('Supprimer définitivement les opérations sélectionnées ?');">
    {% csrf_token %}
    <input type="hidden" name="action" value="delete_bulk">
    <input type="hidden" name="entreprise" value="{{ entreprise.pk }}">
    <input type="hidden" name="retour_qs" id="bulk_retour">
    <span class="count"><span id="bulkcount">0</span> sélectionnée(s)</span>
    <button type="submit" class="btn-danger">Supprimer la sélection</button>
    <button type="button" onclick="clearSel()" style="background:var(--card);border:1px solid var(--line);">Annuler</button>
  </form>
  {% else %}
    <div class="empty">Aucune opération ne correspond à ces filtres.</div>
  {% endif %}
{% endif %}

<!-- Modal d'édition -->
<div class="overlay" id="ov">
  <div class="modal">
    <h3 id="mtitre">Modifier l'opération</h3>
    <form method="post" action="/gestion/" id="mform">
      {% csrf_token %}
      <input type="hidden" name="action" value="edit">
      <input type="hidden" name="entreprise" value="{{ entreprise.pk }}">
      <input type="hidden" name="type" id="f_type">
      <input type="hidden" name="id" id="f_id">
      <input type="hidden" name="retour_qs" id="f_retour">

      <div class="field"><label>Date</label><input type="date" name="date" id="f_date"></div>
      <div class="field"><label>Libellé</label><input type="text" name="libelle" id="f_libelle"></div>

      <div class="field" id="g_cat">
        <label>Catégorie</label>
        <select name="categorie" id="f_cat">
          <option value="">(à catégoriser)</option>
          {% for c in categories %}<option value="{{ c.pk }}">{{ c.nom }}{% if c.exclure_calculs %} · neutre{% endif %}</option>{% endfor %}
        </select>
        <div class="explic" id="f_explic">Choisissez une catégorie pour voir son explication.</div>
      </div>

      <div class="field hidegroup" id="g_activite">
        <label>Activité (facultatif)</label>
        <select name="activite" id="f_activite">
          <option value="">—</option>
          {% for v,l in activites %}<option value="{{ v }}">{{ l }}</option>{% endfor %}
        </select>
      </div>

      <div class="field hidegroup" id="g_regime">
        <label>Régime de TVA</label>
        <select name="regime" id="f_regime">
          {% for v,l in regimes %}<option value="{{ v }}">{{ l }}</option>{% endfor %}
        </select>
      </div>

      <div class="field hidegroup" id="g_taux">
        <label>Taux de TVA</label>
        <select name="taux" id="f_taux">
          {% for v,l in taux_choices %}<option value="{{ v|unlocalize }}">{{ l }}</option>{% endfor %}
        </select>
      </div>

      <div class="field hidegroup" id="g_sens">
        <label>Sens</label>
        <select name="sens" id="f_sens">
          <option value="debit">Débit (sortie)</option>
          <option value="credit">Crédit (entrée)</option>
        </select>
      </div>

      <div class="field hidegroup" id="g_statut">
        <label>Statut</label>
        <select name="statut" id="f_statut">
          {% for v,l in statuts %}<option value="{{ v }}">{{ l }}</option>{% endfor %}
        </select>
      </div>

      <div class="field hidegroup" id="g_encaissement">
        <label>Date d'encaissement (compte le CA)</label>
        <input type="date" name="date_encaissement" id="f_encaissement">
      </div>

      <div class="field"><label id="lbl_montant">Montant (€)</label>
        <input type="number" step="0.01" name="montant" id="f_montant"></div>
      <div class="explic hidegroup" id="note_montant">Le montant est géré par les lignes de facture — modifiez-le dans l'admin.</div>

      <div class="actions">
        <button type="button" class="btn-danger" onclick="supprimer()">Supprimer</button>
        <div>
          <button type="button" onclick="fermer()" style="margin-right:6px;">Annuler</button>
          <button type="submit" class="btn-primary">Enregistrer</button>
        </div>
      </div>
    </form>
    <form method="post" action="/gestion/" id="delform" style="display:none;">
      {% csrf_token %}
      <input type="hidden" name="action" value="delete">
      <input type="hidden" name="entreprise" value="{{ entreprise.pk }}">
      <input type="hidden" name="type" id="d_type">
      <input type="hidden" name="id" id="d_id">
      <input type="hidden" name="retour_qs" id="d_retour">
    </form>
  </div>
</div>
{{ cats_json|json_script:"cats-data" }}
{% endblock %}

{% block scripts %}
<script>
const CATS = JSON.parse(document.getElementById('cats-data').textContent);
const $ = id => document.getElementById(id);

function retourQs(){
  const p = new URLSearchParams(window.location.search);
  p.delete('entreprise');
  return p.toString();
}
function show(id, on){ $(id).classList.toggle('hidegroup', !on); }

function majExplic(){
  const c = CATS[$('f_cat').value];
  const box = $('f_explic');
  if(!c){ box.innerHTML = 'Non catégorisé : le calcul fiscal peut être incomplet.'; return; }
  const badge = c.neutre ? ' <b>(neutre)</b>' : '';
  const compte = c.compte ? ' · compte ' + c.compte : '';
  box.innerHTML = '<b>' + c.nom + '</b>' + badge + compte + '<br>' + c.explication;
}

function ouvrir(btn){
  const d = btn.dataset, t = d.type;
  $('f_type').value = t; $('f_id').value = d.id;
  $('d_type').value = t; $('d_id').value = d.id;
  const qs = retourQs();
  $('f_retour').value = qs; $('d_retour').value = qs;
  $('f_date').value = d.date || '';
  $('f_libelle').value = d.libelle || '';
  $('f_montant').value = Math.abs(parseFloat(d.montant || '0')).toFixed(2);
  $('f_cat').value = d.cat || '';
  $('f_activite').value = d.activite || '';
  $('f_regime').value = d.regime || 'nationale';
  $('f_taux').value = (parseFloat(d.taux || '0') || 0).toString();
  $('f_sens').value = d.sens || 'debit';
  $('f_statut').value = d.statut || '';
  $('f_encaissement').value = d.encaissement || '';

  const dep = t === 'depense', ope = t === 'operation', rec = t === 'recette';
  show('g_cat', dep || ope);
  show('g_activite', dep);
  show('g_regime', dep);
  show('g_taux', dep || rec);
  show('g_sens', ope);
  show('g_statut', rec);
  show('g_encaissement', rec);
  const editMontant = d.editmontant === '1';
  $('f_montant').readOnly = !editMontant;
  show('note_montant', !editMontant);
  $('lbl_montant').textContent = dep ? 'Montant payé — TTC (€)' : 'Montant (€)';
  $('mtitre').textContent = 'Modifier — ' + (rec ? 'recette' : dep ? 'dépense' : 'opération bancaire');
  majExplic();
  $('ov').classList.add('on');
}
function fermer(){ $('ov').classList.remove('on'); }
function supprimer(){
  if(confirm('Supprimer définitivement cette opération ?')) $('delform').submit();
}

/* Sélection multiple */
function majBulk(){
  const checked = document.querySelectorAll('.rowchk:checked').length;
  $('bulkcount').textContent = checked;
  document.getElementById('bulkform').classList.toggle('on', checked > 0);
  const all = $('chkall'); const total = document.querySelectorAll('.rowchk').length;
  if(all){ all.checked = checked === total && total > 0; all.indeterminate = checked > 0 && checked < total; }
}
function clearSel(){
  document.querySelectorAll('.rowchk').forEach(c => c.checked = false);
  if($('chkall')) $('chkall').checked = false;
  majBulk();
}

document.addEventListener('click', e => {
  const b = e.target.closest('[data-edit]');
  if(b) ouvrir(b);
});
$('f_cat').addEventListener('change', majExplic);
$('ov').addEventListener('click', e => { if(e.target === $('ov')) fermer(); });
document.addEventListener('keydown', e => { if(e.key === 'Escape') fermer(); });

const chkall = $('chkall');
if(chkall){
  chkall.addEventListener('change', () => {
    document.querySelectorAll('.rowchk').forEach(c => c.checked = chkall.checked);
    majBulk();
  });
  document.querySelectorAll('.rowchk').forEach(c => c.addEventListener('change', majBulk));
  const br = $('bulk_retour'); if(br) br.value = retourQs();
}
</script>
{% endblock %}