{% 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>
  <form method="post" action="">
    {% csrf_token %}
    <div class="card-body">
      {% crispy form %}
    </div>
  <h3 class="card-header text-center">
    {% trans "Add supplements (optional)" %}
  </h3>
  {{ formset.management_form }}
  <table class="table table-condensed table-striped">
    {% for form in formset %}
    {% if forloop.first %}
    <thead>
      <tr>
        <th>{{ form.food.label }}<span class="asteriskField">*</span></th>
        <th>{{ form.price.label }}<span class="asteriskField">*</span></th>
        <th>{{ form.available.label }}<span class="asteriskField">*</span></th>
      </tr>
    </thead>
    <tbody id="form_body">
      {% endif %}
      <tr class="row-formset">
        <td>{{ form.food }}</td>
        <td>{{ form.price }}</td>
        <td>{{ form.available }}</td>
        {# These fields are hidden but handled by the formset to link the id and the invoice id #}
        {{ form.dish }}
        {{ form.id }}
      </tr>
      {% endfor %}
    </tbody>
  </table>

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

{# Hidden div that store an empty supplement form, to be copied into new forms #}
<div id="empty_form" style="display: none;">
    <table class='no_error'>
        <tbody id="for_real">
            <tr class="row-formset">
                <td>{{ formset.empty_form.food }}</td>
                <td>{{ formset.empty_form.price }} </td>
                {{ formset.empty_form.dish }}
                {{ formset.empty_form.id }}
            </tr>
        </tbody>
    </table>
</div>

{% endblock %}

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

    $("#id_supplements-TOTAL_FORMS").val($(".row-formset").length - 1);

    $('#add_more').click(function () {
        let form_idx = $('#id_supplements-TOTAL_FORMS').val();
        $('#form_body').append($('#for_real').html().replace(/__prefix__/g, form_idx));
        $('#id_supplements-TOTAL_FORMS').val(parseInt(form_idx) + 1);
        $('#id_supplements-' + parseInt(form_idx) + '-id').val(IDS[parseInt(form_idx)]);
    });

    $('#remove_one').click(function () {
        let form_idx = $('#id_supplements-TOTAL_FORMS').val();
        if (form_idx > 0) {
            IDS[parseInt(form_idx) - 1] = $('#id_supplements-' + (parseInt(form_idx) - 1) + '-id').val();
            $('#form_body tr:last-child').remove();
            $('#id_supplements-TOTAL_FORMS').val(parseInt(form_idx) - 1);
        }
    });
</script>
{% endblock %}