{% extends "core/base.jinja" %}

{% block title -%}
  {% trans %}Eboutic{% endtrans %}
{%- endblock %}

{% block description -%}
  {% trans %}The online shop of the association.{% endtrans %}
{%- endblock %}

{% block additional_js %}
    {# This script contains the code to perform requests to manipulate the
    user basket without having to reload the page #}
  <script type="module" src="{{ static('bundled/eboutic/eboutic-index.ts') }}"></script>
{% endblock %}

{% block additional_css %}
  <link rel="stylesheet" href="{{ static("eboutic/css/eboutic.css") }}">
  <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
{% endblock %}

{% block content %}
  <h1 id="eboutic-title">{% trans %}Eboutic{% endtrans %}</h1>

  <div id="eboutic" x-data="basket({{ last_purchase_time }})">
    <div id="basket">
      <h3>Panier</h3>
      <form method="post" action="">
        {% csrf_token %}
        <div x-ref="basketManagementForm">
          {{ form.management_form }}
        </div>

        {% if form.non_form_errors() or form.errors %}
          <div class="alert alert-red">
            <div class="alert-main">
              {% for error in form.non_form_errors() + form.errors %}
                <p style="margin: 0">{{ error }}</p>
              {% endfor %}
            </div>
          </div>
        {% endif %}
        <ul class="item-list">
                  {# Starting money #}
          <li>
            <span class="item-name">
              <strong>{% trans %}Current account amount: {% endtrans %}</strong>
            </span>
            <span class="item-price">
              <strong>{{ "%0.2f"|format(customer_amount) }} €</strong>
            </span>
          </li>

          <template x-for="(item, index) in Object.values(basket)" :key="item.id">
            <li class="item-row" x-show="item.quantity > 0">
              <div class="item-quantity">
                <i class="fa fa-minus fa-xs" @click="remove(item.id)"></i>
                <span x-text="item.quantity"></span>
                <i class="fa fa-plus" @click="add(item)"></i>
              </div>
              <span class="item-name" x-text="item.name"></span>
              <span class="item-price" x-text="(item.unit_price * item.quantity).toFixed(2) + ' €'"></span>

              <input
                type="hidden"
                :value="item.quantity"
                :id="`id_form-${index}-quantity`"
                :name="`form-${index}-quantity`"
                required
                readonly
              >
              <input
                type="hidden"
                :value="item.id"
                :id="`id_form-${index}-id`"
                :name="`form-${index}-id`"
                required
                readonly
              >

            </li>
          </template>
                  {# Total price #}
          <li style="margin-top: 20px">
            <span class="item-name"><strong>{% trans %}Basket amount: {% endtrans %}</strong></span>
            <span x-text="getTotal().toFixed(2) + ' €'" class="item-price"></span>
          </li>
        </ul>
        <div class="catalog-buttons">
          <button @click.prevent="clearBasket()" class="btn btn-grey">
            <i class="fa fa-trash"></i>
            {% trans %}Clear{% endtrans %}
          </button>
          <button class="btn btn-blue">
            <i class="fa fa-check"></i>
            <input type="submit" value="{% trans %}Validate{% endtrans %}"/>
          </button>
        </div>
      </form>
    </div>
    <div id="catalog">
      {% if not request.user.date_of_birth %}
        <div class="alert alert-red" x-data="{show_alert: true}" x-show="show_alert" x-transition>
          <span class="alert-main">
            {% trans trimmed %}
              You have not filled in your date of birth.
              As a result, you may not have access to all the products in the online shop.
              To fill in your date of birth, you can go to
            {% endtrans %}
            <a href="{{ url("core:user_edit", user_id=request.user.id) }}">
              {% trans %}this page{% endtrans %}
            </a>
          </span>
          <span class="clickable" @click="show_alert = false">
            <i class="fa fa-close"></i>
          </span>
        </div>
      {% endif %}
      {% for priority_groups in products|groupby('order') %}
        {% for category, items in priority_groups.list|groupby('category') %}
          {% if items|count > 0 %}
            <section>
                            {# I would have wholeheartedly directly used the header element instead
                            but it has already been made messy in core/style.scss #}
              <div class="category-header">
                <h3>{{ category }}</h3>
                {% if items[0].category_comment %}
                  <p><i>{{ items[0].category_comment }}</i></p>
                {% endif %}
              </div>
              <div class="product-group">
                {% for p in items %}
                  <button
                    id="{{ p.id }}"
                    class="card product-button clickable shadow"
                    :class="{selected: basket.some((i) => i.id === {{ p.id }})}"
                    @click='addFromCatalog({{ p.id }}, {{ p.name|tojson }}, {{ p.selling_price }})'
                  >
                    {% if p.icon %}
                      <img
                        class="card-image"
                        src="{{ p.icon.url }}"
                        alt="image de {{ p.name }}"
                      >
                    {% else %}
                      <i class="fa-regular fa-image fa-2x card-image"></i>
                    {% endif %}
                    <div class="card-content">
                      <h4 class="card-title">{{ p.name }}</h4>
                      <p>{{ p.selling_price }} €</p>
                    </div>
                  </button>
                {% endfor %}
              </div>
            </section>
          {% endif %}
        {% endfor %}
      {% else %}
        <p>{% trans %}There are no items available for sale{% endtrans %}</p>
      {% endfor %}
    </div>
  </div>
{% endblock %}