{% from "_eroare.html" import card_erori %}
{% import '_macros.html' as ui %}
<div class="card" id="detaliu-card-{{ id }}" style="border-color:var(--accent);">
  <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px;">
    <h2 style="font-size:15px; margin:0;">Detaliu trimitere #{{ id }}</h2>
    <span class="pill {{ stare_css }}">{{ stare_text }}</span>
    <button type="button" style="margin-left:auto; background:var(--card); color:var(--muted); border-color:var(--line);"
            onclick="document.getElementById('trimitere-detaliu').innerHTML='';">
      Inchide
    </button>
  </div>

  {% if stare_subtext %}
  <p class="muted" style="margin:0 0 12px; font-size:13px;">{{ stare_subtext }}</p>
  {% endif %}

  <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px 24px;">
    <div><div class="muted" style="font-size:12px;">Numar inmatriculare</div><div>{{ prez.vehicul_nr }}</div></div>
    <div><div class="muted" style="font-size:12px;">VIN (serie sasiu)</div><div style="word-break:break-all;">{{ prez.vin }}</div></div>
    <div><div class="muted" style="font-size:12px;">Operatie</div><div>{{ prez.operatie }}</div></div>
    <div><div class="muted" style="font-size:12px;">Cod RAR</div><div>{{ prez.cod }}</div></div>
    <div><div class="muted" style="font-size:12px;">Data prestatie</div><div>{{ prez.data_prestatie }}</div></div>
    <div><div class="muted" style="font-size:12px;">Odometru final</div><div>{{ prez.odometru }}</div></div>
    <div><div class="muted" style="font-size:12px;">Nr. prezentare RAR</div><div>{{ id_prezentare or '—' }}</div></div>
    <div><div class="muted" style="font-size:12px;">Cod HTTP RAR</div><div>{{ rar_status_code or '—' }}</div></div>
    <div><div class="muted" style="font-size:12px;">Reincercari</div><div>{{ retry_count }}</div></div>
    <div><div class="muted" style="font-size:12px;">Creat</div><div>{{ created_at }}</div></div>
    <div><div class="muted" style="font-size:12px;">Actualizat</div><div>{{ updated_at }}</div></div>
    <div><div class="muted" style="font-size:12px;">Urmatoarea incercare</div><div>{{ next_attempt_at }}</div></div>
  </div>

  {% if erori_3n %}
  <div style="margin-top:12px; padding-top:10px; border-top:1px solid var(--line);">
    {{ card_erori(erori_3n) }}
  </div>
  {% elif motiv %}
  <div style="margin-top:12px; padding-top:10px; border-top:1px solid var(--line);">
    <div class="muted" style="font-size:12px;">Motiv</div>
    <div>{{ motiv }}</div>
  </div>
  {% endif %}

  {% if rar_error %}
  <details style="margin-top:10px;">
    <summary class="muted" style="font-size:12px; cursor:pointer;">Mesaj tehnic RAR (integral)</summary>
    <pre style="white-space:pre-wrap; word-break:break-all; font-size:12px; margin:6px 0 0; color:var(--muted);">{{ rar_error }}</pre>
  </details>
  {% endif %}

  {# === Lifecycle (US-011): sterge / re-pune in coada — doar randuri blocate === #}
  {% if gestionabil %}
  <div style="margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap;">
    <form hx-post="/trimitere/{{ id }}/repune"
          hx-target="#trimitere-detaliu" hx-swap="innerHTML" style="margin:0;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <button type="submit">Re-pune in coada</button>
    </form>
    <form hx-post="/trimitere/{{ id }}/sterge"
          hx-target="#trimitere-detaliu" hx-swap="innerHTML"
          hx-confirm="Stergi definitiv aceasta trimitere din coada?" style="margin:0;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <button type="submit" style="background:var(--card); color:var(--err); border-color:var(--err);">
        Sterge
      </button>
    </form>
  </div>
  {% endif %}

  {# === Mapare inline (PRD 5.7): alege cod RAR pentru operatiile nemapate ale acestui rand === #}
  {% if nemapate_inline %}
  <div style="margin-top:14px; padding-top:12px; border-top:1px solid var(--line);">
    <h3 style="font-size:14px; margin:0 0 4px;">Mapeaza codul operatiei</h3>
    <p class="muted" style="margin:0 0 10px; font-size:13px;">
      Alege codul RAR pentru fiecare operatie. La salvare, randul se re-rezolva pe loc
      (si celelalte randuri cu aceeasi operatie).
    </p>
    {% for op in nemapate_inline %}
    {% set top = op.suggestions[0] if op.suggestions else None %}
    {% set preselect = top.cod_prestatie if (top and top.score >= 60) else '' %}
    <form hx-post="/trimitere/{{ id }}/mapeaza" hx-target="#trimitere-detaliu" hx-swap="innerHTML"
          style="margin:0 0 12px; padding:10px; border:1px solid var(--line); border-radius:8px;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="cod_op_service" value="{{ op.cod_op_service }}">
      <div style="margin-bottom:6px;">
        <strong>{{ op.cod_op_service }}</strong>
        {% if op.denumire and op.denumire != op.cod_op_service %}
        <span class="muted">— {{ op.denumire }}</span>
        {% endif %}
      </div>
      {% if op.suggestions %}
      <div class="muted" style="font-size:12px; margin-bottom:6px;">
        Sugestii:
        {% for s in op.suggestions[:3] %}
          <span class="sugg">{{ s.cod_prestatie }} ({{ s.score|round|int }}%)</span>{% if not loop.last %}, {% endif %}
        {% endfor %}
      </div>
      {% endif %}
      <div style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
        <select name="cod_prestatie" required aria-label="Cod RAR pentru {{ op.cod_op_service }}"
                style="flex:1; min-width:220px; max-width:380px;">
          <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>
        {{ ui.autosend_toggle(checked=True) }}
        <button type="submit">Salveaza maparea</button>
      </div>
    </form>
    {% endfor %}
  </div>
  {% endif %}

  {# === Corectie inline (US-010): doar randuri ne-trimise blocate === #}
  {% if editabil %}
  {% set err_map = {} %}
  {% for e in corectie_errors %}{% if e.field %}{% set _ = err_map.update({e.field: e.message}) %}{% endif %}{% endfor %}
  <div style="margin-top:14px; padding-top:12px; border-top:1px solid var(--line);">
    <h3 style="font-size:14px; margin:0 0 8px;">Corecteaza si re-trimite</h3>

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

    <form hx-post="/trimitere/{{ id }}/corecteaza"
          hx-target="#trimitere-detaliu" hx-swap="innerHTML">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px 16px;">

        {% macro camp(nume, eticheta, valoare, tip='text') %}
        <div>
          <label for="c-{{ nume }}" class="muted" style="font-size:12px; display:block;">{{ eticheta }}</label>
          <input id="c-{{ nume }}" type="{{ tip }}" name="{{ nume }}" value="{{ valoare }}"
                 style="width:100%; {% if err_map.get(nume) %}border-color:var(--err);{% endif %}"
                 {% if err_map.get(nume) %}aria-invalid="true"{% endif %}>
          {% if err_map.get(nume) %}
          <div class="s-error" style="font-size:12px; margin-top:2px;">{{ err_map.get(nume) }}</div>
          {% endif %}
        </div>
        {% endmacro %}

        {{ camp('nr_inmatriculare', 'Numar inmatriculare', form_nr) }}
        {{ camp('vin', 'VIN (serie sasiu)', form_vin) }}
        {{ camp('data_prestatie', 'Data prestatie (YYYY-MM-DD)', form_data) }}
        {{ camp('odometru_final', 'Odometru final', form_odo_final) }}
        {{ camp('odometru_initial', 'Odometru initial (daca e cerut)', form_odo_initial) }}
      </div>
      <div style="margin-top:10px;">
        <button type="submit">Salveaza si re-pune in coada</button>
      </div>
    </form>
  </div>
  {% endif %}
</div>

<script>
(function() {
  /* Vizibilitate (design review): scroll la panou + evidentiaza randul selectat. */
  var panou = document.getElementById('trimitere-detaliu');
  if (panou) panou.scrollIntoView({behavior: 'smooth', block: 'nearest'});
  document.querySelectorAll('tr[id^="trimitere-row-"]').forEach(function(tr) {
    tr.style.outline = '';
  });
  var rand = document.getElementById('trimitere-row-{{ id }}');
  if (rand) rand.style.outline = '2px solid var(--accent)';
})();
</script>