GoNtech/web/templates/stranice/nabavka_forma.html

{{template "base" .}}

{{define "naslov"}}Nova nabavka — NTech{{end}}

{{define "dodatni-css"}}
<style>
    @keyframes modalIn { from { opacity: 0; transform: translateY(-16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .forma-kartica:nth-child(1) { animation-delay: 0.04s; }
    .forma-kartica:nth-child(2) { animation-delay: 0.12s; }
    .modal-sadrzaj { animation: modalIn 0.25s ease forwards; }
</style>
{{end}}

{{define "sadrzaj"}}

<!-- lista artikala kao JSON — bezbedno serijalizovana na serveru -->
<script>var _ntechArtikli = {{.ArtikliJSON}};</script>

<div style="width:100%;" x-data="nabavkaForma">

    <!-- nazad dugme -->
    <a href="/nabavke" class="nazad-link">
        <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" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
        Nazad na nabavke
    </a>

    <form method="POST" action="/nabavke/nova">

        {{if .Greska}}
        <div class="poruka-greska greska-animacija">{{.Greska}}</div>
        {{end}}

        <!-- zaglavlje nabavke -->
        <div class="kartica forma-kartica animiraj" style="margin-bottom:16px;">
            <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
                <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">Nova nabavka</span>
            </div>
            <div class="kolona" style="gap:14px;">
                <div>
                    <label class="polje-labela">Dobavljač</label>
                    <select name="dobavljac_id" style="width:100%;">
                        <option value="">— bez dobavljača —</option>
                        {{range .Dobavljaci}}
                        <option value="{{.ID}}">{{.Naziv}}</option>
                        {{end}}
                    </select>
                </div>
                <div>
                    <label class="polje-labela">Napomena</label>
                    <textarea name="napomena" rows="2"
                        placeholder="Interna napomena o nabavci..."
                        style="width:100%;resize:vertical;"></textarea>
                </div>
            </div>
        </div>

        <!-- stavke -->
        <div class="kartica forma-kartica animiraj" style="margin-bottom:16px;">
            <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;">
                <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">Stavke</span>
                <div style="display:flex;gap:8px;flex-wrap:wrap;">
                    <button type="button" @click="otvoriModal()"
                        style="padding:6px 14px;background:var(--kartica);color:var(--tekst-sporedni);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;transition:background 0.2s;"
                        onmouseover="this.style.background='var(--pozadina)'" onmouseout="this.style.background='var(--kartica)'">
                        + Novi artikal
                    </button>
                    <button type="button" @click="dodajStavku()" class="btn-primarno" style="font-size:13px;padding:6px 14px;">
                        + Dodaj stavku
                    </button>
                </div>
            </div>

            <!-- desktop tabela stavki -->
            <div class="stavke-tabela-wrapper" style="overflow-x:auto;">
                <table class="tabela">
                    <thead>
                        <tr style="border-bottom:0.5px solid var(--ivica);">
                            <th style="padding:8px 10px;text-align:left;font-size:12px;font-weight:500;color:var(--tekst-sporedni);">Artikal</th>
                            <th style="padding:8px 10px;text-align:center;font-size:12px;font-weight:500;color:var(--tekst-sporedni);width:90px;">Količina</th>
                            <th style="padding:8px 10px;text-align:right;font-size:12px;font-weight:500;color:var(--tekst-sporedni);width:130px;">Cena/kom (din)</th>
                            <th style="padding:8px 10px;text-align:right;font-size:12px;font-weight:500;color:var(--tekst-sporedni);width:110px;">Ukupno</th>
                            <th style="width:40px;"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(stavka, i) in stavke" :key="i">
                            <tr style="border-bottom:0.5px solid var(--ivica);">
                                <td style="padding:8px 10px;">
                                    <select :name="'artikal_id[]'" x-model="stavka.artikal_id"
                                        :disabled="isMobile" style="width:100%;">
                                        <option value="">— odaberi artikal —</option>
                                        <template x-for="a in artikliOpcije" :key="a.id">
                                            <option :value="a.id" x-text="a.naziv"></option>
                                        </template>
                                    </select>
                                </td>
                                <td style="padding:8px 10px;">
                                    <input type="number" :name="'kolicina[]'" x-model="stavka.kolicina"
                                        min="1" :disabled="isMobile" style="width:100%;text-align:center;">
                                </td>
                                <td style="padding:8px 10px;">
                                    <input type="number" :name="'cena_po_komadu[]'" x-model="stavka.cena"
                                        min="0" step="0.01" :disabled="isMobile" style="width:100%;text-align:right;">
                                </td>
                                <td style="padding:8px 10px;text-align:right;font-size:14px;font-weight:500;color:var(--tekst-glavni);">
                                    <span x-text="ukupnoStavke(stavka) + ' din'"></span>
                                </td>
                                <td style="padding:8px 10px;text-align:center;">
                                    <button type="button" @click="ukloniStavku(i)"
                                        x-show="stavke.length > 1"
                                        style="background:none;border:none;cursor:pointer;color:#dc2626;font-size:18px;line-height:1;padding:2px 6px;border-radius:4px;transition:background 0.15s;"
                                        onmouseover="this.style.background='rgba(220,38,38,0.08)'"
                                        onmouseout="this.style.background='none'"
                                        title="Ukloni stavku">×</button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                    <tfoot>
                        <tr style="border-top:0.5px solid var(--ivica);">
                            <td colspan="3" style="padding:10px 10px;text-align:right;font-size:13px;color:var(--tekst-sporedni);font-weight:500;">Ukupno:</td>
                            <td style="padding:10px 10px;text-align:right;font-size:15px;font-weight:600;color:var(--tekst-glavni);">
                                <span x-text="ukupnoSvega() + ' din'"></span>
                            </td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- mobilne kartice stavki (display kontroliše .stavke-kartice: none na desktopu,
                 flex na mobilnom @media — inline display:none bi pobedio @media, zato ga NEMA) -->
            <div class="stavke-kartice">
                <template x-for="(stavka, i) in stavke" :key="i">
                    <div style="border:0.5px solid var(--ivica);border-radius:8px;padding:12px;">
                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
                            <span style="font-size:13px;font-weight:500;color:var(--tekst-sporedni);"
                                x-text="'Stavka ' + (i + 1)"></span>
                            <button type="button" @click="ukloniStavku(i)"
                                x-show="stavke.length > 1"
                                style="background:none;border:0.5px solid #dc2626;color:#dc2626;cursor:pointer;font-size:13px;padding:2px 8px;border-radius:4px;">
                                Ukloni
                            </button>
                        </div>
                        <div class="kolona" style="gap:10px;">
                            <div>
                                <label style="font-size:12px;color:var(--tekst-sporedni);display:block;margin-bottom:4px;">Artikal</label>
                                <select :name="'artikal_id[]'" x-model="stavka.artikal_id"
                                    :disabled="!isMobile" style="width:100%;">
                                    <option value="">— odaberi artikal —</option>
                                    <template x-for="a in artikliOpcije" :key="a.id">
                                        <option :value="a.id" x-text="a.naziv"></option>
                                    </template>
                                </select>
                            </div>
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                                <div>
                                    <label style="font-size:12px;color:var(--tekst-sporedni);display:block;margin-bottom:4px;">Količina</label>
                                    <input type="number" :name="'kolicina[]'" x-model="stavka.kolicina" min="1" :disabled="!isMobile" style="width:100%;">
                                </div>
                                <div>
                                    <label style="font-size:12px;color:var(--tekst-sporedni);display:block;margin-bottom:4px;">Cena/kom (din)</label>
                                    <input type="number" :name="'cena_po_komadu[]'" x-model="stavka.cena" min="0" step="0.01" :disabled="!isMobile" style="width:100%;">
                                </div>
                            </div>
                            <div style="text-align:right;font-size:14px;font-weight:500;color:var(--tekst-glavni);">
                                Ukupno: <span x-text="ukupnoStavke(stavka) + ' din'"></span>
                            </div>
                        </div>
                    </div>
                </template>
                <div style="text-align:right;font-size:15px;font-weight:600;color:var(--tekst-glavni);padding:8px 4px;">
                    Ukupno: <span x-text="ukupnoSvega() + ' din'"></span>
                </div>
            </div>
        </div>

        <!-- dugmad forme -->
        <div style="display:flex;justify-content:flex-end;gap:10px;">
            <a href="/nabavke" class="btn-sekundarno">Odustani</a>
            <button type="submit" class="btn-primarno">Sačuvaj nabavku</button>
        </div>

    </form>

    <!-- modal: novi artikal -->
    <div x-show="modal" x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
        style="position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;"
        @click.self="zatvoriModal()" @keydown.escape.window="zatvoriModal()">

        <div class="kartica modal-sadrzaj" style="width:100%;max-width:440px;padding:24px;">

            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
                <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">Novi artikal</span>
                <button type="button" @click="zatvoriModal()" aria-label="Zatvori"
                    style="background:none;border:none;cursor:pointer;color:var(--tekst-sporedni);font-size:20px;line-height:1;padding:2px 6px;border-radius:4px;transition:background 0.15s;">×</button>
            </div>

            <div x-show="modalGreska" class="poruka-greska greska-animacija" x-text="modalGreska"></div>

            <div class="kolona" style="gap:14px;">
                <div>
                    <label class="polje-labela">
                        Naziv <span style="color:#dc2626;">*</span>
                    </label>
                    <input type="text" x-model="modalNaziv" x-ref="modalNazivInput"
                        placeholder="npr. RAM DDR4 8GB Kingston"
                        style="width:100%;"
                        @keydown.enter.prevent="sacuvajArtikal()">
                </div>

                <div>
                    <label class="polje-labela">Kategorija</label>
                    <select x-model="modalKategorijaID" style="width:100%;">
                        <option value="">— bez kategorije —</option>
                        {{range .Kategorije}}
                        <option value="{{.ID}}">{{.Naziv}}</option>
                        {{end}}
                    </select>
                </div>

                <div>
                    <label class="polje-labela">Prodajna cena (din)</label>
                    <input type="number" x-model="modalCena" min="0" step="0.01"
                        placeholder="0"
                        style="width:100%;">
                </div>
            </div>

            <div style="display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:14px;border-top:0.5px solid var(--ivica);">
                <button type="button" @click="zatvoriModal()" class="btn-sekundarno">Odustani</button>
                <button type="button" @click="sacuvajArtikal()" :disabled="modalUcitavanje" class="btn-primarno"
                    :style="modalUcitavanje ? 'opacity:0.6;cursor:not-allowed' : ''">
                    <span x-text="modalUcitavanje ? 'Čuvanje...' : 'Dodaj artikal'"></span>
                </button>
            </div>

        </div>
    </div>

</div>
{{end}}