{{ template "base" . }}

{{ define "naslov" }}Dashboard — NTech{{ end }}

{{ define "dodatni-css" }}
<style>
  .dash-stat:nth-child(1) { animation-delay: 0.04s; }
  .dash-stat:nth-child(2) { animation-delay: 0.10s; }
  .dash-stat:nth-child(3) { animation-delay: 0.16s; }
  .dash-stat:nth-child(4) { animation-delay: 0.22s; }
  .dash-stat:nth-child(5) { animation-delay: 0.28s; }
  .dash-kartica:nth-child(1) { animation-delay: 0.20s; }
  .dash-kartica:nth-child(2) { animation-delay: 0.28s; }
  .dash-kartica:nth-child(3) { animation-delay: 0.36s; }
</style>
{{ end }}

{{ define "sadrzaj" }}
{{ if .FlashGreska }}
	<div class="poruka-greska animiraj" style="margin-bottom:16px;">{{ .FlashGreska }}</div>
{{ end }}
{{ if gt .PrazninaKnjige.Ukupno 0 }}
	<div class="kartica animiraj" style="margin-bottom:16px;background:#fef3c7;border:1px solid #fde68a;">
		<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;">
			<div>
				<div style="font-weight:600;color:#92400e;">Knjigovodstvo — praznine u evidenciji</div>
				<div style="font-size:13px;color:#92400e;margin-top:2px;">
					{{ if gt .PrazninaKnjige.BezKir 0 }}{{ .PrazninaKnjige.BezKir }} bez KIR upisa{{ if or (gt .PrazninaKnjige.BezKpo 0) (gt .PrazninaKnjige.BezFiskalnog 0) (gt .PrazninaKnjige.BezRefunda 0) }}, {{ end }}{{ end }}{{ if gt .PrazninaKnjige.BezKpo 0 }}{{ .PrazninaKnjige.BezKpo }} bez KPO upisa{{ if or (gt .PrazninaKnjige.BezFiskalnog 0) (gt .PrazninaKnjige.BezRefunda 0) }}, {{ end }}{{ end }}{{ if gt .PrazninaKnjige.BezFiskalnog 0 }}{{ .PrazninaKnjige.BezFiskalnog }} bez fiskalnog računa{{ if gt .PrazninaKnjige.BezRefunda 0 }}, {{ end }}{{ end }}{{ if gt .PrazninaKnjige.BezRefunda 0 }}{{ .PrazninaKnjige.BezRefunda }} storno bez fiskalnog refunda{{ end }}
					{{ if gt .PrazninaKnjige.SumnjiviDupli 0 }}{{ if or (gt .PrazninaKnjige.BezKir 0) (gt .PrazninaKnjige.BezKpo 0) (gt .PrazninaKnjige.BezFiskalnog 0) (gt .PrazninaKnjige.BezRefunda 0) }} · {{ end }}{{ .PrazninaKnjige.SumnjiviDupli }} sumnjivih duplikata (proveri ručno){{ end }}
				</div>
			</div>
			<div style="display:flex;gap:8px;flex-wrap:wrap;">
				{{ if gt .PrazninaKnjige.BezKir 0 }}<a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/pdv/kir" class="btn-sekundarno" style="font-size:13px;">KIR</a>{{ end }}
				{{ if gt .PrazninaKnjige.BezKpo 0 }}<a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/kpo" class="btn-sekundarno" style="font-size:13px;">KPO</a>{{ end }}
				{{ if gt .PrazninaKnjige.BezFiskalnog 0 }}<a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja?prikazi=sve" class="btn-sekundarno" style="font-size:13px;">Fiskalizacija</a>{{ end }}
				{{ if gt .PrazninaKnjige.BezRefunda 0 }}<a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja?stornirano=1&prikazi=sve" class="btn-sekundarno" style="font-size:13px;">Storno bez refunda</a>{{ end }}
			</div>
		</div>
	</div>
{{ end }}
<div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
	<!-- stat kartice -->
	<a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/magacin" class="kartica dash-stat animiraj kartica-link">
		<div class="dash-ikona dash-ikona-plava">
			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4f7ef8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
				<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
			</svg>
		</div>
		<div style="font-size:22px;font-weight:500;color:var(--tekst-glavni);">{{ .BrojArtikala }}</div>
		<div style="font-size:14px;color:var(--tekst-glavni);margin-top:4px;font-weight:500;">Artikala na stanju</div>
	</a>

	<a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/servis" class="kartica dash-stat animiraj kartica-link">
		<div class="dash-ikona dash-ikona-zelena">
			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
				<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
			</svg>
		</div>
		<div style="font-size:22px;font-weight:500;color:var(--tekst-glavni);">{{ .AktivniServisi }}</div>
		<div style="font-size:14px;color:var(--tekst-glavni);margin-top:4px;font-weight:500;">Aktivnih servisa</div>
	</a>


	<a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/magacin?kriticni=1" class="kartica dash-stat animiraj kartica-link">
		<div class="dash-ikona dash-ikona-crvena">
			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
				<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
				<line x1="12" y1="9" x2="12" y2="13" />
				<line x1="12" y1="17" x2="12.01" y2="17" />
			</svg>
		</div>
		<div style="font-size:22px;font-weight:500;color:var(--tekst-glavni);">{{ .KriticnaZaliha }}</div>
		<div style="font-size:14px;color:var(--tekst-glavni);margin-top:4px;font-weight:500;">Kritično niska zaliha</div>
	</a>

	<a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/podsetnici" class="kartica dash-stat animiraj kartica-link">
		<div class="dash-ikona dash-ikona-nebo">
			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
				<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
				<path d="M13.73 21a2 2 0 0 1-3.46 0" />
			</svg>
		</div>
		<div style="font-size:22px;font-weight:500;color:var(--tekst-glavni);">{{ .AktivniPodsetnici }}</div>
		<div style="font-size:14px;color:var(--tekst-glavni);margin-top:4px;font-weight:500;">Aktivnih podsetnika</div>
	</a>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
	<!-- poslednji servisi -->
	<div class="kartica dash-kartica animiraj">
		<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
			<span style="font-size:14px;font-weight:500;color:var(--tekst-glavni);">Poslednji servisi</span>
		</div>
		{{ range .PoslednjiServisi }}
			<a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/servis/{{ .ID }}" style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--ivica);text-decoration:none;">
				<div style="width:8px;height:8px;border-radius:50%;flex-shrink:0;background:{{ .BojaTacke }};"></div>
				<span style="font-size:13px;color:var(--tekst-glavni);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ .Uredjaj }}</span>
				<span style="font-size:11px;color:var(--tekst-sporedni);white-space:nowrap;">{{ .DatumPrijema }}</span>
			</a>
		{{ else }}
			<div style="font-size:13px;color:var(--tekst-sporedni);padding:8px 0;">Nema servisnih naloga.</div>
		{{ end }}
	</div>

	<!-- kritične zalihe -->
	<div class="kartica dash-kartica animiraj">
		<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
			<span style="font-size:14px;font-weight:500;color:var(--tekst-glavni);">Kritične zalihe</span>
		</div>
		{{ range .KriticneZalihe }}
			<div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--ivica);">
				<div style="width:8px;height:8px;border-radius:50%;flex-shrink:0;background:{{ .BojaTacke }};"></div>
				<span style="font-size:13px;color:var(--tekst-glavni);flex:1;">{{ .Naziv }}</span>
				<span style="font-size:12px;color:var(--tekst-sporedni);">{{ .Kolicina }} kom</span>
			</div>
		{{ else }}
			<div style="font-size:13px;color:var(--tekst-sporedni);padding:8px 0;">Sve zalihe su uredne.</div>
		{{ end }}
	</div>

	<!-- poslednje prodaje -->
	<div class="kartica dash-kartica animiraj">
		<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
			<span style="font-size:14px;font-weight:500;color:var(--tekst-glavni);">Poslednje prodaje</span>
		</div>
		{{ range .PoslednjeProdaje }}
			<div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--ivica);">
				<div style="flex:1;min-width:0;">
					<div style="font-size:13px;color:var(--tekst-glavni);font-family:monospace;">{{ .BrojNaloga }}</div>
					{{ if .KlijentNaziv }}
						<div style="font-size:11px;color:var(--tekst-sporedni);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ .KlijentNaziv }}</div>
					{{ end }}
				</div>
				<div style="text-align:right;flex-shrink:0;">
					<div style="font-size:13px;font-weight:500;color:var(--tekst-glavni);">{{ dinariCeli .Ukupno }} din</div>
					<div style="font-size:11px;color:var(--tekst-sporedni);margin-top:1px;">{{ .Datum }}</div>
				</div>
			</div>
		{{ else }}
			<div style="font-size:13px;color:var(--tekst-sporedni);padding:8px 0;">Nema prodajnih naloga.</div>
		{{ end }}
	</div>
</div>
{{ end }}