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

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

{% block jquery_css %}
    {#  Remove jquery css  #}
{% 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>

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

  <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 %}
      <section>
        <div class="category-header">
          <h3 class="margin-bottom">{% trans %}Eurockéennes 2025 partnership{% endtrans %}</h3>
          {% if user.is_subscribed %}
            <div id="eurok-partner" style="
                                           min-height: 600px;
                                           background-color: lightgrey;
                                           display: flex;
                                           justify-content: center;
                                           align-items: center;
                                           flex-direction: column;
                                           gap: 10px;
                                          ">
              <p style="text-align: center;">
                {% trans trimmed %}
                  Our partner uses Weezevent to sell tickets.
                  Weezevent may collect user info according to
                  its own privacy policy.
                  By clicking the accept button you consent to
                  their terms of services.
                {% endtrans %}
              </p>

              <a href="https://weezevent.com/fr/politique-de-confidentialite/">{% trans %}Privacy policy{% endtrans %}</a>

              <button
                hx-get="{{ url("eboutic:eurok") }}"
                hx-target="#eurok-partner"
                hx-swap="outerHTML"
                hx-trigger="click, load[document.cookie.includes('weezevent_accept=true')]"
                @htmx:after-request="document.cookie = 'weezevent_accept=true'"
              >{% trans %}Accept{% endtrans %}
              </button>
            </div>
          {% else %}
            <p>
              {%- trans trimmed %}
                You must be subscribed to benefit from the partnership with the Eurockéennes.
              {% endtrans -%}
            </p>
            <p>
              {%- trans trimmed %}
                This partnership offers a discount of up to 33%
                on tickets for Friday, Saturday and Sunday,
                as well as the 3-day package from Friday to Sunday.
              {% endtrans -%}
            </p>
          {% endif %}
        </div>
      </section>
      {% 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 %}