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

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

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

{% block metatags %}
  <meta property="og:url" content="{{ request.build_absolute_uri() }}" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Eboutic" />
  <meta property="og:description" content="La boutique en ligne de l'AE" />
  <meta property="og:image" content="{{ request.build_absolute_uri(static("core/img/logo_no_text.png")) }}" />
{% 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.scss") }}">
  <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(
            [{%- for prices in categories -%}
              {%- for p in prices -%}
                {% if not p.sold_out %}{{ p.id }},{% endif %}
              {%- endfor -%}
            {%- endfor -%}],
            {{ 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 %}
        <template x-if="(getTotalAdded() + {{ customer_amount }}) > {{ settings.SITH_ACCOUNT_MAX_MONEY }}">
          <div class="alert alert-red">
            <div class="alert-main">
              {% trans trimmed limit=settings.SITH_ACCOUNT_MAX_MONEY %}
                You cannot purchase the current basket,
                because it would put your AE account balance
                above the {{ limit }}€ limit
              {% endtrans %}
            </div>
          </div>
        </template>
        <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.priceId">
            <li class="item-row" x-show="item.quantity > 0">
              <div class="item-quantity">
                <i class="fa fa-minus fa-xs" @click="remove(item.priceId)"></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.unitPrice * 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.priceId"
                :id="`id_form-${index}-price_id`"
                :name="`form-${index}-price_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"
            :disabled="(getTotalAdded() + {{ customer_amount }}) > {{ settings.SITH_ACCOUNT_MAX_MONEY }}"
          >
            <i class="fa fa-check"></i>
            {% 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 prices in categories %}
        {% set category = prices[0].product.product_type %}
        <section>
          <div class="category-header">
            <h3>{{ category.name }}</h3>
            {% if category.comment %}
              <p><i>{{ category.comment }}</i></p>
            {% endif %}
          </div>
          <div class="product-group">
            {% for price in prices %}
              <button
                id="{{ price.id }}"
                class="card clickable shadow"
                :class="{selected: basket.some((i) => i.priceId === {{ price.id }})}"
                @click='addFromCatalog(
                        {{ price.id }},
                        {{ price.full_label|tojson }},
                        {{ price.amount }},
                        {{ (price.product.product_type_id == settings.SITH_COUNTER_PRODUCTTYPE_REFILLING)|lower }}
                        )'
                {% if price.sold_out %}disabled{% endif %}
              >
                {% if price.product.icon %}
                  <img
                    class="card-image"
                    src="{{ price.product.icon.url }}"
                    alt="image de {{ price.full_label }}"
                  >
                {% else %}
                  <i class="fa-regular fa-image fa-2x card-image"></i>
                {% endif %}
                <div class="card-content">
                  <h4 class="card-title">{{ price.full_label }}</h4>
                  {% if price.sold_out -%}
                    <p><em>{% trans %}Product sold out{% endtrans %}</em></p>
                  {%- endif %}
                  <p>{{ price.amount }} €</p>
                </div>
              </button>
            {% endfor %}
          </div>
        </section>
      {% else %}
        <p>{% trans %}There are no items available for sale{% endtrans %}</p>
      {% endfor %}
    </div>
  </div>
{% endblock %}