{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="row">
    <h3>Закупівля</h3>
</div>
<div class="row">
    <div class="input-field col m8 s12">
        <input id="vendor" name="vendor" type="text" class="validate" value="{{procurement.vendor}} " disabled>
        <label for="vendor">Постачальник</label>
    </div>
</div>
<div class="row">
    <div class="input-field col m2 s12">
        <input id="number" name="number" type="text" class="validate" value="{{procurement.number}} " disabled>
        <label for="number">№ Замовлення</label>
    </div>
    <div class="input-field col m2 s12">
        <input id="date" name="date" type="text" class="validate" value="{{procurement.created_at}} " disabled>
        <label for="date">Дата замовлення</label>
    </div>
    <div class="input-field col m2 s12">
        <input id="created_by" name="created_by" type="text" class="validate" value="{{procurement.created_by}} " disabled>
        <label for="created_by">Користувач</label>
    </div>
</div>
<div class="row">
    <div class="input-field col m6 s12">
        <textarea id="comment" name="comment" class="materialize-textarea" disabled>{{procurement.comment}}</textarea>
        <label for="comment">Коментар</label>
    </div>
</div>

<div class="row">
    <div class="input-field col m3 s12">
        <input type=text name="good_name" id="good_name" list="goods-list" class="validate" >
        <label for="good_name">Найменування товару</label>
        <datalist id="goods-list">
            {% for good in goods %}
                <option>{{good.name}}</option>
            {% endfor %}
        </datalist>
    </div>

    <div class="input-field col m1 s12">
        <input id="good_quantity" name="good_quantity" type="text" class="validate" >
        <label for="good_quantity">Кількість</label>
    </div>

    <div class="input-field col m1 s12">
        <a id="add_good_to_table_procurement" class="btn-floating btn-smal waves-effect waves-light green add"><i class="material-icons">add</i></a>
    </div>
</div>


<h2>Товари в замовленні</h2>
<div class="row">
    <div class="sub-form col s10">
        <table id="goods-result-table-procurement">
            <thead>
                <tr>
                    <th>Товар</th>
                    <th>Кількість</th>
                    <th>Одиниці</th>
                </tr>
            </thead>
            <tbody>
                {% for item in procurement_item %}
                    <tr>
                        <td>{{item.good}}</td>
                        <td>{{item.quantity}}</td>
                        <td>{{item.good.unit_of_measurement}}</td>
                        <td><a class="btn-floating btn-smal waves-effect waves-light red remove"><i id="remove_good_from_procurement_table" class="material-icons">remove</i></a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<div class="row">
    <button type="submit" id="btn_save_tmc_from_procurement_detail" class="btn btn-outline-success">Зберегти<i class="material-icons right">save</i></button>

    <a href="{{request.META.HTTP_REFERER}}">
        <button class="btn waves-effect waves-light">
            Повернутися
        </button>
    </a>
</div>

<input  id="procurement_id" type="hidden" name="procurement_id"   value="{{procurement.id}}">
{% endblock %}

{% block scripts %}
<script type="module" src="{% static 'js/procurement.js' %}"></script>
{% endblock %}