{% extends "main.html" %}
{% load static %}
{% load bootstrap4 %}

{% block title %}Commande d'Écobox pour le {{ date_reservation.date_livraison }}
{% endblock %}

{% block head %}
  <script type="text/javascript" src="{% static "ecobox/ecobox.js" %}"></script>
{% endblock %}

{% block content %}
  <div class="default-container">
    <p>
      <a href={% url 'ecobox:commande' %}>« Retour à la liste des dates</a>
    </p>

    {% for message in messages %}
      <div {% if message.tags %} class="alert {{ message.tags }}" {% endif %}>{{ message }}
      </div>
    {% endfor %}

    <h1>Commande d'Ecobox pour le {{ date_reservation.date_livraison  }}</h1>

    <p>Cette interface est réservée aux commandes pour le personnel de l'ENSEEIHT.</br>Si vous êtes étudiant, identifiez
    vous avant de passer votre commande.</p>

  <form method="post" action="">
    <fieldset>
      <legend>Informations : </legend>
      {% bootstrap_form form %}
    </fieldset>
    {% for eco in date_reservation.ecobox_dispo.all %}
      {% if eco.visible %}
        <h2>{{ eco.nom }}</h2>

        <p>{{ eco.description }}</p>
        {% if eco.disponible %}
          <p>
            <strong>Prix : </strong>{{ eco.chaine_prix }}</p>
          <p>
            <strong>Quantité à commander : </strong>
            <select name="quantite_{{ eco.id }}" data-id="{{ eco.id }}" data-price="{{ eco.chaine_prix_js }}">
              {% for i in nombres %}
                <option value="{{i}}">{{i}}</option>
              {% endfor %}
            </select>
          </p>
          <p style="visibility: hidden; display: none;" id="prix-{{ eco.id }}">
            <strong>Prix total de ces produits :
      </strong>
            <span></span></p>
          <hr/>
        {% else %}
          <p> Cette ecobox est actuellement indisponible. Vous pouvez <a href="bdd@bde.enseeiht.fr">contacter le BDD</a> pour
      plus d'informations.</p>
        {% endif %}
      {% endif %}
    {% endfor %}
    <p>
      <strong>Prix total de la commande : </strong>
      <span id="prix-commande">0,00 €</span></p>
    <br>
    <input type="submit" value="Valider la commande" name="Commander"/>
  </form>
  <p style="margin-top: 20px;">
    <a href="mailto:bdd@bde.enseeiht.fr">Contacter le BDD (bdd@bde.enseeiht.fr)</a>
  </p>
</div>
{% endblock %}