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


{% block content %}
<div class="row">
    <h3>"Звіт по ТМЦ"</h3>
</div>
<div class="row">
    <a href="{% url 'report' %}">
        <button class="btn waves-effect waves-light">
            Повернутися
        </button>
    </a>
</div>
<div class="row">
    <div class="col m6 s12">
        <form id="one_good_search_form"  autocomplete="off" method="POST">
            {% csrf_token %}
            <input  id="project_id" type="hidden" name="project_id"   value="{{project.id}}">
            <div class="row">
                <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">
                {% get_all_goods_name_with_unit_of_measurement as goods_list %}
                <div class="input-field col m9 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>
            <div class="row">
                <button type="submit" class="btn btn-outline-success">Пошук</button>
                
            </div>
        </form>
    </div>
    <div class="col m3 s12 show-photo">
        <img src="{% static 'img/no_image.png' %}" alt="">
    </div>

</div>
<div class="row">
    <h3>{{good_name}}</h3>
</div>
<div class="row">
    <div class="col s12 m2">
        <div class="card">
            <div class="title">
                <span class="circle">
                    <i class="material-icons">info_outline</i>
                </span>
                <p class="titleText">
                    Фактичний Залишок
                </p>
            </div>
            <div class="dataText">
                <p id="total_actual_quantity">
                    
                </p>            
                <div class="range">
                    <div class="fill">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col s12 m2">
    <div class="card">
        <div class="title">
            <span class="circle">
                <i class="material-icons">info_outline</i>
            </span>
            <p  class="titleText">
                Доступно
            </p>
        </div>
        <div class="dataText">
            <p id="balance">
                
            </p>            
            <div class="range">
                <div class="fill">
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="col s12 m2">
    <div class="card">
        <div class="title">
            <span class="circle">
                <i class="material-icons">info_outline</i>
            </span>
            <p class="titleText">
                В резерві
            </p>
        </div>
        <div class="dataText">
            <p id="total_reservation">
            </p>            
            <div class="range">
                <div class="fill">
                </div>
            </div>
        </div>
    </div>
    </div>

</div>
<div class="row">
    <div class="col m4 s12" style="height: 500px; overflow: scroll;">
        <p class="form-title">Закуплено</p>
        <table class="table table-striped" >
            <thead>
                <tr>
                    <th >Кіл-сть</th>
                    <th >Ціна</th>
                    <th >Дата</th>
                    <th>Користувач</th>
                    <th >Залишок</th>
                    <th >Склад</th>
                </tr>
            </thead>
            <tbody id="receipt_items_body"></tbody>
        </table>
    </div>
    <div class="col m4 s12" style="height: 500px; overflow: scroll;">
        <p class="form-title">Списано</p>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th >№ Акту</th>
                    <th  >Кіл-сть</th>
                    <th>Дата</th>
                    <th>Користувач</th>
                    <th>Причина</th>
                    <th>Сумма</th>
                </tr>
            </thead>
            <tbody id="write_off_items_body"></tbody>
        </table>
    </div>
    <div class="col m4 s12" style="height: 500px; overflow: scroll;">
        <p class="form-title">Зарезервовано</p>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Кіл-сть</th>
                    <th>Дата</th>
                    <th>Користувач</th>
                    <th>Обьєкт</th>
                </tr>
            </thead>
            <tbody id="reservation_items_body"></tbody>
        </table>
    </div>
</div>



{% endblock %}


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