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

{% block title %}
  {% trans %}Basket state{% endtrans %}
{% endblock %}

{% block jquery_css %}
    {#  Remove jquery css  #}
{% endblock %}

{% block additional_js %}
  <script src="{{ static('eboutic/js/makecommand.js') }}" defer></script>
{% endblock %}

{% block content %}
  <h3>{% trans %}Eboutic{% endtrans %}</h3>

  <div>
    <p>{% trans %}Basket: {% endtrans %}</p>
    <table>
      <thead>
        <tr>
          <td>Article</td>
          <td>Quantity</td>
          <td>Unit price</td>
        </tr>
      </thead>
      <tbody>
        {% for item in basket.items.all() %}
          <tr>
            <td>{{ item.product_name }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.product_unit_price }} €</td>
          </tr>
        {% endfor %}
        <tbody>
        </table>

        <p>
          <strong>{% trans %}Basket amount: {% endtrans %}{{ "%0.2f"|format(basket.total) }} €</strong>

          {% if customer_amount != None %}
            <br>
            {% trans %}Current account amount: {% endtrans %}
            <strong>{{ "%0.2f"|format(customer_amount) }} €</strong>

            {% if not basket.contains_refilling_item %}
              <br>
              {% trans %}Remaining account amount: {% endtrans %}
              <strong>{{ "%0.2f"|format(customer_amount|float - basket.total) }} €</strong>
            {% endif %}
          {% endif %}
        </p>
        <br>
        {% if settings.SITH_EBOUTIC_CB_ENABLED %}
          <div
            class="collapse"
            :class="{'shadow': collapsed}"
            x-data="{collapsed: !billingInfoExist}"
            x-cloak
          >
            <div class="collapse-header clickable" @click="collapsed = !collapsed">
              <span class="collapse-header-text">
                {% trans %}Billing information{% endtrans %}
              </span>
              <span class="collapse-header-icon" :class="{'reverse': collapsed}">
                <i class="fa fa-caret-down"></i>
              </span>
            </div>
            <form
              class="collapse-body"
              id="billing_info_form"
              x-data="billing_infos"
              x-show="collapsed"
              x-transition.scale.origin.top
              @submit.prevent="await sendForm()"
            >
              {% csrf_token %}
              {{ billing_form }}
              <br>
              <br>
              <div
                x-show="[BillingInfoReqState.SUCCESS, BillingInfoReqState.FAILURE].includes(reqState)"
                class="alert"
                :class="'alert-' + getAlertColor()"
                x-transition
              >
                <div class="alert-main" x-text="getAlertMessage()"></div>
                <div class="clickable" @click="reqState = null">
                  <i class="fa fa-close"></i>
                </div>
              </div>
              <input
                type="submit" class="btn btn-blue clickable"
                value="{% trans %}Validate{% endtrans %}"
                :disabled="reqState === BillingInfoReqState.SENDING"
              >
            </form>
          </div>
          <br>
          {% if billing_infos_state == BillingInfoState.EMPTY %}
            <div class="alert alert-yellow">
              {% trans %}You must fill your billing infos if you want to pay with your credit
                card{% endtrans %}
            </div>
          {% elif billing_infos_state == BillingInfoState.MISSING_PHONE_NUMBER %}
            <div class="alert alert-yellow">
              {% trans %}
                The Crédit Agricole changed its policy related to the billing
                information that must be provided in order to pay with a credit card.
                If you want to pay with your credit card, you must add a phone number
                to the data you already provided.
              {% endtrans %}
            </div>
          {% endif %}
          <form method="post" action="{{ settings.SITH_EBOUTIC_ET_URL }}" name="bank-pay-form">
            <template x-data x-for="[key, value] in Object.entries($store.billing_inputs.data)">
              <input type="hidden" :name="key" :value="value">
            </template>
            <input
              type="submit"
              id="bank-submit-button"
              {% if billing_infos_state != BillingInfoState.VALID %}disabled="disabled"{% endif %}
              value="{% trans %}Pay with credit card{% endtrans %}"
            />
          </form>
        {% endif %}
        {% if basket.contains_refilling_item %}
          <p>{% trans %}AE account payment disabled because your basket contains refilling items.{% endtrans %}</p>
        {% elif basket.total > user.account_balance %}
          <p>{% trans %}AE account payment disabled because you do not have enough money remaining.{% endtrans %}</p>
        {% else %}
          <form method="post" action="{{ url('eboutic:pay_with_sith') }}" name="sith-pay-form">
            {% csrf_token %}
            <input type="hidden" name="action" value="pay_with_sith_account">
            <input type="submit" value="{% trans %}Pay with Sith account{% endtrans %}"/>
          </form>
        {% endif %}
      </div>
{% endblock %}

{% block script %}
  <script>
    const billingInfoUrl = '{{ url("api:put_billing_info", user_id=request.user.id) }}';
    const etDataUrl = '{{ url("api:etransaction_data") }}';
    const billingInfoExist = {{ "true" if billing_infos else "false" }};
    const billingInfoSuccessMessage = "{% trans %}Billing info registration success{% endtrans %}";
    const billingInfoFailureMessage = "{% trans %}Billing info registration failure{% endtrans %}";

    {% if billing_infos %}
      const etData = {{ billing_infos|safe }}
    {% else %}
      const etData = {}
    {% endif %}
  </script>
  {{ super() }}
{% endblock %}