{% extends "base.html" %}
{% load crispy_forms_filters %}
{% load crispy_forms_tags %}
{% load static %}
{% load custom_tags %}

{% block content %}
<div class="row">
    <h3>Новий Проект</h3>
</div>
<div class="row">
    <a href="{% url 'project' %}">
        <button class="btn waves-effect waves-light">
            Повернутися
        </button>
    </a>
</div>
<form  id="add_new_project_form" autocomplete="off">
    {% csrf_token %}
    <div class="row m12 s12">
        <div class="input-field col m3 s12">
            <i class="material-icons prefix">mode_edit</i>
            <input id="name" name="name" type="text" class="validate" required>
            <label for="name">Назва прокту</label>
        </div>
        <div class="input-field col m3 s12">
            <i class="material-icons prefix">mode_edit</i>
            <input id="customer" name="customer" type="text" class="validate">
            <label for="customer">Замовник</label>
        </div>
        <div class="input-field col m3 s12">
            <i class="material-icons prefix">mode_edit</i>
            <input type=text name="date_start" id="date_start" class="datepicker" required>
            <label for="date_start">Дата початку</label>
        </div>
        <div class="input-field col m3 s12">
            <i class="material-icons prefix">mode_edit</i>
            <input type=text name="date_end" id="date_end" class="datepicker" required>
            <label for="date_end">Дата закінчення</label>
        </div>
    </div>
    <div class="row m12 s12">
        <div class="input-field col m12 s12">
            <textarea id="description" name="description" class="materialize-textarea"></textarea>
            <label for="description">Коментар</label>
        </div>
    </div>
    <hr id="h-line">
    <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> -->

        {% get_all_goods_name_with_unit_of_measurement as goods_list %}
        <div class="input-field col m5 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_list  %}
                    <option>{{good.name}}>>{{good.unit_of_measurement}}</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_project_in_new_project" 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_in_new_project">
                <thead>
                  <tr>
                      <th>Товар</th>
                      <th>Кількість</th>
                      <th>Одиниці</th>
                      <th></th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
        </div>
    </div>



    <div  class="row m12 s12">
        <button id="btn_add_project_from_new_project" class="btn waves-effect waves-light" type="submit" name="action">Зберегти
            <i class="material-icons right">send</i>
        </button>
        <a href="{{ request.get_full_path }}"><button type="button" class="btn btn-outline-success">Очистити</button></a>
    </div>
</form>
<div class="row">
    <a href="{% url 'project' %}">
        <button class="btn waves-effect waves-light">
            Повернутися
        </button>
    </a>
</div>
{% endblock %}

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