{% extends "core/base.jinja" %}
{% from "core/macros.jinja" import user_mini_profile, user_subscription %}

{% block title %}
  {{ counter }}
{% endblock %}

{% block additional_css %}
  <link rel="stylesheet" type="text/css" href="{{ static('counter/css/counter-click.scss') }}" defer></link>
  <link rel="stylesheet" type="text/css" href="{{ static('bundled/core/components/ajax-select-index.css') }}" defer></link>
  <link rel="stylesheet" type="text/css" href="{{ static('core/components/ajax-select.scss') }}" defer></link>
  <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
{% endblock %}

{% block additional_js %}
  <script type="module" src="{{ static('bundled/counter/counter-click-index.ts') }}"></script>
  <script type="module" src="{{ static('bundled/counter/components/counter-product-select-index.ts') }}"></script>
{% endblock %}

{% block info_boxes %}
{% endblock %}


{% block nav %}
{% endblock %}

{% block content %}
  <h4>{{ counter }}</h4>

  <div id="bar-ui" x-data="counter({
                           customerBalance: {{ customer.amount }},
                           products: products,
                           customerId: {{ customer.pk }},
                           formInitial: formInitial,
                           cancelUrl: '{{ cancel_url }}',
                           })">
    <noscript>
      <p class="important">Javascript is required for the counter UI.</p>
    </noscript>

    <div id="user_info">
      <h5>{% trans %}Customer{% endtrans %}</h5>
      {{ user_mini_profile(customer.user) }}
      {{ user_subscription(customer.user) }}
      <p>{% trans %}Amount: {% endtrans %}<span x-text="customerBalance"></span> €
        <span x-cloak x-show="getBasketSize() > 0">
          <i class="fa-solid fa-arrow-right"></i>
          <span x-text="(customerBalance - sumBasket()).toLocaleString(undefined, { minimumFractionDigits: 2 })"></span> €
        </span>
      </p>
    </div>

    <div id="click-form">
      <h5 id="selling-accordion">{% trans %}Selling{% endtrans %}</h5>
      <div>
        {% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}

        <form method="post" action=""
              class="code_form" @submit.prevent="handleCode">

          <counter-product-select name="code" x-ref="codeField" autofocus required placeholder="{% trans %}Select a product...{% endtrans %}">
            <option value=""></option>
            <optgroup label="{% trans %}Operations{% endtrans %}">
              <option value="FIN">{% trans %}Confirm (FIN){% endtrans %}</option>
              <option value="ANN">{% trans %}Cancel (ANN){% endtrans %}</option>
            </optgroup>
            {% for category in categories.keys() %}
              <optgroup label="{{ category }}">
                {% for product in categories[category] %}
                  <option value="{{ product.id }}">{{ product }}</option>
                {% endfor %}
              </optgroup>
            {% endfor %}
          </counter-product-select>

          <input type="submit" value="{% trans %}Go{% endtrans %}"/>
        </form>

        {% for error in form.non_form_errors() %}
          <div class="alert alert-red">
            {{ error }}
          </div>
        {% endfor %}
        <p>{% trans %}Basket: {% endtrans %}</p>

        <form x-cloak method="post" action="" x-ref="basketForm">

          <div class="basket-error-container">
            <div
              x-cloak
              class="alert alert-red basket-error"
              x-show="alertMessage.show"
              x-transition.duration.500ms
              x-text="alertMessage.content"
            ></div>
          </div>

          {% csrf_token %}
          <div x-ref="basketManagementForm">
            {{ form.management_form }}
          </div>
          <ul>
            <li x-show="getBasketSize() === 0">{% trans %}This basket is empty{% endtrans %}</li>
            <template x-for="(item, index) in Object.values(basket)">
              <li>
                <template x-for="error in item.errors">
                  <div class="alert alert-red" x-text="error">
                  </div>
                </template>

                <button @click.prevent="addToBasketWithMessage(item.product.id, -1)">-</button>
                <span class="quantity" x-text="item.quantity"></span>
                <button @click.prevent="addToBasketWithMessage(item.product.id, 1)">+</button>

                <span x-text="item.product.name"></span> :
                <span x-text="item.sum().toLocaleString(undefined, { minimumFractionDigits: 2 })">€</span>
                <span x-show="item.getBonusQuantity() > 0" x-text="`${item.getBonusQuantity()} x P`"></span>

                <button
                  class="remove-item"
                  @click.prevent="removeFromBasket(item.product.id)"
                ><i class="fa fa-trash-can delete-action"></i></button>

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

          <p class="margin-bottom">
            <strong>Total: </strong>
            <strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
            <strong> €</strong>
          </p>

          <div class="row">
            <input
              class="btn btn-blue"
              type="submit"
              @click.prevent="finish"
              :disabled="getBasketSize() === 0"
              value="{% trans %}Finish{% endtrans %}"
            />
            <input
              class="btn btn-grey"
              type="submit" @click.prevent="cancel"
              value="{% trans %}Cancel{% endtrans %}"
            />
          </div>
        </form>
      </div>
      {% if object.type == "BAR" %}
        <h5>{% trans %}Refilling{% endtrans %}</h5>
        {% if refilling_fragment %}
          <div
            @htmx:after-request="onRefillingSuccess"
          >
            {{ refilling_fragment }}
          </div>
        {% else %}
          <div>
            <p class="alert alert-yellow">
              {% trans trimmed %}
                As a barman, you are not able to refill any account on your own.
                An admin should be connected on this counter for that.
                The customer can refill by using the eboutic.
              {% endtrans %}
            </p>
          </div>
        {% endif %}
        {% if student_card_fragment %}
          <h5>{% trans %}Student card{% endtrans %}</h3>
          <div>
            {{ student_card_fragment }}
          </div>
        {% endif %}

      {% endif %}
    </div>

    <div id="products">
      {% if not products %}
        <div class="alert alert-red">
          {% trans %}No products available on this counter for this user{% endtrans %}
        </div>
      {% else %}
        <ul>
          {% for category in categories.keys() -%}
            <li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
          {%- endfor %}
        </ul>
        {% for category in categories.keys() -%}
          <div id="cat_{{ category|slugify }}">
            <h5 class="margin-bottom">{{ category }}</h5>
            <div class="row gap-2x">
              {% for product in categories[category] -%}
                <button class="card shadow" @click="addToBasketWithMessage('{{ product.id }}', 1)">
                  <img
                    class="card-image"
                    alt="image de {{ product.name }}"
                    {% if product.icon %}
                      src="{{ product.icon.url }}"
                    {% else %}
                      src="{{ static('core/img/na.gif') }}"
                    {% endif %}
                  />
                  <span class="card-content">
                    <strong class="card-title">{{ product.name }}</strong>
                    <p>{{ product.price }} €<br>{{ product.code }}</p>
                  </span>
                </button>
              {%- endfor %}
            </div>
          </div>
        {%- endfor %}
      {% endif %}
    </div>
  </div>
{% endblock content %}

{% block script %}
  {{ super() }}
  <script>
    const products = {
      {%- for product in products -%}
        {{ product.id }}: {
          id: "{{ product.id }}",
          name: "{{ product.name }}",
          price: {{ product.price }},
          hasTrayPrice: {{ product.tray | tojson }},
          quantityForTrayPrice: {{ product.QUANTITY_FOR_TRAY_PRICE }},
        },
      {%- endfor -%}
    };
    const formInitial = [
      {%- for f in form -%}
        {%- if f.cleaned_data -%}
          {
            {%- if f.cleaned_data["id"] -%}
              id: '{{ f.cleaned_data["id"] | tojson }}',
            {%- endif -%}
            {%- if f.cleaned_data["quantity"] -%}
              quantity: {{ f.cleaned_data["quantity"] | tojson }},
            {%- endif -%}
            errors: {{ form_errors[loop.index0] | tojson }},
          },
        {%- endif -%}
      {%- endfor -%}
    ];
  </script>
{% endblock script %}