{{template "base" .}}

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

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

    <div class="kartica animiraj">
        <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="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
            <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">L-PFR veza</span>
        </div>

        <form method="POST" action="/podesavanja/sacuvaj">
            <input type="hidden" name="_next" value="/admin/podesavanja/fiskalizacija">

            <div style="display:flex;flex-direction:column;gap:16px;max-width:480px;">

                <div>
                    <label for="pfr_tip" class="polje-labela">Tip fiskalnog servera</label>
                    <select id="pfr_tip" name="pfr_tip"
                        style="width:100%;padding:8px 12px;background:var(--pozadina);border:0.5px solid var(--ivica);border-radius:8px;color:var(--tekst-glavni);font-size:14px;">
                        <option value="teron" {{if eq .PfrTip "teron"}}selected{{end}}>Teron L-PFR</option>
                    </select>
                    <div class="pomocni-tekst" style="margin-top:4px;">Trenutno podržan samo Teron L-PFR.</div>
                </div>

                <div>
                    <label for="pfr_url" class="polje-labela">URL fiskalnog servera</label>
                    <input type="text" id="pfr_url" name="pfr_url" value="{{.PfrUrl}}"
                        placeholder="http://127.0.0.1:4566"
                        style="width:100%;padding:8px 12px;background:var(--pozadina);border:0.5px solid var(--ivica);border-radius:8px;color:var(--tekst-glavni);font-size:14px;box-sizing:border-box;">
                    <div class="pomocni-tekst" style="margin-top:4px;">
                        Lokalno: <code>http://127.0.0.1:4566</code> &nbsp;·&nbsp;
                        Docker: <code>http://teron-mock:4566</code>
                    </div>
                </div>

                <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
                    <button type="submit"
                        style="padding:9px 18px;background:var(--sb-akcent);border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;">
                        Sačuvaj
                    </button>
                    <button type="button"
                        hx-get="/podesavanja/fiskalizacija/test"
                        hx-include="#pfr_url"
                        hx-target="#fisk-test-rezultat"
                        hx-swap="innerHTML"
                        hx-indicator="#fisk-test-spinner"
                        style="padding:9px 18px;background:var(--kartica);border:0.5px solid var(--ivica);border-radius:8px;color:var(--tekst-sporedni);font-size:13px;cursor:pointer;">
                        Testiraj vezu
                    </button>
                    <span id="fisk-test-spinner" class="htmx-indicator" style="font-size:12px;color:var(--tekst-sporedni);">Proveravam...</span>
                </div>

            </div>
        </form>

        <div id="fisk-test-rezultat" style="margin-top:16px;"></div>

    </div>

</div>

<style>
.fisk-status {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}
.fisk-status.uspeh {
    background: color-mix(in srgb, var(--zelena, #22c55e) 12%, transparent);
    color: var(--zelena, #22c55e);
    border: 0.5px solid color-mix(in srgb, var(--zelena, #22c55e) 30%, transparent);
}
.fisk-status.greska {
    background: color-mix(in srgb, var(--crvena, #ef4444) 12%, transparent);
    color: var(--crvena, #ef4444);
    border: 0.5px solid color-mix(in srgb, var(--crvena, #ef4444) 30%, transparent);
}
.fisk-status-detalji {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
}
</style>
{{end}}