prodaja: popust, kategorija, cene po režimu, pretraga, zabrana brisanja

Migracija 092: popust_procenat na stavke_prodaje.
Model: PopustProcenat u StavkaProdaje, KategorijaNaziv u StavkaProdajeSaArtiklom.
Repo: pretraga prodaje proširena na klijenta i napomenu. DohvatiStavke dodaje popust i kategoriju. Kreiraj primenjuje popust na ukupno.
Handler: artikalUJSONSaCenom proširen sa sifra, barkod, cena_sa_pdv, kategorija_naziv. parseFormuProdaje parsira popust. ObrisiProdaju sada koristi storno (zabrana fizičkog brisanja).
JS: prodajaForma ažurirana — pretraga artikala po nazivu/šifri/barkodu, popust polje, kategorija, kalkulacija sa popustom.
Forma: pretraga artikala, popust kolona, kategorija, PDV režim (cena/cena_sa_pdv). Responsive desktop+mobilne kartice.
Detalji: kategorija ispod naziva, popust kolona, 'Ukloni nalog' (storno) umesto 'Obriši'.

internal/db/sqlite/prodaja.go

@@ -51,8 +51,8 @@ func (r *ProdajaRepo) Lista(ctx context.Context, pretraga string) ([]model.Proda
 	args := []any{}
 
 	if pretraga != "" {
-		upit += " AND pn.broj_naloga LIKE ?"
+		upit += " AND (pn.broj_naloga LIKE ? OR kp.naziv LIKE ? OR pn.napomena LIKE ?)"
-		args = append(args, "%"+pretraga+"%")
+		args = append(args, "%"+pretraga+"%", "%"+pretraga+"%", "%"+pretraga+"%")
 	}
 
 	upit += " ORDER BY pn.datum DESC"
@@ -122,10 +122,13 @@ func (r *ProdajaRepo) DohvatiID(ctx context.Context, id int64) (*model.ProdajniN
 // DohvatiStavke vraća stavke prodaje sa nazivima artikala i PDV podacima za dati nalog
 func (r *ProdajaRepo) DohvatiStavke(ctx context.Context, nalogID int64) ([]model.StavkaProdajeSaArtiklom, error) {
 	redovi, err := r.db.QueryContext(ctx, `
-		SELECT sp.id, sp.nalog_id, sp.artikal_id, sp.kolicina, sp.cena_po_komadu, sp.ukupno,
+		SELECT sp.id, sp.nalog_id, sp.artikal_id, sp.kolicina, sp.cena_po_komadu,
-		       sp.pdv_stopa, sp.pdv_iznos, sp.cena_bez_pdv, a.naziv, a.jedinica_mere
+		       sp.popust_procenat, sp.ukupno,
+		       sp.pdv_stopa, sp.pdv_iznos, sp.cena_bez_pdv,
+		       a.naziv, a.jedinica_mere, COALESCE(k.naziv, '') AS kategorija_naziv
 		FROM stavke_prodaje sp
 		JOIN artikli a ON a.id = sp.artikal_id
+		LEFT JOIN kategorije k ON k.id = a.kategorija_id
 		WHERE sp.nalog_id = ?
 		ORDER BY sp.id`, nalogID)
 	if err != nil {
@@ -138,9 +141,9 @@ func (r *ProdajaRepo) DohvatiStavke(ctx context.Context, nalogID int64) ([]model
 		var s model.StavkaProdajeSaArtiklom
 		err := redovi.Scan(
 			&s.ID, &s.NalogID, &s.ArtikalID, &s.Kolicina,
-			&s.CenaPoKomadu, &s.Ukupno,
+			&s.CenaPoKomadu, &s.PopustProcenat, &s.Ukupno,
 			&s.PdvStopa, &s.PdvIznos, &s.CenaBezPdv,
-			&s.ArtikalNaziv, &s.JedinicaMere,
+			&s.ArtikalNaziv, &s.JedinicaMere, &s.KategorijaNaziv,
 		)
 		if err != nil {
 			return nil, fmt.Errorf("ntech: ProdajaRepo.DohvatiStavke: scan: %w", err)
@@ -215,12 +218,17 @@ func (r *ProdajaRepo) Kreiraj(ctx context.Context, n *model.ProdajniNalog, stavk
 			pdvIznos = cenaBezPdv * s.PdvStopa / 100
 		}
 
-		ukupnoStavke := float64(s.Kolicina) * s.CenaPoKomadu
+		// popust umanjuje cenu po komadu pre računanja ukupnog i PDV-a
+		cenaPoslePopusta := s.CenaPoKomadu
+		if s.PopustProcenat > 0 {
+			cenaPoslePopusta = cenaPoslePopusta * (1 - s.PopustProcenat/100)
+		}
+		ukupnoStavke := float64(s.Kolicina) * cenaPoslePopusta
 		_, err = tx.ExecContext(ctx, `
 			INSERT INTO stavke_prodaje
-				(nalog_id, artikal_id, kolicina, cena_po_komadu, ukupno, pdv_stopa, pdv_iznos, cena_bez_pdv)
+				(nalog_id, artikal_id, kolicina, cena_po_komadu, popust_procenat, ukupno, pdv_stopa, pdv_iznos, cena_bez_pdv)
-			VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
+			VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
-			nalogID, s.ArtikalID, s.Kolicina, s.CenaPoKomadu, ukupnoStavke,
+			nalogID, s.ArtikalID, s.Kolicina, s.CenaPoKomadu, s.PopustProcenat, ukupnoStavke,
 			s.PdvStopa, pdvIznos, cenaBezPdv,
 		)
 		if err != nil {

internal/handler/prodaja.go

@@ -62,18 +62,32 @@ type PodaciStampeProdaje struct {
 	PIB          string
 }
 
-// artikalUJSONSaCenom pretvara listu artikala u template.JS vrednost sa prodajnom cenom, PDV stopom i stanjem
+// artikalUJSONSaCenom pretvara listu artikala u template.JS vrednost sa prodajnom cenom, PDV stopom, kategorijom i stanjem
 func artikalUJSONSaCenom(artikli []model.ArtikalSaKategorijom) template.JS {
 	type stavka struct {
 		ID              int64   `json:"id"`
 		Naziv           string  `json:"naziv"`
+		Sifra           string  `json:"sifra"`
+		Barkod          string  `json:"barkod"`
 		Cena            float64 `json:"cena"`
+		CenaSaPdv       float64 `json:"cena_sa_pdv"`
 		PdvStopa        float64 `json:"pdv_stopa"`
 		Kolicina        int     `json:"kolicina"`
+		KategorijaNaziv string  `json:"kategorija_naziv"`
 	}
 	lista := make([]stavka, 0, len(artikli))
 	for _, a := range artikli {
-		lista = append(lista, stavka{ID: a.ID, Naziv: a.Naziv, Cena: a.ProdajnaCena, PdvStopa: a.PdvStopa, Kolicina: a.Kolicina})
+		lista = append(lista, stavka{
+			ID:              a.ID,
+			Naziv:           a.Naziv,
+			Sifra:           a.Sifra,
+			Barkod:          a.Barkod,
+			Cena:            a.ProdajnaCena,
+			CenaSaPdv:       a.CenaSaPdv,
+			PdvStopa:        a.PdvStopa,
+			Kolicina:        a.Kolicina,
+			KategorijaNaziv: a.KategorijaNaziv,
+		})
 	}
 	b, _ := json.Marshal(lista)
 	return template.JS(b)
@@ -186,7 +200,11 @@ func (h *Handler) SacuvajProdaju(w http.ResponseWriter, r *http.Request) {
 
 	var ukupno float64
 	for _, s := range stavke {
-		ukupno += float64(s.Kolicina) * s.CenaPoKomadu
+		cenaPoslePopusta := s.CenaPoKomadu
+		if s.PopustProcenat > 0 {
+			cenaPoslePopusta = cenaPoslePopusta * (1 - s.PopustProcenat/100)
+		}
+		ukupno += float64(s.Kolicina) * cenaPoslePopusta
 	}
 	nalog.Ukupno = ukupno
 
@@ -394,9 +412,10 @@ func (h *Handler) StampaProdaje(w http.ResponseWriter, r *http.Request) {
 	h.renderujStandalone(w, "prodaja_stampa", podaci)
 }
 
-// ObrisiProdaju prima POST zahtev, vraća stanje na magacin i briše nalog
+// ObrisiProdaju prima POST zahtev i stornira nalog umesto fizičkog brisanja.
+// Jednom izdat račun ne sme da nestane — umesto brisanja koristi se storno.
 func (h *Handler) ObrisiProdaju(w http.ResponseWriter, r *http.Request) {
-	if _, ok := h.zahtevajDozvolu(w, r, "prodaja.obrisi"); !ok {
+	if _, ok := h.zahtevajDozvolu(w, r, "prodaja.storno"); !ok {
 		return
 	}
 	k := middleware.KorisnikIzKonteksta(r.Context())
@@ -406,9 +425,8 @@ func (h *Handler) ObrisiProdaju(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	if err := h.ProdajaRepo.Obrisi(r.Context(), id, &k.ID); err != nil {
+	if err := h.ProdajaRepo.Storno(r.Context(), id, "administrativno uklanjanje", &k.ID); err != nil {
-		http.Error(w, "Greška pri brisanju naloga", http.StatusInternalServerError)
+		slog.Error("greška pri uklanjanju naloga", "error", err)
-		return
 	}
 	// ukloni vezani auto-KIR zapis (ako ga je ova prodaja kreirala)
 	if err := h.PdvKirRepo.ObrisiPoIzvoru(r.Context(), "prodaja", id); err != nil {
@@ -438,6 +456,7 @@ func parseFormuProdaje(r *http.Request) (model.ProdajniNalog, []model.StavkaProd
 	kolicine := r.Form["kolicina[]"]
 	cene := r.Form["cena_po_komadu[]"]
 	pdvStope := r.Form["pdv_stopa[]"]
+	popusti := r.Form["popust[]"]
 
 	if len(artikalIDovi) == 0 {
 		return nalog, nil, "Prodaja mora imati najmanje jednu stavku."
@@ -469,11 +488,17 @@ func parseFormuProdaje(r *http.Request) (model.ProdajniNalog, []model.StavkaProd
 			pdvStopa, _ = strconv.ParseFloat(strings.TrimSpace(pdvStope[i]), 64)
 		}
 
+		var popust float64
+		if i < len(popusti) {
+			popust, _ = strconv.ParseFloat(strings.TrimSpace(popusti[i]), 64)
+		}
+
 		stavke = append(stavke, model.StavkaProdaje{
 			ArtikalID:      artikalID,
 			Kolicina:       kolicina,
 			CenaPoKomadu:   cena,
 			PdvStopa:       pdvStopa,
+			PopustProcenat: popust,
 		})
 	}
 

internal/model/prodaja.go

@@ -22,6 +22,7 @@ type StavkaProdaje struct {
 	ArtikalID      int64
 	Kolicina       int
 	CenaPoKomadu   float64
+	PopustProcenat float64 // rabat u procentima (npr. 10 = 10% popusta)
 	Ukupno         float64
 	PdvStopa       float64
 	PdvIznos       float64
@@ -44,4 +45,5 @@ type StavkaProdajeSaArtiklom struct {
 	StavkaProdaje
 	ArtikalNaziv    string
 	JedinicaMere    string
+	KategorijaNaziv string
 }

migrations/092_prodaja_popust_na_stavci.sql

@@ -0,0 +1,4 @@
+-- Prodaja: popust na stavci (rabat u procentima)
+-- Neophodno za B2B fakture; PDV se obračunava na iznos posle popusta
+
+ALTER TABLE stavke_prodaje ADD COLUMN popust_procenat REAL NOT NULL DEFAULT 0;

web/static/js/ntech.js

@@ -136,18 +136,30 @@ document.addEventListener('alpine:init', () => {
 
     // forma za prodaju
     Alpine.data('prodajaForma', () => ({
-        stavke: [{artikal_id: '', kolicina: 1, cena: 0, pdv_stopa: 20}],
+        stavke: [{artikal_id: '', kolicina: 1, cena: 0, cena_sa_pdv: 0, pdv_stopa: 20, popust: 0, kategorija_naziv: ''}],
         artikliOpcije: [],
+        pretragaArtikal: '',
+        pdvObveznik: true,
         isMobile: false,
         init() {
             this.artikliOpcije = window._ntechArtikli || []
+            this.pdvObveznik = window._ntechPdvObveznik === true
             this.isMobile = window.matchMedia('(max-width: 768px)').matches
             window.matchMedia('(max-width: 768px)').addEventListener('change', e => {
                 this.isMobile = e.matches
             })
         },
+        get filtriraniArtikli() {
+            const q = this.pretragaArtikal.trim().toLowerCase()
+            if (!q) return this.artikliOpcije.slice(0, 50)
+            return this.artikliOpcije.filter(a =>
+                (a.naziv || '').toLowerCase().includes(q) ||
+                (a.sifra || '').toLowerCase().includes(q) ||
+                (a.barkod || '').toLowerCase().includes(q)
+            ).slice(0, 30)
+        },
         dodajStavku() {
-            this.stavke.push({artikal_id: '', kolicina: 1, cena: 0, pdv_stopa: 20})
+            this.stavke.push({artikal_id: '', kolicina: 1, cena: 0, cena_sa_pdv: 0, pdv_stopa: 20, popust: 0, kategorija_naziv: ''})
         },
         ukloniStavku(i) {
             if (this.stavke.length > 1) this.stavke.splice(i, 1)
@@ -155,10 +167,15 @@ document.addEventListener('alpine:init', () => {
         popuniCenu(stavka) {
             const a = this.artikliOpcije.find(x => x.id == stavka.artikal_id)
             if (a) {
-                stavka.cena = a.cena
+                stavka.cena = a.cena || 0
+                stavka.cena_sa_pdv = a.cena_sa_pdv || 0
                 stavka.pdv_stopa = a.pdv_stopa !== undefined ? a.pdv_stopa : 20
+                stavka.kategorija_naziv = a.kategorija_naziv || ''
             }
         },
+        prikaziCenu(stavka) {
+            return this.pdvObveznik ? (stavka.cena || 0) : (stavka.cena_sa_pdv || stavka.cena || 0)
+        },
         dostupnaKolicina(i) {
             const stavka = this.stavke[i]
             if (!stavka.artikal_id) return null
@@ -177,10 +194,18 @@ document.addEventListener('alpine:init', () => {
             return this.stavke.some((_, i) => this.prekoracenje(i))
         },
         ukupnoStavke(s) {
-            return (parseFloat(s.kolicina) * parseFloat(s.cena) || 0).toFixed(2)
+            const cena = parseFloat(s.cena) || 0
+            const popust = parseFloat(s.popust) || 0
+            const cenaPosle = popust > 0 ? cena * (1 - popust/100) : cena
+            return (parseFloat(s.kolicina) * cenaPosle || 0).toFixed(2)
         },
         ukupnoSvega() {
-            return this.stavke.reduce((z, s) => z + (parseFloat(s.kolicina) * parseFloat(s.cena) || 0), 0).toFixed(2)
+            return this.stavke.reduce((z, s) => {
+                const cena = parseFloat(s.cena) || 0
+                const popust = parseFloat(s.popust) || 0
+                const cenaPosle = popust > 0 ? cena * (1 - popust/100) : cena
+                return z + (parseFloat(s.kolicina) * cenaPosle || 0)
+            }, 0).toFixed(2)
         },
         // fmtDin formatira broj sa separatorom hiljada (tačka) i 2 decimale (zarez): 1234567.5 → "1.234.567,50"
         fmtDin(v) {

web/templates/stranice/prodaja_detalji.html

@@ -188,10 +188,21 @@
                 font-size: 12px;
                 font-weight: 500;
                 color: var(--tekst-sporedni);
-                width: 140px;
+                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}}
@@ -203,9 +214,15 @@
         <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}}</td>
+            <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}}
@@ -272,16 +289,16 @@
       {{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:#dc2626;margin-bottom:4px;">Brisanje naloga</div>
+          <div style="font-size:14px;font-weight:500;color:#f97316;margin-bottom:4px;">Uklanjanje naloga</div>
           <div class="pomocni-tekst">
-            Brisanje je trajno.{{if not .Nalog.Stornirano}} Količine artikala biće vraćene na stanje u magacinu.{{end}}
+            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-opasno"
+          <button type="submit" class="btn-upozorenje"
-            data-potvrda="Da li ste sigurni da želite da obrišete nalog {{.Nalog.BrojNaloga}}?">
+            data-potvrda="Stornirati nalog {{.Nalog.BrojNaloga}}? Količine artikala biće vraćene na stanje.">
-            Obriši nalog
+            Ukloni nalog
           </button>
         </form>
       </div>

web/templates/stranice/prodaja_forma.html

@@ -4,28 +4,18 @@
   .forma-kartica:nth-child(1) { animation-delay: 0.04s; }
   .forma-kartica:nth-child(2) { animation-delay: 0.12s; }
   @media (max-width: 768px) { .stavke-tabela-wrapper { display: none; } .stavke-kartice { display: flex !important; } }
+  .polje-labela { font-size: 12px; color: var(--tekst-sporedni); display: block; margin-bottom: 4px; }
 </style>
 {{end}} {{define "sadrzaj"}}
 
-<!-- lista artikala kao JSON — sadrži id, naziv i prodajnu cenu -->
 <script>
   var _ntechArtikli = {{.ArtikliJSON}};
+  var _ntechPdvObveznik = {{if index .Moduli "pdv"}}true{{else}}false{{end}};
 </script>
 
 <div style="width: 100%" x-data="prodajaForma">
-  <!-- nazad dugme -->
   <a href="/prodaja" class="nazad-link" hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML">
-    <svg
+    <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">
-      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
@@ -38,17 +28,11 @@
 
     <!-- zaglavlje prodaje -->
     <div class="kartica forma-kartica animiraj" style="margin-bottom: 16px">
-      <div
+      <div style="margin-bottom: 16px; padding-bottom: 14px; border-bottom: 0.5px solid var(--ivica);">
-        style="
+        <span style="font-size: 16px; font-weight: 500; color: var(--tekst-glavni)">Nova prodaja</span>
-          margin-bottom: 16px;
-          padding-bottom: 14px;
-          border-bottom: 0.5px solid var(--ivica);
-        ">
-        <span
-          style="font-size: 16px; font-weight: 500; color: var(--tekst-glavni)">Nova prodaja</span>
       </div>
       <div style="display: flex; flex-direction: column; gap: 14px">
-        <div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
           <div>
             <label class="polje-labela">Klijent</label>
             <select name="klijent_id" style="width: 100%">
@@ -69,202 +53,82 @@
         </div>
         <div>
           <label class="polje-labela">Napomena</label>
-          <textarea name="napomena" rows="2"
+          <textarea name="napomena" rows="2" placeholder="Interna napomena o prodaji..." style="width: 100%; resize: vertical"></textarea>
-            placeholder="Interna napomena o prodaji..."
-            style="width: 100%; resize: vertical"></textarea>
         </div>
       </div>
     </div>
 
     <!-- stavke -->
     <div class="kartica forma-kartica animiraj" style="margin-bottom: 16px">
-      <div
+      <div style="margin-bottom: 16px; padding-bottom: 14px; border-bottom: 0.5px solid var(--ivica); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;">
-        style="
+        <span style="font-size: 16px; font-weight: 500; color: var(--tekst-glavni)">Stavke</span>
-          margin-bottom: 16px;
+        <button type="button" @click="dodajStavku()" class="btn-primarno" style="font-size: 13px; padding: 6px 14px">
-          padding-bottom: 14px;
-          border-bottom: 0.5px solid var(--ivica);
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          flex-wrap: wrap;
-          gap: 8px;
-        ">
-        <span
-          style="font-size: 16px; font-weight: 500; color: var(--tekst-glavni)">Stavke</span>
-        <button
-          type="button"
-          @click="dodajStavku()"
-          class="btn-primarno"
-          style="font-size: 13px; padding: 6px 14px">
           + Dodaj stavku
         </button>
       </div>
 
+      <!-- pretraga artikala -->
+      <div style="margin-bottom:12px;">
+        <input type="text" x-model="pretragaArtikal" placeholder="Pretraži artikle po nazivu, šifri ili barkodu..." style="width:100%;">
+      </div>
+
       <!-- desktop tabela stavki -->
       <div class="stavke-tabela-wrapper" style="overflow-x: auto">
         <table class="tabela">
           <thead>
             <tr style="border-bottom: 0.5px solid var(--ivica)">
-              <th
+              <th style="padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 500; color: var(--tekst-sporedni);">Artikal</th>
-                style="
+              <th style="padding: 8px 10px; text-align: center; font-size: 12px; font-weight: 500; color: var(--tekst-sporedni); width: 90px;">Kol.</th>
-                  padding: 8px 10px;
+              <th style="padding: 8px 10px; text-align: right; font-size: 12px; font-weight: 500; color: var(--tekst-sporedni); width: 130px;">Cena/kom</th>
-                  text-align: left;
+              <th style="padding: 8px 10px; text-align: right; font-size: 12px; font-weight: 500; color: var(--tekst-sporedni); width: 80px;">Popust%</th>
-                  font-size: 12px;
+              <th style="padding: 8px 10px; text-align: right; font-size: 12px; font-weight: 500; color: var(--tekst-sporedni); width: 110px;">Ukupno</th>
-                  font-weight: 500;
+              <th style="width: 40px;"></th>
-                  color: var(--tekst-sporedni);
-                ">
-                Artikal
-              </th>
-              <th
-                style="
-                  padding: 8px 10px;
-                  text-align: center;
-                  font-size: 12px;
-                  font-weight: 500;
-                  color: var(--tekst-sporedni);
-                  width: 90px;
-                ">
-                Količina
-              </th>
-              <th
-                style="
-                  padding: 8px 10px;
-                  text-align: right;
-                  font-size: 12px;
-                  font-weight: 500;
-                  color: var(--tekst-sporedni);
-                  width: 140px;
-                ">
-                Cena/kom (din)
-              </th>
-              <th
-                style="
-                  padding: 8px 10px;
-                  text-align: right;
-                  font-size: 12px;
-                  font-weight: 500;
-                  color: var(--tekst-sporedni);
-                  width: 110px;
-                ">
-                Ukupno
-              </th>
-              <th style="width: 40px"></th>
             </tr>
           </thead>
           <tbody>
             <template x-for="(stavka, i) in stavke" :key="i">
               <tr style="border-bottom: 0.5px solid var(--ivica)">
-                <td style="padding: 8px 10px">
+                <td style="padding: 8px 10px;">
                   <input type="hidden" :name="'pdv_stopa[]'" :value="stavka.pdv_stopa">
-                  <select
+                  <select :name="'artikal_id[]'" x-model="stavka.artikal_id" @change="popuniCenu(stavka)" :disabled="isMobile" style="width: 100%">
-                    :name="'artikal_id[]'"
-                    x-model="stavka.artikal_id"
-                    @change="popuniCenu(stavka)"
-                    :disabled="isMobile"
-                    style="width: 100%">
                     <option value="">— odaberi artikal —</option>
-                    <template x-for="a in artikliOpcije" :key="a.id">
+                    <template x-for="a in filtriraniArtikli" :key="a.id">
-                      <option :value="a.id" x-text="a.naziv"></option>
+                      <option :value="a.id" x-text="a.naziv + (a.kategorija_naziv ? ' [' + a.kategorija_naziv + ']' : '')"></option>
                     </template>
                   </select>
+                  <div x-show="stavka.kategorija_naziv" style="font-size:11px;color:var(--tekst-sporedni);margin-top:2px;" x-text="stavka.kategorija_naziv"></div>
                 </td>
                 <td style="padding: 8px 10px">
-                  <input
+                  <input type="number" :name="'kolicina[]'" x-model="stavka.kolicina" min="1" :disabled="isMobile"
-                    type="number"
+                    :style="prekoracenje(i) ? 'border-color:#dc2626;' : ''" style="width: 100%; text-align: center" />
-                    :name="'kolicina[]'"
+                  <div x-show="stavka.artikal_id" :style="prekoracenje(i) ? 'color:#dc2626' : 'color:var(--tekst-sporedni)'"
-                    x-model="stavka.kolicina"
+                    x-text="'Na stanju: ' + dostupnaKolicina(i)" style="font-size: 11px; margin-top: 3px; text-align: center; white-space: nowrap;"></div>
-                    min="1"
+                  <div x-show="prekoracenje(i)" style="font-size: 11px; color: #dc2626; margin-top: 1px; text-align: center; white-space: nowrap;">Prekoračena količina</div>
-                    :disabled="isMobile"
+                </td>
-                    :style="prekoracenje(i) ? 'border-color:#dc2626;' : ''"
+                <td style="padding: 8px 10px">
-                    style="width: 100%; text-align: center" />
+                  <div style="display:flex;flex-direction:column;gap:2px;">
-                  <div
+                    <input type="number" :name="'cena_po_komadu[]'" x-model="stavka.cena" min="0" step="0.01" :disabled="isMobile" style="width: 100%; text-align: right" />
-                    x-show="stavka.artikal_id"
+                    <span x-show="pdvObveznik && stavka.pdv_stopa > 0" style="font-size:10px;color:var(--tekst-sporedni);text-align:right;" x-text="'+PDV ' + stavka.pdv_stopa + '%'"></span>
-                    :style="prekoracenje(i) ? 'color:#dc2626' : 'color:var(--tekst-sporedni)'"
-                    x-text="'Na stanju: ' + dostupnaKolicina(i)"
-                    style="
-                      font-size: 11px;
-                      margin-top: 3px;
-                      text-align: center;
-                      white-space: nowrap;
-                    "></div>
-                  <div
-                    x-show="prekoracenje(i)"
-                    style="
-                      font-size: 11px;
-                      color: #dc2626;
-                      margin-top: 1px;
-                      text-align: center;
-                      white-space: nowrap;
-                    ">
-                    Prekoračena količina
                   </div>
                 </td>
                 <td style="padding: 8px 10px">
-                  <input
+                  <input type="number" :name="'popust[]'" x-model="stavka.popust" min="0" max="100" step="0.01" :disabled="isMobile" style="width: 100%; text-align: right" />
-                    type="number"
-                    :name="'cena_po_komadu[]'"
-                    x-model="stavka.cena"
-                    min="0"
-                    step="0.01"
-                    :disabled="isMobile"
-                    style="width: 100%; text-align: right" />
                 </td>
-                <td
+                <td style="padding: 8px 10px; text-align: right; font-size: 14px; font-weight: 500; color: var(--tekst-glavni);">
-                  style="
-                    padding: 8px 10px;
-                    text-align: right;
-                    font-size: 14px;
-                    font-weight: 500;
-                    color: var(--tekst-glavni);
-                  ">
                   <span x-text="fmtDin(ukupnoStavke(stavka)) + ' din'"></span>
                 </td>
                 <td style="padding: 8px 10px; text-align: center">
-                  <button
+                  <button type="button" @click="ukloniStavku(i)" x-show="stavke.length > 1"
-                    type="button"
+                    style="background: none; border: none; cursor: pointer; color: #dc2626; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 4px; transition: background 0.15s;"
-                    @click="ukloniStavku(i)"
+                    onmouseover="this.style.background = 'rgba(220,38,38,0.08)'" onmouseout="this.style.background = 'none'" title="Ukloni stavku">×</button>
-                    x-show="stavke.length > 1"
-                    style="
-                      background: none;
-                      border: none;
-                      cursor: pointer;
-                      color: #dc2626;
-                      font-size: 18px;
-                      line-height: 1;
-                      padding: 2px 6px;
-                      border-radius: 4px;
-                      transition: background 0.15s;
-                    "
-                    onmouseover="this.style.background = 'rgba(220,38,38,0.08)'"
-                    onmouseout="this.style.background = 'none'"
-                    title="Ukloni stavku">
-                    ×
-                  </button>
                 </td>
               </tr>
             </template>
           </tbody>
           <tfoot>
             <tr style="border-top: 0.5px solid var(--ivica)">
-              <td
+              <td colspan="4" style="padding: 10px; text-align: right; font-size: 13px; color: var(--tekst-sporedni); font-weight: 500;">Ukupno:</td>
-                colspan="3"
+              <td style="padding: 10px; text-align: right; font-size: 15px; font-weight: 600; color: var(--tekst-glavni);">
-                style="
-                  padding: 10px;
-                  text-align: right;
-                  font-size: 13px;
-                  color: var(--tekst-sporedni);
-                  font-weight: 500;
-                ">
-                Ukupno:
-              </td>
-              <td
-                style="
-                  padding: 10px;
-                  text-align: right;
-                  font-size: 15px;
-                  font-weight: 600;
-                  color: var(--tekst-glavni);
-                ">
                 <span x-text="fmtDin(ukupnoSvega()) + ' din'"></span>
               </td>
               <td></td>
@@ -274,134 +138,55 @@
       </div>
 
       <!-- mobilne kartice stavki -->
-      <div
+      <div class="stavke-kartice" style="display: none; flex-direction: column; gap: 10px">
-        class="stavke-kartice"
+        <!-- pretraga na mobilnom -->
-        style="display: none; flex-direction: column; gap: 10px">
+        <input type="text" x-model="pretragaArtikal" placeholder="Pretraži artikle..." style="width:100%;">
         <template x-for="(stavka, i) in stavke" :key="i">
-          <div
+          <div style="border: 0.5px solid var(--ivica); border-radius: 8px; padding: 12px;">
-            style="
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-              border: 0.5px solid var(--ivica);
+              <span style="font-size: 13px; font-weight: 500; color: var(--tekst-sporedni);" x-text="'Stavka ' + (i + 1)"></span>
-              border-radius: 8px;
+              <button type="button" @click="ukloniStavku(i)" x-show="stavke.length > 1"
-              padding: 12px;
+                style="background: none; border: 0.5px solid #dc2626; color: #dc2626; cursor: pointer; font-size: 13px; padding: 2px 8px; border-radius: 4px;">Ukloni</button>
-            ">
-            <div
-              style="
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                margin-bottom: 10px;
-              ">
-              <span
-                style="
-                  font-size: 13px;
-                  font-weight: 500;
-                  color: var(--tekst-sporedni);
-                "
-                x-text="'Stavka ' + (i + 1)"></span>
-              <button
-                type="button"
-                @click="ukloniStavku(i)"
-                x-show="stavke.length > 1"
-                style="
-                  background: none;
-                  border: 0.5px solid #dc2626;
-                  color: #dc2626;
-                  cursor: pointer;
-                  font-size: 13px;
-                  padding: 2px 8px;
-                  border-radius: 4px;
-                ">
-                Ukloni
-              </button>
             </div>
             <div style="display: flex; flex-direction: column; gap: 10px">
               <input type="hidden" :name="'pdv_stopa[]'" :value="stavka.pdv_stopa">
+              <!-- kategorija badge -->
+              <div x-show="stavka.kategorija_naziv" style="font-size:11px;color:var(--tekst-sporedni);background:var(--pozadina);padding:2px 8px;border-radius:4px;align-self:flex-start;" x-text="stavka.kategorija_naziv"></div>
               <div>
-                <label
+                <label class="polje-labela">Artikal</label>
-                  style="
+                <select :name="'artikal_id[]'" x-model="stavka.artikal_id" @change="popuniCenu(stavka)" :disabled="!isMobile" style="width: 100%">
-                    font-size: 12px;
-                    color: var(--tekst-sporedni);
-                    display: block;
-                    margin-bottom: 4px;
-                  ">Artikal</label>
-                <select
-                  :name="'artikal_id[]'"
-                  x-model="stavka.artikal_id"
-                  @change="popuniCenu(stavka)"
-                  :disabled="!isMobile"
-                  style="width: 100%">
                   <option value="">— odaberi artikal —</option>
-                  <template x-for="a in artikliOpcije" :key="a.id">
+                  <template x-for="a in filtriraniArtikli" :key="a.id">
                     <option :value="a.id" x-text="a.naziv"></option>
                   </template>
                 </select>
               </div>
-              <div class="forma-grid-2" style="gap: 10px">
+              <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                 <div>
-                  <label
+                  <label class="polje-labela">Količina</label>
-                    style="
+                  <input type="number" :name="'kolicina[]'" x-model="stavka.kolicina" min="1" :disabled="!isMobile"
-                      font-size: 12px;
+                    :style="prekoracenje(i) ? 'border-color:#dc2626;' : ''" style="width: 100%" />
-                      color: var(--tekst-sporedni);
+                  <div x-show="stavka.artikal_id" :style="prekoracenje(i) ? 'color:#dc2626' : 'color:var(--tekst-sporedni)'"
-                      display: block;
+                    x-text="'Na stanju: ' + dostupnaKolicina(i)" style="font-size: 11px; margin-top: 3px;"></div>
-                      margin-bottom: 4px;
-                    ">Količina</label>
-                  <input
-                    type="number"
-                    :name="'kolicina[]'"
-                    x-model="stavka.kolicina"
-                    min="1"
-                    :disabled="!isMobile"
-                    :style="prekoracenje(i) ? 'border-color:#dc2626;' : ''"
-                    style="width: 100%" />
-                  <div
-                    x-show="stavka.artikal_id"
-                    :style="prekoracenje(i) ? 'color:#dc2626' : 'color:var(--tekst-sporedni)'"
-                    x-text="'Na stanju: ' + dostupnaKolicina(i)"
-                    style="font-size: 11px; margin-top: 3px"></div>
-                  <div
-                    x-show="prekoracenje(i)"
-                    style="font-size: 11px; color: #dc2626; margin-top: 1px">
-                    Prekoračena količina
-                  </div>
                 </div>
                 <div>
-                  <label
+                  <label class="polje-labela">Cena/kom (din)</label>
-                    style="
+                  <input type="number" :name="'cena_po_komadu[]'" x-model="stavka.cena" min="0" step="0.01" :disabled="!isMobile" style="width: 100%" />
-                      font-size: 12px;
-                      color: var(--tekst-sporedni);
-                      display: block;
-                      margin-bottom: 4px;
-                    ">Cena/kom (din)</label>
-                  <input
-                    type="number"
-                    :name="'cena_po_komadu[]'"
-                    x-model="stavka.cena"
-                    min="0"
-                    step="0.01"
-                    :disabled="!isMobile"
-                    style="width: 100%" />
                 </div>
               </div>
-              <div
+              <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
-                style="
+                <div>
-                  text-align: right;
+                  <label class="polje-labela">Popust %</label>
-                  font-size: 14px;
+                  <input type="number" :name="'popust[]'" x-model="stavka.popust" min="0" max="100" step="0.01" :disabled="!isMobile" style="width: 100%" />
-                  font-weight: 500;
+                </div>
-                  color: var(--tekst-glavni);
+                <div style="text-align: right; font-size: 14px; font-weight: 500; color: var(--tekst-glavni);">
-                ">
+                  <span x-text="fmtDin(ukupnoStavke(stavka)) + ' din'"></span>
-                Ukupno: <span x-text="fmtDin(ukupnoStavke(stavka)) + ' din'"></span>
+                </div>
               </div>
             </div>
           </div>
         </template>
-        <div
+        <div style="text-align: right; font-size: 15px; font-weight: 600; color: var(--tekst-glavni); padding: 8px 4px;">
-          style="
-            text-align: right;
-            font-size: 15px;
-            font-weight: 600;
-            color: var(--tekst-glavni);
-            padding: 8px 4px;
-          ">
           Ukupno: <span x-text="fmtDin(ukupnoSvega()) + ' din'"></span>
         </div>
       </div>
@@ -410,11 +195,7 @@
     <!-- dugmad forme -->
     <div style="display: flex; justify-content: flex-end; gap: 10px">
       <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja" class="btn-sekundarno">Odustani</a>
-      <button
+      <button type="submit" class="btn-primarno" :disabled="imaPrekoracenja()" :style="imaPrekoracenja() ? 'opacity:0.4;cursor:not-allowed;' : ''">
-        type="submit"
-        class="btn-primarno"
-        :disabled="imaPrekoracenja()"
-        :style="imaPrekoracenja() ? 'opacity:0.4;cursor:not-allowed;' : ''">
         Sačuvaj prodaju
       </button>
     </div>