From 43fabfe474224c0f0d8d7e0a9822ff65bb9e10fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dalibor=20Markovi=C4=87?= <dalibor31@gmail.com>
Date: Sun, 21 Jun 2026 12:15:59 +0200
Subject: [PATCH] Servis novi nalog: kartice, izbor/kreiranje klijenta, novi
 broj naloga
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Forma naloga razdvojena u zasebne kartice (Uređaj, Klijent, Status i datumi, Cene/Napomena)
- Nova kartica Klijent: radio fizičko/pravno, živa pretraga postojećih (Alpine, CSP-safe) po punom imenu/imenu/prezimenu odnosno nazivu firme; izbor postojećeg ili unos novog
- Enter u pretrazi bez izbora popunjava polja novog klijenta (ime/prezime ili naziv firme)
- SacuvajNalog/SacuvajIzmenaNaloga: helper mozdaKreirajKlijenta kreira novog klijenta iz forme kada nije izabran postojeći
- Broj naloga: format SN-MMGG-NNN sa mesečnim resetom brojača (001-999)
- Dodat CSRF token u formu naloga (POST je ranije vraćao 403)
- Šablonski helper json za ugradnju liste klijenata u Alpine
---
 internal/db/sqlite/servis.go             |  12 +-
 internal/handler/kes.go                  |  10 +
 internal/handler/servis.go               |  92 +++++
 web/static/js/ntech.js                   |  99 +++++
 web/templates/stranice/servis_forma.html | 498 ++++++++++++++---------
 5 files changed, 513 insertions(+), 198 deletions(-)

diff --git a/internal/db/sqlite/servis.go b/internal/db/sqlite/servis.go
index 072637b..2955314 100644
--- a/internal/db/sqlite/servis.go
+++ b/internal/db/sqlite/servis.go
@@ -30,11 +30,15 @@ func NoviServisRepo(db *sql.DB) *ServisRepo {
 	return &ServisRepo{db: db}
 }
 
