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

<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 -->
    <div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;">
      {% 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'),
      ] %}
      {% 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">
          <label class="chk"><input type="checkbox" name="auto_send" value="true" checked> auto-send</label>
        </div>
        <div class="mapcol">
          <button type="submit" style="min-height:44px;">Salveaza</button>
        </div>
      </form>
      {% endfor %}
    </div>
    {% endif %}

    <!-- Tabel preview + bara confirmare (un singur form) -->
    <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="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>
            </tr>
          </thead>
          <tbody>
          {% for row in rows %}
          {%- set res = row.resolved -%}
          {%- set status = row.resolved_status -%}
          {%- set prestatii = res.get('prestatii') or [] -%}
          {%- set op = (prestatii[0].get('cod_prestatie') or prestatii[0].get('cod_op_service', '')) if prestatii else '' -%}
          <tr data-status="{{ status }}"
              style="{% if status == 'needs_review' %}background:rgba(230,179,74,.04);{% elif status in ('already_sent', 'duplicate_in_file') %}opacity:.65;{% endif %}">
            <td class="muted">{{ row.row_index + 1 }}</td>
            <td>{{ res.get('vin') or '<span class="muted">—</span>' | safe }}</td>
            <td>{{ res.get('nr_inmatriculare') or '' }}</td>
            <td>{{ res.get('data_prestatie') or '' }}</td>
            <td>{{ res.get('odometru_final') or '' }}</td>
            <td>{{ op or '<span class="muted">—</span>' | safe }}</td>
            <td>
              <span class="pill s-{{ status }}">{{ status }}</span>
            </td>
            <td class="muted" style="font-size:12px; white-space:normal; max-width:220px;">
              {% if status == 'already_sent' and row.get('already_sent_info') %}
                {% set ai = row.already_sent_info %}
                deja trimis {{ (ai.get('created_at') or '')[:10] }}
                {% if ai.get('id_prezentare') %}(#{{ ai.id_prezentare }}){% endif %}
              {% elif status == 'duplicate_in_file' and row.get('duplicate_with') %}
                dubla cu randul
                {% for idx in row.duplicate_with %}{{ idx + 1 }}{% if not loop.last %}, {% endif %}{% endfor %}
              {% elif row.flags %}
                {{ row.flags[0] }}
              {% elif row.errors %}
                {# US-008: arata MOTIVUL (mesajul de validare), nu numele campului #}
                {%- for e in row.errors -%}
                  {%- if e is mapping -%}
                    {{ e.get('message') or e.get('msg') or (e.values() | list | first) }}
                  {%- else -%}
                    {{ e }}
                  {%- endif -%}
                  {%- if not loop.last %}; {% endif -%}
                {%- endfor -%}
              {% endif %}
            </td>
            <td style="text-align:center;">
              {% if status == 'needs_review' %}
              <label class="chk" style="min-height:44px; justify-content:center; cursor:pointer;"
                     title="Bifat inseamna ca ai verificat valorile si le incluzi in trimitere">
                <input type="checkbox" name="reviewed_rows" value="{{ row.row_index }}"
                       onchange="updateN()"
                       aria-label="Verificat — randul {{ row.row_index + 1 }} (VIN: {{ res.get('vin', '') }})">
                verif.
              </label>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>

      <!-- Bara confirmare (sticky jos) -->
      <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;">
                ({{ summary.get('ok', 0) }} 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>

    <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() {
  var nOk = {{ summary.get('ok', 0) | int }};

  /* Actualizeaza N si bannerul cand se bifeaza needs_review */
  function updateN() {
    var checked = document.querySelectorAll('input[name="reviewed_rows"]:checked').length;
    var total = nOk + checked;
    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;
    if (btn) btn.disabled = (total === 0);
  }

  /* 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 inline */
  window.updateN = updateN;
  window.filterRows = filterRows;

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

  /* Focus pe campul N la deschidere (a11y — D12) */
  var ni = document.getElementById('n-confirmat');
  if (ni) { ni.focus(); ni.select(); }
})();
</script>