{{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}}
<div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
    <!-- stat kartice -->
    <div class="kartica dash-stat animiraj">
        <div style="width:36px;height:36px;border-radius:8px;background:#eff2ff;display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
            <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:12px;color:var(--tekst-sporedni);margin-top:4px;">Artikala na stanju</div>
    </div>

    <div class="kartica dash-stat animiraj">
        <div style="width:36px;height:36px;border-radius:8px;background:#f0fdf4;display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
            <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:12px;color:var(--tekst-sporedni);margin-top:4px;">Aktivnih servisa</div>
    </div>

    {{if index .Dozvole "dashboard.prihod"}}
    <div class="kartica dash-stat animiraj">
        <div style="width:36px;height:36px;border-radius:8px;background:#fff7ed;display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
        </div>
        <div style="font-size:22px;font-weight:500;color:var(--tekst-glavni);">{{printf "%.0f" .PrihodOvogMeseca}} din</div>
        <div style="font-size:12px;color:var(--tekst-sporedni);margin-top:4px;">Prihod ovog meseca</div>
    </div>
    {{end}}

    <div class="kartica dash-stat animiraj">
        <div style="width:36px;height:36px;border-radius:8px;background:#fef2f2;display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
            <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:12px;color:var(--tekst-sporedni);margin-top:4px;">Kritično niska zaliha</div>
    </div>

    <a href="/podsetnici" class="kartica dash-stat animiraj" style="text-decoration:none;display:block;">
        <div style="width:36px;height:36px;border-radius:8px;background:#f0f9ff;display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
            <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:12px;color:var(--tekst-sporedni);margin-top:4px;">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}}
        <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;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>
        </div>
        {{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>
            <span style="font-size:11px;padding:2px 8px;border-radius:20px;background:rgba(220,38,38,0.15);color:#ef4444;font-weight:500;">Upozorenje</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);">{{printf "%.0f" .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}}