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


{% block content %}
<div class="row">
    <h3>  Прийом ТМЦ</h3>
</div>
<div class="row">
<a href="{% url 'stock' %}" style="margin-top: 20px;">
    <button class="btn waves-effect waves-light">
        Повернутися
    </button>
</a>
</div>  
<div class="row">
    <div class="col m12 s12">
        <p class="form-title">Додати на склад</p>
        <form  id="add_receipt_form" autocomplete="off">
            {% csrf_token %}
            <div class="row">
                <div class="input-field col m9 s12">
                    <i class="material-icons prefix">mode_edit</i>
                    <input type=text name="vendor" id="vendor" list="vendor-list" class="validate" required>
                    <label for="vendor">Постачальник</label>
                    <datalist id="vendor-list">
                        {% for vendor in vendors %}
                            <option>{{vendor.name}}</option>
                        {% endfor %}
                    </datalist>
                </div>


            </div>
            <div class="row">
                <div class="input-field col m3 s12">
                    <i class="material-icons prefix">mode_edit</i>
                    <input id="invoice" name="invoice" type="text" class="validate" required>
                    <label for="invoice">№ Накладної</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 class="input-field col m3 s12">
                    <i class="material-icons prefix">mode_edit</i>
                    <input type=text name="storage_facility" id="storage_facility" list="storage_facility-list" class="validate" required>
                    <label for="storage_facility">Оберіть склад</label>
                    <datalist id="storage_facility-list">
                        {% for storage in storages %}
                        <option>{{storage.name}}</option>
                        {% endfor %}
                    </datalist>
                </div>
            </div>
        
            <div class="row">
                {% 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 m5 s12">
                    <i class="material-icons prefix">mode_edit</i>
                    <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">
                    <i class="material-icons prefix">mode_edit</i>
                    <input id="good_quantity" name="good_quantity" type="text" class="validate" >
                    <label for="good_quantity">Кількість</label>
                </div>
                <div class="input-field col m2 s12">
                    <i class="material-icons prefix">mode_edit</i>
                    <input id="good_price" name="good_price" type="text" class="validate" >
                    <label for="good_price">Ціна, без ПДВ! </label>
                </div>
                {% if 'btn_add_good_to_table' in config %}
                <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>
                {% endif %}
            </div>
            <div class="row">
                {% if 'btn_load_receipt_from_file' in config %}
                <div class="col m6 s12">
                    <div class="input-field inline icon-container" onmouseover="openModal()" onmouseout="closeModal()">
                        <i class="material-icons prefix">info_outline</i>
                    </div>
                    <p></p>
                    <div class="input-field inline">
                        <div class="file-field input-field">
                            <div class="btn">
                            <span>Загрузити з файлу</span>
                            <input type="file" id="goods-from-file" disabled accept=".xls, .xlsx">
                            </div>
                            <div class="file-path-wrapper">
                            <input class="file-path validate" type="text" id="goods-from-file-name">
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
            <!-- <div class="row">
                <div class="icon-container" onmouseover="openModal()" onmouseout="closeModal()">
                    <i class="material-icons prefix">info_outline</i>
                </div>
            </div> -->
            <div class="row">
                <div class="sub-form col s10">
                    <table id="goods-result-table">
                        <thead>
                            <tr>
                                <th>Товар</th>
                                <th>Кількість</th>
                                <th>Одиниці</th>
                                <th>Ціна</th>
                                <th>Сума</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                {% if 'btn_add_all_goods_to_base_from_receipt' in config %}
                <button id="add_all_goods_to_base" class="btn waves-effect waves-light" type="submit" name="action" disabled>Додати всі відсутні ТМЦ
                    <!-- <i class="material-icons right">save</i> -->
                    </button>
                {% endif %}
            </div>
            <div class="row">
                    <div id="receipt_total_sum" class="col m5 s12">
                        
                    </div>
            </div>
            {% if 'btn_save_receipt_form' in config %}
            <button id="save_receipt_form" class="btn waves-effect waves-light" type="submit" name="action" disabled>Зберегти
            <i class="material-icons right">save</i>
            </button>
            {% endif %}
            <a href="{{ request.get_full_path }}"><button type="button" class="btn btn-outline-success">Очистити <i class="material-icons right">block</i></button></a>
        </form>

    </div>

</div>
<div class="row">
    <a href="{% url 'stock' %}" style="margin-top: 20px;">
      <button class="btn waves-effect waves-light">
          Повернутися
      </button>
    </a>
  </div>



  <div id="myModal" class="Mymodal">
    <span class="close" onclick="closeModal()">&times;</span>
    <img class="modal-content" id="modalImage" src="{% static 'img/default_template_load_from_file.png' %}" alt="Full Image">
</div>

<script>
    function openModal() {
    document.getElementById('myModal').style.display = 'block';
    document.getElementById('modalImage').src = src="{% static 'img/default_template_load_from_file.png' %}"; 
}

function closeModal() {
    document.getElementById('myModal').style.display = 'none';
}
</script>
{% endblock %}
{% block scripts %}
<script type="module" src="{% static 'js/receipt.js' %}"></script>
{% endblock %}