var updateBtns = document.getElementById('#update-cart')

for(var i = 0; i < updateBtns.length; i++){
    updateBtns[i].addEventListener('click', function(){
        var productId = this.dataset.productId
        var action = this.dataset.action
        consol.log('productId:', productId, 'action:', action)
    })
}

{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container mt-4">
    {% include 'partials/_messages.html' %} 
    <div class="row">
        <div class="col-md-8">
            <nav aria-label = "breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">SmartVentory</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Inventory Items</li>
                </ol>   
            </nav>
        </div>
        <div class="col-md-4 mt-1">
            <div class="form-group">
                <input
                    class="form-control"
                    type="text" 
                    name=""
                    id="searchField"
                    placeholder="Search Item..."
                    />
            </div>
        </div>
    </div>
    <div class="container">
    {% if inventories.count %}
    <div class="app-table">
        <table class="table table-striped">
            <thead>
                <tr class="text-center">
                    <th>Category</th>
                    <th>Item Name</th>
                    <th>Amount (NGN)</th>
                    <th>Quantity In Store</th>
                    <th>Last Update</th>
                    <th>Order</th>
                </tr>
            </thead>
            <tbody>
                {% for inventory in page_obj %}
                <tr class="text-center">
                    <td>{{inventory.category}}</td>
                    <td>{{inventory.item_name}}</td>
                    <td>₦ {{inventory.amount}}</td>
                    <td>
                        {% if inventory.quantity <= inventory.reorder_level %}
                        <div style="background-color: orange; border-radius: 10px;">
                            {{ inventory.quantity }}
                        </div>
                        {% else %}
                            {{ inventory.quantity }}
                        {% endif %}
                    </td>
                    <td>{{inventory.date}}</td>
                    <td> 
                        <button data-product={{expense.id}} data-action="add" class="btn btn-outline-success btn-sm" id="update-cart">Issue Item</button> 
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
        <div class="table-output">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Amount (NGN)</th>
                        <th>Category</th>
                        <th>Desciption</th>
                        <th>Date</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody class="table-body">
                    
                </tbody>
            </table>
        </div>
        <div class="pagination-container">
            <div class="">
                Showing Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </div>
            <ul class="pagination align-right float-right mt-auto">
                {% if page_obj.has_previous %}
                    <li {% if page_obj.number == 1 %} class="page-item active" {% endif %}>
                        <a class="page-link" href="?page=1">&laquo; 1</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="?page={{page_obj.previous_page_number}}">Previous</a></li>
                {% endif %}

                {% if page_obj.has_next %}
                    <li class="page-item"><a class="page-link" href="?page={{page_obj.next_page_number}}">Next</a></li>
                    <li class="page-item"><a class="page-link" href="?page={{page_obj.peginator.num_pages}}">{{ page_obj.paginator.num_pages }} &raquo;</a></li>
                {% endif %}
            </ul>
        {% endif %}
        </div>
    </div>
</div>

<script src="{% static 'js/searchExpenses.js' %}"></script>

{% endblock content %}