GoNtech/web/templates/stranice/prodaja.html

{{template "base" .}} {{define "naslov"}}Prodaja — NTech{{end}} {{define "sadrzaj"}}
<div style="display: flex; flex-direction: column; gap: 16px">
    {{if .Sacuvano}}
    <div class="poruka-uspeh poruka-animacija">Prodaja je uspešno sačuvana.</div>
    {{end}}

    <!-- zaglavlje sa pretragom, filterima i dugmetom -->
    <div class="prodaja-traka" style="display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap">
        <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja/nova" class="btn-primarno prodaja-traka-novo">+ Nova prodaja</a>
        <form method="GET" action="/prodaja" class="prodaja-traka-forma" style="display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; flex: 1">
            <div class="prodaja-traka-pretraga" style="flex: 1; min-width: 180px">
                <label class="polje-labela">Pretraga</label>
                <input type="text" name="pretraga" value="{{.Pretraga}}" placeholder="Broj naloga, klijent, napomena..." style="width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0.5px solid var(--ivica); border-radius: 8px; font-size: 13px; background: var(--pozadina); color: var(--tekst-glavni); outline: none" />
            </div>
            <div class="prodaja-traka-datumi" style="display: flex; gap: 10px">
                <div>
                    <label class="polje-labela">Od datuma</label>
                    <input type="date" name="od" value="{{.Od}}" style="width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0.5px solid var(--ivica); border-radius: 8px; font-size: 13px; background: var(--pozadina); color: var(--tekst-glavni); outline: none" />
                </div>
                <div>
                    <label class="polje-labela">Do datuma</label>
                    <input type="date" name="do" value="{{.Do}}" style="width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0.5px solid var(--ivica); border-radius: 8px; font-size: 13px; background: var(--pozadina); color: var(--tekst-glavni); outline: none" />
                </div>
            </div>
            <div class="prodaja-traka-akcije" style="display: flex; gap: 10px; flex-wrap: wrap">
                <label class="dugme-prekidac">
                    <input type="checkbox" name="stornirano" value="1" {{if .SamoStornirano}}checked{{end}} onchange="this.form.submit()" />
                    Samo stornirano
                </label>
                <button type="submit" class="btn-sekundarno" style="white-space: nowrap">Prikaži</button>
                {{if or .Pretraga .Od .Do .SamoStornirano}}
                <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja" class="btn-sekundarno" style="white-space: nowrap">✕ Resetuj</a>
                {{end}}
                <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja?{{if .Pretraga}}pretraga={{.Pretraga}}&{{end}}od={{.OvajMesecOd}}&do={{.OvajMesecDo}}{{if .SamoStornirano}}&stornirano=1{{end}}" class="btn-sekundarno" style="white-space: nowrap">Ovaj mesec</a>
            </div>
        </form>
    </div>

    <!-- desktop tabela -->
    <div class="kartica prodaja-tabela animiraj" style="padding: 0; overflow: hidden">
        <div style="overflow-x: auto">
            <table class="tabela">
                <thead>
                    <tr style="border-bottom: 0.5px solid var(--ivica)">
                        <th style="padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 500; color: var(--tekst-sporedni)">Broj naloga</th>
                        <th style="padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 500; color: var(--tekst-sporedni)">Datum</th>
                        <th style="padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 500; color: var(--tekst-sporedni)">Klijent</th>
                        <th style="padding: 12px 16px; text-align: right; font-size: 12px; font-weight: 500; color: var(--tekst-sporedni)">Ukupno</th>
                        <th style="padding: 12px 16px; text-align: center; font-size: 12px; font-weight: 500; color: var(--tekst-sporedni)">Akcije</th>
                    </tr>
                </thead>
                <tbody>
                    {{range .Nalozi}}
                    <tr class="animiraj red-tabele">
                        <td style="padding: 12px 16px; font-size: 13px; font-family: monospace; color: var(--tekst-glavni)">
                            {{.BrojNaloga}}
                            {{if .Stornirano}}<span class="status-badge status-stornirano" style="margin-left: 8px">Stornirano</span>{{end}}
                            {{if index $.NemaFiskalnog .ID}}<span style="display:inline-block;margin-left:6px;font-size:10px;font-weight:600;padding:1px 6px;border-radius:4px;background:#fef3c7;color:#92400e;border:1px solid #fde68a;vertical-align:middle;" title="Fiskalni račun nije izdat">!</span>{{end}}
                        </td>
                        <td style="padding: 12px 16px; font-size: 13px; color: var(--tekst-sporedni); white-space: nowrap">{{.Datum.Format "02.01.2006."}}</td>
                        <td style="padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--tekst-glavni)">{{if .KlijentNaziv}}{{.KlijentNaziv}}{{else}}—{{end}}</td>
                        <td style="padding: 12px 16px; text-align: right; font-size: 14px; font-weight: 500; color: var(--tekst-glavni)">{{dinari .Ukupno}} din</td>
                        <td style="padding: 12px 16px; text-align: center">
                            <div style="display: flex; align-items: center; justify-content: center; gap: 8px">
                                <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja/{{.ID}}" class="btn-primarno-malo">Detalji</a>
                            </div>
                        </td>
                    </tr>
                    {{else}}
                    <tr>
                        <td colspan="5" style="padding: 32px; text-align: center; font-size: 14px; color: var(--tekst-sporedni)">
                            {{if or $.Pretraga $.Od $.Do $.SamoStornirano}} Nema naloga koji odgovaraju filteru. {{else}} Nema prodajnih naloga.
                            <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja/nova" style="color: var(--sb-akcent)">Dodaj prvu prodaju.</a>
                            {{end}}
                        </td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
    </div>

    <!-- mobilne kartice -->
    <div class="prodaja-kartice">
        {{range .Nalozi}}
        <div class="kartica prodaja-kartica animiraj">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px">
                <div>
                    <div style="font-size: 13px; font-family: monospace; color: var(--tekst-glavni)">
                        {{.BrojNaloga}}
                        {{if .Stornirano}}<span class="status-badge status-stornirano" style="margin-left: 8px">Stornirano</span>{{end}}
                        {{if index $.NemaFiskalnog .ID}}<span style="display:inline-block;margin-left:4px;font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px;background:#fef3c7;color:#92400e;border:1px solid #fde68a;vertical-align:middle;" title="Fiskalni račun nije izdat">!</span>{{end}}
                    </div>
                    <div style="font-size: 14px; font-weight: 500; color: var(--tekst-glavni); margin-top: 2px">{{if .KlijentNaziv}}{{.KlijentNaziv}}{{else}}Bez klijenta{{end}}</div>
                    <div style="font-size: 12px; color: var(--tekst-sporedni); margin-top: 2px">{{.Datum.Format "02.01.2006."}}</div>
                </div>
                <div style="font-size: 15px; font-weight: 500; color: var(--tekst-glavni); white-space: nowrap">{{dinari .Ukupno}} din</div>
            </div>
            <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja/{{.ID}}" class="btn-primarno-malo" style="justify-content: center; width: 100%; box-sizing: border-box">Detalji</a>
        </div>
        {{else}}
        <div class="prazno-stanje">
            {{if or $.Pretraga $.Od $.Do $.SamoStornirano}} Nema naloga koji odgovaraju filteru. {{else}} Nema prodajnih naloga.
            <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja/nova" style="color: var(--sb-akcent)">Dodaj prvu prodaju.</a>
            {{end}}
        </div>
        {{end}}
    </div>
</div>
{{end}}