{% extends "base.html" %}
{% comment %}
Copyright (C) 2018-2025 by BDE ENS Paris-Saclay
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n crispy_forms_tags %}

{% block content %}
<div class="card bg-white mb-3">
  <h3 class="card-header text-center">
    {{ title }}
  </h3>
  <div class="card-body" id="form"></div>
  <form method="post" action="">
    {% csrf_token %}
    <table class="table table-condensed table-striped">
      {# Fill initial data #}
      {% for display, form in formset %}
      {% if forloop.first %}
      <thead>
	<tr>
	  <th>{{ form.name.label }}</th>
	  <th>{{ form.qrcode.label }}</th>
	  <th>{{ form.fully_used.label }}</th>
	  <th>{{ form.add_all_same_name.label }}</th>
	</tr>
      </thead>
      <tbody id="form_body">
	{% endif %}
	{% if display %}
	<tr class="row-formset ingredients">
	{% else %}
	<tr class="row-formset ingredients" style="display: none">
	{% endif %}
	  <td>{{ form.name }}</td>
	  <td>{{ form.qrcode }}</td>
	  <td>{{ form.fully_used }}</td>
	  <td>{{ form.add_all_same_name }}</td>
	</tr>
      {% endfor %}
      </tbody>
    </table>

    {# Display buttons to add and remove ingredients #}
    <div class="card-body">
      <div class="btn-group btn-block" role="group">
	<button type="button" id="add_more" class="btn btn-success">{% trans "Add ingredient" %}</button>
	<button type="button" id="remove_one" class="btn btn-danger">{% trans "Remove ingredient" %}</button>
      </div>
    <button class="btn btn-primary" type="submit">{% trans "Submit"%}</button>
    </div>
  </form>
</div>

{% endblock %}
{% block extrajavascript %} 
<script>
/* script that handles add and remove lines */

const foods = {{ ingredients | safe }};

function set_ingredient_id () {
	let ingredients = document.getElementsByClassName('ingredients');
	for (var i = 0; i < ingredients.length; i++) {
		ingredients[i].id = 'ingredients-' + parseInt(i);
	};
}
set_ingredient_id();

function prepopulate () {
	for (var i = 0; i < {{ ingredients_count }}; i++) {
		let prefix = 'id_form-' + parseInt(i) + '-';
		document.getElementById(prefix + 'name_pk').value = parseInt(foods[i]['food_pk']);
		document.getElementById(prefix + 'name').value = foods[i]['food_name'];
		document.getElementById(prefix + 'qrcode_pk').value = parseInt(foods[i]['qr_pk']);
		if (foods[i]['qr_number'] === '') {
			document.getElementById(prefix + 'qrcode').value = '';
		}
		else {
		document.getElementById(prefix + 'qrcode').value = parseInt(foods[i]['qr_number']);
		};
		document.getElementById(prefix + 'fully_used').checked = Boolean(foods[i]['fully_used']);
	};
}
prepopulate();

function delete_form_data (form_id) {
	let prefix = "id_form-" + parseInt(form_id) + "-";
	document.getElementById(prefix + "name_pk").value = "";
	document.getElementById(prefix + "name").value = "";
	document.getElementById(prefix + "qrcode_pk").value = "";
	document.getElementById(prefix + "qrcode").value = "";
	document.getElementById(prefix + "fully_used").checked = false;
}
var form_count = {{ ingredients_count }} + 1;

$('#add_more').click(function () {
	let ingredient_form = document.getElementById('ingredients-' + parseInt(form_count));
	if (ingredient_form === null) {
		addMsg(gettext("You can't add more ingredient"), "danger",  5000);
		return;};
	ingredient_form.style = "display: true";
	form_count += 1;
});
  
$('#remove_one').click(function () {
	let ingredient_form = document.getElementById('ingredients-' + parseInt(form_count - 1));
	if (ingredient_form === null) {
		return;};
	ingredient_form.style = "display: none";
	delete_form_data(form_count - 1);
	form_count -= 1;
});

addMsg(gettext("Add ingredient with their name or their qrcode, if two different priority is given to qrcode"), "warning"); 

</script>
{% endblock %}