-// SledeciBroj generiše sledeći broj naloga u formatu SN-GGGG-NNNN
+// SledeciBroj generiše sledeći broj naloga u formatu SN-MMGG-NNN
+// (MM mesec, GG dvocifrena godina); brojač NNN se resetuje svakog meseca
 func (r *ServisRepo) SledeciBroj(ctx context.Context) (string, error) {
-	godina := time.Now().Year()
-	uzorak := fmt.Sprintf("SN-%d-%%", godina)
+	sada := time.Now()
+	// prefiks "SN-MMGG-" je dug 8 karaktera, pa brojač počinje od 9. karaktera
+	prefiks := fmt.Sprintf("SN-%02d%02d-", int(sada.Month()), sada.Year()%100)
+	uzorak := prefiks + "%"
 
+	// COALESCE(MAX, 0)+1 → prvi nalog u mesecu dobija 001
 	var sledeci int
 	err := r.db.QueryRowContext(ctx, `
 		SELECT COALESCE(MAX(CAST(SUBSTR(broj_naloga, 9) AS INTEGER)), 0) + 1
@@ -44,7 +48,7 @@ func (r *ServisRepo) SledeciBroj(ctx context.Context) (string, error) {
 		return "", fmt.Errorf("ntech: ServisRepo.SledeciBroj: %w", err)
 	}
 
-	return fmt.Sprintf("SN-%d-%04d", godina, sledeci), nil
+	return fmt.Sprintf("%s%03d", prefiks, sledeci), nil
 }
 
 // Lista vraća listu servisnih naloga sa imenom klijenta, opcionim filterima
diff --git a/internal/handler/kes.go b/internal/handler/kes.go
index ab6ff9d..db55756 100644
--- a/internal/handler/kes.go
+++ b/internal/handler/kes.go
@@ -1,6 +1,7 @@
 package handler
 
 import (
+	"encoding/json"
 	"fmt"
 	"html/template"
 	"io/fs"
@@ -65,6 +66,15 @@ var sablonskeFunkcije = template.FuncMap{
 	},
 	// telefon formatira srpski broj telefona radi lakšeg čitanja: "0641234567" → "064 123 4567"
 	"telefon": formatirajTelefon,
+	// json serijalizuje vrednost u JSON za ugradnju u <script> (npr. Alpine x-data);
+	// template.JS sprečava da html/template dodatno escapuje rezultat
+	"json": func(v any) (template.JS, error) {
+		b, err := json.Marshal(v)
+		if err != nil {
+			return "", fmt.Errorf("ntech: json helper: %w", err)
+		}
+		return template.JS(b), nil
+	},
 	// statusPre vraća true ako je `a` pre `b` u redosledu statusa
 	"statusPre": func(a, b string, statusi []string) bool {
 		ia, ib := -1, -1
diff --git a/internal/handler/servis.go b/internal/handler/servis.go
index 81d3035..661761d 100644
--- a/internal/handler/servis.go
+++ b/internal/handler/servis.go
@@ -1,6 +1,7 @@
 package handler
 
 import (
+	"context"
 	"encoding/base64"
 	"log/slog"
 	"net/http"
@@ -162,6 +163,26 @@ func (h *Handler) SacuvajNalog(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	// ako nije izabran postojeći klijent, eventualno kreiraj novog iz polja forme
+	if greska := h.mozdaKreirajKlijenta(r.Context(), r, &nalog); greska != "" {
+		podesavanja, _ := sqlite.DohvatiSvaPodesavanja(r.Context(), h.DB)
+		klijenti, _ := h.KlijentiRepo.Lista(r.Context(), "")
+		tehnicari, _ := h.KorisniciRepo.Lista(r.Context())
+		ps := h.popuniPodaciStranice(r, podesavanja)
+		ps.Stranica = "servis"
+		ps.NaslovStranice = "Novi nalog"
+		h.renderujFormuNaloga(w, PodaciFormeNaloga{
+			PodaciStranice: ps,
+			Nalog:          nalog,
+			Klijenti:       klijenti,
+			Tehnicari:      tehnicari,
+			SviStatusi:     model.SviStatusi,
+			Greska:         greska,
+			Izmena:         false,
+		})
+		return
+	}
+
 	id, err := h.ServisRepo.Kreiraj(r.Context(), &nalog)
 	if err != nil {
 		slog.Error("greška pri čuvanju naloga", "error", err)
@@ -272,6 +293,27 @@ func (h *Handler) SacuvajIzmenaNaloga(w http.ResponseWriter, r *http.Request) {
 	}
 
 	nalog.ID = id
+
+	// ako nije izabran postojeći klijent, eventualno kreiraj novog iz polja forme
+	if greska := h.mozdaKreirajKlijenta(r.Context(), r, &nalog); greska != "" {
+		podesavanja, _ := sqlite.DohvatiSvaPodesavanja(r.Context(), h.DB)
+		klijenti, _ := h.KlijentiRepo.Lista(r.Context(), "")
+		tehnicari, _ := h.KorisniciRepo.Lista(r.Context())
+		ps := h.popuniPodaciStranice(r, podesavanja)
+		ps.Stranica = "servis"
+		ps.NaslovStranice = "Izmeni nalog"
+		h.renderujFormuNaloga(w, PodaciFormeNaloga{
+			PodaciStranice: ps,
+			Nalog:          nalog,
+			Klijenti:       klijenti,
+			Tehnicari:      tehnicari,
+			SviStatusi:     model.SviStatusi,
+			Greska:         greska,
+			Izmena:         true,
+		})
+		return
+	}
+
 	if err := h.ServisRepo.Izmeni(r.Context(), &nalog); err != nil {
 		slog.Error("greška pri čuvanju izmene naloga", "error", err)
 		podesavanja, _ := sqlite.DohvatiSvaPodesavanja(r.Context(), h.DB)
@@ -548,6 +590,56 @@ func parseFormuNaloga(r *http.Request) (model.ServisniNalog, string) {
 	return nalog, ""
 }
 
+// mozdaKreirajKlijenta kreira novog klijenta iz polja forme naloga kada nije
+// izabran postojeći (klijent_id prazno), a uneto je ime (fizičko) ili naziv firme
+// (pravno). Klijent je opcioni — ako nema dovoljno podataka, nalog ostaje bez njega.
+// Vraća srpsku poruku o grešci za prikaz, ili prazan string ako je sve u redu.
+func (h *Handler) mozdaKreirajKlijenta(ctx context.Context, r *http.Request, nalog *model.ServisniNalog) string {
+	if nalog.KlijentID != nil {
+		return "" // izabran postojeći klijent — ništa ne kreiramo
+	}
+
+	tip := r.FormValue("tip")
+	if tip != "fizicko" && tip != "pravno" {
+		tip = "fizicko"
+	}
+	ime := strings.TrimSpace(r.FormValue("ime"))
+	nazivFirme := strings.TrimSpace(r.FormValue("naziv_firme"))
+
+	// bez minimalnih podataka nalog ostaje bez klijenta
+	if tip == "fizicko" && ime == "" {
+		return ""
+	}
+	if tip == "pravno" && nazivFirme == "" {
+		return ""
+	}
+
+	email := strings.TrimSpace(r.FormValue("email"))
+	if email != "" && !strings.Contains(email, "@") {
+		return "Adresa e-pošte nije ispravna."
+	}
+
+	klijent := model.Klijent{
+		Tip:        tip,
+		Ime:        ime,
+		Prezime:    strings.TrimSpace(r.FormValue("prezime")),
+		JMBG:       strings.TrimSpace(r.FormValue("jmbg")),
+		NazivFirme: nazivFirme,
+		PIB:        strings.TrimSpace(r.FormValue("pib")),
+		Telefon:    strings.TrimSpace(r.FormValue("telefon")),
+		Email:      email,
+		Mesto:      strings.TrimSpace(r.FormValue("mesto")),
+	}
+
+	id, err := h.KlijentiRepo.Kreiraj(ctx, &klijent)
+	if err != nil {
+		slog.Error("greška pri kreiranju klijenta iz naloga", "error", err)
+		return "Došlo je do greške pri čuvanju klijenta. Pokušajte ponovo."
+	}
+	nalog.KlijentID = &id
+	return ""
+}
+
 // defaultGarancija vraća datum garancije na osnovu datuma prijema i podešavanja;
 // vraća nil ako je rok 0 ili podešavanje nedostaje
 func defaultGarancija(datumPrijema time.Time, podesavanja map[string]string) *time.Time {
diff --git a/web/static/js/ntech.js b/web/static/js/ntech.js
index 2c27170..47c5701 100644
--- a/web/static/js/ntech.js
+++ b/web/static/js/ntech.js
@@ -191,6 +191,105 @@ document.addEventListener('alpine:init', () => {
         }
     }))
 
+    // forma servisnog naloga — izbor postojećeg ili unos novog klijenta.
+    // Pisano CSP-safe (bez složenih izraza u atributima): uslovi idu kroz metode/gettere.
+    Alpine.data('klijentNalog', () => ({
+        klijenti: [],
+        tip: 'fizicko',
+        pretraga: '',
+        izabrani: null,
+        izabraniId: 0,
+        prikaziListu: false,
+        // polja novog klijenta (vezana x-model-om na inpute)
+        noviIme: '',
+        noviPrezime: '',
+        noviNaziv: '',
+        init() {
+            this.klijenti = window.__klijentiNaloga || []
+            // kod izmene naloga pretpopuni već vezanog klijenta
+            const id = window.__izabraniKlijentId || 0
+            if (id) {
+                const k = this.klijenti.find(x => x.ID === id)
+                if (k) {
+                    this.izabrani = k
+                    this.izabraniId = k.ID
+                    this.tip = k.Tip || 'fizicko'
+                }
+            }
+        },
+        get nijeIzabran() {
+            return !this.izabrani
+        },
+        get vrednostKlijentId() {
+            return this.izabraniId || ''
+        },
+        // filtrira klijente po tipu i početnim karakterima unosa (najviše 8)
+        get filtrirani() {
+            const q = this.pretraga.trim().toLowerCase()
+            const tip = this.tip
+            return this.klijenti.filter(k => {
+                if ((k.Tip || 'fizicko') !== tip) return false
+                if (q === '') return true
+                // za fizičko proveravamo i puno ime ("Ivan Lazić") da bi radio unos
+                // tipa "Ivan L", a i samo ime ili samo prezime zasebno
+                const punoIme = ((k.Ime || '') + ' ' + (k.Prezime || '')).trim()
+                const polja = (tip === 'pravno') ? [k.NazivFirme] : [punoIme, k.Ime, k.Prezime]
+                return polja.some(p => (p || '').toLowerCase().startsWith(q))
+            }).slice(0, 8)
+        },
+        jeTip(t) {
+            return this.tip === t
+        },
+        klasaTip(t) {
+            return this.tip === t ? 'tip-opcija-akt' : ''
+        },
+        naziv(k) {
+            if (!k) return ''
+            return (k.Tip === 'pravno')
+                ? (k.NazivFirme || '')
+                : ((k.Ime || '') + ' ' + (k.Prezime || '')).trim()
+        },
+        detalj(k) {
+            if (!k) return ''
+            const d = []
+            if (k.Mesto) d.push(k.Mesto)
+            if (k.Telefon) d.push(k.Telefon)
+            return d.join(' · ')
+        },
+        izaberi(k) {
+            this.izabrani = k
+            this.izabraniId = k.ID
+            this.pretraga = ''
+            this.prikaziListu = false
+        },
+        ocisti() {
+            this.izabrani = null
+            this.izabraniId = 0
+        },
+        // Enter u pretrazi kad ništa nije izabrano → priprema unos novog klijenta:
+        // prvu reč upisuje kao ime, ostatak kao prezime (za firmu ceo tekst kao naziv)
+        potvrdiNovog() {
+            const q = this.pretraga.trim()
+            this.prikaziListu = false
+            if (!q) return
+            if (this.tip === 'pravno') {
+                this.noviNaziv = q
+            } else {
+                const delovi = q.split(/\s+/)
+                this.noviIme = delovi[0] || ''
+                this.noviPrezime = delovi.slice(1).join(' ')
+            }
+        },
+        promeniTip(t) {
+            this.tip = t
+            this.ocisti()
+            this.pretraga = ''
+            this.noviIme = ''
+            this.noviPrezime = ''
+            this.noviNaziv = ''
+        }
+    }))
+
     // forma za nabavku
     Alpine.data('nabavkaForma', () => ({
         stavke: [{artikal_id: '', kolicina: 1, cena: 0, marza: 0, prodajna: 0}],
diff --git a/web/templates/stranice/servis_forma.html b/web/templates/stranice/servis_forma.html
index ad35bf0..e1dfdf8 100644
--- a/web/templates/stranice/servis_forma.html
+++ b/web/templates/stranice/servis_forma.html
@@ -5,230 +5,340 @@
 {{define "sadrzaj"}}
 <div style="width:100%;">
 
+    <!-- podaci za Alpine: lista klijenata i eventualno već vezani klijent (kod izmene) -->
+    <script>
+        window.__klijentiNaloga = {{json .Klijenti}};
+        window.__izabraniKlijentId = {{.Nalog.KlijentIDVrednost}};
+    </script>
+
     <!-- nazad dugme -->
     <a href="/servis" class="nazad-link">
         <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 servis
     </a>
 
-    <div class="kartica forma-kartica animiraj">
-        <div style="display:flex;justify-content:space-between;align-items:center;margin:-16px -16px 20px -16px;padding:12px 16px;background:var(--pozadina);border-radius:12px 12px 0 0;flex-wrap:wrap;gap:10px;">
-            <span style="font-size:15px;font-weight:600;color:var(--tekst-glavni);">
-                {{if .Izmena}}Izmeni nalog{{else}}Novi nalog{{end}}
-            </span>
-            <span style="font-size:13px;font-weight:500;color:var(--tekst-sporedni);font-family:monospace;">
-                {{.Nalog.BrojNaloga}}
-            </span>
+    {{if .Greska}}
+    <div class="poruka-greska greska-animacija" style="margin-bottom:16px;">{{.Greska}}</div>
+    {{end}}
+
+    <form method="POST" action="{{if .Izmena}}/servis/izmeni/{{.Nalog.ID}}{{else}}/servis/novi{{end}}">
+
+        <!-- broj naloga ide kao hidden — server ga je generisao, vraćamo ga pri POST-u -->
+        <input type="hidden" name="broj_naloga" value="{{.Nalog.BrojNaloga}}">
+        <!-- CSRF token — bez njega middleware odbija POST sa 403 -->
+        <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
+
+        <!-- ===================== KARTICA: UREĐAJ ===================== -->
+        <div class="kartica forma-kartica animiraj">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin:-16px -16px 20px -16px;padding:12px 16px;background:var(--pozadina);border-radius:12px 12px 0 0;flex-wrap:wrap;gap:10px;">
+                <span style="font-size:15px;font-weight:600;color:var(--tekst-glavni);">
+                    {{if .Izmena}}Izmeni nalog{{else}}Novi nalog{{end}}
+                </span>
+                <span style="font-size:13px;font-weight:500;color:var(--tekst-sporedni);font-family:monospace;">
+                    {{.Nalog.BrojNaloga}}
+                </span>
+            </div>
+
+            <div class="sekcija-naslov">Uređaj</div>
+            <div class="kolona" style="gap:12px;">
+                <div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+                    <div>
+                        <label class="polje-labela">
+                            Uređaj <span style="color:#dc2626;">*</span>
+                        </label>
+                        <input type="text" name="uredjaj" value="{{.Nalog.Uredjaj}}"
+                            placeholder="npr. Laptop HP EliteBook 840"
+                            style="width:100%;">
+                    </div>
+                    <div>
+                        <label class="polje-labela">Serijski broj</label>
+                        <input type="text" name="serijski_broj" value="{{.Nalog.SerijskiBroj}}"
+                            placeholder="npr. 5CD1234XYZ"
+                            style="width:100%;">
+                    </div>
+                </div>
+                <div>
+                    <label class="polje-labela">
+                        Opis kvara <span style="color:#dc2626;">*</span>
+                    </label>
+                    <textarea name="opis_kvara" rows="3"
+                        placeholder="Opišite problem koji je klijent prijavio..."
+                        style="width:100%;resize:vertical;">{{.Nalog.OpisKvara}}</textarea>
+                </div>
+                <div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+                    <div>
+                        <label class="polje-labela">Oštećenja pri prijemu</label>
+                        <input type="text" name="ostecenja" value="{{.Nalog.Ostecenja}}"
+                            placeholder="npr. ogrebotina na ekranu"
+                            style="width:100%;">
+                    </div>
+                    <div>
+                        <label class="polje-labela">PIN / lozinka uređaja</label>
+                        <input type="text" name="pin_uredjaja" value="{{.Nalog.PinUredjaja}}"
+                            placeholder="npr. 1234"
+                            style="width:100%;">
+                    </div>
+                </div>
+                <div>
+                    <label class="polje-labela">Pribor i oprema</label>
+                    <input type="text" name="pribor" value="{{.Nalog.Pribor}}"
+                        placeholder="npr. punjač, torbica, miš"
+                        style="width:100%;">
+                </div>
+            </div>
         </div>
 
-        {{if .Greska}}
-        <div class="poruka-greska greska-animacija">{{.Greska}}</div>
-        {{end}}
+        <!-- ===================== KARTICA: KLIJENT I TEHNIČAR ===================== -->
+        <div class="kartica forma-kartica animiraj" x-data="klijentNalog">
+            <div class="sekcija-naslov">Klijent</div>
+            <div class="kolona" style="gap:12px;">
 
-        <form method="POST" action="{{if .Izmena}}/servis/izmeni/{{.Nalog.ID}}{{else}}/servis/novi{{end}}">
+                <!-- tip klijenta: fizičko / pravno -->
+                <div style="display:flex;gap:10px;flex-wrap:wrap;">
+                    <label class="tip-opcija" :class="klasaTip('fizicko')">
+                        <input type="radio" name="tip" value="fizicko" :checked="jeTip('fizicko')"
+                            @change="promeniTip('fizicko')" style="accent-color:var(--akcentna);">
+                        Fizičko lice
+                    </label>
+                    <label class="tip-opcija" :class="klasaTip('pravno')">
+                        <input type="radio" name="tip" value="pravno" :checked="jeTip('pravno')"
+                            @change="promeniTip('pravno')" style="accent-color:var(--akcentna);">
+                        Pravno lice (firma)
+                    </label>
+                </div>
 
-            <!-- broj naloga ide kao hidden — server ga je generisao, vraćamo ga pri POST-u -->
-            <input type="hidden" name="broj_naloga" value="{{.Nalog.BrojNaloga}}">
+                <!-- vezani klijent_id: prazno ako se kreira novi -->
+                <input type="hidden" name="klijent_id" :value="vrednostKlijentId">
 
-            <div class="kolona" style="gap:20px;">
-
-                <!-- uređaj -->
-                <div>
-                    <div class="sekcija-naslov">Uređaj</div>
-                    <div class="kolona" style="gap:12px;">
-                        <div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
-                            <div>
-                                <label class="polje-labela">
-                                    Uređaj <span style="color:#dc2626;">*</span>
-                                </label>
-                                <input type="text" name="uredjaj" value="{{.Nalog.Uredjaj}}"
-                                    placeholder="npr. Laptop HP EliteBook 840"
-                                    style="width:100%;">
-                            </div>
-                            <div>
-                                <label class="polje-labela">Serijski broj</label>
-                                <input type="text" name="serijski_broj" value="{{.Nalog.SerijskiBroj}}"
-                                    placeholder="npr. 5CD1234XYZ"
-                                    style="width:100%;">
-                            </div>
-                        </div>
+                <!-- prikaz izabranog postojećeg klijenta -->
+                <template x-if="izabrani">
+                    <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--pozadina);border:1px solid var(--ivica);border-radius:10px;">
                         <div>
-                            <label class="polje-labela">
-                                Opis kvara <span style="color:#dc2626;">*</span>
-                            </label>
-                            <textarea name="opis_kvara" rows="3"
-                                placeholder="Opišite problem koji je klijent prijavio..."
-                                style="width:100%;resize:vertical;">{{.Nalog.OpisKvara}}</textarea>
+                            <div style="font-weight:600;color:var(--tekst-glavni);" x-text="naziv(izabrani)"></div>
+                            <div style="font-size:12px;color:var(--tekst-sporedni);"
+                                x-text="detalj(izabrani)"></div>
                         </div>
-                        <div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
-                            <div>
-                                <label class="polje-labela">Oštećenja pri prijemu</label>
-                                <input type="text" name="ostecenja" value="{{.Nalog.Ostecenja}}"
-                                    placeholder="npr. ogrebotina na ekranu"
-                                    style="width:100%;">
+                        <button type="button" class="btn-sekundarno" @click="ocisti()" style="padding:4px 10px;">Promeni</button>
+                    </div>
+                </template>
+
+                <!-- pretraga postojećeg (kad nijedan nije izabran) -->
+                <div x-show="nijeIzabran" style="position:relative;" @click.outside="prikaziListu=false">
+                    <label class="polje-labela">Pretraži postojećeg klijenta</label>
+                    <input type="text" x-model="pretraga" autocomplete="off"
+                        @focus="prikaziListu=true" @input="prikaziListu=true"
+                        @keydown.enter.prevent="potvrdiNovog()"
+                        placeholder="Ukucajte početak imena ili naziva..." style="width:100%;">
+                    <div x-show="prikaziListu && filtrirani.length" x-cloak
+                        style="position:absolute;z-index:30;left:0;right:0;margin-top:4px;background:var(--pozadina-kartica,var(--pozadina));border:1px solid var(--ivica);border-radius:10px;max-height:240px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.14);">
+                        <template x-for="k in filtrirani" :key="k.ID">
+                            <div @click="izaberi(k)" class="klijent-stavka"
+                                style="padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--ivica);">
+                                <div style="font-weight:500;color:var(--tekst-glavni);" x-text="naziv(k)"></div>
+                                <div style="font-size:12px;color:var(--tekst-sporedni);"
+                                    x-text="detalj(k)"></div>
                             </div>
-                            <div>
-                                <label class="polje-labela">PIN / lozinka uređaja</label>
-                                <input type="text" name="pin_uredjaja" value="{{.Nalog.PinUredjaja}}"
-                                    placeholder="npr. 1234"
-                                    style="width:100%;">
-                            </div>
-                        </div>
-                        <div>
-                            <label class="polje-labela">Pribor i oprema</label>
-                            <input type="text" name="pribor" value="{{.Nalog.Pribor}}"
-                                placeholder="npr. punjač, torbica, miš"
-                                style="width:100%;">
-                        </div>
+                        </template>
                     </div>
                 </div>
 
-                <!-- klijent i tehničar -->
-                <div>
-                    <div class="sekcija-naslov">Klijent i tehničar</div>
+                <!-- polja za NOVOG klijenta (kad nijedan postojeći nije izabran) -->
+                <div x-show="nijeIzabran" class="kolona" style="gap:12px;">
+                    <div style="font-size:12px;color:var(--tekst-sporedni);">
+                        Ako klijent ne postoji, popunite polja — biće sačuvan zajedno sa nalogom.
+                    </div>
+
+                    <!-- fizičko lice -->
+                    <template x-if="tip==='fizicko'">
+                        <div class="kolona" style="gap:12px;">
+                            <div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+                                <div>
+                                    <label class="polje-labela">Ime</label>
+                                    <input type="text" name="ime" x-model="noviIme" style="width:100%;">
+                                </div>
+                                <div>
+                                    <label class="polje-labela">Prezime</label>
+                                    <input type="text" name="prezime" x-model="noviPrezime" style="width:100%;">
+                                </div>
+                            </div>
+                            <div>
+                                <label class="polje-labela">JMBG</label>
+                                <input type="text" name="jmbg" style="width:100%;">
+                            </div>
+                        </div>
+                    </template>
+
+                    <!-- pravno lice -->
+                    <template x-if="tip==='pravno'">
+                        <div class="kolona" style="gap:12px;">
+                            <div>
+                                <label class="polje-labela">Naziv firme</label>
+                                <input type="text" name="naziv_firme" x-model="noviNaziv" style="width:100%;">
+                            </div>
+                            <div>
+                                <label class="polje-labela">PIB</label>
+                                <input type="text" name="pib" style="width:100%;">
+                            </div>
+                        </div>
+                    </template>
+
+                    <!-- zajednička polja -->
                     <div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                         <div>
-                            <label class="polje-labela">Klijent</label>
-                            <select name="klijent_id" style="width:100%;">
-                                <option value="">— bez klijenta —</option>
-                                {{range .Klijenti}}
-                                <option value="{{.ID}}"
-                                    {{if eq .ID $.Nalog.KlijentIDVrednost}}selected{{end}}>
-                                    {{.PunoIme}}
-                                </option>
-                                {{end}}
-                            </select>
+                            <label class="polje-labela">Telefon</label>
+                            <input type="text" name="telefon" style="width:100%;">
                         </div>
                         <div>
-                            <label class="polje-labela">Tehničar</label>
-                            <select name="tehnicar_id" style="width:100%;">
-                                <option value="">— nedodeljen —</option>
-                                {{range .Tehnicari}}
-                                <option value="{{.ID}}"
-                                    {{if eq .ID $.Nalog.TehnicarIDVrednost}}selected{{end}}>
-                                    {{.KorisnickoIme}}
-                                </option>
-                                {{end}}
-                            </select>
+                            <label class="polje-labela">Mesto</label>
+                            <input type="text" name="mesto" style="width:100%;">
                         </div>
                     </div>
+                    <div>
+                        <label class="polje-labela">E-pošta</label>
+                        <input type="text" name="email" style="width:100%;">
+                    </div>
                 </div>
 
-                <!-- status i datumi -->
+                <!-- tehničar -->
                 <div>
-                    <div class="sekcija-naslov">Status i datumi</div>
-                    <div class="kolona" style="gap:12px;">
-                        <div>
-                            <label class="polje-labela">Status naloga</label>
-                            <select name="status" style="width:100%;">
-                                {{range .SviStatusi}}
-                                <option value="{{.}}" {{if eq . $.Nalog.Status}}selected{{end}}>{{.}}</option>
-                                {{end}}
-                            </select>
-                        </div>
-                        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;">
-                            <div>
-                                <label class="polje-labela">Datum prijema</label>
-                                <input type="date" name="datum_prijema"
-                                    value="{{.Nalog.DatumPrijema.Format "2006-01-02"}}"
-                                    style="width:100%;">
-                            </div>
-                            <div>
-                                <label class="polje-labela">Datum završetka</label>
-                                <input type="date" name="datum_zavrsetka"
-                                    value="{{if .Nalog.DatumZavrsetka}}{{.Nalog.DatumZavrsetka.Format "2006-01-02"}}{{end}}"
-                                    style="width:100%;">
-                            </div>
-                        </div>
-                        <div>
-                            <label class="polje-labela">Garancija do</label>
-                            <input type="date" name="garancija_do" id="garancija_do_input"
-                                value="{{if .Nalog.GarancijaDo}}{{.Nalog.GarancijaDo.Format "2006-01-02"}}{{end}}"
-                                {{if not .Nalog.GarancijaDo}}disabled{{end}}
-                                style="width:100%;{{if not .Nalog.GarancijaDo}}opacity:0.4;{{end}}">
-                        </div>
-                        <!-- svič bez garancije -->
-                        <div style="display:flex;align-items:center;gap:10px;">
-                            <label class="toggl" style="flex-shrink:0;">
-                                <input type="checkbox" id="bez_garancije_chk"
-                                    {{if not .Nalog.GarancijaDo}}checked{{end}}
-                                    onchange="toggleGarancija(this)">
-                                <span class="toggl-klizac"></span>
-                            </label>
-                            <input type="hidden" name="bez_garancije" id="bez_garancije_val"
-                                value="{{if not .Nalog.GarancijaDo}}1{{else}}0{{end}}">
-                            <span style="font-size:13px;color:var(--tekst-sporedni);">Bez garancije</span>
-                        </div>
-                    </div>
+                    <label class="polje-labela">Tehničar</label>
+                    <select name="tehnicar_id" style="width:100%;">
+                        <option value="">— nedodeljen —</option>
+                        {{range .Tehnicari}}
+                        <option value="{{.ID}}"
+                            {{if eq .ID $.Nalog.TehnicarIDVrednost}}selected{{end}}>
+                            {{.KorisnickoIme}}
+                        </option>
+                        {{end}}
+                    </select>
                 </div>
-
-                <!-- cene -->
-                <div>
-                    <div class="sekcija-naslov">Cene (din)</div>
-                    <div class="forma-grid-4" style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;">
-                        <div>
-                            <label class="polje-labela">Procena od</label>
-                            <input type="number" name="cena_od" min="0" step="0.01"
-                                value="{{if .Nalog.CenaOd}}{{.Nalog.CenaOd}}{{end}}"
-                                placeholder="0" style="width:100%;">
-                        </div>
-                        <div>
-                            <label class="polje-labela">Procena do</label>
-                            <input type="number" name="cena_do" min="0" step="0.01"
-                                value="{{if .Nalog.CenaDo}}{{.Nalog.CenaDo}}{{end}}"
-                                placeholder="0" style="width:100%;">
-                        </div>
-                        <div>
-                            <label class="polje-labela">Cena rada</label>
-                            <input type="number" name="cena_konacna" min="0" step="0.01"
-                                value="{{if .Nalog.CenaKonacna}}{{.Nalog.CenaKonacna}}{{end}}"
-                                placeholder="0" style="width:100%;">
-                        </div>
-                        <div>
-                            <label class="polje-labela">Avans</label>
-                            <input type="number" name="avans" min="0" step="0.01"
-                                value="{{if .Nalog.Avans}}{{.Nalog.Avans}}{{end}}"
-                                placeholder="0" style="width:100%;">
-                        </div>
-                    </div>
-                </div>
-
-                <!-- napomena -->
-                <div>
-                    <label class="polje-labela">Napomena</label>
-                    <textarea name="napomena" rows="2"
-                        placeholder="Interna napomena o nalogu..."
-                        style="width:100%;resize:vertical;">{{.Nalog.Napomena}}</textarea>
-                </div>
-
-                <!-- dugmad -->
-                <div style="display:flex;justify-content:flex-end;gap:10px;margin-top:6px;">
-                    <a href="/servis" class="btn-sekundarno">Odustani</a>
-                    <button type="submit" class="btn-primarno">
-                        {{if .Izmena}}Sačuvaj izmene{{else}}Sačuvaj nalog{{end}}
-                    </button>
-                </div>
-
             </div>
-        </form>
-    </div>
+        </div>
+
+        <!-- ===================== KARTICA: STATUS I DATUMI ===================== -->
+        <div class="kartica forma-kartica animiraj">
+            <div class="sekcija-naslov">Status i datumi</div>
+            <div class="kolona" style="gap:12px;">
+                <div>
+                    <label class="polje-labela">Status naloga</label>
+                    <select name="status" style="width:100%;">
+                        {{range .SviStatusi}}
+                        <option value="{{.}}" {{if eq . $.Nalog.Status}}selected{{end}}>{{.}}</option>
+                        {{end}}
+                    </select>
+                </div>
+                <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;">
+                    <div>
+                        <label class="polje-labela">Datum prijema</label>
+                        <input type="date" name="datum_prijema"
+                            value="{{.Nalog.DatumPrijema.Format "2006-01-02"}}"
+                            style="width:100%;">
+                    </div>
+                    <div>
+                        <label class="polje-labela">Datum završetka</label>
+                        <input type="date" name="datum_zavrsetka"
+                            value="{{if .Nalog.DatumZavrsetka}}{{.Nalog.DatumZavrsetka.Format "2006-01-02"}}{{end}}"
+                            style="width:100%;">
+                    </div>
+                </div>
+                <div>
+                    <label class="polje-labela">Garancija do</label>
+                    <input type="date" name="garancija_do" id="garancija_do_input"
+                        value="{{if .Nalog.GarancijaDo}}{{.Nalog.GarancijaDo.Format "2006-01-02"}}{{end}}"
+                        {{if not .Nalog.GarancijaDo}}disabled{{end}}
+                        style="width:100%;{{if not .Nalog.GarancijaDo}}opacity:0.4;{{end}}">
+                </div>
+                <!-- svič bez garancije -->
+                <div style="display:flex;align-items:center;gap:10px;">
+                    <label class="toggl" style="flex-shrink:0;">
+                        <input type="checkbox" id="bez_garancije_chk"
+                            {{if not .Nalog.GarancijaDo}}checked{{end}}
+                            onchange="toggleGarancija(this)">
+                        <span class="toggl-klizac"></span>
+                    </label>
+                    <input type="hidden" name="bez_garancije" id="bez_garancije_val"
+                        value="{{if not .Nalog.GarancijaDo}}1{{else}}0{{end}}">
+                    <span style="font-size:13px;color:var(--tekst-sporedni);">Bez garancije</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- ===================== KARTICA: CENE I NAPOMENA ===================== -->
+        <div class="kartica forma-kartica animiraj">
+            <div class="sekcija-naslov">Cene (din)</div>
+            <div class="forma-grid-4" style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;">
+                <div>
+                    <label class="polje-labela">Procena od</label>
+                    <input type="number" name="cena_od" min="0" step="0.01"
+                        value="{{if .Nalog.CenaOd}}{{.Nalog.CenaOd}}{{end}}"
+                        placeholder="0" style="width:100%;">
+                </div>
+                <div>
+                    <label class="polje-labela">Procena do</label>
+                    <input type="number" name="cena_do" min="0" step="0.01"
+                        value="{{if .Nalog.CenaDo}}{{.Nalog.CenaDo}}{{end}}"
+                        placeholder="0" style="width:100%;">
+                </div>
+                <div>
+                    <label class="polje-labela">Cena rada</label>
+                    <input type="number" name="cena_konacna" min="0" step="0.01"
+                        value="{{if .Nalog.CenaKonacna}}{{.Nalog.CenaKonacna}}{{end}}"
+                        placeholder="0" style="width:100%;">
+                </div>
+                <div>
+                    <label class="polje-labela">Avans</label>
+                    <input type="number" name="avans" min="0" step="0.01"
+                        value="{{if .Nalog.Avans}}{{.Nalog.Avans}}{{end}}"
+                        placeholder="0" style="width:100%;">
+                </div>
+            </div>
+            <div style="margin-top:16px;">
+                <label class="polje-labela">Napomena</label>
+                <textarea name="napomena" rows="2"
+                    placeholder="Interna napomena o nalogu..."
+                    style="width:100%;resize:vertical;">{{.Nalog.Napomena}}</textarea>
+            </div>
+
+            <!-- dugmad -->
+            <div style="display:flex;justify-content:flex-end;gap:10px;margin-top:18px;">
+                <a href="/servis" class="btn-sekundarno">Odustani</a>
+                <button type="submit" class="btn-primarno">
+                    {{if .Izmena}}Sačuvaj izmene{{else}}Sačuvaj nalog{{end}}
+                </button>
+            </div>
+        </div>
+
+    </form>
 </div>
+
+<style>
+    .tip-opcija {
+        display: flex; align-items: center; gap: 8px;
+        padding: 8px 14px; border: 1px solid var(--ivica); border-radius: 10px;
+        cursor: pointer; font-size: 14px; color: var(--tekst-glavni); user-select: none;
+    }
+    .tip-opcija-akt { border-color: var(--akcentna); background: var(--pozadina); }
+    .klijent-stavka:last-child { border-bottom: none; }
+    .klijent-stavka:hover { background: var(--pozadina); }
+    [x-cloak] { display: none !important; }
+</style>
+
 <script>
-function toggleGarancija(chk) {
-    var input = document.getElementById('garancija_do_input');
-    var hidden = document.getElementById('bez_garancije_val');
-    if (chk.checked) {
-        if (input.value) input.dataset.sacuvano = input.value;
-        input.value = '';
-        input.disabled = true;
-        input.style.opacity = '0.4';
-        hidden.value = '1';
-    } else {
-        input.disabled = false;
-        input.style.opacity = '1';
-        if (input.dataset.sacuvano) input.value = input.dataset.sacuvano;
-        hidden.value = '0';
+    function toggleGarancija(chk) {
+        var input = document.getElementById('garancija_do_input');
+        var hidden = document.getElementById('bez_garancije_val');
+        if (chk.checked) {
+            if (input.value) input.dataset.sacuvano = input.value;
+            input.value = '';
+            input.disabled = true;
+            input.style.opacity = '0.4';
+            hidden.value = '1';
+        } else {
+            input.disabled = false;
+            input.style.opacity = '1';
+            if (input.dataset.sacuvano) input.value = input.dataset.sacuvano;
+            hidden.value = '0';
+        }
     }
-}
 </script>
 {{end}}