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

{% block content %}
<div class="row">
    <h3>Керування закупівлями</h3>
</div>
<div class="row">
    <div class="col m6 s12">
        <form  id="add_procurement_form" autocomplete="off">
            {% csrf_token %}
            <div class="row">
                <div class="input-field col m8 s12">
                    <i class="material-icons prefix">mode_edit</i>
                    <input type=text name="vendor" id="vendor" list="vendor-list" class="validate" >
                        <label for="vendor">Постачальник</label>
                        <datalist id="vendor-list">
                            {% for vendor in vendors %}
                                <option>{{vendor.name}}</option>
                            {% endfor %}
                        </datalist>
                    <!-- <select name="vendor" id="vendor">
                        <option value="" disabled selected>Оберіть постачальника</option>
                        {% for vendor in vendors %}
                            <option value={{vendor.id}}>{{vendor.name}}</option>
                        {% endfor %}
                    </select>
                    <label for="vendor">Постачальник</label> -->
                </div>

                <div class="row">
                    <div class="input-field col m8 s12">
                        <i class="material-icons prefix">mode_edit</i>
                        <input type=text name="project_name" id="project_name" list="project_name-list" class="validate" >
                        <label for="project_name">Обьєкт</label>
                        <datalist id="project_name-list">
                            {% for project in projects %}
                                <option>{{project.name}}</option>
                            {% endfor %}
                        </datalist>
                    </div>
                </div>


                <!-- <div class="input-field col m3 s12">
                    <i class="material-icons prefix">mode_edit</i>
                    <input id="created_by" name="created_by" type="text" class="validate" required value="System">
                    <label for="created_by">Користувач</label>
                </div> -->
            </div>
            <div class="row">
                <div class="input-field col m3 s12">
                    <i class="material-icons prefix">mode_edit</i>
                    <input id="number" name="number" type="text" class="validate" value="{{next_number}}">
                    <label for="number">№ Замовлення</label>
                </div>
                <div class="input-field col m3 s12">
                    <i class="material-icons prefix">mode_edit</i>
                    <input type=text name="date" id="date" class="datepicker" required>
                    <label for="date">Дата замовлення</label>
                </div>       
            </div>
            <div class="row">
                <div class="input-field col m6 s12">
                    <textarea id="comment" name="comment" class="materialize-textarea"></textarea>
                    <label for="comment">Коментар</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col m7 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">
                    <input id="good_unit_of_measurement" name="good_unit_of_measurement" type="text" class="validate" required>
                    <label for="good_unit_of_measurement">Одиниці</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>
            <div class="row">
                <div class="sub-form col s10">
                    <table id="goods-result-table-procurement">
                        <thead>
                            <tr>
                                <th>Товар</th>
                                <th>Кількість</th>
                                <th>Одиниці</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <button class="btn waves-effect waves-light" type="submit" name="action">Зберегти
            <i class="material-icons right">send</i>
            </button>
        
            <button class="btn waves-effect " type="reset" name="action">Очистити
                <i class="material-icons right">cencel</i>
            </button>
        </form>
    </div>
    <div class="col m6 s12">
        <h4>Останні закупівлі</h4>
        {% if procurements %}
      <div class="table-responsive">
        <table class="table table-striped" id="example">
          <tr>
            <th>Постачальник</th>
            <th>Дата замовлення</th>
            <th></th>
          </tr>

          {% for procurement in procurements %}
          <tr>
            <td>{{procurement.vendor}}</td>
            <td>{{procurement.created_at}}</td>
            <td> <a href="{% url 'procurement_detail' id=procurement.pk %}" class="btn-floating btn-smal"><i class="material-icons">remove_red_eye</i></a></td>
            <td> <a href="{% url 'procurement_detail' id=procurement.pk %}" class="btn-floating btn-smal"><i class="lni lni-pencil"></i></a></td>
            <td> <a href="{% url 'procurement_detail' id=procurement.pk %}" class="btn-floating btn-smal red"><i class="lni lni-cross-circle"></i></a></td>
          </tr>
            {% endfor %}
        </table>
      </div>
      {% endif %}
    </div>
</div>    
{% endblock %}

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