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: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 }}">{{ 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: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);">
        {{ label }} ({{ 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: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: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">
          <button type="submit" style="min-height:44px;">Salveaza</button>
        </div>
      </form>
      {% endfor %}
    </div>
    {% endif %}

    <!-- Tabel preview in format identic cu tabelul Trimiteri (.tabel-trimiteri).
         Randurile au FORM PROPRIU pentru editare (NU sunt in #confirm-form,
         altfel Enter intr-un camp ar declansa trimiterea ireversibila). Bifele
         needs_review se asociaza la #confirm-form prin atributul form=. -->
    <div 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-verificat">Verificat?</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:14px;">
        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: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. -->
    <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() {
  /* 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 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). */
    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.
     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();
})();
</script>