{% extends "base/document.html" %}
{% load tz %}
{% load crispy_forms_tags %}
{% block title %}
  {% trans "Ingredient List" %}
{% endblock %}
{% block content %}
  <h1>{% trans "Ingredient List" %}</h1>
  {% include 'canteen/includes/_canteen_navigation.html' %}
  <div class="container">
    <div class="row">
      <div class="col col-auto">
        <select class="form-select meal_types-select">
          <option value="" {% if not selected_meal_type %}selected{% endif %}>
            {% trans 'All Meal Types' %}
          </option>
          {% for meal_type in meal_types %}
            <option value="{{ meal_type.pk }}"
                    {% if meal_type.id == selected_meal_type %}selected{% endif %}>
              {{ meal_type.name }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="col col-auto">
        <select class="form-select categories-select">
          <option value="" {% if not selected_category %}selected{% endif %}>
            {% trans 'All Categories' %}
          </option>
          {% for category in categories %}
            <option value="{{ category.pk }}"
                    {% if category.id == selected_category %}selected{% endif %}>
              {{ category.name }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="col">
        <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>
    </div>
  </div>
  <div class="d-flex justify-content-end pt-2">
    <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, verbose_name in headers %}
              <th class="sort_{{ name }}"
                  scope="col"
                  onclick="sort_ingredients('{{ name }}');">
                {{ verbose_name }}
              </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 class="{% if not ingredient.meal_type %}text-danger{% endif %}">
                {{ ingredient.meal_type_t }}
              </td>
              <td class="{% if not ingredient.category %}text-danger{% endif %}">
                {{ ingredient.category_t }}
              </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' %}
  <style>
    .table-container {
      overflow: auto;

    }

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

  {{ total_price_title|json_script:"total_price_title" }}
  <script>
    var delete_ingredients_timer = null
    var list_ingredients_sort_cookie_name = "list_ingredients_sort"
    var search_params_cookie_name = "list_ingredients"

    $(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(name) {
      var key = name
      var cookie_name = list_ingredients_sort_cookie_name
      set_sort_params_from_cookie(cookie_name, key)
      location.reload()
    }
    $(document).ready(function() {
      var cookie_name = list_ingredients_sort_cookie_name
      set_sort_element_arrows(cookie_name)
    })

    $(document).ready(function() {
      $('.meal_types-select').change(function() {
        var selected_value = $(this).val()
        set_search_params_from_cookie(search_params_cookie_name, "meal_type", selected_value)
        location.reload()
      });

      $('.categories-select').change(function() {
        var selected_value = $(this).val()
        set_search_params_from_cookie(search_params_cookie_name, "category", selected_value)
        location.reload()
      });
    });
  </script>

{% endblock %}