{% extends "main.html" %}
{% load static %}
{% 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 id="filters">Trier : </p>

    <form method="post" action="">
      <div class="row">
        {% for eco in date_reservation.ecobox_dispo.all %}
          {% if eco.visible and eco.disponible %}
            <div class="col-md-6 p-2" data-categorie="{{ eco.categorie }}">
              <div class="card h-100">
                <div class="row h-100 no-gutters">
                  <div class="col-md-4">
                    {% if eco.photo %}
                      <img src="{{ eco.photo.url }}" style="object-fit: cover" class="h-100 card-img-top" alt="">
                    {% endif %}
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">

                      <h5 class="card-title">
                        <span class="float-right badge badge-pill badge-success">{{ eco.chaine_prix }}</span>
                        {{ eco.nom }}
                      </h5>
                      <p class="card-text">{{ eco.description }}</p>
                      {% if eco.categorie %}
                      <p><span class="badge badge-pill badge-info">{{ eco.categorie }}</span></p>
                      {% endif %}
                      <p>
                        <select class="custom-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>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>

      {% if date_reservation.points_retrait.count %}
        <p>
          <strong>Où voulez vous récupérer votre écobox ?</strong>
        </p>
        <select name="point_retrait" data-id="point_retrait">
          {% for adresse in date_reservation.points_retrait.all %}
            <option value="{{ adresse.pk }}">{{ adresse }}</option>
          {% endfor %}
        </select>
        <hr/>
      {% endif %}

      <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 %}

{% block js %}
<script>
window.addEventListener('load', () => {

    const filters = document.querySelector('#filters')
    const boxes = document.querySelectorAll('[data-categorie]')
    const categories = new Set()

    for (const box of boxes) {
        if (box.dataset.categorie && !categories.has(box.dataset.categorie)) {
            categories.add(box.dataset.categorie)
            const button = document.createElement('button')
            button.classList.add('btn', 'btn-sm', 'btn-secondary', 'mr-1', 'mb-1')
            button.type = 'button'
            button.addEventListener('click', () => filter(box.dataset.categorie))
            button.append(box.dataset.categorie)
            filters.append(button)
        }
    }

    const button = document.createElement('button')
    button.classList.add('btn', 'btn-sm', 'btn-success', 'mb-1')
    button.type = 'button'
    button.addEventListener('click', () => filter(''))
    button.append('×')
    filters.append(button)

    const filter = (cat) => {
        for (const box of boxes) {
            if (cat) box.toggleAttribute('hidden', cat !== box.dataset.categorie)
            else box.removeAttribute('hidden')
        }
    }

})
</script>
{% endblock %}