{{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>
      <a
        href="/prodaja/{{.Nalog.ID}}/stampa"
        target="_blank"
        class="btn-sekundarno"
        style="gap: 6px">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true">
          <polyline points="6 9 6 2 18 2 18 9" />
          <path
            d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
          <rect x="6" y="14" width="12" height="8" />
        </svg>
        Štampaj
      </a>
    </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 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>
        <form method="POST" action="/prodaja/storno/{{.Nalog.ID}}" style="display:flex;flex-direction:column;gap:8px;align-items:flex-end;">
          <input type="hidden" name="csrf_token" value="{{.CsrfToken}}">
          <input type="text" name="razlog" placeholder="Razlog storniranja (opciono)" style="width:240px;">
          <button type="submit" class="btn-upozorenje"
            data-potvrda="Stornirati nalog {{.Nalog.BrojNaloga}}?">
            Storniraj nalog
          </button>
        </form>
      </div>
      {{end}}

      {{if .FiskalniRacun}}
      <div class="fiskalni-racun" style="padding-top:14px;border-top:0.5px solid var(--ivica);">
        <h3 style="margin:0 0 8px 0;font-size:16px;">Fiskalni račun</h3>
        <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" class="spoljni-link">Provera na PURS-u →</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>
      {{end}}

      {{if index $.Dozvole "prodaja.obrisi"}}
      <div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;padding-top:14px;border-top:0.5px solid var(--ivica);">
        <div style="flex:1;min-width:200px;">
          <div style="font-size:14px;font-weight:500;color:#f97316;margin-bottom:4px;">Uklanjanje naloga</div>
          <div class="pomocni-tekst">
            Nalog će biti storniran (vraća artikle na stanje) i označen kao uklonjen. Ne briše se fizički — ostaje u evidenciji.
          </div>
        </div>
        <form method="POST" action="/prodaja/obrisi/{{.Nalog.ID}}">
          <input type="hidden" name="csrf_token" value="{{.CsrfToken}}">
          <button type="submit" class="btn-upozorenje"
            data-potvrda="Stornirati nalog {{.Nalog.BrojNaloga}}? Količine artikala biće vraćene na stanje.">
            Ukloni nalog
          </button>
        </form>
      </div>
      {{end}}

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