{# Mapa procesa (zadaci F3.2/F3.3; tabla 3, n8n kao inspiracija za
   preglednost — n8n se NE ugradjuje). Blokovi se prevlace, klik otvara
   panel, "Tacno je" potvrdjuje, "Nije tako — ispravi" menja polja i
   belezi ispravku kao zapis. Izvoz: JSON Canvas (otvara se u Obsidianu). #}
{% extends "osnova.html" %}
{% block putanja %}Studio procesa / <b style="color:var(--mastilo);font-weight:600">{{ mapa.naziv }}</b>{% endblock %}
{% block vrh_akcije %}
  <a class="dugme drugo" href="/mapa-procesa/izvoz">Izvezi JSON Canvas</a>
  <button class="dugme" onclick="dodajBlok()">+ Dodaj blok</button>
{% endblock %}
{% block sadrzaj %}
<div class="studio-raspored" style="flex:1;padding:16px 22px;min-height:0">

  <div class="kartica" style="flex:1;position:relative;overflow:auto">
    <div id="platno" style="position:relative;width:1800px;height:700px">
      <svg id="ivice" style="position:absolute;inset:0;width:100%;height:100%;pointer-events:none"></svg>
      {% for blok in mapa.blokovi %}
      <div class="blok" data-id="{{ blok.id }}" data-naziv="{{ blok.naziv }}"
           data-izvodi="{{ blok.izvodi }}" data-ulaz="{{ blok.ulaz }}"
           data-izlaz="{{ blok.izlaz }}" data-rok="{{ blok.rok }}"
           data-pokrece="{{ blok.pokrece_rok }}" data-status="{{ blok.status }}"
           style="left:{{ blok.x }}px;top:{{ blok.y }}px">
        <div style="display:flex;align-items:center;gap:8px">
          <span style="font-size:12.5px;font-weight:700">{{ blok.naziv }}</span>
          {% if blok.status == 'potvrdjeno' %}<span class="pill ok" style="margin-left:auto">✓</span>
          {% elif blok.status == 'izmenjeno' %}<span class="pill warn" style="margin-left:auto">izmenjen</span>
          {% else %}<span class="pill neu" style="margin-left:auto">predlog</span>{% endif %}
        </div>
        <div style="font-size:11px;color:var(--prigusen);margin-top:4px">{{ blok.izvodi }}{% if blok.rok %} · rok {{ blok.rok }}{% endif %}</div>
      </div>
      {% endfor %}
    </div>
  </div>

  <div style="width:320px;display:flex;flex-direction:column;gap:12px">
    <div class="kartica" style="padding:14px 16px">
      <div style="font-size:11px;color:var(--prigusen);font-weight:600">PRIHVAĆENO BEZ IZMENE</div>
      <div class="dsp" style="font-size:24px;font-weight:700">{{ metrika.procenat_bez_izmene }}%</div>
      <div style="font-size:11.5px;color:var(--prigusen)">{{ metrika.potvrdjeno }} potvrđeno · {{ metrika.izmenjeno }} izmenjeno · {{ metrika.ukupno }} ukupno</div>
    </div>

    <form class="kartica" id="panel" method="post" action="/api/mapa/blok"
          style="padding:16px;display:none;flex-direction:column;gap:8px">
      <input type="hidden" name="id" id="p-id">
      <label class="p-labela">Naziv<input name="naziv" id="p-naziv" class="p-unos"></label>
      <label class="p-labela">Izvodi (uloga)<input name="izvodi" id="p-izvodi" class="p-unos"></label>
      <label class="p-labela">Ulaz<input name="ulaz" id="p-ulaz" class="p-unos"></label>
      <label class="p-labela">Izlaz<input name="izlaz" id="p-izlaz" class="p-unos"></label>
      <label class="p-labela">Rok bloka<input name="rok" id="p-rok" class="p-unos"></label>
      <label class="p-labela">Pokreće rok<input name="pokrece_rok" id="p-pokrece" class="p-unos"></label>
      <div style="display:flex;gap:8px;margin-top:6px">
        <button class="dugme" type="submit" name="radnja" value="tacno">Tačno je</button>
        <button class="dugme drugo" type="submit" name="radnja" value="ispravi">Nije tako — ispravi</button>
      </div>
    </form>

    <div class="kartica" style="padding:14px 16px;flex:1;overflow:auto">
      <div style="font-size:12px;font-weight:700;margin-bottom:8px">Ispravke — imovina baze ({{ ispravke | length }})</div>
      {% for zapis in ispravke[:8] %}
      <div style="font-size:11px;color:var(--mastilo2);border-bottom:1px solid var(--ivica);padding:6px 0">
        <span class="mono" style="color:var(--prigusen)">{{ zapis.blok_id }}</span> {{ zapis.receno[:80] }}</div>
      {% else %}
      <div style="font-size:11.5px;color:var(--prigusen)">Još nema ispravki — svaka se čuva kao zaseban zapis.</div>
      {% endfor %}
    </div>
  </div>
