{% extends "base/document.html" %}
{% load crispy_forms_tags %}
{% block title %}
  {% trans "Consume Ingredients" %}
{% endblock %}
{% block content %}
  <h1>{% trans "Consume Ingredients" %}</h1>
  {% include 'canteen/includes/_canteen_navigation.html' %}
  <div class="container">
    <div class="row justify-content-end border border-1 border-primary rounded">
      {% if meal_types %}
        <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>
      {% endif %}

      {% if categories %}
        <div class="col col-auto">
          <select class="form-select categories-select w-100">
            <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>
      {% endif %}

      <button class="btn btn-outline-success col col-auto mx-1 btn-order-by sort_storage_date"
              id="sort_storage_date"
              title="{% trans 'Sort by storage date.' %}"
              style="font-size: 90%"
              onclick="sort_consumptions_table_rows('storage_date');">
        {% trans "Storage Date" %}
      </button>

      <button class="btn btn-outline-success col col-auto mx-1 btn-order-by sort_name"
              id="sort_name"
              title='{% trans 'Sort by name.' %}'
              onclick="sort_consumptions_table_rows('name');">
        {% trans "Ingredient Name" %}
      </button>

      <button class="btn btn-outline-success col col-auto mx-1 btn-order-by sort_meal_type__name"
              id="sort_meal_type__name"
              title="{% trans 'Sort by meal type.' %}"
              onclick="sort_consumptions_table_rows('meal_type__name');">
        {% trans "Meal Type" %}
      </button>

      <button class="btn btn-outline-success col col-auto mx-1 btn-order-by sort_category__name"
              id="sort_category__name"
              title="{% trans 'Sort by category.' %}"
              onclick="sort_consumptions_table_rows('category__name');">
        {% trans "Category Name (canteen__consumption_create)" %}
      </button>

      <div class="col col-auto">
        <input class="form-control storage-date-input"
               onkeydown="if(event.keyCode==13){list_consumptions();}"
               title="{% trans 'The starting date of storage.' %}"
               id="storage_date_start_input"
               data-original_value="{{ storage_date_start }}"
               value="{{ storage_date_start }}">
      </div>
      <div class="col col-auto">
        <input class="form-control storage-date-input"
               onkeydown="if(event.keyCode==13){list_consumptions();}"
               title="{% trans 'The end date of storage.' %}"
               id="storage_date_end_input"
               data-original_value="{{ storage_date_end }}"
               value="{{ storage_date_end }}">
      </div>
      <button class="btn btn-success col col-auto"
              title="{% trans 'Refresh this page.' %}"
              onclick="list_consumptions();">{% trans "Refresh" %}</button>
    </div>
  </div>
  <div class="table-responsive table-container"
       id="consumptions_table_container">
    <table class="table table-consumptions cotable-bordered table-striped table-hover table-condensed scroll-vertical"
           id="consumptions_table">
      <thead>
        <tr>
          {% if ingredients %}
            <th class="">
              {% trans "Ingredient Name" %}
              {% blocktrans with ingredients_len=ingredients|length %}
                ({{ingredients_len}})
              {% endblocktrans %}
            </th>
            <th class="">{% trans "Remaining Quantity" %}</th>
          {% endif %}
          {% for date_h in date_range %}
            <th data-date_of_using="{{ date_h }}" class="consumption-date">
              <span class="badge px-1 py-1 bg-primary rounded-pill">{{ date_h }}</span>
              {% for meal_type in meal_types %}
                <br />
                <span class="badge px-1 py-1 bg-success rounded-pill">|</span>
              {% endfor %}
            </th>
          {% empty %}
            <th></th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for ingredient in ingredients %}
          <tr class="row-consumption"
              data-ingredient_id="{{ ingredient.id }}"
              data-ingredient_name="{{ ingredient.name }}"
              data-ingredient_meal_type__name='{{ ingredient.meal_type.name|default:"" }}'
              data-ingredient_category__name='{{ ingredient.category.name|default:"" }}'
              data-ingredient_storage_date="{{ ingredient.storage_date|date:"Y-m-d" }}"
              data-ingredient_quantity="{{ ingredient.quantity }}"
              data-ingredient_quantity_used="{{ ingredient.quantity_used }}"
              data-ingredient_remaining_quantity="{{ ingredient.remaining_quantity }}"
              data-ingredient_consuming_quantity="{{ ingredient.consuming_quantity }}"
              data-ingredient_total_price="{{ ingredient.total_price }}"
              data-ingredient_meal_type="{{ ingredient.meal_type }}"
              data-ingredient_quantity_unit_name="{{ ingredient.quantity_unit_name }}"
              data-ingredient_unit_price="{{ ingredient.unit_price }}"
              id="ingredient_num_{{ ingredient.id }}">
            <td title="{% blocktrans with storage_date=ingredient.storage_date meal_type=ingredient.meal_type.name category=ingredient.category.name %}Storaged on {{ storage_date }} . ({{ meal_type }}, {{ category }}){% endblocktrans %}"
                class="">
              <div class='ingredient-progress'></div>
              {{ ingredient.name }}
              <br />
              <span class='badge px-1 py-1 bg-success rounded-pill'>
                (
                {% if ingredient.category %}
                  {{ ingredient.category.name }}
                {% else %}
                  {% trans 'None Category' %}
                {% endif %}
                ,
                {% if ingredient.meal_type %}
                  {{ ingredient.meal_type.name }}
                {% else %}
                  {% trans 'None Meal Type' %}
                {% endif %}
                ,
                {{ ingredient.storage_date|date:"Ymd" }}
                )
              </span>
            </td>
            <td name="remaining_{{ ingredient.id }}"></td>
          </tr>
        {% empty %}
          <tr>{% trans "No ingredient found." %}</tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="">
    <button id="generate_spreadsheet_btn"
            onclick="generate_spreadsheet();"
            class="btn btn-submit-consumptions btn-success float-end">
      {% trans "Generate Spreadsheet" %}
    </button>
    <select class="workbook-month-select form-select float-end mx-1"
            style="width:118px"></select>
    <div class="form-check float-end mx-1 pt-2">
      <label class="form-check-label" for="include_food_sheets">
        {% trans 'Ingredient Sheets are also included.' %}
      </label>
      <input class="form-check-input"
             type="checkbox"
             value=""
             id="include_food_sheets">
    </div>
  </div>

  <style>
    @keyframes shake-horizontal {

      0%,
      100% {
        transform: translateX(0);
      }

      10%,
      30%,
      50%,
      70%,
      90% {
        transform: translateX(-4px);
      }

      20%,
      40%,
      60%,
      80% {
        transform: translateX(4px);
      }
    }

    .wrong-date {
      border-width: 5px;
      border-style: solid;
      border-color: red;
      border-radius: 10px;
      animation: shake-horizontal 0.5s;
    }

    .ingredient-progress {
      height: 2px;
      background: green;
      right: 9px;
      position: absolute;
    }

    .storage-date-input {
      text-align: center;
    }

    .weekend {
      background-color: pink;
    }

    .table-container {
      overflow: auto;
    }

    .table thead th {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1010;
      white-space: nowrap;
    }

    .table tr {
      font-size: 15px;
    }

    .table tr> :nth-child(1) {
      position: -webkit-sticky;
      position: sticky;
      left: 0;
      z-index: 1010;
      white-space: nowrap;
      text-align: right;
    }

    .table tr> :nth-child(2) {
      position: -webkit-sticky;
      position: sticky;
      z-index: 1010;
      text-align: right;
    }

    .table thead tr {
      font-size: 15px;
    }

    .table thead tr> :nth-child(1) {
      z-index: 1020;
      white-space: nowrap;
    }

    .table thead tr> :nth-child(2) {
      z-index: 1020;
    }

    nav li {
      z-index: 1030;
    }
  </style>

  {{ ingredient_ids|json_script:'ingredient_ids' }}
  {{ months|json_script:'months' }}
  {{ meal_type_names|json_script:'meal_type_names' }}
  {{ date_range|json_script:'date_range' }}
  {{ storage_date_start|json_script:'storage_date_start' }}
  {{ storage_date_end|json_script:'storage_date_end' }}

  <script>
    var url = new URL(window.location.href)

    var ingredient_ids = JSON.parse($("#ingredient_ids").text())
    var ingredient_ids_length = ingredient_ids.length
    var months = JSON.parse($("#months").text())
    var meal_types = JSON.parse($("#meal_type_names").text())
    var date_range = JSON.parse($("#date_range").text())
    var storage_date_start = $('#storage_date_start').text().replace(new RegExp('"', 'g'), "")
    var date_patterns = [
      /^\d{4}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])$/,
      /^\d{4}\/(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])$/,
      /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/,
      /^\d{4}\.(0[1-9]|1[0-2])\.(0[1-9]|[12]\d|3[01])$/
    ];

    var is_loading = false

    function is_date_value_valid(value) {
      var date_value = value
      var matched_pattern = date_patterns.find(pattern => pattern.test(date_value));
      if (!matched_pattern) {
        return false
      }
      return true
    }

    $(document).ready(function() {
      $('.row-consumption').each(function(index, element) {
        element = $(element)
        var ingredient_consumption_progress = element.find(".ingredient-progress")
        var ingredient_quantity = parseInt(element.data("ingredient_quantity")) || 0
        var ingredient_quantity_used = parseInt(element.data("ingredient_quantity_used")) || 0
        var ingredient_remaining_quantity = parseInt(element.data("ingredient_remaining_quantity")) || 0
        if ((ingredient_quantity - ingredient_quantity_used) > 0) {
          var ingredient_consumption_progress_with = ingredient_remaining_quantity * 100 / (ingredient_quantity - ingredient_quantity_used)
          ingredient_consumption_progress.css({
            "width": `${ingredient_consumption_progress_with}%`
          })
        }
      })
    })

    $(document).ready(function() {
      $(".storage-date-input").blur(function() {
        var element = $(this)
        var storage_date_value = $(element).val();
        if (storage_date_value === '' || storage_date_value === null || storage_date_value === undefined) {
          return
        }
        if (!is_date_value_valid(storage_date_value)) {
          var original_value = $(element).data("original_value")
          if (original_value) {
            $(element).val(original_value)
          }
          $(element).removeClass("wrong-date")
          $(element).hide().show();
          $(element).addClass("wrong-date")
          setTimeout(function() {
            $(element).removeClass("wrong-date");
            $(element).hide().show();
          }, 1000);
        } else {
          $(element).removeClass('wrong-date')
          $(element).hide().show();
        }
      });
    });

    $(document).ready(function() {
      $(ingredient_ids).each(function(index, ingredient_id) {
        var td = $(`td[name='remaining_${ingredient_id}']`)
        var tr = $(td.closest("tr"))
        var ingredient_quantity = parseInt(tr.data("ingredient_quantity")) || 0
        var ingredient_quantity_used = parseInt(tr.data("ingredient_quantity_used")) || 0
        var ingredient_consuming_quantity = parseInt(tr.data("ingredient_consuming_quantity")) || 0
        var ingredient_remaining_quantity = parseInt(tr.data("ingredient_remaining_quantity")) || 0
        td.text(
          `${ingredient_quantity-ingredient_quantity_used}` +
          `-${ingredient_consuming_quantity-ingredient_quantity_used}` +
          `=${ingredient_remaining_quantity}`
        )
      });

    });

    function get_previous_month_date(date = new Date()) {
      var prevMonthDate = new Date(date);
      prevMonthDate.setDate(1);
      prevMonthDate.setMonth(prevMonthDate.getMonth() - 1);
      return prevMonthDate;
    }

    function is_weekend(date) {
      const dayOfWeek = date.getDay();
      return dayOfWeek === 0 || dayOfWeek === 6;
    }

    $(document).ready(function() {
      var td1 = $(".table tr > :nth-child(1):first")
      $(".table tr > :nth-child(2)").css("left", td1.width() * 1.05)
    });


    $(document).ready(function() {
      $(months).each(function(index, value) {
        $('.workbook-month-select').append(`<option>${value}</option>`)
      });
      var now = new Date();
      prev_month = get_previous_month_date(now)
      var year = prev_month.getFullYear();
      var month = prev_month.getMonth() + 1;
      month = month < 10 ? `0${month}` : `${month}`;
      $('.workbook-month-select').val(`${year}-${month}`)

    });

    $(document).ready(function() {
      if (get_cookie('storage_date_start') === null) {
        set_cookies({
          "storage_date_start": storage_date_start
        })
      }
    });

    function submit_consumption_form(element) {
      var element = $(element)
      var form = $(element.closest("form"));
      var formData = new FormData(form[0]);

      $.ajax({
        url: form.attr('action'),
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success(res) {
          if (res == "OK") {
            element.css({
              'border': "5px solid green",
              "border-radius": "10px"
            })
            form.data("amount_used", element.val())
          }
        },
        error(xhr) {
          element.css({
            'border': "5px solid red",
            "border-radius": "10px"
          })
        }
      });

    }

    function amount_used_input_blur(element) {
      element = $(element)
      var ingredient_quantity = parseInt(element.closest('tr').data("ingredient_quantity")) || 0
      var ingredient_quantity_used = parseInt(element.closest("tr").data("ingredient_quantity_used")) || 0
      ingredient_quantity = ingredient_quantity - ingredient_quantity_used

      var $consumption_form = element.closest("form")
      var amount_used = parseInt($consumption_form.data("amount_used")) || 0
      var new_amount_used = parseInt((element.val() || '0').toString().trim())
      if (new_amount_used < 0) {
        element.val('')
        new_amount_used = 0
      }
      if (new_amount_used === 0 && amount_used === 0) {
        element.val('')
      }
      if (amount_used > 0 && new_amount_used === 0) {
        element.val('0')
      }
      var $tds = element.parent().parent().siblings("td")
      var $amount_used_inputs = $tds.find("form input[name='amount_used']")
      var total_consumed = 0
      $amount_used_inputs.each(function(index, amount_used_element) {
        var value = parseInt($(amount_used_element).val()) || 0
        total_consumed += value
      });
      if ((total_consumed + new_amount_used) > ingredient_quantity) {
        var remaining_quantity = total_consumed < ingredient_quantity ? (ingredient_quantity - total_consumed) : 0
        if (remaining_quantity === 0) {
          element.val('')
        } else {
          element.val(remaining_quantity)
        }
        new_amount_used = remaining_quantity
      }
      total_consumed = total_consumed + new_amount_used
      var ingredient_id = element.closest("tr").data("ingredient_id")
      $(`td[name='remaining_${ingredient_id}']`).text(`${ingredient_quantity}-${total_consumed}=${ingredient_quantity-total_consumed}`)
      element.closest("tr").find('.ingredient-progress').css('width', `${parseInt((ingredient_quantity-total_consumed)*100/ingredient_quantity)}%`)
      var date_of_using = element.closest("form").data("date_of_using")

      update_consumptions_table_header(date_of_using)
      if (new_amount_used != amount_used) {
        submit_consumption_form(element, new_amount_used)
      }
    }

    function update_consumptions_table_header(date_of_using) {
      var consumption_content_dated = `<span class="badge px-1 py-1 bg-primary rounded-pill">${date_of_using}</span>`
      $(meal_types).each(function(index, meal_type) {
        var total_price_dated = 0.0
        $(`form[data-date_of_using="${date_of_using}"][data-ingredient_meal_type="${meal_type}"]`).each(function(index, element) {
          element = $(element)
          var unit_price = parseFloat(element.data("ingredient_unit_price"))
          var quantity = parseFloat(element.find("input[name='amount_used']").val()) || 0
          total_price_dated += (unit_price * quantity)
        });
        total_price_dated = total_price_dated.toFixed(2)
        consumption_content_dated += `<br /><span class="badge px-1 py-1 bg-success rounded-pill">${meal_type}{% trans ':' %}${total_price_dated}</span>`
      });
      $(`th[data-date_of_using="${date_of_using}"]`).html(consumption_content_dated)
    }

    function update_consumptions_table_headers() {

      $(date_range).each(function(index, date_h) {
        update_consumptions_table_header(date_h)
      });
    }

    function set_consumptions_table_scroll_padding() {
      var consumptions_table = $("#consumptions_table");
      var consumptions_table_container = $('#consumptions_table_container');
      var header_height = consumptions_table.find('thead').outerHeight(true) || 0;
      var header_fixed_cols__width = $('thead th').eq(0).outerWidth(true) || 0;
      header_fixed_cols__width += ($('thead th').eq(1).outerWidth(true) || 0);

      header_height = Math.ceil(header_height)
      header_fixed_cols__width = Math.ceil(header_fixed_cols__width)

      consumptions_table_container.css({
        "scroll-padding": `${header_height}px 0px 0px ${header_fixed_cols__width}px`
      });
    }

    $(document).ready(function() {
      is_loading = true
      var progress = 0
      $.each(ingredient_ids, function(index, value) {
        $.ajax({
          url: "/canteen/create_consumption/" + value,
          method: 'GET',
          success: function(data) {
            data = $(data)
            var footer_progressbar = $('.progress-footer')
            data.each(function(index, element) {
              if (is_weekend(new Date($(element).data("date_of_using")))) {
                $(element).find('[name="amount_used"]').addClass("weekend")
              }
            });
            data.find('input[name="amount_used"]').blur(function() {
              amount_used_input_blur(this)
            });
            $('#ingredient_num_' + value).append(data)
            if (footer_progressbar) {
              progress += 1
              footer_progressbar.css('width', `${progress*100/ingredient_ids_length}%`)
              if (progress >= ingredient_ids_length) {
                footer_progressbar.css('width', "0%")
                update_consumptions_table_headers()
                set_consumptions_table_scroll_padding()
                is_loading = false
              }
            }

          }
        });
      });
    });


    $(document).ready(function() {
      function navigate_to_next_cell($currentInput, direction) {
        var td = $currentInput.closest("form").closest('td');
        var columnIndex = td.index();

        var rowIndex = td.closest("tr").index()
        if (direction == 'l') {
          columnIndex = columnIndex - 1
          rowIndex = rowIndex + 1
        } else if (direction == 'r') {
          columnIndex = columnIndex + 1
          rowIndex = rowIndex + 1
        } else if (direction == "u") {
          rowIndex = rowIndex
        } else if (direction == 'd') {
          rowIndex = rowIndex + 2
        }
        var cell = $('#consumptions_table').find(`tr:eq(${rowIndex}) td:eq(${columnIndex})`);
        var amount_used_input = cell.find('input[name="amount_used"]')
        amount_used_input.first().focus()

      }

      $('#consumptions_table').on('keydown', 'input[name="amount_used"]', function(e) {
        if ([9, 13, 37, 38, 39, 40].includes(e.keyCode)) {
          e.preventDefault();
          direction = e.keyCode === 9 ? "r" :
            e.keyCode === 13 ? "d" :
            e.keyCode === 37 ? "l" :
            e.keyCode === 38 ? "u" :
            e.keyCode === 39 ? "r" :
            e.keyCode === 40 ? "d" : ""

          navigate_to_next_cell(
            $(this),
            direction
          );
        }
        if ((e.keyCode < 91 && e.keyCode > 64) || e.keyCode == 32) {
          e.preventDefault()
        }

      });
    });

    function generate_spreadsheet() {
      var include_food_sheets = $("#include_food_sheets").is(':checked')
      var month = $(".workbook-month-select").val()
      if (include_food_sheets) {
        window.open(`/canteen/generate_spreadsheet/${month}?include_food_sheets=true`, 'generate_spreadsheet');
      } else {
        window.open(`/canteen/generate_spreadsheet/${month}`, 'generate_spreadsheet');
      }
    }

    function set_consumptions_table_size() {
      const generate_spreadsheet_btn = $("#generate_spreadsheet_btn")
      const consumptions_table = $("#consumptions_table")
      const header = $("header")
      const footer = $("footer")
      const height = Math.round((footer.offset().top - generate_spreadsheet_btn.height() - consumptions_table.offset().top) * 0.95)
      consumptions_table.parent().height(height)
    }

    function list_consumptions() {
      if (is_loading) {
        return
      }
      var new_storage_date_start = $('#storage_date_start_input').val() || 0
      var storage_date_start_original_value = $("#storage_date_start_input").data("original_value") || 0
      var new_storage_date_end = $('#storage_date_end_input').val() || 0
      var storage_date_end_original_value = $("#storage_date_end_input").data("original_value") || 0
      if (new_storage_date_start) {
        if ((new Date(new_storage_date_start)) != (new Date(storage_date_start_original_value))) {
          set_simple_cookie("storage_date_start", new_storage_date_start)
        }
      } else {
        delete_cookie("storage_date_start")
      }

      if (new_storage_date_end) {
        if ((new Date(new_storage_date_end)) != (new Date(storage_date_end_original_value))) {
          set_simple_cookie("storage_date_end", new_storage_date_end)
        }
      } else {
        delete_cookie("storage_date_end")
      }
      location.reload()
    }

    function sort_consumptions_table_rows(sort_key = "") {
      if (sort_key == "") {
        return
      }
      if (is_loading) {
        return
      }

      var cookie_name = window.location.pathname
      var key = sort_key
      var consumptions_table = $("#consumptions_table")
      var consumptions_table_body = $(consumptions_table).find("tbody")
      var params = set_sort_params_to_cookie(cookie_name, key)
      is_loading = true
      $.get('{% url "canteen:create_consumptions" %}?get_ordered_ids=1', function(response) {
        var ordered_ids = response.ordered_ids
        if (!ordered_ids) {
          return
        }
        var consumptions_table_rows = {}
        $(consumptions_table_body).find("tr").each(function(trindex, tr_element) {
          console.log(tr_element)
          var row = $(tr_element);
          var ingredient_id = row.data('ingredient_id')
          console.log(row)
          consumptions_table_rows[ingredient_id] = row
        });
        $(consumptions_table_body).empty()
        $(ordered_ids).each(function(id_index, ordered_id) {
          var ordered_row = consumptions_table_rows[ordered_id]
          console.log(ordered_row)
          if (ordered_row) {
            $(consumptions_table_body).append(ordered_row)
          }
        })
        $("td").find('input[name="amount_used"]').blur(function(input_element) {
          input_element = $(input_element)
          amount_used_input_blur(input_element)
        });
        is_loading = false
      });

    }

    $(document).ready(function() {
      var cookie_name = window.location.pathname
      set_sort_element_arrows(cookie_name)
    });

    $(window).resize(function() {
      set_consumptions_table_size()
      set_consumptions_table_scroll_padding()
    });

    $(document).ready(function() {
      set_consumptions_table_size()
    });
    $(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 %}