{{template "base" .}}

{{define "naslov"}}Podešavanja — NTech{{end}}

{{define "dodatni-css"}}
<style>
    .custom-file-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--pozadina); border: 0.5px solid var(--ivica); border-radius: 8px; font-size: 13px; color: var(--tekst-sporedni); cursor: pointer; transition: border-color 0.2s; min-width: 0; overflow: hidden; }
    .custom-file-label:hover { border-color: var(--sb-akcent); color: var(--tekst-glavni); }
    .custom-file-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>
{{end}}

{{define "sadrzaj"}}
<div class="stranica-stack" style="width:100%;max-width:100%;">

    {{if .Sacuvano}}
    <div class="poruka-uspeh">Podešavanja su uspešno sačuvana.</div>
    {{end}}
    {{if .BackupVracen}}
    <div class="poruka-uspeh">Baza je uspešno obnovljena iz rezervne kopije.</div>
    {{end}}

    <!-- ═══════════════════════════════════════════════ OPŠTE ══ -->
    <div id="opste" style="scroll-margin-top:20px;">

    <!-- upload loga — posebna forma jer je multipart, mora biti van glavne forme -->
    <form method="POST" action="/podesavanja/logo" enctype="multipart/form-data">
        <div class="kartica animiraj" style="margin-bottom:16px;">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--sb-akcent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Logo firme</span>
            </div>
            {{if .LogoPutanja}}
            <div style="margin-bottom:12px;">
                <img src="{{.LogoPutanja}}" alt="Trenutni logo"
                    style="max-height:60px;max-width:200px;object-fit:contain;border:0.5px solid var(--ivica);border-radius:8px;padding:6px;background:var(--kartica);">
            </div>
            {{end}}
            <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
                <input type="file" id="logo-file" name="logo" accept=".png,.jpg,.jpeg,.svg"
                    style="display:none;"
                    onchange="var s=document.getElementById('logo-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
                <label for="logo-file"
                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;font-weight:500;">
                    Izaberi fajl
                </label>
                <span id="logo-ime" class="pomocni-tekst">Nijedan fajl nije izabran</span>
                <button type="submit"
                    style="padding:8px 16px;background:var(--sb-aktivan);color:var(--tekst-jak);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;"
                    onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
                    Otpremi logo
                </button>
            </div>
            <div style="font-size:12px;color:var(--tekst-sporedni);margin-top:6px;">PNG, JPG ili SVG — maksimum 2 MB</div>
        </div>
    </form>

    <!-- firma: naziv, podnazlov, adresa, telefon, PIB, logo zona -->
    <form method="POST" action="/podesavanja/sacuvaj">
        <div class="kartica animiraj" style="margin-bottom:16px;">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--sb-akcent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Firma</span>
            </div>

            <div class="kolona" style="gap:14px;">
                <div>
                    <label class="polje-labela">Naziv firme</label>
                    <input type="text" name="naziv_firme" value="{{.NazivFirme}}"
                        style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;"
                        placeholder="npr. NTech">
                </div>

                <div>
                    <label class="polje-labela">Podnazlov</label>
                    <input type="text" name="podnazlov" value="{{.Podnazlov}}"
                        style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;"
                        placeholder="npr. Servis računara">
                </div>

                <div>
                    <label class="polje-labela">Adresa</label>
                    <input type="text" name="adresa" value="{{.Adresa}}"
                        style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;"
                        placeholder="npr. Ulica i broj, Grad">
                </div>

                <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
                    <div>
                        <label class="polje-labela">Telefon</label>
                        <input type="text" name="telefon" value="{{.Telefon}}"
                            style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;"
                            placeholder="npr. +381 11 123 4567">
                    </div>
                    <div>
                        <label class="polje-labela">PIB</label>
                        <input type="text" name="pib" value="{{.PIB}}"
                            style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;"
                            placeholder="npr. 123456789">
                    </div>
                </div>

                <div>
                    <label style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:8px;">Logo zona</label>
                    <div style="display:flex;gap:10px;flex-wrap:wrap;">
                        <label style="display:flex;align-items:center;gap:8px;padding:10px 14px;border:0.5px solid var(--ivica);border-radius:8px;cursor:pointer;flex:1;{{if or (eq .LogoTip "sa_nazivom") (eq .LogoTip "tekst") (eq .LogoTip "ikonica") (not .LogoTip)}}border-color:var(--sb-akcent);background:var(--pozadina);{{end}}">
                            <input type="radio" name="logo_tip" value="sa_nazivom" {{if or (eq .LogoTip "sa_nazivom") (eq .LogoTip "tekst") (eq .LogoTip "ikonica") (not .LogoTip)}}checked{{end}} style="accent-color:var(--sb-akcent);">
                            <span style="font-size:13px;color:var(--tekst-glavni);">Sa nazivom</span>
                        </label>
                        <label style="display:flex;align-items:center;gap:8px;padding:10px 14px;border:0.5px solid var(--ivica);border-radius:8px;cursor:pointer;flex:1;{{if eq .LogoTip "bez_naziva"}}border-color:var(--sb-akcent);background:var(--pozadina);{{end}}">
                            <input type="radio" name="logo_tip" value="bez_naziva" {{if eq .LogoTip "bez_naziva"}}checked{{end}} style="accent-color:var(--sb-akcent);">
                            <span style="font-size:13px;color:var(--tekst-glavni);">Bez naziva</span>
                        </label>
                        <label style="display:flex;align-items:center;gap:8px;padding:10px 14px;border:0.5px solid var(--ivica);border-radius:8px;flex:1;{{if eq .LogoTip "slika"}}border-color:var(--sb-akcent);background:var(--pozadina);{{end}}{{if not .LogoPutanja}}opacity:0.45;cursor:not-allowed;{{else}}cursor:pointer;{{end}}">
                            <input type="radio" name="logo_tip" value="slika" {{if eq .LogoTip "slika"}}checked{{end}} {{if not .LogoPutanja}}disabled{{end}} style="accent-color:var(--sb-akcent);">
                            <span style="font-size:13px;color:var(--tekst-glavni);">Sa logom</span>
                        </label>
                    </div>
                </div>

            </div>

            <div style="display:flex;justify-content:flex-end;margin-top:20px;">
                <button type="submit"
                    style="background:var(--sb-akcent);color:#fff;border:none;padding:10px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:opacity 0.2s;"
                    onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">
                    Sačuvaj opšte
                </button>
            </div>
        </div>
    </form>

    </div><!-- /opste -->

    <!-- ══════════════════════════════════════════════ IZGLED ══ -->
    <div id="izgled" style="scroll-margin-top:20px;">

    <!-- pozadinska slika login stranice -->
    <div class="kartica animiraj" style="margin-bottom:16px;">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--sb-akcent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
            <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Pozadinska slika prijave</span>
        </div>
        {{if .LoginPozadina}}
        <div style="margin-bottom:14px;display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;">
            <img src="{{.LoginPozadina}}" alt="Trenutna pozadina"
                style="width:160px;height:90px;object-fit:cover;border:0.5px solid var(--ivica);border-radius:8px;">
            <form method="POST" action="/podesavanja/login-pozadina/ukloni">
                <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
                <button type="submit"
                    class="btn-obrisi-ghost" style="padding:7px 14px;border-radius:8px;"
                    data-potvrda="Ukloniti pozadinsku sliku?">
                    Ukloni sliku
                </button>
            </form>
        </div>
        {{end}}
        <form method="POST" action="/podesavanja/login-pozadina" enctype="multipart/form-data">
            <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
            <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                <input type="file" id="login-pozadina-file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
                    style="display:none;"
                    onchange="var s=document.getElementById('login-pozadina-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
                <label for="login-pozadina-file"
                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;font-weight:500;">
                    Izaberi fajl
                </label>
                <span id="login-pozadina-ime" class="pomocni-tekst">Nijedan fajl nije izabran</span>
                <button type="submit"
                    style="padding:8px 16px;background:var(--sb-aktivan);color:var(--tekst-jak);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;flex-shrink:0;"
                    onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
                    Otpremi sliku
                </button>
            </div>
            <div style="font-size:12px;color:var(--tekst-sporedni);margin-top:6px;">JPG, PNG ili WebP — maksimum 5 MB</div>
        </form>

        <!-- pregled login pozadine -->
        <div x-data="loginPozadinaPreview"
             data-blur-pozadine="{{.LoginPozadinaBlurPozadine}}"
             data-blur-kartice="{{.LoginPozadinaBlurKartice}}"
             data-opacity="{{.LoginPozadinaOpacity}}"
             data-zatamnjenje-kartice="{{.LoginPozadinaZatamnjenjeKartice}}"
             data-pozadina="{{.LoginPozadina}}"
             style="margin-top:20px;">

            <!-- panel za pregled -->
            <div style="position:relative;width:100%;height:220px;border-radius:8px;overflow:hidden;">
                <div :style="stilPozadine()"></div>
                <div :style="stilOverlay()"></div>
                <div style="position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;">
                    <div :style="stilKartice()">
                        <div style="font-size:11px;font-weight:600;color:white;text-align:center;margin-bottom:10px;letter-spacing:-0.2px;">NTech</div>
                        <div style="height:20px;background:rgba(255,255,255,0.1);border-radius:5px;margin-bottom:7px;border:0.5px solid rgba(255,255,255,0.15);"></div>
                        <div style="height:20px;background:rgba(255,255,255,0.1);border-radius:5px;margin-bottom:10px;border:0.5px solid rgba(255,255,255,0.15);"></div>
                        <div style="height:22px;background:#e53e3e;border-radius:5px;opacity:0.85;"></div>
                    </div>
                </div>
            </div>

            <!-- slider: zamućenje pozadine -->
            <div style="margin-top:16px;">
                <div class="red-izmedju" style="margin-bottom:6px;">
                    <span class="pomocni-tekst">Zamućenje pozadine</span>
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
                </div>
                <input type="range" x-model.number="blurPozadine" min="0" max="20" step="1"
                    class="klizac">
            </div>

            <!-- slider: zamućenje kartice -->
            <div style="margin-top:12px;">
                <div class="red-izmedju" style="margin-bottom:6px;">
                    <span class="pomocni-tekst">Zamućenje kartice (glass)</span>
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurKartice + 'px'"></span>
                </div>
                <input type="range" x-model.number="blurKartice" min="0" max="20" step="1"
                    class="klizac">
            </div>

            <!-- slider: zatamnjivanje pozadine -->
            <div style="margin-top:12px;">
                <div class="red-izmedju" style="margin-bottom:6px;">
                    <span class="pomocni-tekst">Zatamnjivanje pozadine</span>
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
                </div>
                <input type="range" x-model.number="opacity" min="0" max="80" step="1"
                    class="klizac">
            </div>

            <!-- slider: zatamnjivanje kartice NTech -->
            <div style="margin-top:12px;">
                <div class="red-izmedju" style="margin-bottom:6px;">
                    <span class="pomocni-tekst">Zatamnjivanje kartice NTech</span>
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="zatamnjenjeKartice + '%'"></span>
                </div>
                <input type="range" x-model.number="zatamnjenjeKartice" min="0" max="80" step="1"
                    class="klizac">
            </div>

            <!-- forma za čuvanje stilova -->
            <form method="POST" action="/podesavanja/login-pozadina/stilovi" style="margin-top:16px;">
                <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
                <input type="hidden" name="blur_pozadine" :value="blurPozadine">
                <input type="hidden" name="blur_kartice" :value="blurKartice">
                <input type="hidden" name="opacity" :value="opacity">
                <input type="hidden" name="zatamnjenje_kartice" :value="zatamnjenjeKartice">
                <button type="submit"
                    style="padding:9px 22px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;">
                    Sačuvaj izgled
                </button>
            </form>

        </div><!-- /x-data -->
    </div>

    </div><!-- /izgled -->

    <!-- ══════════════════════════════════════════════ SISTEM ══ -->
    <div id="sistem" style="scroll-margin-top:20px;">

    <div class="kartica animiraj" style="margin-bottom:16px;">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--sb-akcent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06-.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
            <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Sistem</span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;">
            <div class="pomocni-tekst">Verzija programa: <span style="color:var(--tekst-glavni);font-weight:500;">{{.Verzija}}</span></div>
            <div style="display:flex;gap:8px;flex-wrap:wrap;">
                <a href="/podesavanja/backup"
                    style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--kartica);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;color:var(--tekst-sporedni);text-decoration:none;transition:background 0.2s;"
                    onmouseover="this.style.background='var(--pozadina)'" onmouseout="this.style.background='var(--kartica)'">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Preuzmi backup baze
                </a>
                <button type="button" onclick="toggleBackupPanel()"
                    style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--kartica);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;color:var(--tekst-sporedni);cursor:pointer;transition:background 0.2s;"
                    onmouseover="this.style.background='var(--pozadina)'" onmouseout="this.style.background='var(--kartica)'">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><polyline points="7 5 12 10 17 5"/></svg>
                    Vrati backup baze
                </button>
            </div>
        </div>

        <!-- panel sa listom backupa -->
        <div id="backup-panel" style="display:none;margin-top:16px;border-top:0.5px solid var(--ivica);padding-top:16px;">
            <div style="font-size:13px;font-weight:500;color:var(--tekst-glavni);margin-bottom:10px;">Dostupne rezervne kopije</div>
            {{if .Backupi}}
            <div style="overflow-x:auto;">
                <table class="tabela" style="font-size:13px;">
                    <thead>
                        <tr style="border-bottom:0.5px solid var(--ivica);">
                            <th style="padding:8px 12px;text-align:left;font-weight:500;color:var(--tekst-sporedni);">Naziv fajla</th>
                            <th style="padding:8px 12px;text-align:left;font-weight:500;color:var(--tekst-sporedni);">Datum</th>
                            <th style="padding:8px 12px;text-align:right;font-weight:500;color:var(--tekst-sporedni);">Veličina</th>
                            <th style="padding:8px 12px;text-align:right;font-weight:500;color:var(--tekst-sporedni);"></th>
                        </tr>
                    </thead>
                    <tbody>
                        {{range .Backupi}}
                        <tr style="border-bottom:0.5px solid var(--ivica);">
                            <td style="padding:8px 12px;color:var(--tekst-glavni);font-family:monospace;font-size:12px;">{{.Ime}}</td>
                            <td style="padding:8px 12px;color:var(--tekst-sporedni);">{{.Datum}}</td>
                            <td style="padding:8px 12px;text-align:right;color:var(--tekst-sporedni);">{{.Velicina}}</td>
                            <td style="padding:8px 12px;text-align:right;">
                                <form method="POST" action="/podesavanja/backup/vrati"
                                      onsubmit="return confirm('Vratiti bazu na stanje od: {{.Datum}}?\n\nTrenutna baza će biti automatski sačuvana pre obnove.')">
                                    <input type="hidden" name="ime" value="{{.Ime}}">
                                    <button type="submit"
                                        class="btn-obrisi-ghost">
                                        Vrati
                                    </button>
                                </form>
                            </td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
            </div>
            {{else}}
            <div style="padding:20px;text-align:center;color:var(--tekst-sporedni);font-size:13px;">
                Nema dostupnih rezervnih kopija.
            </div>
            {{end}}
        </div>
    </div>

    </div><!-- /sistem -->

</div>

<script>
function toggleBackupPanel() {
    var p = document.getElementById('backup-panel');
    p.style.display = p.style.display === 'none' ? 'block' : 'none';
}
</script>

{{if .LogoGreska}}
<div id="toast-logo" class="toast toast-greska">
    <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" style="flex-shrink:0;"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
    {{.LogoGreska}}
</div>
<script>
(function() {
    var t = document.getElementById('toast-logo');
    if (!t) return;
    setTimeout(function() {
        t.classList.add('nestaje');
        setTimeout(function() { t.remove(); }, 300);
    }, 4000);
})();
</script>
{{end}}
{{end}}