{% extends 'base.html' %}

{% block title %}{{ grouped_order }}{% endblock %}

{% block content %}
    <p class="desktop-hidden mobile-content-title">
        {% block content_title %}{{ grouped_order }} : commander{% endblock %}
    </p>
    {% if user.is_authenticated %}
        <div class="buttons">
            <a class="button is-light" href="{% url 'order:index' %}">
                <i class="fa fa-arrow-left mr-3" aria-hidden="true"></i>Retour à mes commandes
            </a>
        </div>
    {% endif %}
    <div class="box is-info">
        <div class="columns">
            <div class="column is-8">
                <p class="title">{{ grouped_order }}</p>
                {% if grouped_order.description %}
                    <p class="formatted-text">{{ grouped_order.description }}</p>{% endif %}
                {% if not user.is_authenticated %}
                    <p><span class="has-text-dark is-italic">Vous êtes l'organisateur·ice ?</span>
                        <a href="{% url 'order:grouped_order_overview' grouped_order.code %}">
                            Connectez-vous pour accéder à la page de gestion</a>
                    </p>
                {% endif %}
            </div>
            <div class="column">
                {% if grouped_order.place %}
                    <p><i class="fa fa-map-pin mr-3" aria-label="Lieu" title="Lieu"
                          aria-hidden="true"></i>{{ grouped_order.place }}</p>
                {% endif %}
                <p><i class="fa fa-calendar-check-o mr-3" aria-label="Date limite de commande"
                      title="Date limite de commande" aria-hidden="true"></i>
                    Commandes avant le {{ grouped_order.deadline }}
                </p>
                <p><i class="fa fa-truck mr-3" aria-label="Date de livraison" title="Date de livraison"
                      aria-hidden="true"></i>
                    Livraison le {{ grouped_order.delivery_date }}{% if grouped_order.delivery_slot %},
                        {{ grouped_order.delivery_slot }}{% endif %}
                </p>

                {% if user == grouped_order.orga %}
                    <a class="button is-primary" href="{% url 'order:grouped_order_overview' grouped_order.code %}">
                        <i class="fa fa-list-ul mr-3" aria-hidden="true"></i>Gestion de la commande groupée
                    </a>
                {% else %}
                    <p>Organisateur·ice : {{ grouped_order.orga }}</p>
                    <a class="button is-light" href="mailto:{{ grouped_order.orga.username }}">Contacter
                        l'organisateur·ice</a>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="box">
        <!-- Boite à messages -->
        {% if not grouped_order.is_to_be_delivered %}
            <p>
                <strong>Cette commande groupée est terminée</strong>, la livraison a eu lieu
                le {{ grouped_order.deadline }}.
            </p>
        {% elif not grouped_order.is_open %}
            <p>
                <strong>La période de commande est terminée</strong> depuis le {{ grouped_order.deadline }}.
                {% if user == grouped_order.orga %}
                    En tant qu'organisateur·ice, vous pouvez encore commander jusqu'à la date de livraison.
                {% else %}
                    Si vous aviez commandé, rendez-vous le {{ grouped_order.delivery_date }} pour récupérer vos produits
                    !
                {% endif %}
            </p>
        {% endif %}
        {% if grouped_order.is_open or user == grouped_order.orga and grouped_order.is_to_be_delivered %}
            {% if not grouped_order.item_set.first %}
                <p>Il n'y a pas de produits disponibles dans cette commande !</p>
            {% else %}
                <p class="title">Commander</p>
                <form id="inputs-parent" method="post" action="{% url 'order:order' grouped_order.code %}" onSubmit="document.getElementById('submit').disabled=true;">
                    {% csrf_token %}
                    <!-- Tableau de commandes - sur ordi -->
                    <table class="table is-hidden-touch">
                        <thead>
                        <tr>
                            <th>Produit</th>
                            <th>Prix unitaire</th>
                            <th>Quantité</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for item in grouped_order.item_set.all %}
                            <tr>

                                <td>{{ item.name }}</td>
                                <td>{{ item.price }} €</td>
                                <td><input name="quantity_{{ item.id }}" size="4" type="number" value="0" min="0"
                                           {% if item.get_remaining_nb == 0 %}disabled{% endif %}></input>
                                    {% if item.get_remaining_nb is not null %}
                                        <span class="is-italic mini-title">
            {% if item.get_remaining_nb == 0 %}Produit épuisé
            {% else %}
                {{ item.get_remaining_nb }} {% if item.get_remaining_nb == 1 %}disponible{% else %}disponibles
            {% endif %}</span>
            {% endif %}{% endif %}</td>
                            </tr>
                        {% endfor %}
                        <tr>
                            <td></td>
                            <td></td>
                            <td><strong>Total : <span class="total">0</span> €</strong></td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- Tableau de commandes - sur mobile et tablette -->
                    <div class="is-hidden-desktop">
                        {% for item in grouped_order.item_set.all %}
                            <div class="card mb-4 is-info">
                                <div class="card-header has-background-info">
                                    <p class="card-header-title">{{ item.name }}</p>
                                </div>
                                <div class="card-footer">
                                    <div class="card-footer-item">
                                        <p class="mini-title">Prix unitaire</p>
                                        <p>{{ item.price }} €</p>
                                    </div>
                                    <div class="card-footer-item">
                                        <td><input name="quantity_{{ item.id }}" size="4" type="number" value="0"
                                                   min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}>
                                        </input></td>
                                        {% if item.get_remaining_nb is not null %}
                                            <span class="is-italic mini-title">
              {% if item.get_remaining_nb == 0 %}Produit épuisé
              {% else %}
                  {{ item.get_remaining_nb }} {% if item.get_remaining_nb == 1 %}disponible{% else %}disponibles
              {% endif %}</span>
              {% endif %}{% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                        <div><strong>Total : <span class="total">0</span> €</strong></div>
                    </div>

                    {% if error_message %}<p class="has-text-danger">{{ error_message }}</p>{% endif %}
                    {% comment %} The value attribute is used when the form is redered with error messages,
    in order not to loose entered values {% endcomment %}
                    <br>
                    <p class="subtitle">Vos informations</p>
                    <div class="columns">
                        <div class="column">
                            <p><label for="first_name">Prénom : </label>
                                <input id="first_name" type="text" name="first_name" placeholder="Votre prénom"
                                       value="{{ author.first_name }}" required></p>
                            <p><label for="first_name">Nom : </label>
                                <input id="last_name" type="text" name="last_name" placeholder="Votre nom"
                                       value="{{ author.last_name }}" required></p>
                        </div>
                        <div class="column">
                            <p><label for="phone">Numéro de téléphone :</label>
                                <input id="phone" type="tel" pattern="[0-9]{10}" placeholder="0601020304" name="phone"
                                       value="{{ author.phone }}" required></p>
                            <p><label for="email">Adresse mail : </label>
                                <input id="email" type="email" placeholder="exemple@mail.fr" name="email"
                                       value="{{ author.email }}" required></p>
                        </div>
                    </div>
                    <p><label for="note">Note à l'organisateur·ice</label>
                        <textarea id="note" rows=3 placeholder="(facultatif)" name="note">{{ note }}</textarea></p>

                    <div class="buttons">
                        <button id="submit" type="submit" value="Order" class="button is-primary">
                            <i class="fa fa-shopping-basket mr-3" aria-hidden="true"></i>Commander
                        </button>
                        <p>Total : <span class="total">0</span> €</p>
                    </div>
                </form>
            {% endif %}
        {% endif %}
    </div>
{% endblock %}

<script>
    {% block extra_js %}
        // Compute total price whenever a value in input is modified
        document.getElementById("inputs-parent").addEventListener("change", function () {
            inputs = [...document.getElementsByTagName("input")].filter(input => input.getAttribute("name").indexOf("quantity_") === 0);  //filter the inputs to get the quantity inputs only

            prices = {{ prices_dict | safe }};
            let total_price = 0;

            for (let input of inputs) {
                input_name = input.getAttribute("name");
                item_id = input_name.split("_")[1];
                total_price = Number((total_price + (prices[item_id] * input.value)).toFixed(2));  //Limit precision to 2 digits for each added part and for the total
            }

            [].forEach.call(document.getElementsByClassName('total'), function (el) {
                el.innerHTML = total_price;
            })
        });
    {% endblock %}
</script>