</div>

<style>
  .blok{position:absolute;width:240px;background:var(--povrsina);border:1px solid var(--ivica-jaka);border-radius:11px;padding:11px 13px;cursor:grab;user-select:none;box-shadow:0 2px 8px rgba(27,26,22,.06)}
  .blok.izabran{border:1.5px solid var(--terakota)}
  .p-labela{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--prigusen);font-weight:600}
  .p-unos{background:var(--panel);border:1px solid var(--ivica);border-radius:8px;height:30px;padding:0 9px;font-size:12.5px;font-family:inherit;color:var(--mastilo)}
</style>
<script>
const prelazi = {{ prelazi_json }};
function nacrtajIvice() {
  const svg = document.getElementById('ivice');
  svg.innerHTML = '';
  for (const prelaz of prelazi) {
    const od = document.querySelector(`.blok[data-id="${prelaz.od}"]`);
    const ka = document.querySelector(`.blok[data-id="${prelaz.ka}"]`);
    if (!od || !ka) continue;
    const x1 = od.offsetLeft + od.offsetWidth, y1 = od.offsetTop + od.offsetHeight / 2;
    const x2 = ka.offsetLeft, y2 = ka.offsetTop + ka.offsetHeight / 2;
    const putanja = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    putanja.setAttribute('d', `M ${x1} ${y1} C ${x1 + 60} ${y1}, ${x2 - 60} ${y2}, ${x2} ${y2}`);
    putanja.setAttribute('stroke', '#D2CEC3'); putanja.setAttribute('stroke-width', '1.8');
    putanja.setAttribute('fill', 'none');
    svg.appendChild(putanja);
    if (prelaz.uslov) {
      const t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      t.setAttribute('x', (x1 + x2) / 2); t.setAttribute('y', (y1 + y2) / 2 - 6);
      t.setAttribute('font-size', '10'); t.setAttribute('fill', '#8A877E');
      t.setAttribute('text-anchor', 'middle'); t.textContent = prelaz.uslov;
      svg.appendChild(t);
    }
  }
}
let vucen = null, pomakX = 0, pomakY = 0, pomeren = false;
document.querySelectorAll('.blok').forEach(blok => {
  blok.addEventListener('mousedown', e => {
    vucen = blok; pomeren = false;
    pomakX = e.clientX - blok.offsetLeft; pomakY = e.clientY - blok.offsetTop;
  });
  blok.addEventListener('click', () => { if (!pomeren) otvoriPanel(blok); });
});
document.addEventListener('mousemove', e => {
  if (!vucen) return;
  pomeren = true;
  vucen.style.left = Math.max(0, e.clientX - pomakX) + 'px';
  vucen.style.top = Math.max(0, e.clientY - pomakY) + 'px';
  nacrtajIvice();
});
document.addEventListener('mouseup', () => {
  if (vucen && pomeren) {
    fetch('/api/mapa/blok/pozicija', {method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({id: vucen.dataset.id,
        x: vucen.offsetLeft, y: vucen.offsetTop})});
  }
  vucen = null;
});
function otvoriPanel(blok) {
  document.querySelectorAll('.blok').forEach(b => b.classList.remove('izabran'));
  blok.classList.add('izabran');
  document.getElementById('panel').style.display = 'flex';
  document.getElementById('p-id').value = blok.dataset.id;
  document.getElementById('p-naziv').value = blok.dataset.naziv;
  document.getElementById('p-izvodi').value = blok.dataset.izvodi;
  document.getElementById('p-ulaz').value = blok.dataset.ulaz;
  document.getElementById('p-izlaz').value = blok.dataset.izlaz;
  document.getElementById('p-rok').value = blok.dataset.rok;
  document.getElementById('p-pokrece').value = blok.dataset.pokrece;
}
function dodajBlok() {
  const naziv = prompt('Naziv novog bloka:');
  if (!naziv) return;
  const forma = new FormData();
  forma.append('id', ''); forma.append('naziv', naziv);
  forma.append('izvodi', 'advokat'); forma.append('radnja', 'ispravi');
  fetch('/api/mapa/blok', {method: 'POST', body: forma})
    .then(() => location.reload());
}
nacrtajIvice();
</script>
{% endblock %}