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

{% import '_macros.html' as ui %}
<div id="import-section">
  {% 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:15px; 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:13px;">{{ total }} randuri</span>
    </div>

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

    <!-- Rezumat stari (id stabil pentru OOB swap dupa editarea unui rand — US-002) -->
    {% set status_labels = [
      ('ok',               'gata de trimis'),
      ('needs_review',     'verifica valori'),
      ('needs_mapping',    'fara cod RAR'),
      ('needs_data',       'date lipsa'),
      ('already_sent',     'deja trimis'),
      ('duplicate_in_file','dublicat 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 }}">{{ cnt }} {{ label }}</span>
      {% endif %}
      {% endfor %}
    </div>

    <!-- Butoane filtrare stare -->
    <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:13px; 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:13px; padding:4px 12px;
                     background:transparent; border-color:var(--line); color:var(--ink);">
        {{ status_key }} ({{ cnt }})
      </button>
      {% endif %}
      {% endfor %}
    </div>

    <!-- Panou inline: operatii fara cod RAR, mapabile in flux (fara re-upload) -->
    {% if unmapped_ops %}
    <div class="card" style="border-color:var(--err); background:#241a1a; 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:13px;">
        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>
      {% 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 '' -%}
      <form class="maprow" hx-post="/_import/{{ import_id }}/mapare-operatie"
            hx-target="#import-section" hx-swap="outerHTML"
            style="align-items:flex-end;">
        <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
        <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" required 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 class="mapcol">
          {{ ui.autosend_toggle(checked=True) }}
        </div>
        <div class="mapcol">
          <button type="submit" style="min-height:44px;">Salveaza</button>
        </div>
      </form>
      {% endfor %}
    </div>
    {% endif %}

    <!-- Tabel preview. Randurile au FORM PROPRIU pentru editare (NU sunt in #confirm-form,
         altfel Enter intr-un camp ar declansa trimiterea ireversibila — D-3.3). Bifele
         needs_review se asociaza la #confirm-form prin atributul form=. -->
    <div class="tablewrap">
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>VIN</th>
            <th>Nr. Inm.</th>
            <th>Data</th>
            <th>KM final</th>
            <th>Operatie</th>
            <th>Stare</th>
            <th>Note</th>
            <th>Verificat?</th>
            <th>Actiuni</th>
          </tr>
        </thead>
        <tbody>
        {% for row in rows %}
          {% include '_preview_rand.html' %}
        {% endfor %}
        </tbody>
      </table>
    </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 (D12) — 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:12px; align-items:center; flex-wrap:wrap;">
            <div>
              <label for="n-confirmat"
                     style="font-size:13px; color:var(--muted); display:block; margin-bottom:2px;">
                Numar prezentari de confirmat
              </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:12px; margin-left:6px;">
(<span id="n-hint-ok">{{ summary.get('ok', 0) }}</span> ok
                {% if summary.get('needs_review', 0) %}
                + pana la {{ summary.get('needs_review', 0) }} verificate manual
                {% endif %})
              </span>
            </div>

            <div>
              <label for="confirmed-by"
                     style="font-size:13px; color:var(--muted); display:block; margin-bottom:2px;">
                Declarant (optional)
              </label>
              <input type="text" id="confirmed-by" name="confirmed_by"
                     placeholder="email sau nume"
                     style="max-width:200px;">
            </div>
          </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:14px;"
                  {% 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:12px; 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 (US-002). -->
    <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:13px;"
         hx-get="/_import/reset" hx-target="#import-section" hx-swap="outerHTML">Incarca alt fisier</a>
    </div>

  </div>
</div>

<script>
(function() {
  /* D-1.2: 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 (D-3.1/D-3.4). */
  function getOk() {
    var el = document.getElementById('preview-ok-count');
    return el ? parseInt(el.dataset.ok || '0', 10) : 0;
  }

  /* Actualizeaza N si bannerul cand se bifeaza needs_review SAU cand se editeaza un rand. */
  function updateN() {
    var checked = document.querySelectorAll('input[name="reviewed_rows"]:checked').length;
    var total = getOk() + checked;
    var inp = document.getElementById('n-confirmat');
    var disp = document.getElementById('n-display');
    var btn = document.getElementById('confirm-btn');
    /* Nu re-activa confirm cat un rand e in editare (mutual-exclusion D-3.2). */
    var editing = document.querySelector('tr[data-editing="1"]') !== null;
    if (inp) inp.value = total;
    if (disp) disp.textContent = total;
    var hintOk = document.getElementById('n-hint-ok');
    if (hintOk) hintOk.textContent = getOk();
    if (btn) btn.disabled = (total === 0) || editing;
  }

  /* Filtrare randuri dupa stare */
  function filterRows(status) {
    document.querySelectorAll('tbody tr[data-status]').forEach(function(tr) {
      tr.style.display = (status === 'all' || tr.dataset.status === status) ? '' : '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();
})();
</script>