{% extends 'index.html' %}
{% block content %}

<div class="container" style="margin-top: 20px;">
    <a class="btn btn-primary" href="{% url 'fakturi' %}">Назад</a>
    <form method="POST" id="form">
        {% csrf_token %}
        <div class="row mt-2">
            <div class="col-2 form-floating">
                <input class="stavkaid" type="hidden" name="stavka" value="{{ stavka.stavkaid }}">
                <input type="text" class="form-control" id="broj" name="broj" placeholder="Broj" value="{{ stavka.broj }}">
                <label for="broj">Број</label>
            </div>
            <div class="col-8 form-floating">
                <input class="klientid" type="hidden" name="klient" value="{{ stavka.klientid.klientid }}">
                <input type="text" class="form-control" id="klient" placeholder="Klient" value="{{ stavka.klientid }}">
                <label for="klient">Клиент</label>
            </div>
            <div class="col-2 form-floating">
                <input type="date" class="form-control" id="datum" name="datum" placeholder="Datum" value="{{ stavka.datum|date:'Y-m-d' }}">
                <label for="datum">Датум</label>
            </div>
        </div>

        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Артикл</th>
                    <th scope="col">Количина</th>
                    <th scope="col">ДДВ (%)</th>
                    <th scope="col">Цена Без ДДВ</th>
                    <th scope="col">Цена со ДДВ</th>
                </tr>
            </thead>
            <tbody class="table-group-divider">
                {% for artikl in artikli %}
                    <tr>
                        <input class="lagerlist" type="hidden" name="lagerlist_id" value="{{ artikl.lagerlist_id }}">
                        <input class="id" type="hidden" name="id" value="{{ artikl.artikal.artikal_id }}">
                        <td scope="col">
                            <input type="text" value="{{ artikl.artikal.sifra }}" class="form-control sifra">
                        </td>
                        <td scope="col" class="col-md-6">
                            <input type="text" value="{{ artikl.artikal.artikal_ime }}" class="form-control artikl">
                        </td>
                        <td scope="col">
                            <input type="text" value="{{ artikl.kolicina }}" name="kol" class="form-control kol">
                        </td>
                        <td scope="col">
                            <input type="text" value="{{ artikl.artikal.ddvid }}" class="form-control ddv">
                        </td>
                        <td scope="col">
                            <input type="text" value="{{ artikl.artikal.cena }}" name="cenabezddv" class="form-control cenabezddv">
                        </td>
                        <td scope="col">
                            <input type="text" value="{{ artikl.artikal.cenasoddv }}" name="cenasoddv" class="form-control cenasoddv">
                        </td>
                        <td scope="col" class="del-row" style="cursor: pointer; vertical-align: middle;">
                            X
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class="d-flex">
            <a class="btn btn-primary" id="new">Нов Артикл</a>
            <button type="submit" class="btn btn-primary d-flex ms-auto">Зачувај</button>
        </div>
    </form>
</div>

<script>
    $(function() {
        var artikli_items = [
            {% for item in items %}
            { value: "{{ item }}", id:"{{ item.artikal_id }}", sifra: "{{ item.sifra }}", ddv: "{{ item.ddvid }}", cenabezddv: "{{ item.cena }}", cenasoddv: "{{ item.cenasoddv }}"},
            {% endfor %}
        ];

        $(".artikl").autocomplete({
            source: artikli_items,
            select: function(event, ui) {
                $(this).parent().parent().find(".id").attr("value", ui.item.id);
                $(this).parent().parent().find(".sifra").val(ui.item.sifra);
                $(this).parent().parent().find(".ddv").val(ui.item.ddv);
                $(this).parent().parent().find(".cenabezddv").val(ui.item.cenabezddv);
                $(this).parent().parent().find(".cenasoddv").val(ui.item.cenasoddv);
            }
        });

        var klienti_items = [
            {% for klient in klienti %}
            { value: "{{ klient }}", id: "{{ klient.klientid }}"},
            {% endfor %}
        ];

        $("#klient").autocomplete({
            source: klienti_items,
            select: function(event, ui) {
                $(this).parent().parent().find(".klientid").attr("value", ui.item.id);
            }
        });

        $('#new').click(function(){
            var row = $(".table tr:last").clone();
            $(".table").append(row);
            row.find("input").val("");
            row.find(".artikl").autocomplete({
                source: artikli_items,
                select: function(event, ui) {
                    $(this).parent().parent().find(".id").attr("value", ui.item.id);
                    $(this).parent().parent().find(".sifra").val(ui.item.sifra);
                    $(this).parent().parent().find(".ddv").val(ui.item.ddv);
                    $(this).parent().parent().find(".cenabezddv").val(ui.item.cenabezddv);
                    $(this).parent().parent().find(".cenasoddv").val(ui.item.cenasoddv);
                }
            });
        });

        $('.del-row').click(function(){
            $(this).closest('tr').remove();
        });
    });
</script>

{% endblock %}