rar-autopass/app/web/templates/_preview_import.html

{% import '_macros.html' as ui %}
{# reincarcaPreview (emis de /editeaza si /confirma-review prin HX-Trigger): preview-ul
   se reincarca COMPLET (rand + contoare + colaps deja-trimise corecte) in loc de OOB swap
   pe <tr> (fragil in htmx 1.9). Evidentierea + toast-ul randului salvat: base.html. #}
<div id="import-section"
     hx-get="/_import/{{ import_id }}/preview"
     hx-trigger="reincarcaPreview from:body"
     hx-target="#import-section"
     hx-swap="outerHTML">
  {% set pas = 3 %}{% include '_stepper.html' %}
  <div class="card">
    <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px;">
      <h2 style="font-size:var(--fs-md); margin:0;">
        Preview —
        <span class="muted" style="font-weight:400;">{{ filename or ("import #" ~ import_id) }}</span>
      </h2>
      <span class="muted" style="margin-left:auto; font-size:var(--fs-sm);">{{ total }} randuri</span>
    </div>

    {% if message %}
    <div class="flash" style="{% if error %}border-color:var(--err); background:color-mix(in srgb, var(--err) 12%, var(--card));{% endif %} margin-bottom:12px;"
         {% if error %}role="alert"{% endif %}>
      {{ message }}
    </div>
    {% endif %}

    <!-- Rezumat stari cu etichete umane cu majuscula (id stabil pentru OOB swap) -->
    {% set status_labels = [
      ('ok',               'Gata de trimis'),
      ('needs_review',     'Verifica valori'),
      ('needs_mapping',    'Cod RAR lipsa'),
      ('needs_data',       'Date incomplete'),
      ('already_sent',     'Deja trimis'),
      ('duplicate_in_file','Duplicat in fisier'),
    ] %}
    <div id="preview-rezumat" style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;">
      {% for status_key, label in status_labels %}
      {%- set cnt = summary.get(status_key, 0) -%}
      {% if cnt > 0 %}
      <span class="pill s-{{ status_key }}" style="display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs);">
        <span aria-hidden="true" style="display:inline-block; width:7px; height:7px; border-radius:99px; background:currentColor; flex-shrink:0;"></span>{{ cnt }} {{ label | lower }}</span>
      {% endif %}
      {% endfor %}
    </div>

    <!-- Butoane filtrare stare — text uman, data-filter pastreaza codul tehnic -->
    <div style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;" role="group"
         aria-label="Filtrare dupa stare">
      <button type="button" class="filter-btn" data-filter="all"
              style="min-height:36px; font-size:var(--fs-sm); padding:4px 12px;">
        Toate ({{ total }})
      </button>
      {% for status_key, label in status_labels %}
      {%- set cnt = summary.get(status_key, 0) -%}
      {% if cnt > 0 %}
      <button type="button" class="filter-btn" data-filter="{{ status_key }}"
              style="min-height:36px; font-size:var(--fs-sm); padding:4px 12px;
                     background:transparent; border-color:var(--line); color:var(--ink);">
        {{ label }} ({{ cnt }})
      </button>
      {% endif %}
      {% endfor %}
    </div>

    <!-- Panou inline: operatii fara cod RAR, mapabile in flux (fara re-upload).
         US-004: un singur <form> cu un select per operatie + un singur buton Salveaza. -->
    {% if unmapped_ops %}
    <div class="card" style="border-color:var(--err); background:color-mix(in srgb, var(--err) 12%, var(--card)); margin-bottom:14px;">
      <h3 style="font-size:14px; margin:0 0 6px;">Operatii de mapat la cod RAR</h3>
      <p class="muted" style="margin:0 0 12px; font-size:var(--fs-sm);">
        Aceste operatii din fisier nu au inca un cod RAR. Alege codul (sugestia e
        preselectata) si salveaza — randurile blocate trec automat in
        <span class="s-ok">ok</span> si maparea se retine pentru fisierele viitoare.
      </p>
      <form hx-post="/_import/{{ import_id }}/mapare-operatii"
            hx-target="#import-section" hx-swap="outerHTML">
        <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
        {% for e in unmapped_ops %}
        {%- set top = e.suggestions[0] if e.suggestions else None -%}
        {%- set preselect = top.cod_prestatie if (top and top.score >= 60) else '' -%}
        <div class="maprow" style="align-items:flex-end; margin-bottom:10px;">
          <input type="hidden" name="cod_op_service" value="{{ e.cod_op_service }}">
          <div class="mapcol grow">
            <div><strong>{{ e.cod_op_service }}</strong>
              <span class="pill" title="randuri blocate">{{ e.blocked }} randuri</span></div>
            {% if e.denumire and e.denumire != e.cod_op_service %}
            <div class="muted">{{ e.denumire }}</div>
            {% endif %}
            {% if e.suggestions %}
            <div class="muted" style="font-size:12px; margin-top:4px;">
              sugestii:
              {% for s in e.suggestions[:3] %}
                <span class="sugg">{{ s.cod_prestatie }} ({{ s.score|round|int }}%)</span>{% if not loop.last %}, {% endif %}
              {% endfor %}
            </div>
            {% endif %}
          </div>
          <div class="mapcol">
            <select name="cod_prestatie" aria-label="Cod RAR pentru {{ e.cod_op_service }}">
              <option value="">— alege cod RAR —</option>
              {% for n in nomenclator %}
              <option value="{{ n.cod_prestatie }}" {% if n.cod_prestatie == preselect %}selected{% endif %}>
                {{ n.cod_prestatie }} — {{ n.nume_prestatie }}
              </option>
              {% endfor %}
            </select>
          </div>
        </div>
        {% endfor %}
        <div style="margin-top:12px;">
          <button type="submit" style="min-height:44px;">Salveaza maparile</button>
        </div>
      </form>
    </div>
    {% endif %}

    <!-- Banner discoverability (T1, US-007): vizibil cand exista randuri needs_review.
         Explica operatorului ca randurile cu 'Verifica valori' nu pleaca la RAR
         pana le deschide in modal si apasa 'Confirma valorile'. Dispare via OOB
         cand summary.needs_review == 0. -->
    <div id="preview-needs-review-banner">
    {% if summary.get('needs_review', 0) %}
    <div class="banner warn" role="note" aria-live="polite"
         style="margin-bottom:12px; padding:8px 14px; border-radius:6px;
                background:color-mix(in srgb, var(--warn, #e6b34a) 12%, var(--card));
                border:1px solid var(--warn, #e6b34a); font-size:13px;">
      Randurile cu <span class="pill s-needs_review" style="font-size:11px;">Verifica valori</span>
      nu pleaca la RAR pana le deschizi in modal si confirmi in modal
      cu butonul <strong>Confirma valorile</strong>.
    </div>
    {% endif %}
    </div>

    <!-- Toggle randuri deja-trimise / duplicate: colapsate implicit (nu ocupa loc).
         Click -> comuta clasa .preview-arata-trimise pe tabel (CSS in base.html). -->
    {% set _n_trimise = summary.get('already_sent', 0) + summary.get('duplicate_in_file', 0) %}
    {% if _n_trimise %}
    <div style="margin-bottom:8px;">
      <button type="button" class="btn-secondary btn-sm" aria-expanded="false"
              onclick="var t=document.getElementById('preview-tabel'); var on=t.classList.toggle('preview-arata-trimise'); this.setAttribute('aria-expanded', on); this.querySelector('.tgl-tx').textContent = on ? 'Ascunde {{ _n_trimise }} deja trimise / duplicate' : 'Arata {{ _n_trimise }} deja trimise / duplicate';">
        <span class="tgl-tx">Arata {{ _n_trimise }} deja trimise / duplicate</span>
      </button>
    </div>
    {% endif %}

    <!-- Tabel preview in format identic cu tabelul Trimiteri (.tabel-trimiteri).
         US-007: 8 coloane (coloana de verificare eliminata).
         Randurile au FORM PROPRIU pentru editare (NU sunt in #confirm-form). -->
    <div id="preview-tabel" class="tablewrap tabel-trimiteri">
      <table>
        <thead>
          <tr>
            <th class="col-id">#</th>
            <th class="col-stare">Stare</th>
            <th class="col-vehicul">Vehicul</th>
            <th class="col-operatie">Operatie</th>
            <th class="col-data">Data</th>
            <th class="col-km">KM final</th>
            <th class="col-note">Note</th>
            <th class="col-actiuni">Actiuni</th>
          </tr>
        </thead>
        <tbody>
        {% for row in rows %}
          {% include '_preview_rand.html' %}
        {% endfor %}
        </tbody>
      </table>
      <!-- Mesaj "filtrat la zero": afisat de JS cand filtrul ascunde toate randurile -->
      <p id="preview-zero-message" class="muted"
         style="display:none; text-align:center; padding:24px 16px; font-size:var(--fs-md);">
        Niciun rand nu corespunde filtrului selectat.
      </p>
    </div>

    <!-- Bara confirmare (sticky jos) — singurul formular care trimite la RAR -->
    <form id="confirm-form"
          hx-post="/_import/{{ import_id }}/confirma"
          hx-target="#import-section"
          hx-swap="outerHTML">
      <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
      <div class="sticky-bar">
        <div style="flex:1; min-width:280px;">
          <!-- Banner declarant — direct deasupra input-ului N -->
          <div class="banner warn" style="margin-bottom:10px; padding:8px 12px; border-radius:6px;"
               role="note" aria-live="polite">
            Confirmand, TU esti declarantul acestor
            <strong id="n-display">{{ summary.get('ok', 0) }}</strong>
            prezentari la RAR (ireversibil).
          </div>

          <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
            <label for="n-confirmat"
                   style="font-size:var(--fs-sm); color:var(--muted);">
              Confirma numarul
            </label>
            <input type="number" id="n-confirmat" name="n_confirmat"
                   value="{{ summary.get('ok', 0) }}"
                   min="0" required
                   style="max-width:80px;"
                   aria-describedby="n-hint">
            <span id="n-hint" class="muted" style="font-size:var(--fs-xs);">
din <span id="n-hint-ok">{{ summary.get('ok', 0) }}</span> gata de trimis
            </span>
          </div>
        </div>

        <div style="display:flex; flex-direction:column; gap:6px; align-self:flex-end;">
          <button type="submit"
                  id="confirm-btn"
                  style="min-height:44px; padding:10px 28px; font-size:var(--fs-md);"
                  {% if not summary.get('ok', 0) %}disabled title="Niciun rand ok de trimis"{% endif %}>
            Trimite la RAR
          </button>
          {% if summary.get('needs_data', 0) or summary.get('needs_mapping', 0) or summary.get('needs_review', 0) %}
          <a href="/v1/import/{{ import_id }}/export-failed" download
             style="font-size:var(--fs-xs); text-align:center;">
            descarca randuri cu probleme (CSV)
          </a>
          {% endif %}
        </div>
      </div>
    </form>

    <!-- Contor "gata de trimis" citit din DOM (data-ok), ca OOB swap-ul de la editare
         sa actualizeze N fara a re-randa sectiunea. -->
    <span id="preview-ok-count" data-ok="{{ summary.get('ok', 0) }}" hidden></span>

    <div style="padding:8px 0 4px;">
      <a href="#" class="muted" style="font-size:var(--fs-sm);"
         hx-get="/_import/reset" hx-target="#import-section" hx-swap="outerHTML">Incarca alt fisier</a>
    </div>

  </div>
</div>

<script>
(function() {
  /* Un singur sticky bar pe ecran — cat preview-ul de import e activ,
     ascunde sectiunea Trimiteri de pe Acasa (se reveleaza la reset/commit din _upload.html). */
  var trim = document.getElementById('trimiteri-section');
  if (trim) trim.style.display = 'none';

  /* nOk se citeste din DOM (#preview-ok-count[data-ok]) ca OOB swap-ul de la editare
     sa-l poata actualiza fara re-randarea sectiunii. */
  function getOk() {
    var el = document.getElementById('preview-ok-count');
    return el ? parseInt(el.dataset.ok || '0', 10) : 0;
  }

  /* Actualizeaza N dupa editare/confirmare rand (OOB).
     US-007: reviewed_rows (checkboxe) eliminate; N = randurile ok din DB,
     actualizate via OOB (#preview-ok-count[data-ok]) dupa /confirma-review sau /editeaza. */
  function updateN() {
    var total = getOk();
    var inp = document.getElementById('n-confirmat');
    var disp = document.getElementById('n-display');
    var btn = document.getElementById('confirm-btn');
    if (inp) inp.value = total;
    if (disp) disp.textContent = total;
    var hintOk = document.getElementById('n-hint-ok');
    if (hintOk) hintOk.textContent = total;
    if (btn) btn.disabled = (total === 0);
  }

  /* Filtrare randuri dupa stare.
     Cand niciun rand nu e vizibil, afiseaza mesajul #preview-zero-message. */
  function filterRows(status) {
    var visible = 0;
    document.querySelectorAll('tbody tr[data-status]').forEach(function(tr) {
      var show = status === 'all' || tr.dataset.status === status;
      tr.style.display = show ? '' : 'none';
      if (show) visible++;
    });
    var zeroMsg = document.getElementById('preview-zero-message');
    if (zeroMsg) zeroMsg.style.display = (visible === 0) ? '' : 'none';
    document.querySelectorAll('.filter-btn').forEach(function(b) {
      var active = b.dataset.filter === status;
      b.style.background = active ? 'var(--accent)' : '';
      b.style.borderColor = active ? 'var(--accent)' : '';
      b.style.color = active ? '#fff' : '';
    });
  }

  /* Expune functiile global pentru onclick/hx-on inline si OOB swap */
  window.updateN = updateN;
  window.filterRows = filterRows;

  /* Filtru implicit "Toate" activ la incarcare */
  filterRows('all');
  updateN();

  /* Evidentiere rand dupa reincarcarea preview-ului (window.__randSalvat setat de
     listener-ul 'randSalvat' din base.html): scroll + flash, ca userul sa vada CARE
     rand s-a schimbat si sa nu ramana cu impresia ca "nu s-a intamplat nimic". */
  if (window.__randSalvat) {
    var d = window.__randSalvat; window.__randSalvat = null;
    var r = document.getElementById('preview-row-' + d.rowIndex);
    if (r) {
      r.scrollIntoView({block:'center', behavior:'smooth'});
      void r.offsetWidth;
      r.classList.add('rand-actualizat');
    }
  }
})();
</script>