{# Ziva mapa (zadatak F2.8; tabla 4). Graf cita iz baze preko
   /api/ziva-mapa; Cytoscape.js za prikaz; velicina cvora = obim
   obrade; klik na cvor otvara panel; filteri po ishodu semafora. #}
{% extends "osnova.html" %}
{% block putanja %}Živa mapa{% endblock %}
{% block sadrzaj %}
<div style="flex:1;display:flex;gap:16px;padding:16px 22px;min-height:0">

  <div class="kartica" style="flex:1;position:relative;overflow:hidden;min-height:420px">
    <div style="position:absolute;top:12px;left:12px;z-index:5;display:flex;background:var(--neutralno);border-radius:10px;padding:3px;gap:2px">
      <button class="filter-dugme aktivan" data-filter="sve">sve</button>
      <button class="filter-dugme" data-filter="automatski_odobreno">zeleno</button>
      <button class="filter-dugme" data-filter="potrebna_provera">žuto</button>
      <button class="filter-dugme" data-filter="zabranjeno_za_slanje">crveno</button>
    </div>
    <div id="graf" style="position:absolute;inset:0"></div>
    <div style="position:absolute;bottom:12px;left:12px;z-index:5;display:flex;gap:12px;font-size:11px;color:var(--mastilo2);background:var(--povrsina);border:1px solid var(--ivica);border-radius:9px;padding:6px 10px">
      <span><span style="display:inline-block;width:9px;height:9px;border-radius:50%;background:#C15F3C"></span> predmet</span>
      <span><span style="display:inline-block;width:9px;height:9px;border-radius:50%;background:#2C7A4B"></span> odobreno</span>
      <span><span style="display:inline-block;width:9px;height:9px;border-radius:50%;background:#97690F"></span> provera</span>
      <span><span style="display:inline-block;width:9px;height:9px;border-radius:50%;background:#A8342A"></span> zabranjeno</span>
    </div>
  </div>

  <div class="kartica" id="panel" style="width:300px;padding:16px;display:none;flex-direction:column;gap:8px">
    <div class="dsp" id="panel-naziv" style="font-size:15px;font-weight:600"></div>
    <div id="panel-detalj" style="font-size:12.5px;color:var(--mastilo2);line-height:1.6"></div>
    <div style="font-size:11px;color:var(--prigusen);margin-top:auto">Klik na prazno zatvara panel.</div>
  </div>
</div>

<style>
  .filter-dugme{font-size:12px;font-weight:600;color:var(--prigusen);padding:6px 13px;border-radius:8px;border:0;background:transparent;cursor:pointer;font-family:inherit}
  .filter-dugme.aktivan{font-weight:700;color:var(--mastilo);background:var(--povrsina);border:1px solid var(--ivica-jaka)}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.30.2/cytoscape.min.js"></script>
<script>
(async function () {
  const podaci = await (await fetch('/api/ziva-mapa')).json();
  const tamnaTema = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const boja = c => ({automatski_odobreno:'#2C7A4B', potrebna_provera:'#97690F',
                      zabranjeno_za_slanje:'#A8342A'}[c] || '#8A877E');
  const cy = cytoscape({
    container: document.getElementById('graf'),
    elements: [...podaci.cvorovi, ...podaci.ivice],
    layout: {name: 'cose', animate: false, padding: 60,
             idealEdgeLength: 170, nodeRepulsion: 900000},
    style: [
      {selector: 'node', style: {
        label: 'data(naziv)', 'font-size': 10,
        'text-valign': 'bottom', 'text-margin-y': 6,
        width: 'data(velicina)', height: 'data(velicina)',
        'background-color': el => el.data('vrsta') === 'predmet'
          ? '#C15F3C' : boja(el.data('ishod')),
        color: tamnaTema ? '#C4C0B4' : '#4A4842',
        'text-wrap': 'wrap', 'text-max-width': 130,
      }},
      {selector: 'edge', style: {width: 1.5, 'line-color': '#D2CEC3',
        'curve-style': 'bezier'}},
      {selector: '.sakriven', style: {display: 'none'}},
    ],
  });
  const panel = document.getElementById('panel');
  cy.on('tap', 'node', evt => {
    panel.style.display = 'flex';
    document.getElementById('panel-naziv').textContent = evt.target.data('naziv');
    document.getElementById('panel-detalj').textContent = evt.target.data('detalj');
  });
  cy.on('tap', evt => { if (evt.target === cy) panel.style.display = 'none'; });
  document.querySelectorAll('.filter-dugme').forEach(dugme => {
    dugme.addEventListener('click', () => {
      document.querySelectorAll('.filter-dugme').forEach(d => d.classList.remove('aktivan'));
      dugme.classList.add('aktivan');
      const filter = dugme.dataset.filter;
      cy.nodes().forEach(cvor => {
        const pogodak = filter === 'sve' || cvor.data('vrsta') === 'predmet'
          || cvor.data('ishod') === filter;
        cvor.toggleClass('sakriven', !pogodak);
      });
    });
  });
})();
</script>
{% endblock %}