{% 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 %}
          <option value="None" {% if selected_meal_type == 'None' %}selected{% endif %}>
            {% trans '(None)' %}
          </option>
        </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 %}
          <option value="None" {% if selected_category == 'None' %}selected{% endif %}>
            {% trans '(None)' %}
          </option>
        </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 query-input" />
          <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-container table-container-ingredient table-container-objects">
      <table class="table table-bordered table-ingredient table-striped table-hover table-condensed table-objects">
        <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>
            <th class="sort_storage_date"
                scope="col"
                onclick="sort_ingredients('storage_date');">
              {% trans 'Ingredient Storage Data' %}
            </th>
            <th class="sort_name" scope="col" onclick="sort_ingredients('name');">
              {% trans 'Ingredient Name' %}
            </th>
            <th class="sort_meal_type__name"
                scope="col"
                onclick="sort_ingredients('meal_type__name');">
              {% trans 'Ingredient Meal Type Name' %}
            </th>
            <th class="sort_category__name"
                scope="col"
                onclick="sort_ingredients('category__name');">
              {% trans 'Ingredient Category Name' %}
            </th>
            <th class="sort_quantity"
                scope="col"
                onclick="sort_ingredients('quantity');">
              {% trans 'Ingredient Quantity' %}
            </th>
            <th class="sort_quantity_unit_name"
                scope="col"
                onclick="sort_ingredients('quantity_unit_name');">
              {% trans 'Ingredient Quantity Unit Name' %}
            </th>
            <th class="sort_total_price"
                scope="col"
                onclick="sort_ingredients('total_price');">
              {% trans 'Ingredient Total Price' %}
            </th>
            <th class="sort_is_ignorable"
                scope="col"
                onclick="sort_ingredients('is_ignorable');">
              {% trans 'Is Ingredient Ignorable' %}
            </th>
            <th class="sort_is_disabled"
                scope="col"
                onclick="sort_ingredients('is_disabled');">
              {% trans 'Is Ingredient Disabled' %}
            </th>
            <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="canteen/edit_ingredient"
                   onclick="open_small_window('{% url 'canteen:edit_ingredient' ingredient.id %}'); return false;">
                  {% trans "Edit" %}
                </a>
                |
                <a class="text-danger"
                   target="canteen/delete_ingredient"
                   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-objects {
      overflow: auto;
    }

    .table-objects {
      white-space: nowrap;
      position: sticky;
      right: 0;
      z-index: 2;
      min-width: 100px;
    }

    .table-objects th:last-child,
    .table-objects td:last-child {
      position: sticky;
      right: 0;
      z-index: 2;
    }

    .table-objects thead th:last-child {
      top: 0;
      z-index: 3;
    }

    .table-objects th:last-child::after,
    .table-ingredient td:last-child::after {
      content: '';
      position: absolute;
      left: -1px;
      top: 0;
      bottom: 0;
      width: 1px;
      background: #dee2e6;
    }

    .table-objects thead th {
      position: sticky;
      right: 0;
      top: 0;
      z-index: 3;
    }
  </style>

  {{ 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() {
      var q_value = $('.query-input').val();
      set_search_params_to_cookie(window.location.pathname, "q", q_value)
      location.reload()
    }

    function sort_ingredients(name) {
      var key = name
      set_sort_params_to_cookie(window.location.pathname, key)
      location.reload()
    }
    $(document).ready(function() {
      var cookie_name = window.location.pathname
      set_sort_element_arrows(cookie_name)
    })

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

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

{% endblock %}