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

{% block content %}
<div class="row">
    <h3>Власне виробництво</h3>
</div>
<div class="row">
    <p class="form-title">Створити новий виріб</p>
</div>
<div class="row">
    <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="unit_of_measurement" name="unit_of_measurement" type="text" class="validate" required>
        <label for="unit_of_measurement">Одиниця виміру</label>
    </div>
</div>
<div class="row">
    <p class="form-title">Компоненти</p>
</div>
<div class="row">
    <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 %}
                <option>{{good.name|safe}}</option>
            {% endfor %}
        </datalist>
    </div>

    <div class="input-field col m2 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" 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 m7 s12">
        <table id="own_prod-table">
            <thead>
              <tr>
                  <th>Найменування</th>
                  <th>Кількість</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
    </div>
</div>
<div class="row">
    <button id="save_own_product" class="btn waves-effect waves-light" type="submit" name="action" disabled>Зберегти
        <i class="material-icons right">save</i>
    </button>
</div>

<div class="row">
    <p class="form-title">Дадати виріб на склад</p>
</div>
<div class="row">
    <div class="input-field col m5 s12">
        <input type=text name="own_product_name" id="own_product_name" list="own_product-list" class="validate" >
        <label for="own_product_name">Обрати виріб</label>
        <datalist id="own_product-list">
            {% for own_product in own_products %}
                <option>{{own_product.name|safe}}</option>
            {% endfor %}
        </datalist>
    </div>
    <div class="input-field col m1 s12">
        <input id="own_product_quantity" name="own_product_quantity" type="text" class="validate" >
        <label for="own_product_quantity">Кількість</label>
    </div>
    <div class="input-field col m1 s12">
        <input type=text name="storage" id="storage" list="storage-list" class="validate" >
        <label for="storage">Склад</label>
        <datalist id="storage-list">
            {% for storage in storages %}
                <option>{{storage.name|safe}}</option>
            {% endfor %}
        </datalist>
    </div>
</div>
<div class="row">
    <button id="cost_price" class="btn waves-effect waves-light" type="submit" name="action">Рахувати собівартість</button>
    <div id="sum_cost_price">
    </div>
</div>
<div class="row">
    <a href="{% url 'own_production' %}">
        <button class="btn waves-effect waves-light">
            Оновити <i class="material-icons right">cached</i>
        </button>
    </a>
    <button id="save_own_product_to_stock" class="btn waves-effect waves-light" type="submit" name="action">Додати на склад
        <i class="material-icons right">save</i>
    </button>
</div>
{% endblock %}

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