{{template "base" .}} {{define "naslov"}}Detalji prodaje — NTech{{end}} {{define
"dodatni-css"}}
<style>
  .detalji-kartica:nth-child(1) { animation-delay: 0.04s; }
  .detalji-kartica:nth-child(2) { animation-delay: 0.12s; }
  .detalji-kartica:nth-child(3) { animation-delay: 0.2s; }
</style>
{{end}} {{define "sadrzaj"}}
<div style="display: flex; flex-direction: column; gap: 16px">
  {{if .Sacuvano}}
  <div class="poruka-uspeh poruka-animacija">Prodaja je uspešno sačuvana.</div>
  {{end}}

  <!-- nazad dugme -->
  <a href="/prodaja" class="nazad-link" hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true">
      <polyline points="15 18 9 12 15 6" />
    </svg>
    Nazad na prodaju
  </a>

  <!-- zaglavlje naloga -->
  <div class="kartica detalji-kartica animiraj">
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 16px;
        padding-bottom: 14px;
        border-bottom: 0.5px solid var(--ivica);
      ">
      <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
        <span style="font-size:20px;font-weight:600;color:var(--tekst-glavni);font-family:monospace;">
          {{.Nalog.BrojNaloga}}
        </span>
        {{if .Nalog.Stornirano}}
        <span style="display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500;background:rgba(220,38,38,0.12);color:#dc2626;">
          Stornirano
        </span>
        {{end}}
      </div>
    </div>
    <div
      style="
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 16px;
      ">
      <div>
        <div
          style="
            font-size: 12px;
            color: var(--tekst-sporedni);
            margin-bottom: 4px;
          ">
          Datum prodaje
        </div>
        <div style="font-size: 14px; color: var(--tekst-glavni)">
          {{.Nalog.Datum.Format "02.01.2006. u 15:04"}}
        </div>
      </div>
      <div>
        <div
          style="
            font-size: 12px;
            color: var(--tekst-sporedni);
            margin-bottom: 4px;
          ">
          Klijent
        </div>
        <div
          style="font-size: 14px; font-weight: 500; color: var(--tekst-glavni)">
          {{if .KlijentNaziv}}{{.KlijentNaziv}}{{else}}—{{end}}
        </div>
      </div>
      <div>
        <div style="font-size:12px;color:var(--tekst-sporedni);margin-bottom:4px;">Način plaćanja</div>
        <div style="font-size:14px;font-weight:500;color:var(--tekst-glavni);">
          {{if eq .Nalog.NacinPlacanja "gotovina"}}Gotovina
          {{else if eq .Nalog.NacinPlacanja "kartica"}}Platna kartica
          {{else if eq .Nalog.NacinPlacanja "prenos"}}Bankarski prenos
          {{else}}—{{end}}
        </div>
      </div>
      <div>
        <div style="font-size:12px;color:var(--tekst-sporedni);margin-bottom:4px;">Ukupno</div>
        <div style="font-size:20px;font-weight:600;color:var(--sb-akcent);">
          {{dinari .Nalog.Ukupno}} din
        </div>
      </div>
      {{if .Nalog.RazlogStorniranja}}
      <div style="grid-column:1/-1;">
        <div style="font-size:12px;color:var(--tekst-sporedni);margin-bottom:4px;">Razlog storniranja</div>
        <div style="font-size:13px;color:#dc2626;">{{.Nalog.RazlogStorniranja}}</div>
      </div>
      {{end}}
      {{if .Nalog.Napomena}}
      <div style="grid-column: 1/-1">
        <div
          style="
            font-size: 12px;
            color: var(--tekst-sporedni);
            margin-bottom: 4px;
          ">
          Napomena
        </div>
        <div style="font-size: 13px; color: var(--tekst-sporedni)">
          {{.Nalog.Napomena}}
        </div>
      </div>
      {{end}}
    </div>
  </div>

  <!-- stavke -->
  <div
    class="kartica detalji-kartica animiraj"
    style="padding: 0; overflow: hidden">
    <div style="padding: 16px 20px; border-bottom: 0.5px solid var(--ivica)">
      <span
        style="font-size: 15px; font-weight: 500; color: var(--tekst-glavni)">Stavke</span>
    </div>
    <div style="overflow-x: auto">
      <table class="tabela">
        <thead>
          <tr style="border-bottom: 0.5px solid var(--ivica)">
            <th
              style="
                padding: 10px 20px;
                text-align: left;
                font-size: 12px;
                font-weight: 500;
                color: var(--tekst-sporedni);
              ">
              Artikal
            </th>
            <th
              style="
                padding: 10px 20px;
                text-align: center;
                font-size: 12px;
                font-weight: 500;
                color: var(--tekst-sporedni);
                width: 90px;
              ">
              Količina
            </th>
            <th
              style="
                padding: 10px 20px;
                text-align: right;
                font-size: 12px;
                font-weight: 500;
                color: var(--tekst-sporedni);
                width: 120px;
              ">
              Cena/kom
            </th>
            <th
              style="
                padding: 10px 8px;
                text-align: center;
                font-size: 12px;
                font-weight: 500;
                color: var(--tekst-sporedni);
                width: 60px;
              ">
              Popust
            </th>
            {{if index .Moduli "pdv"}}<th style="padding:10px 20px;text-align:center;font-size:12px;font-weight:500;color:var(--tekst-sporedni);width:80px;">
              PDV %
            </th>{{end}}
            <th style="padding:10px 20px;text-align:right;font-size:12px;font-weight:500;color:var(--tekst-sporedni);width:120px;">
              Ukupno
            </th>
          </tr>
        </thead>
        <tbody>
          {{range .Stavke}}
          <tr style="border-bottom: 0.5px solid var(--ivica)">
            <td style="padding:10px 20px;font-size:14px;color:var(--tekst-glavni);">
              {{.ArtikalNaziv}}
              {{if .KategorijaNaziv}}<div style="font-size:11px;color:var(--tekst-sporedni);">{{.KategorijaNaziv}}</div>{{end}}
            </td>
            <td style="padding:10px 20px;text-align:center;font-size:14px;color:var(--tekst-glavni);">{{.Kolicina}}</td>
            <td style="padding:10px 20px;text-align:right;font-size:14px;color:var(--tekst-sporedni);">{{dinari .CenaPoKomadu}} din</td>
            <td style="padding:10px 8px;text-align:center;font-size:13px;color:var(--tekst-sporedni);">
              {{if gt .PopustProcenat 0.0}}{{printf "%.1f" .PopustProcenat}}%{{else}}—{{end}}
            </td>
            {{if index $.Moduli "pdv"}}<td style="padding:10px 20px;text-align:center;font-size:13px;color:var(--tekst-sporedni);">
              {{if .PdvStopa}}{{printf "%.0f" .PdvStopa}}%{{else}}—{{end}}
            </td>{{end}}
            <td style="padding:10px 20px;text-align:right;font-size:14px;font-weight:500;color:var(--tekst-glavni);">{{dinari .Ukupno}} din</td>
          </tr>
          {{end}}
        </tbody>
        <tfoot>
          <tr style="border-top: 0.5px solid var(--ivica)">
            <td colspan="4" style="padding:12px 20px;text-align:right;font-size:13px;font-weight:500;color:var(--tekst-sporedni);">Ukupno:</td>
            <td style="padding:12px 20px;text-align:right;font-size:16px;font-weight:600;color:var(--sb-akcent);">{{dinari .Nalog.Ukupno}} din</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <!-- storno i brisanje -->
  <div id="storno" class="kartica detalji-kartica animiraj" style="border-color:#dc262633;">
    <div class="kolona" style="gap:16px;">

      {{if and (index $.Dozvole "prodaja.storno") (not .Nalog.Stornirano) }}
      <div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;">
        <div style="flex:1;min-width:200px;">
          <div style="font-size:14px;font-weight:500;color:#f97316;margin-bottom:4px;">Storniranje naloga</div>
          <div class="pomocni-tekst">
            Storno vraća sve artikle na stanje u magacinu. Nalog ostaje u evidenciji sa oznakom storniran.
          </div>
        </div>
        <button type="button" class="btn-upozorenje" onclick="ntechPotvrdiPaOtvoriStorno(this, 'Stornirati nalog {{.Nalog.BrojNaloga}}?')">
          Storniraj nalog
        </button>
        <dialog class="premesti-modal" onclick="if(event.target===this)this.close()">
          <form method="dialog" class="premesti-zaglavlje">
            <h3>Storniranje naloga {{.Nalog.BrojNaloga}}</h3>
            <button type="submit" class="premesti-zatvori" aria-label="Zatvori">&times;</button>
          </form>
          <div style="display:flex;flex-direction:column;gap:10px;padding:16px;">
            <form method="POST" action="/prodaja/storno/{{.Nalog.ID}}" data-refresh="#sadrzaj" style="display:flex;flex-direction:column;gap:10px;">
              <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
              <div>
                <label class="polje-labela">Razlog storniranja (opciono)</label>
                <input type="text" name="razlog" placeholder="Razlog storniranja" style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;">
              </div>
              {{if .PotrebnaIdentKupca}}
              <div>
                <label class="polje-labela">PIB ili JMBG kupca</label>
                <input type="text" id="storno-pib" name="poreski_broj_kupca" placeholder="Obavezno za fiskalni refund" required
                  style="width:100%;padding:8px 12px;border:1px solid #dc2626;border-radius:8px;font-size:13px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;">
              </div>
              {{end}}
              <button type="submit" id="btn-storno-potvrdi" class="btn-upozorenje" style="width:100%;{{if .PotrebnaIdentKupca}}opacity:0.4;cursor:not-allowed;{{end}}" {{if .PotrebnaIdentKupca}}disabled{{end}}>
                Potvrdi storno
              </button>
            </form>
          </div>
        </dialog>
      </div>
      <script>
      (function(){
        // isti obrazac kao u Servisu (servis_detalji.html) — v. komentar tamo zašto
        // se NE koristi ntechOtvoriModal (auto-submit na zatvaranje dialoga).
        window.ntechPotvrdiPaOtvoriStorno = function (btn, poruka) {
          window._ntechPotvrdi(poruka).then(function (ok) {
            if (!ok) return;
            var d = btn.nextElementSibling;
            if (d && d.tagName === 'DIALOG') d.showModal();
          });
        };
        var pib = document.getElementById('storno-pib');
        var btnPotvrdi = document.getElementById('btn-storno-potvrdi');
        if (pib && btnPotvrdi) {
          pib.addEventListener('input', function () {
            var ok = pib.value.trim() !== '';
            btnPotvrdi.disabled = !ok;
            btnPotvrdi.style.opacity = ok ? '1' : '0.4';
            btnPotvrdi.style.cursor = ok ? 'pointer' : 'not-allowed';
          });
        }
      })();
      </script>
      {{end}}

      {{if .FiskalniRacun}}
      <div class="fiskalni-racun" style="padding-top:14px;border-top:0.5px solid var(--ivica);">
        <div style="margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;">
          <h3 style="margin:0;font-size:16px;">Fiskalni račun</h3>
          <a href="/prodaja/{{.Nalog.ID}}/fiskalni-racun" target="_blank" class="btn-sekundarno" style="font-size:12px;padding:4px 12px;">Štampaj kopiju</a>
        </div>
        <div style="display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;">
          <div style="flex:1;min-width:200px;">
            <p style="margin:0 0 4px 0;"><strong>PFR broj:</strong> {{.FiskalniRacun.PfrBroj}}</p>
            <p style="margin:0 0 4px 0;"><strong>Vreme:</strong> {{.FiskalniRacun.PfrVreme}}</p>
            <p style="margin:0 0 4px 0;color:var(--tekst-sekundarno);"><strong>Brojač:</strong> {{.FiskalniRacun.Brojac}}</p>
            {{if .FiskalniRacun.UrlVerifikacija}}
            <p style="margin:4px 0 0 0;font-size:13px;">
              <a href="{{.FiskalniRacun.UrlVerifikacija}}" target="_blank" rel="noopener noreferrer" style="color: var(--sb-akcent); font-weight: 500">Otvori QR verifikaciju (test) →</a>
            </p>
            {{end}}
          </div>
          {{if .FiskalniRacun.QRKod}}
          <div>
            <img src="data:image/png;base64,{{.FiskalniRacun.QRKod}}" alt="QR kod za proveru fiskalnog računa" style="width:25mm;height:25mm;">
          </div>
          {{end}}
        </div>
      </div>
      <script>
      (function(){
        // ako je kroz modal naplate u „Nova prodaja" zatražen prikaz — otvoren je prazan
        // imenovani tab pre redirekta ovde; sada ga popunjavamo (ne blokira popup-blocker)
        if (new URLSearchParams(location.search).get('racun') === '1') {
          window.open('/prodaja/{{.Nalog.ID}}/fiskalni-racun', 'ntech-fiskalni-tab')
        }
      })();
      </script>
      {{else}}
      <script>
      (function(){
        // fiskalizacija je pokušana (racun=1 tražen pri naplati) ali računa nema —
        // PFR nedostupan ili slično (v. FiskalGreska ispod). Prazan tab je već otvoren
        // pre redirekta — zatvori ga umesto da ostane trajno na about:blank.
        if (new URLSearchParams(location.search).get('racun') === '1') {
          var t = window.open('', 'ntech-fiskalni-tab');
          if (t) t.close();
        }
      })();
      </script>
      {{end}}

      {{if .FiskalGreska}}
      <div class="fiskalni-racun" style="padding:14px;border:1.5px solid #f59e0b;border-radius:8px;background:color-mix(in srgb,#fef3c7 60%,var(--pozadina));">
        <div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap;">
          <div style="font-size:46px;line-height:1;color:#fdba74;flex-shrink:0;">⚠</div>
          <div style="flex:1;">
            <div style="font-size:14px;font-weight:600;color:#fdba74;margin-bottom:4px;">Fiskalni račun nije izdat</div>
            <div style="font-size:13px;color:#fdba74;">Veza sa ESIR/PFR serverom nije bila dostupna pri kreiranju prodaje.</div>
          </div>
          {{if index $.Dozvole "prodaja.dodaj"}}
          <form method="POST" action="/prodaja/{{.Nalog.ID}}/fiskalizuj">
            <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
            <button type="submit" class="btn-primarno" style="background:#d97706;border-color:#d97706;white-space:nowrap;">Pokušaj ponovo</button>
          </form>
          {{end}}
        </div>
      </div>
      {{end}}

      {{if .StornoBezRefunda}}
      <div class="fiskalni-racun" style="padding:14px;border:1.5px solid #dc2626;border-radius:8px;background:color-mix(in srgb,#fee2e2 60%,var(--pozadina));">
        <div style="display:flex;align-items:center;gap:14px;">
          <div style="font-size:46px;line-height:1;color:#fca5a5;flex-shrink:0;">⚠</div>
          <div style="flex:1;">
            <div style="font-size:14px;font-weight:600;color:#fca5a5;margin-bottom:4px;">Storno bez fiskalnog refunda</div>
            <div style="font-size:13px;color:#fca5a5;margin-bottom:10px;">Storno je upisan u NTech, ali fiskalni refund ka PFR uređaju nije uspeo (originalni fiskalni račun i dalje nije označen kao storniran).</div>
        {{if index $.Dozvole "prodaja.storno"}}
        <form method="POST" action="/prodaja/{{.Nalog.ID}}/refund-fiskalizuj" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
          <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
          {{if .PotrebnaIdentKupcaRetry}}
          <input type="text" name="poreski_broj_kupca" placeholder="PIB ili JMBG kupca (obavezno za refundaciju)" required style="padding:7px 10px;border:1px solid #dc2626;border-radius:6px;font-size:13px;">
          {{end}}
          <button type="submit" style="padding:8px 16px;background:#dc2626;border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;">Pokušaj refund ponovo</button>
        </form>
        {{end}}
          </div>
        </div>
      </div>
      {{end}}

    </div>
  </div>
</div>
{{end}}