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

{% block title %}Commande d'Écobox{% endblock %}

{% block content %}
<div class="default-container">
    {% if peut_gerer %}
    <div class="float-right"><a href="{% url 'gestion:ecobox:gestion_commandes' %}">Gestion des ecoboxs »</a></div>
    {% endif %}

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

    <h1>Commande d'Écobox</h1>

    {% if nb_reserv_non_paye > 0 %}
    <p class="mb-4">
      Vous avez {{ nb_reserv_non_paye }} commande{% if nb_reserv_non_paye > 1 %}s{% endif %} en cours.
        <a href="{% url 'ecobox:liste_commande' %}">Détails</a>
    </p>
    {% endif %}
    {% if not request.user.is_authenticated %}
    Cette interface est réservée au personnel de l'ENSEEIHT. Si vous êtes étudiant, merci de vous identifier avant de
    passer votre commande.
    {% endif %}

    <table class="table table-striped">
        <thead>
            <tr>
                <th>Date de livraison</th>
                <th>Date de fin de réservation</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for date in dates %}
            <tr>
                <td>{{ date.date_livraison }}</td>
                <td>{{ date.date_fin_commande.date }} à {{ date.date_fin_commande.time }}</td>
                <td class="text-center">
                    <a href="{% if request.user.is_authenticated %}{% url 'ecobox:commande_user' date.pk %}
                         {% else %}{% url 'ecobox:commande_admin' date.pk %}{% endif %}" class="btn btn-secondary">
                        Réserver maintenant</a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="3">Aucune commande n'est actuellement disponible. Vous pouvez <a
                        href="mailto:{{ ecobox_mail }}">contacter le BDD</a> pour plus d'informations.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <br /><br />
    <h1>Liste des produits :</h1>

    <p id="filters">Trier : </p>

    <div class="row">
        {% for eco in listeecobox %}
        <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 not eco.disponible %}
                            <p class="card-text">Ce produit est actuellement indisponible</p>
                            {% endif %}
                            {% if eco.categorie %}
                            <span class="badge badge-pill badge-info">{{ eco.categorie }}</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <p style="margin-top: 20px;"><a href="mailto:{{ ecobox_mail }}">Contacter le BDD ({{ ecobox_mail }})</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 %}