{% extends "base/document.html" %}
{% load tz %}
{% load crispy_forms_tags %}
{% block title %}
  {% trans "Ingredient List" %}
{% endblock %}
{% block content %}
  <h1>{% trans "Ingredient List" %}</h1>
  <form method="get"
        action="{% url 'canteen:list_ingredients' %}"
        class="d-flex justify-content-between align-items-center">
    <input type="text"
           name="q"
           onkeydown="if(event.keyCode==13){submit_q();return false;}"
           value="{{ search_query }}"
           placeholder="{% trans 'Search ingredient ...' %}"
           class="form-control" />
    <button type="button"
            onclick="submit_q();"
            class="btn btn-primary text-nowrap">{% trans "Search" %}</button>
    {% if search_query %}
      <a onclick="clear_q();" class="text-nowrap">{% trans "Clear" %}</a>
    {% endif %}
  </form>
  <div class="d-flex justify-content-end pt-2">
    <a class="btn btn-primary mx-1"
       target="canteen__list_meal_types"
       href='{% url "canteen:list_meal_types" %}'>{% trans "Ingredient Meal Types" %}</a>
    <a class="btn btn-primary mx-1"
       target="canteen__list_categories"
       href='{% url "canteen:list_categories" %}'>{% trans "Ingredient Categories" %}</a>
    <a class="btn btn-warning mx-1"
       target="canteen__create_consumptions"
       href='{% url "canteen:create_consumptions" %}'>{% trans "Consume" %}</a>
    <a class="btn btn-primary mx-1"
       onclick="open_small_window('{% url 'canteen:create_ingredients' %}')">{% trans "Add via template" %}</a>
    <a class="btn btn-primary mx-1"
       onclick="open_small_window('{% url 'canteen:create_ingredient' %}')">{% trans "Add one" %}</a>
    <a title='{% trans "Click twice within one minute to delete the selected ingredients. (Note: This is an irreversible operation.)" %}'
       class="btn btn-danger"
       onclick="delete_ingredients()">{% trans "Delete selected Ingredients" %}</a>
  </div>

  <div class="d-flex justify-content-end pt-2">
    <div class="form-check">
      <input class="form-check-input"
             type="checkbox"
             value=""
             id="locate_updated_element_checkbox">
      <label class="form-check-label" for="locate_updated_element_checkbox">
        {% trans "Locate the updated element." %}
      </label>
    </div>
  </div>

  <hr />
  <div class="container">
    <div class="table-responsive table-responsive-lg  table-container">
      <table class="table table-bordered table-ingredient table-striped table-hover table-condensed">
        <thead>
          <tr>
            <th scope="col">
              <div class="form-check" title="{% trans 'Select all ingredients.' %}">
                <input type="checkbox"
                       style="cursor: pointer"
                       class="form-check-input all_ingredients_checkbox"
                       name="all_ingredients_checkbox"
                       id="all_ingredients_checkbox" />
                <label class="form-check-label"
                       style="cursor: pointer"
                       for="all_ingredients_checkbox">
                  {% blocktrans with ingredients_len=ingredients_len %}
                    ({{ingredients_len}})
                  {% endblocktrans %}
                </label>
              </div>
            </th>
            {% for name,sort, header in headers %}
              <th scope="col"
                  data-sort="sort_{{ name }} {{ sort }}"
                  onclick="sort_ingredients(this.dataset.sort);">
                {{ header }}
                {% if sort == "+" %}
                  &#8593;
                {% elif sort == "-" %}
                  &#8595;
                {% endif %}
              </th>
            {% endfor %}
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          {% for ingredient in page_obj %}
            <tr class="tr-ingredient"
                data-ingredient_updated_at="{{ ingredient.updated_at|localtime|date:'Y/m/d H:i:s' }}"
                data-ingredient_storage_date="{{ ingredient.storage_date|localtime|date:'Y/m/d' }}">
              <th scope="row">
                <div class="form-check"
                     title="{% trans 'It helps you check/delete the ingredients.' %}">
                  <input type="checkbox"
                         style="cursor: pointer"
                         class="form-check-input ingredient_checkbox"
                         value="{{ ingredient.id }}"
                         name="ingredient_checkbox"
                         id="ingredient_checkbox_{{ ingredient.id }}" />
                  <label class="form-check-label"
                         style="cursor: pointer"
                         for="ingredient_checkbox_{{ ingredient.id }}">
                    {{ forloop.counter }}
                  </label>
                </div>
              </th>
              <td>{{ ingredient.storage_date|date:"Y.m.d" }}</td>
              <td>{{ ingredient.name }}</td>
              <td>{{ ingredient.meal_type }}</td>
              <td>{{ ingredient.category }}</td>
              <td>{{ ingredient.quantity }}</td>
              <td>{{ ingredient.quantity_unit_name }}</td>
              <td>{{ ingredient.total_price }}</td>
              <td data-value="{{ ingredient.is_ignorable }}">
                {% if ingredient.is_ignorable %}
                  {% trans "Yes" %}
                {% endif %}
              </td>
              <td data-value="{{ ingredient.is_disabled }}">
                {% if ingredient.is_disabled %}
                  {% trans "Yes" %}
                {% endif %}
              </td>
              <td class="">
                <a class=""
                   target="_blank"
                   onclick="open_small_window('{% url 'canteen:edit_ingredient' ingredient.id %}'); return false;">
                  {% trans "Edit" %}
                </a>
                |
                <a class="text-danger"
                   target="_blank"
                   onclick="open_small_window('{% url 'canteen:delete_ingredient' ingredient.id %}'); return false;">
                  {% trans "Delete" %}
                </a>
              </td>
            </tr>
          {% empty %}
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  <form id="delete_ingredients_form"
        method="post"
        action="{% url 'canteen:delete_ingredients' %}">
    {% csrf_token %}
    <input type="hidden"
           name="selected_ingredient_ids"
           id="selected_ingredient_ids"
           value="">
    <input type="hidden"
           name="next"
           value='{{ request.GET.next|default:request.get_full_path }}'>
  </form>
  {% include 'includes/_paginator.html' %}
  {{ total_price_title|json_script:"total_price_title" }}
  <script>
    var delete_ingredients_timer = null

    $(document).ready(function() {
      $("#all_ingredients_checkbox").click(function(event) {
        var ingredient_checkboxes = $('.ingredient_checkbox')
        var element = $(event.target)
        if ($(element).is(':checked')) {
          $(ingredient_checkboxes).each(function(index, __element) {
            $(__element).prop("checked", true)
          })
        } else {
          $(ingredient_checkboxes).each(function(index, __element) {
            $(__element).prop("checked", false)
          })
        }
      })
    })

    function set_ingredient_table_height() {
      var ingredient_table = $('.table-ingredient')
      var pagination = $('.pagination')
      var footer = $("footer")
      var height = Math.round((footer.offset().top - pagination.height() - ingredient_table.offset().top) * 0.98)
      ingredient_table.parent().height(
        height
      );
    }

    function delete_ingredients() {
      var current_time = Date.now();
      if (delete_ingredients_timer == null || current_time - delete_ingredients_timer > 60 * 1000) {
        delete_ingredients_timer = current_time
        return
      }
      var selected_ingredient_ids = [];
      $('.ingredient_checkbox:checked').each(function(index, element) {
        selected_ingredient_ids.push($(element).val())
      });
      $('#selected_ingredient_ids').val(selected_ingredient_ids.join(' '))
      $('#delete_ingredients_form').submit()
    }

    $(document).ready(function() {
      var ingredient_table = $(".table-ingredient")
      ingredient_table.find('th:eq(7)').attr("title", JSON.parse($("#total_price_title").text()))
    });

    $(document).ready(function() {
      set_ingredient_table_height();
    });

    $(window).resize(function() {
      set_ingredient_table_height();
    });

    $(document).ready(
      function() {
        if ($("#locate_updated_element_checkbox").is(':checked')) {
          make_table_row_highlight(".tr-ingredient", "ingredient_updated_at")
        }
      });

    function clear_q() {
      update_href({
        "q": ""
      })
    }

    function submit_q() {
      const q_value = document.querySelector('input[name="q"]').value;
      update_href({
        q: q_value
      });
    }

    function sort_ingredients(value) {
      value = value.trim().split(/\s+/);
      var name = value[0];
      value = value[1] || "";
      const url = new URL(window.location.href);
      const params = new URLSearchParams(url.search);
      if (value == "-") {
        value = "";
      } else if (value == "") {
        value = "+";
      } else {
        value = "-";
      }
      var i_sort = {};
      i_sort[name] = value;
      update_href(i_sort);
    }
  </script>
  <style>
    .table-container {
      overflow: auto;

    }

    .table-container thead th {
      position: sticky;
      top: 0;
    }
  </style>

{% endblock %}