{% extends "base.html" %}
{% block content %}

<script>
  let image_to_update = ''

  // handle Delete
  function handleDelete(button) {
    window.location.href = '/item_delete/'+button.name ;
  }

  // handle AddOne
  function handleAddOne(button) {
    const response = fetch('/item_addone/'+button.name);
  }

  // handle Add with quantity
  function handleAddWithQuantity(button, q) {
    const response = fetch('/item_addquantity/'+button.name+'/'+q);
  }

  //trigger change category button
  function clickedCategoryButton(image) {
    image_to_update = image
  }

  // selected the category 
  function clickedUpdateCategory4Item(icon) {
    image_to_update.src="{{ iconpath }}" + icon.name + ".svg"
    const response = fetch('/item_update_category/'+image_to_update.name+'/'+icon.name);
    $('#staticBackdrop').modal('hide');
  }

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList tbody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

</script>

    <form method="post">
        <div class=".container">
        <div class="d-flex justify-content-between">
            <input class="form-control" id="myInput" type="text" name="newItem" placeholder="Search.."/>
            &nbsp;
            <button class="btn btn-success">+</button>
        </div>
        </div>
    </form>

<br/>

<table  id="myList" style="width: 100%; background-color: white;">
  <tbody>
        {% for item in items %}
    <tr style="border-bottom: 1px solid lightgray;">
      <td style="padding: 5px;">    
        <a class="btn btn-{% if item.is_suggestion %}primary{% else %}info{% endif %} btn-sm"  name="{{ item.id }}" onclick='handleAddOne(this);'>&nbsp;+&nbsp;</a>
        {{ item.label }}</td>
      <td style="text-align: right">
        {% if item.quantity %}
        <a class="btn btn-outline-primary btn-sm"  name="{{ item.id }}" onclick='handleAddWithQuantity(this, {{ item.quantity }} );'>{{ item.quantity }}{{ item.unit }}</a>
        &nbsp;&nbsp;&nbsp;
        {% endif %}

  <a href="" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><img id="category4itemid_{{ item.id }}" name="{{item.id}}" src="{{ iconpath }}{{ item.category }}.svg" style="height: 2em;" alt="..."  onclick='clickedCategoryButton(this);'></a>

        
        <a class="btn btn-danger btn-sm"  name="{{ item.id }}" onclick='handleDelete(this);'>-</a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>


<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Category</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% for icon in icons %}
            <a name= "{{ icon }}" onclick='clickedUpdateCategory4Item(this);'><img style="border: 10px solid white; height: 4em; width: 4em;" src="{{ iconpath }}{{ icon }}.svg" alt="..."></a>
        {% endfor %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Exit</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}