{% extends "base/document.html" %}
{% load crispy_forms_tags %}
{% block title %}
  {% trans "Consume Ingredients" %}
{% endblock %}
{% block content %}
  <h1>{% trans "Consume Ingredients" %}</h1>
  <hr>
  <div class="container">
    <div class="row justify-content-end">
      <button class="btn btn-outline-success col-md-1 col-lg-1 col-2 mx-1 btn-order-by"
              id="sort_storage_date"
              style="font-size: 90%"
              onclick="list_consumptions('storage_date');">
        {% trans "Storage Date" %}
      </button>

      <button class="btn btn-outline-success col-md-1 col-lg-1 col-2 mx-1 btn-order-by"
              id="sort_name"
              onclick="list_consumptions('name');">
        {% trans "Ingredient Name" %}
      </button>

      <button class="btn btn-outline-success col-md-1 col-lg-1 col-2 mx-1 btn-order-by"
              id="sort_meal_type__name"
              onclick="list_consumptions('meal_type__name');">
        {% trans "Meal Type" %}
      </button>

      <button class="btn btn-outline-success col-md-1 col-lg-1 col-2 mx-1 btn-order-by"
              id="sort_category__name"
              onclick="list_consumptions('category__name');">
        {% trans "Category Name (canteen__consumption_create)" %}
      </button>

      <a class="btn btn-success col-md-1 col-lg-1 col-2 mx-1"
         target="canteen__list_categories"
         href="{% url "canteen:list_categories" %}">{% trans "Ingredient Categories" %}</a>

      <a class="btn btn-primary col-2 col-md-1 col-lg-1"
         target="canteen__list_meal_types"
         href="{% url "canteen:list_meal_types" %}">{% trans "Ingredient Meal Types" %}</a>

      <div class="col col-3 col-md-2 col-lg-2">
        <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-3 col-md-2 col-lg-2">
        <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-md-1 col-lg-1 col-2"
              onclick="list_consumptions();">{% trans "Refresh" %}</button>
    </div>
  </div>
  <div class="table-responsive table-container">
    <table class="table table-consumptions cotable-bordered table-striped table-hover table-condensed scroll-vertical ">
      <thead>
        <tr>
          {% if ingredients %}
            <th class="">{% trans "Ingredient Name" %}</th>
            <th class="">{% trans "Remaining Quantity" %}</th>
          {% endif %}
          {% for date_h in date_range %}
            <th data-date_of_using="{{ date_h }}" class="consumption-date">
              {{ date_h }}
              {% for meal_type in meal_types %}
                <br />
                |
              {% 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_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 }}
              {% if ingredient.meal_type != "" %}
                <span style="font-size: 80%;">
                  <br />
                  {% blocktrans with meal_type=ingredient.meal_type.name category=ingredient.category.name %}
                  ({{ meal_type }}, {{ category }})
                  {% endblocktrans %}
                </span>
              {% else %}
                {% blocktrans with category=ingredient.category.name%}
                ({{ category }})
                {% endblocktrans %}
              {% endif %}
            </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;
      font-family: Mono;
    }

    .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;
      font-family: Mono;
      text-align: right;
    }

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

    .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_types|json_script:'meal_types' }}
  {{ 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 url_params = new URLSearchParams(url.search)

    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_types").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 dont_submit = 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() {
      for (var [key, value] of url_params) {
        if (key.startsWith("sort_")) {
          value = value == "+" ? "&uarr;" : (value == "-" ? "&darr;" : "")
          $(`#${key}`).append(value)
        }
      }
    });

    $(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($.trim(element.val())) || 0
      new_amount_used = parseInt(new_amount_used) || 0
      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_table_header(date_of_using)
      if (new_amount_used != amount_used) {
        submit_consumption_form(element, new_amount_used)
      }
    }

    function update_table_header(date_of_using) {
      var consumption_content_dated = date_of_using
      $(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 />${meal_type}:${total_price_dated}`
      });
      $(`th[data-date_of_using="${date_of_using}"]`).html(consumption_content_dated)
    }

    function update_table_headers() {

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


    $(document).ready(function() {
      dont_submit = 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_table_headers()
                dont_submit = false
              }
            }

          }
        });
      });
    });


    $(document).ready(function() {
      $('.table-consumptions').on('keydown', 'input[name="amount_used"]', function(e) {
        if ([9, 13, 37, 38, 39, 40].includes(e.keyCode)) {
          e.preventDefault();
          navigateToNextCell(
            $(this),
            e.keyCode === 9 ? "r" :
            e.keyCode === 13 ? "d" :
            e.keyCode === 37 ? "l" :
            e.keyCode === 38 ? "u" :
            e.keyCode === 39 ? "r" :
            e.keyCode === 40 ? "d" : ""
          );
        }
        if ((e.keyCode < 91 && e.keyCode > 64) || e.keyCode == 32) {
          e.preventDefault()
        }

      });

      function navigateToNextCell($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 = $('.table-consumptions').find(`tr:eq(${rowIndex}) td:eq(${columnIndex})`);
        var amount_used_input = cell.find('input[name="amount_used"]')
        amount_used_input.first().focus()

      }
    });

    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 = $(".table-consumptions")
      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)
    }
    $(window).resize(function() {
      set_consumptions_table_size()
    });
    $(document).ready(function() {
      set_consumptions_table_size()
    });

    function list_consumptions(sort_key = "") {
      var new_storage_date_start = $('#storage_date_start_input').val()
      var new_storage_date_end = $('#storage_date_end_input').val()
      query = {}
      if (new_storage_date_start) {
        query["storage_date_start"] = new_storage_date_start
        set_simple_cookie("storage_date_start", new_storage_date_start)
      } else {
        query["storage_date_start"] = ""
        delete_cookie("storage_date_start")
      }

      if (new_storage_date_end) {
        query["storage_date_end"] = new_storage_date_end
        set_simple_cookie("storage_date_end", new_storage_date_end)
      } else {
        query["storage_date_end"] = ""
        delete_cookie("storage_date_end")
      }

      if (sort_key !== "") {
        sort_key = "sort_" + sort_key
        var sort_value = url_params.get(sort_key) || ""
        if (sort_value == "+") {
          query[sort_key] = "-"
        } else if (sort_value == "-") {
          query[sort_key] = ""
        } else {
          query[sort_key] = "+"
        }
      }

      update_href(query)
    }
  </script>

{% endblock %}