{% extends "admin/change_form.html" %}
{% load i18n admin_urls static admin_modify fournée_modify %}

{% if save_on_top %}{% block submit_buttons_top %}{% fournée_submit_row %}{% endblock %}{% endif %}

{% block submit_buttons_bottom %}{% fournée_submit_row %}{% endblock %}


{% block extrahead %}{{ block.super }}
<style>
  .alt { display: none}
  .fournee-alternative.fournee-show > .alt { display: inline; }
</style>
{% endblock %}

{% block after_field_sets %}
{% if commandes %}
<h2>Résumé des commandes</h2>
<ul>
  {% for commande in commandes %}
  <li>{{ commande }}</li>
  {% endfor %}
</ul>
{% endif %}
{% endblock %}

{% block after_related_objects %}
{% if coulées %}
  <h2>Résumé des coulées</h2>
  <table>
    <thead>
      <tr>
        <th></th>
        {% for i in ingrédients %}
        <th scope="col" style="text-align:center;{% if i.couleur != '#000000' %} background-color: {{ i.couleur }};{% endif %}">{{ i.nom }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      <tr>
        {% for i, p in totaux_coulées %}
          {% if forloop.first %}
            <th>Total pain : {{p}} kg</th>
          {% else %}
            {% if i.conditionnement %}
              {% emballe p i as alt %}
              {% if alt %}
                <th style="text-align:center" class="fournee-alternative">
                  {{ p }} kg
                  <img style="vertical-align:top;" src="{% static "admin/img/icon-viewlink.svg" %}" alt="symbole œil" title="Bascule l'affichage avec ou sans conditionnement">
                  <span class="alt"><br>({{ alt }})</span>
                </th>
              {% else %}
                <th scope="col" style="text-align:center">
                  {{ p }} kg
                </th>
              {% endif %}
            {% else %}
              <th scope="col" style="text-align:center">
                {{ p }} kg
              </th>
            {% endif %}
          {% endif %}
        {% endfor %}
      </tr>
    </tbody>
  </table>
  <div style="display:inline-grid">
  {% for problems, ingrédients, quantités in coulées %}
  <h3 style="margin-top: 2em;{% if problems %} color: var(--delete-button-hover-bg);{% endif %}">{{ quantités.0.1 }}{% if problems %} ({{ problems }}){% endif %}</h3>
  <table>
    <thead>
      <tr>
        <th></th>
        {% for i in ingrédients %}
        <th scope="col" style="text-align:center;{% if i.fourniture.couleur != '#000000' %} background-color: {{ i.fourniture.couleur }};{% endif %}">{{ i.fourniture.nom }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      <tr>
        {% for i, q in quantités %}
          {% if forloop.first %}
            <th scope="row">{{ q.pâte.nom }}</th>
          {% else %}
            {% if i.fourniture.conditionnement %}
              {% emballe q i.fourniture as alt %}
              {% if alt %}
                <td style="text-align:center" class="fournee-alternative">
                  {{ q }} kg
                  <img style="vertical-align:top;" src="{% static "admin/img/icon-viewlink.svg" %}" alt="symbole œil" title="Bascule l'affichage avec ou sans conditionnement">
                  <span class="alt"><br>({{ alt }})</span>
                </td>
              {% else %}
                <td style="text-align:center">
                  {{ q }} kg
                </td>
              {% endif %}
            {% else %}
              <td style="text-align:center">
                {{ q }} kg
              </td>
            {% endif %}
          {% endif %}
        {% endfor %}
      </tr>
    </tbody>
  </table>
  {% endfor %}
  </div>
{% endif %}
{% if divisions %}
<hr>
  <h2>Résumé des divisions</h2>
  <table>
    <thead>
      <tr>
        <th></th>
        {% for problems, p in pains %}
        <th scope="col" style="text-align:center{% if problems %}; color: var(--delete-button-hover-bg);{% endif %}">{{ p }}{% if problems %}<br>Sans coulée !!{% endif %}</th>
        {% endfor %}
      </tr>
    </thead>
      <tr>
        {% for p in totaux_divisions %}
          {% if forloop.first %}
            <th>Total pain : {{p}} kg</th>
          {% else %}
            <th scope="col" style="text-align:center">{{ p }}</th>
          {% endif %}
        {% endfor %}
      </tr>
    <tbody>
      <tr></tr>
      {% for commande in divisions %}
      <tr>
        {% for p in commande %}
          {% if forloop.first %}<th scope="row">{% else %}<td style="text-align:center">{% endif %}
          {{ p }}
          {% if forloop.first %}</th>{% else %}</td>{% endif %}
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <p></p>
{% endif %}

<script>
const qtes = document.querySelectorAll(".fournee-alternative");

qtes.forEach(function (qte) {
  qte.addEventListener("click", (event) => {
    event.target.classList.toggle("fournee-show");
  });
});
</script>
{% endblock %}