{% extends 'base.html' %}

{% block title %}Nouvelle commande groupée{% endblock %}

{% block content %}
<p class="desktop-hidden mobile-content-title">
	{% block content_title %}Ajouter des produits à votre commande groupée{% endblock %}
</p>
<div class="box">

  <p class="title">Gestion des produits - {{ grouped_order.name }}</p>
  <p>Sur cette page, vous pouvez ajouter et modifier les produits de votre commande groupée.</p>

  {% url 'order:item_create' grouped_order.code as create_item_url %}

  <table class="table">
    <thead>
      <tr>
        <th>Nom</th>
        <th>Prix unitaire</th>
        <th>Quantité disponible (optionnel)</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <form method="post" action="{{ create_item_url }}">
          {% csrf_token %}
        <td><input name="name" maxlength="100" placeholder="Nom du produit" autofocus required></input></td>
        <td><input type="number" min="0" step="0.01" name="price" size="4" placeholder="5,40" required></input> €</td>
        <td><input type="number" min="0" name="max_limit" size="4" placeholder="42"></input></td>
        <td><button type="submit" class="button is-primary">
          <i class="fa fa-plus-square mr-3" aria-hidden="true"></i>Ajouter
        </button></td>
        </form>
      </tr>
      {% for item in item_list %}
      <tr>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{% if item.max_limit is not null %}{{ item.max_limit }}{% else %}---{% endif %}</td>
        <td>
          {% if item.ordered_nb == 0 %}
          <button class="button is-light is-small js-modal-trigger" data-target="confirm-delete-{{ item.id }}">
            Supprimer
          </button>
          {% else %}
          <span class="is-italic mini-title">Produit déjà commandé</span>
          {% endif %}
        </td>
      </tr>
      <!-- Confirm delete modal -->
      <div id="confirm-delete-{{ item.id }}" class="modal">
        <div class="modal-background"></div>
        <div class="modal-content">
          <div class="box">
            <p>Voulez-vous vraiment supprimer le produit {{ item.name }} de la commande ?</p>
            <form action="{% url 'order:item_delete' grouped_order.code item.id %}" method="post">
              {% csrf_token %}
              <input type="submit" name="{{ item.id }}" value="Oui" class="button is-danger"/>
              <a class="button is-light" href="">Non</a>
            </form>
          </div>
        </div>
      
        <button class="modal-close is-large" aria-label="close"></button>
      </div>
      {% endfor %}
    </tbody>
  </table>

  <div class="buttons is-pulled-right">
    <a href="{% url 'order:grouped_order_overview' grouped_order.code %}" class="button is-primary">Valider</a>
  </div>

</div>

{% endblock %}

<script>
{% block extra_js %}
document.addEventListener('DOMContentLoaded', () => {
  // Functions to open and close a modal
  function openModal($el) {
    $el.classList.add('is-active');
  }

  function closeModal($el) {
    $el.classList.remove('is-active');
  }

  function closeAllModals() {
    (document.querySelectorAll('.modal') || []).forEach(($modal) => {
      closeModal($modal);
    });
  }

  // Add a click event on buttons to open a specific modal
  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
    const modal = $trigger.dataset.target;
    const $target = document.getElementById(modal);

    $trigger.addEventListener('click', () => {
      openModal($target);
    });
  });

  // Add a click event on various child elements to close the parent modal
  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
    const $target = $close.closest('.modal');

    $close.addEventListener('click', () => {
      closeModal($target);
    });
  });

  // Add a keyboard event to close all modals
  document.addEventListener('keydown', (event) => {
    const e = event || window.event;

    if (e.keyCode === 27) { // Escape key
      closeAllModals();
    }
  });
});
{% endblock %}
</script>